gridOverlay.min.js

!function(t,i,n){var e=function(t){t=t||{},this.width=t.width||960,this.columns=t.columns||12,this.gutter=t.gutter||1,this.columnColor=t.columnColor||"#ff0000",this.background=t.background||"#000000",this.opacity=t.opacity||"0.2",this.gridSwitch=t.gridSwitch||!1,this.constructCanvas(),this.constructSwitch()};e.prototype.constructCanvas=function(){this.canvas=i.createElement("canvas"),this.context=this.canvas.getContext("2d");var n=t.innerWidth||i.documentElement.clientWidth,e=n/2-this.width/2;this.canvas.width=this.width,this.canvas.height=t.innerHeight||i.documentElement.clientHeight,s(this.canvas,{position:"absolute",background:this.background,top:0,left:e+"px",opacity:this.opacity,"z-index":-1}),i.body.appendChild(this.canvas),this.render(this.context)},e.prototype.constructSwitch=function(){this.gridSwitch&&(this.gridSwitch=i.createElement("div"),this.gridSwitch.textContent="On",this.gridSwitch.innerText="On",this.gridSwitch.className="grid-on",s(this.gridSwitch,{position:"absolute",right:"25px",bottom:"25px",padding:"12px",cursor:"pointer",background:"#333332",color:"#ffffff"}),i.body.appendChild(this.gridSwitch),this.menu())},e.prototype.render=function(i){for(var n=0,e=this.width/this.columns,s=0,o=this.columns;o>s;s+=1){var c=n+this.gutter/2,a=e-this.gutter;i.beginPath(),i.rect(c,0,a,t.innerHeight),i.fillStyle=this.columnColor,i.fill(),i.closePath(),n+=e}},e.prototype.menu=function(){var t=this;localStorage.getItem("grid-state")&&this.setCanvasMode(localStorage.getItem("grid-state")),this.gridSwitch.addEventListener("click",function(i){"grid-on"==this.className?t.setCanvasMode("off"):t.setCanvasMode("on")})},e.prototype.setCanvasMode=function(t){switch(t){case"off":s(this.canvas,{opacity:0}),this.gridSwitch.className="grid-off",this.gridSwitch.textContent="Off",this.gridSwitch.innerText="Off",localStorage.setItem("grid-state","off");break;case"on":s(this.canvas,{opacity:this.opacity}),this.gridSwitch.className="grid-on",this.gridSwitch.textContent="On",this.gridSwitch.innerText="On",localStorage.setItem("grid-state","on")}};var s=function(t,i){for(var n in i)t.style[o(n)]=i[n]},o=function(t){return t.replace(/-([a-z])/gi,function(t,i){return i.toUpperCase()})};t.GridOverlay=e}(window,document);