odi.hexmap.min.js

/**
	ODI Leeds hex map in SVG
	Version 0.5.5
 */
!function(t){var e=t.ODI||{};e.ready||(e.ready=function(t){"loading"!=document.readyState?t():document.addEventListener("DOMContentLoaded",t)}),e.ajax||(e.ajax=function(t,e){e||(e={});var i=new XMLHttpRequest;return"responseType"in i&&e.dataType&&(i.responseType=e.dataType),i.open(e.method||"GET",t+(e.cache?"?"+Math.random():""),!0),i.onload=function(i){if(this.status>=200&&this.status<400){var s=this.response;"function"==typeof e.success&&e.success.call(e.this||this,s,{url:t,data:e,originalEvent:i})}else"function"==typeof e.error&&e.error.call(e.this||this,i,{url:t,data:e})},"function"==typeof e.error&&(i.onerror=function(i){e.error.call(e.this||this,i,{url:t,data:e})}),i.send(),this}),e.hexmap=function(t,h){if(this.version="0.5.5",h||(h={}),this._attr=h,this.title="ODI HexMap",this.logging=location.search.indexOf("debug=true")>=0,this.log=function(){if(this.logging||"ERROR"==arguments[0]||"WARNING"==arguments[0]){var t=Array.prototype.slice.call(arguments,0),e=["%c"+this.title+"%c: "+t[1],"font-weight:bold;",""];t.length>2&&(e=e.concat(t.splice(2))),console&&"function"==typeof console.log&&("ERROR"==arguments[0]?console.error.apply(null,e):"WARNING"==arguments[0]?console.warn.apply(null,e):"INFO"==arguments[0]?console.info.apply(null,e):console.log.apply(null,e))}return this},!t)return this.log("ERROR","Unable to find the element to draw into",t),this;h.label||(h.label={}),h.grid||(h.grid={}),"boolean"!=typeof h.label.show&&(h.label.show=!1),"boolean"!=typeof h.label.clip&&(h.label.clip=!1),"boolean"!=typeof h.grid.show&&(h.grid.show=!1);var n,l=h.width||t.offsetWidth||300,p=h.height||t.offsetHeight||150,c=l,d=p,f=l/p,u=!1,y={},m=parseFloat(getComputedStyle(t)["font-size"])||16;for(var x in this.areas={},this.properties={size:h.size},this.callback={},this.mapping={},t.querySelector(".hexmap-inner")||(this.el=document.createElement("div"),this.el.classList.add("hexmap-inner"),t.appendChild(this.el)),this.options={clip:h.label.clip,showgrid:h.grid.show,showlabel:h.label.show,formatLabel:"function"==typeof h.label.format?h.label.format:function(t,e){return t.substr(0,3)},minFontSize:"number"==typeof h.minFontSize?h.minFontSize:4},this.style={default:{fill:"#cccccc","fill-opacity":1,"font-size":m,"stroke-width":1.5,"stroke-opacity":1,stroke:"#ffffff"},highlight:{fill:"#1DD3A7"},grid:{fill:"#aaa","fill-opacity":.1}},h.style)h.style[x]&&(this.style[x]||(this.style[x]={}),h.style[x].fill&&(this.style[x].fill=h.style[x].fill),h.style[x]["fill-opacity"]&&(this.style[x]["fill-opacity"]=h.style[x]["fill-opacity"]),h.style[x]["font-size"]&&(this.style[x]["font-size"]=h.style[x]["font-size"]),h.style[x].stroke&&(this.style[x].stroke=h.style[x].stroke),h.style[x]["stroke-width"]&&(this.style[x]["stroke-width"]=h.style[x]["stroke-width"]),h.style[x]["stroke-opacity"]&&(this.style[x]["stroke-opacity"]=h.style[x]["stroke-opacity"]));this.setHexSize=function(t){return"number"!=typeof t&&(t=10),t=Math.round(100*t)/100,h.size=t,this.properties.size=t,this},this.load=function(t,i,s){function a(t,e){v.log("INFO","HexJSON",t),v.setMapping(t),e&&v.updateColours(),"function"==typeof s&&s.call(v,{data:i})}return"function"!=typeof i||s||(s=i,i=""),"string"==typeof t?(this.log("INFO","Loading "+t,i,s),e.ajax(t,{this:this,dataType:"json",success:function(t){a(t)},error:function(e,i){this.log("ERROR","Unable to load "+t,i)}})):"object"==typeof t&&a(t,!0),this};var v=this;function b(t,e,i){return"odd-r"==i&&e%2!=0&&(t+=.5),"even-r"==i&&e%2==0&&(t+=.5),"odd-q"==i&&t%2!=0&&(e+=.5),"even-q"==i&&t%2==0&&(e+=.5),{q:t,r:e}}return window.addEventListener("resize",function(t){v.size()}),this.setHexStyle=function(t){var e,i,s,r,o;if(e=this.areas[t],o=this.style.default,i=JSON.parse(JSON.stringify(o)),s="",e.active&&(i.fill=e.fillcolour),e.hover&&(s+=" hover"),e.selected){for(r in this.style.selected)this.style.selected[r]&&(i[r]=this.style.selected[r]);s+=" selected"}return this.mapping.hexes[t].class&&(s+=" "+this.mapping.hexes[t].class),i.class="hex-cell"+s,a(e.hex,i),e.label&&a(e.label,{class:"hex-label"+s}),e},this.toFront=function(t){if(this.areas[t]){for(var e in this.areas)this.areas[e]&&(this.areas[e].selected&&s(this.areas[e].g,n),this.options.clip&&(i=this.areas[e],o=void 0,r=getComputedStyle(i.hex),o={},r.transform&&(o.transform=r.transform),"none"==o.transform&&(o.transform=""),r["transform-origin"]&&(o["transform-origin"]=r["transform-origin"]),a(i.clip,o)));s(this.areas[t].g,n)}var i,r,o;return this},this.regionToggleSelected=function(t,e){var i,s;if(this.selected=this.selected==t?"":t,(s=this.areas[t]).selected=!s.selected,this.setHexStyle(t),!s.selected&&e)for(i in this.areas)this.areas[i].selected&&(this.areas[i].selected=!1,this.setHexStyle(i));return this},this.regionFocus=function(t){return this.areas[t].hover=!0,this.el.querySelectorAll(".hover").forEach(function(t){t.classList.remove("hover")}),this.setHexStyle(t),this.toFront(t),this},this.regionBlur=function(t){return this.areas[t].hover=!1,this.setHexStyle(t),this},this.regionActivate=function(t){this.areas[t].active=!0,this.setHexStyle(t)},this.regionDeactivate=function(t){this.areas[t].active=!1,this.setHexStyle(t)},this.regionToggleActive=function(t){this.areas[t].active=!this.areas[t].active,this.setHexStyle(t)},this.selectRegion=function(t){for(var e in this.selected=t,this.areas)this.areas[e]&&(t.length>0&&0==e.indexOf(t)?(this.areas[e].selected=!0,this.setHexStyle(e)):(this.areas[e].selected=!1,this.setHexStyle(e)));return this},this.on=function(t,e,i){return"function"!=typeof e||i||(i=e,e=""),"function"!=typeof i?this:(this.callback||(this.callback={}),this.callback[t]={fn:i,attr:e},this)},this.size=function(e,o){this.el.style.height="",this.el.style.width="",a(t,{style:""}),n&&a(n,{width:0,height:0}),e=Math.min(c,t.offsetWidth),this.el.style.height=e/f+"px",this.el.style.width=e+"px",o=Math.min(d,this.el.offsetHeight),n||(a(n=r("svg"),{xmlns:i,version:"1.1",overflow:"visible",viewBox:h.viewBox||"0 0 "+e+" "+o,style:"max-width:100%;",preserveAspectRatio:"xMinYMin meet","vector-effect":"non-scaling-stroke"}),s(n,this.el)),a(n,{width:e,height:o});var u=e/l;return this.properties.size=h.size*u,l=e,p=o,this.el.style.height="",this.el.style.width="",this},this.initialized=function(){this.create().draw();var e=t.querySelector(".spinner");return e&&e.parentNode.removeChild(e),this},this.create=function(){return n.innerHTML="",this.areas={},u=!1,this},this.setMapping=function(t){var e,i,s;for(e in this.mapping=t,this.properties||(this.properties={x:100,y:100}),i=t.layout.split("-"),this.properties.shift=i[0],this.properties.orientation=i[1],y={r:{min:1e100,max:-1e100},q:{min:1e100,max:-1e100}},this.mapping.hexes)this.mapping.hexes[e]&&((i=b(this.mapping.hexes[e].q,this.mapping.hexes[e].r,this.mapping.layout)).q>y.q.max&&(y.q.max=i.q),i.q<y.q.min&&(y.q.min=i.q),i.r>y.r.max&&(y.r.max=i.r),i.r<y.r.min&&(y.r.min=i.r));return y.q.d=y.q.max-y.q.min,y.r.d=y.r.max-y.r.min,y.q.mid=y.q.min+y.q.d/2,y.r.mid=y.r.min+y.r.d/2,this.range=y,s="r"==this.properties.orientation?Math.min(.5*p/(.75*y.r.d+1),1/Math.sqrt(3)*l/(y.q.d+1)):Math.min(1/Math.sqrt(3)*p/(y.r.d+1),.5*l/(.75*y.q.d+1)),"number"!=typeof h.size&&this.setHexSize(s),this.setSize(),this.initialized()},this.setSize=function(t){return t&&(this.properties.size=t),this.properties.s={cos:Math.round(10*this.properties.size*Math.sqrt(3)/2)/10,sin:.5*this.properties.size},this.properties.s.c=this.properties.s.cos.toFixed(2),this.properties.s.s=this.properties.s.sin.toFixed(2),this},this.drawHex=function(t,e){var i,s,a,r,o,h;return this.properties?(a=this.properties.s.cos,r=this.properties.s.sin,h=b(t,e,this.mapping.layout),"r"==this.properties.orientation?(i=l/2+(h.q-this.range.q.mid)*a*2,s=p/2-(h.r-this.range.r.mid)*r*3):(i=l/2+(h.q-this.range.q.mid)*r*3,s=p/2-(h.r-this.range.r.mid)*a*2),o=[["M",[i=parseFloat(i.toFixed(1)),s]]],"r"==this.properties.orientation?(o.push(["m",[a,-r]]),o.push(["l",[0,2*r,-a,r,-a,-r,0,-2*r,a,-r,a,r]]),o.push(["z",[]])):(o.push(["m",[-r,a]]),o.push(["l",[2*r,0,r,-a,-r,-a,-2*r,0,-r,a]]),o.push(["z",[]])),{array:o,path:function(t){for(var e="",i=0;i<t.length;i++)e+=(t[i][0]?t[i][0]:" ")+(t[i][1].length>0?t[i][1].join(","):" ");return e}(o),x:i,y:s}):this},this.updateColours=function(t){var e,i;for(e in this.mapping.hexes)this.mapping.hexes[e]&&(i=this.style.default.fill,this.mapping.hexes[e].colour&&(i=this.mapping.hexes[e].colour),"string"==typeof h.colours&&(i=h.colours),"function"==typeof t&&(i=t.call(this,e)),this.areas[e].fillcolour=i,this.setHexStyle(e));return this},this.draw=function(){var e,i,h,l;function p(t,e){if(t.data.hexmap.callback[e]){for(var i in t.data.hexmap.callback[e].attr)t.data.hexmap.callback[e].attr[i]&&(t.data[i]=t.data.hexmap.callback[e].attr[i]);if("function"==typeof t.data.hexmap.callback[e].fn)return t.data.hexmap.callback[e].fn.call(t.data.this||this,t)}}this.range=y;var c,d,f,m,x,v=function(t){t.data.hexmap.regionFocus(t.data.region),p(t,"mouseover")},b=function(t){p(t,"mouseout")},w=function(t){t.data.hexmap.regionFocus(t.data.region),p(t,"click")};if((this.options.showgrid||this.options.clip)&&!this.grid){for(this.grid=r("g"),i=y.q.min-1;i<=y.q.max+1;i++)for(e=y.r.min-1;e<=y.r.max+1;e++)h=this.drawHex(i,e),this.options.showgrid&&(a(l=r("path"),{d:h.path,class:"hex-grid","data-q":i,"data-r":e,fill:this.style.grid.fill||"","fill-opacity":this.style.grid["fill-opacity"]||.1,stroke:this.style.grid.stroke||"#aaa","stroke-opacity":this.style.grid["stroke-opacity"]||.2}),o("mouseover",{type:"grid",hexmap:this,data:{r:e,q:i}},v),o("mouseout",{type:"grid",hexmap:this,me:c,data:{r:e,q:i}},b),o("click",{type:"grid",hexmap:this,me:c,data:{r:e,q:i}},w),s(l,this.grid));s(this.grid,n)}for(e in c=this,s(d=r("defs"),n),t.getAttribute("id"),this.mapping.hexes)this.mapping.hexes[e]&&(h=this.drawHex(this.mapping.hexes[e].q,this.mapping.hexes[e].r),u||(g=r("g"),a(g,{data:e}),n.appendChild(g),(f=r("path")).innerHTML="<title>"+(this.mapping.hexes[e].n||e)+"</title>",a(f,{d:h.path,class:"hex-cell","transform-origin":h.x+"px "+h.y+"px","data-q":this.mapping.hexes[e].q,"data-r":this.mapping.hexes[e].r}),g.appendChild(f),this.areas[e]={g:g,hex:f,selected:!1,active:!0,data:this.mapping.hexes[e]},o("mouseover",g,{type:"hex",hexmap:this,region:e,data:this.mapping.hexes[e],pop:this.mapping.hexes[e].p},v),o("mouseout",g,{type:"hex",hexmap:this,region:e,me:this.areas[e]},b),o("click",g,{type:"hex",hexmap:this,region:e,me:this.areas[e],data:this.mapping.hexes[e]},w),this.options.showlabel&&this.style.default["font-size"]>=this.options.minFontSize&&(this.options.clip&&(this.areas[e].clipid=(t.getAttribute("id")||"hex")+"-clip-"+e,this.areas[e].clip=r("clipPath"),this.areas[e].clip.setAttribute("id",this.areas[e].clipid),a(x=r("path"),{d:h.path,"transform-origin":h.x+"px "+h.y+"px"}),s(x,this.areas[e].clip),s(this.areas[e].clip,d)),m=r("text"),g.appendChild(m),m.innerHTML=this.options.formatLabel(this.mapping.hexes[e].n,{x:h.x,y:h.y,hex:this.mapping.hexes[e],size:this.properties.size,"font-size":parseFloat(getComputedStyle(m)["font-size"])}),a(m,{x:h.x,y:h.y,"transform-origin":h.x+"px "+h.y+"px","dominant-baseline":"central","clip-path":"url(#"+this.areas[e].clipid+")","data-q":this.mapping.hexes[e].q,"data-r":this.mapping.hexes[e].r,class:"hex-label","text-anchor":"middle",title:this.mapping.hexes[e].n||e,_region:e}),this.areas[e].label=m,this.areas[e].labelprops={x:h.x,y:h.y})),this.setHexStyle(e),a(this.areas[e].hex,{stroke:this.style.default.stroke,"stroke-opacity":this.style.default["stroke-opacity"],"stroke-width":this.style.default["stroke-width"],title:this.mapping.hexes[e].n,"data-regions":e,style:"cursor: pointer;"}));return u=!0,this},this.size(),h.hexjson&&this.load(h.hexjson,h.ready),this};var i="http://www.w3.org/2000/svg";function s(t,e){return e.appendChild(t)}function a(t,e){for(var i in e)e[i]&&t.setAttribute(i,e[i]);return t}function r(t){return document.createElementNS(i,t)}function o(t,e,i,s){e&&(e.length||(e=[e]),"function"==typeof s&&e.forEach(function(e){e.addEventListener(t,function(t){t.data=i,s.call(i.this||this,t)})}))}t.ODI=e}(window||this);