isg.min.js

class ImageShadowGenerator { _getPixelsColor(a) { a.crossOrigin = "Anonymous"; const t = document.createElement("canvas"), s = a.clientWidth, e = a.clientHeight; t.width = s, t.height = e; const i = t.getContext("2d"); i.drawImage(a, 0, 0, a.clientWidth, e); let o = 95 * s / 100, h = 95 * e / 100, n = 5 * s / 100, g = 5 * s / 100; return [[...i.getImageData(n, g, 1, 1).data], [...i.getImageData(o / 2, g, 1, 1).data], [...i.getImageData(o, g, 1, 1).data], [...i.getImageData(o, h / 2, 1, 1).data], [...i.getImageData(o, h, 1, 1).data], [...i.getImageData(o / 2, h, 1, 1).data], [...i.getImageData(n, h, 1, 1).data], [...i.getImageData(n, h / 2, 1, 1).data]] } _drawShadow(a, t) { const s = this.config.debug; let e = this.config.offsetX, i = this.config.offsetY, o = this._getPixelsColor(a).map(a => (a[3] = 0 == a[3] ? 0 : .5, a.slice(0, 4))), h = a.clientWidth / 10, n = s ? 0 : this.config.shadowBlur * a.clientWidth / 100; t && (n = s ? 0 : this.config.hoverBlurSize * a.clientWidth / 100); let g = s ? 0 : a.clientWidth / 10; s && t && (e = 0, i = 0); const b = [h - e, 0 + e, h + e, h + e, h + e, 0 + e, h - e, h - e], c = [h - i, h - i, h - i, 0 + i, h + i, h + i, h + i, 0 + i]; return [`-${Math.abs(b[0])}px -${Math.abs(c[0])}px ${Math.abs(n)}px -${Math.abs(g)}px rgba(${o[0]})`, `${Math.abs(b[1])}px -${Math.abs(c[1])}px ${Math.abs(n)}px -${Math.abs(g)}px rgba(${o[1]})`, `${Math.abs(b[2])}px -${Math.abs(c[2])}px ${Math.abs(n)}px -${Math.abs(g)}px rgba(${o[2]})`, `${Math.abs(b[3])}px ${Math.abs(c[3])}px ${Math.abs(n)}px -${Math.abs(g)}px rgba(${o[3]})`, `${Math.abs(b[4])}px ${Math.abs(c[4])}px ${Math.abs(n)}px -${Math.abs(g)}px rgba(${o[4]})`, `${Math.abs(b[5])}px ${Math.abs(c[5])}px ${Math.abs(n)}px -${Math.abs(g)}px rgba(${o[5]})`, `-${Math.abs(b[6])}px ${Math.abs(c[6])}px ${Math.abs(n)}px -${Math.abs(g)}px rgba(${o[6]})`, `-${Math.abs(b[7])}px ${Math.abs(c[7])}px ${Math.abs(n)}px -${Math.abs(g)}px rgba(${o[7]})`] } _applyStyles(a, t) { const s = this._drawShadow(a, !1); let e = document.getElementById("_isg-style"), i = ""; if (!0 === this.config.hover) { const s = this._drawShadow(a, !0); i = `\n        .${this.config.imgClass}._isg-${t}:hover {\n          box-shadow: ${s.join(",")};\n          -webkit-box-shadow: ${s.join(",")};\n          -moz--box-shadow: ${s.join(",")};\n        }\n      ` } e || ((e = document.createElement("style")).setAttribute("id", "_isg-style"), document.head.appendChild(e)), e.innerHTML = `${e.innerHTML}\n      .${this.config.imgClass}._isg-${t} {\n        box-shadow: ${s.join(",")};\n        -webkit-box-shadow: ${s.join(",")};\n        -moz--box-shadow: ${s.join(",")};\n        transition: .3s;\n      }\n      ${i}\n    `, e.innerHTML = e.innerHTML.replace(/\n/g, "") } _processConfigs(a) { this.config = { offsetX: 0, offsetY: 50, imgClass: "_isg", shadowBlur: 40, hoverBlurSize: 90, hover: !1, debug: !1 }, a && Object.keys(a).forEach(t => { this.config[t] = a[t] }), 1 == this.config.debug && (this.config.hover = !0), this.config.offsetX = 30 * this.config.offsetX / 100, this.config.offsetY = 30 * this.config.offsetY / 100 } constructor(a) { this._processConfigs(a); let t = document.getElementsByClassName(this.config.imgClass); Object.keys(t).forEach(a => { let s = t[a]; s.className = s.className + " _isg-" + a, "IMG" == s.tagName ? s.addEventListener("load", () => { this._applyStyles(s, a) }, !1) : "VIDEO" == s.tagName && (s.ontimeupdate = (() => { this._applyStyles(s, a) })) }) } }