contrast.min.js

// Developed by @devmishka at FictionTribe
class Contrast{constructor(t){t=t||{},this.isCustomColors=void 0!==t.isCustomColors&&t.isCustomColors,this.customLight=void 0!==t.customLight?t.customLight:"#FFFFFF",this.customDark=void 0!==t.customDark?t.customDark:"#000000",this.isDiv=void 0!==t.isDiv&&t.isDiv,this.isResponsive=void 0===t.isResponsive||t.isResponsive,this.bgClass=void 0!==t.bgClass?t.bgClass:"contrast-bg",this.elementClass=void 0!==t.elementClass?t.elementClass:"contrast-el",this.backgroundSize=void 0!==t.backgroundSize?t.backgroundSize:"cover",this.rgb={r:0,g:0,b:0},this.blockSize=5,this.defaultRGB={r:0,g:0,b:0},this.hex,this.invertedHex,this.canvas,this.context,this.width,this.height,this.length,this.imgEl,this.imgSrc,this.contentEl,this.contentElBox}prepare(){return this.contentEl=document.getElementsByClassName(this.elementClass)[0],this.contentElBox=document.getElementsByClassName(this.elementClass)[0].getBoundingClientRect(),this.bgBlock=document.getElementsByClassName(this.bgClass)[0],this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext&&this.canvas.getContext("2d"),this}loadImage(){let t=getComputedStyle(this.bgBlock);if(-1!=t.backgroundImage.indexOf("url")){let e,i;t.backgroundImage.indexOf("'")>-1||t.backgroundImage.indexOf('"')>-1?(e=5,i=t.backgroundImage.indexOf(")")-1):(e=4,i=t.backgroundImage.indexOf(")")),this.imgSrc=t.backgroundImage.slice(e,i)}else console.log("Check your element styles. Looks like you haven't set the background-image property correctly.");return new Promise((t,e)=>{this.imgEl=new Image,this.imgEl.crossOrigin="anonymous",this.imgEl.onload=(()=>t(this.imgEl)),this.imgEl.onerror=e,this.imgEl.src=this.imgSrc})}getCoverScaleFactor(){let t,e,i;return this.imgEl.width/this.imgEl.height>=this.bgBlock.offsetWidth/this.bgBlock.offsetHeight?(i=(t=this.bgBlock.offsetHeight)/this.imgEl.height,e=this.imgEl.width*i):(i=(e=this.bgBlock.offsetWidth)/this.imgEl.width,t=this.imgEl.height*i),i}getAverageHEX(){if(!this.context)return defaultRGB;let t;"cover"==this.backgroundSize?(t=this.getCoverScaleFactor(),this.context.drawImage(this.imgEl,this.contentElBox.left/t,this.contentElBox.top/t,this.contentElBox.width/t,this.contentElBox.height/t,0,0,this.contentElBox.width,this.contentElBox.height)):(t=this.imgEl.naturalWidth/this.bgBlock.clientWidth,this.context.drawImage(this.imgEl,this.contentElBox.left*t,this.contentElBox.top*t,this.contentElBox.width*t,this.contentElBox.height*t,0,0,this.contentElBox.width,this.contentElBox.height));try{this.data=this.context.getImageData(0,0,this.contentElBox.width,this.contentElBox.height)}catch(t){return console.log("Make sure the image is hosted on the same domain"),this}this.length=this.data.data.length;let e=-4,i=0;for(;(e+=4*this.blockSize)<this.length;)++i,this.rgb.r+=this.data.data[e],this.rgb.g+=this.data.data[e+1],this.rgb.b+=this.data.data[e+2];return this.rgb.r=~~(this.rgb.r/i),this.rgb.g=~~(this.rgb.g/i),this.rgb.b=~~(this.rgb.b/i),this}invertColor(){if(0===this.hex.indexOf("#")&&(this.hex=this.hex.slice(1)),3===this.hex.length&&(this.hex=this.hex[0]+this.hex[0]+this.hex[1]+this.hex[1]+this.hex[2]+this.hex[2]),6!==this.hex.length)throw new Error("Invalid HEX color.");let t=parseInt(this.hex.slice(0,2),16),e=parseInt(this.hex.slice(2,4),16),i=parseInt(this.hex.slice(4,6),16);return 1==this.isCustomColors?(this.invertedHex=.299*t+.587*e+.114*i>186?this.customDark:this.customLight,this):(t=(255-t).toString(16),e=(255-e).toString(16),i=(255-i).toString(16),this.invertedHex="#"+this.padZero(t)+this.padZero(e)+this.padZero(i),this)}padZero(t,e){return e=e||2,(new Array(e).join("0")+t).slice(-e)}rgbToHex(){return this.hex="#"+((1<<24)+(this.rgb.r<<16)+(this.rgb.g<<8)+this.rgb.b).toString(16).slice(1),this}setElementColor(){this.isDiv?this.contentEl.style.background=this.invertedHex:this.contentEl.style.color=this.invertedHex}resize(){let t=this;window.addEventListener("resize",function(){t.prepare().loadImage().then(e=>{t.getAverageHEX().rgbToHex().invertColor().setElementColor()})})}launch(){let t=this;this.prepare().loadImage().then(e=>{t.getAverageHEX().rgbToHex().invertColor().setElementColor()}),this.isResponsive&&this.resize()}}