Merge branch 'development'

DSlike · Feb 24, 2020 · a2e2d73 · a2e2d73
2 parents 1b85c0d + 2277826
commit a2e2d73
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 66 deletions.
diff --git a/index.html b/index.html
@@ -9,7 +9,7 @@
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
-  <img src="sample1.jpg" class="_isg" />
+  <img src="abstraktsiia-vektor-geometriia.jpg" class="_isg" />
   <script src="isg.js"></script>
   <script>
     let isg = new ImageShadowGenerator({

diff --git a/isg.js b/isg.js
@@ -1,4 +1,4 @@
-class ImageShadowGenerator{
+class ImageShadowGenerator {
   _getPixelsColor(img) {
     img.crossOrigin = "Anonymous";
     const canvas = document.createElement('canvas');
@@ -10,20 +10,20 @@ class ImageShadowGenerator{
     const ctx = canvas.getContext('2d');
     ctx.drawImage(img, 0, 0, img.clientWidth, imgH);
 
-    let ew = imgW*95/100;
-    let eh = imgH*95/100;
-    let sw = imgW*5/100;
-    let sh = imgW*5/100;
+    let ew = imgW * 95 / 100;
+    let eh = imgH * 95 / 100;
+    let sw = imgW * 5 / 100;
+    let sh = imgW * 5 / 100;
 
     let colors = [
-      [...ctx.getImageData(sw,sh,1,1).data],
-      [...ctx.getImageData(ew/2,sh,1,1).data],
-      [...ctx.getImageData(ew,sh,1,1).data],
-      [...ctx.getImageData(ew,eh/2,1,1).data],
-      [...ctx.getImageData(ew,eh,1,1).data],
-      [...ctx.getImageData(ew/2,eh,1,1).data],
-      [...ctx.getImageData(sw,eh,1,1).data],
-      [...ctx.getImageData(sw,eh/2,1,1).data]
+      [...ctx.getImageData(sw, sh, 1, 1).data],
+      [...ctx.getImageData(ew / 2, sh, 1, 1).data],
+      [...ctx.getImageData(ew, sh, 1, 1).data],
+      [...ctx.getImageData(ew, eh / 2, 1, 1).data],
+      [...ctx.getImageData(ew, eh, 1, 1).data],
+      [...ctx.getImageData(ew / 2, eh, 1, 1).data],
+      [...ctx.getImageData(sw, eh, 1, 1).data],
+      [...ctx.getImageData(sw, eh / 2, 1, 1).data]
     ];
     return colors;
   }
@@ -33,56 +33,56 @@ class ImageShadowGenerator{
     let offY = this.config.offsetY;
 
     let colors = this._getPixelsColor(img);
-    let cl = colors.map((c)=>{
-      c[3]= c[3]==0 ? 0 : .5;
-      return c.slice(0,4);
+    let cl = colors.map((c) => {
+      c[3] = c[3] == 0 ? 0 : .5;
+      return c.slice(0, 4);
     })
 
-    let shadowPos = img.clientWidth/10;
-    let shadowBlur = debug ? 0 : this.config.shadowBlur*img.clientWidth/100;
+    let shadowPos = img.clientWidth / 10;
+    let shadowBlur = debug ? 0 : this.config.shadowBlur * img.clientWidth / 100;
 
-    if(hover) {
-      shadowBlur = debug ? 0 : this.config.hoverBlurSize*img.clientWidth/100;
+    if (hover) {
+      shadowBlur = debug ? 0 : this.config.hoverBlurSize * img.clientWidth / 100;
     }
 
-    let shadowSize = debug ? 0 : img.clientWidth/10;
+    let shadowSize = debug ? 0 : img.clientWidth / 10;
 
-    if(debug && hover){
-      offX=0;
-      offY=0;
+    if (debug && hover) {
+      offX = 0;
+      offY = 0;
     }
 
     const spx = [
-      shadowPos-offX,
-      0+offX,
-      shadowPos+offX,
-      shadowPos+offX,
-      shadowPos+offX,
-      0+offX,
-      shadowPos-offX,
-      shadowPos-offX,
+      shadowPos - offX,
+      0 + offX,
+      shadowPos + offX,
+      shadowPos + offX,
+      shadowPos + offX,
+      0 + offX,
+      shadowPos - offX,
+      shadowPos - offX,
     ];
 
     const spy = [
-      shadowPos-offY,
-      shadowPos-offY,
-      shadowPos-offY,
-      0+offY,
-      shadowPos+offY,
-      shadowPos+offY,
-      shadowPos+offY,
-      0+offY
+      shadowPos - offY,
+      shadowPos - offY,
+      shadowPos - offY,
+      0 + offY,
+      shadowPos + offY,
+      shadowPos + offY,
+      shadowPos + offY,
+      0 + offY
     ];
 
     let shadow = [
-      `-${spx[0]}px -${spy[0]}px ${shadowBlur}px -${shadowSize}px rgba(${cl[0]})`,
-      `${spx[1]}px -${spy[1]}px ${shadowBlur}px -${shadowSize}px rgba(${cl[1]})`,
-      `${spx[2]}px -${spy[2]}px ${shadowBlur}px -${shadowSize}px rgba(${cl[2]})`,
-      `${spx[3]}px ${spy[3]}px ${shadowBlur}px -${shadowSize}px rgba(${cl[3]})`,
-      `${spx[4]}px ${spy[4]}px ${shadowBlur}px -${shadowSize}px rgba(${cl[4]})`,
-      `${spx[5]}px ${spy[5]}px ${shadowBlur}px -${shadowSize}px rgba(${cl[5]})`,
-      `-${spx[6]}px ${spy[6]}px ${shadowBlur}px -${shadowSize}px rgba(${cl[6]})`,
-      `-${spx[7]}px ${spy[7]}px ${shadowBlur}px -${shadowSize}px rgba(${cl[7]})`
+      `-${Math.abs(spx[0])}px -${Math.abs(spy[0])}px ${Math.abs(shadowBlur)}px -${Math.abs(shadowSize)}px rgba(${cl[0]})`,
+      `${Math.abs(spx[1])}px -${Math.abs(spy[1])}px ${Math.abs(shadowBlur)}px -${Math.abs(shadowSize)}px rgba(${cl[1]})`,
+      `${Math.abs(spx[2])}px -${Math.abs(spy[2])}px ${Math.abs(shadowBlur)}px -${Math.abs(shadowSize)}px rgba(${cl[2]})`,
+      `${Math.abs(spx[3])}px ${Math.abs(spy[3])}px ${Math.abs(shadowBlur)}px -${Math.abs(shadowSize)}px rgba(${cl[3]})`,
+      `${Math.abs(spx[4])}px ${Math.abs(spy[4])}px ${Math.abs(shadowBlur)}px -${Math.abs(shadowSize)}px rgba(${cl[4]})`,
+      `${Math.abs(spx[5])}px ${Math.abs(spy[5])}px ${Math.abs(shadowBlur)}px -${Math.abs(shadowSize)}px rgba(${cl[5]})`,
+      `-${Math.abs(spx[6])}px ${Math.abs(spy[6])}px ${Math.abs(shadowBlur)}px -${Math.abs(shadowSize)}px rgba(${cl[6]})`,
+      `-${Math.abs(spx[7])}px ${Math.abs(spy[7])}px ${Math.abs(shadowBlur)}px -${Math.abs(shadowSize)}px rgba(${cl[7]})`
     ];
 
     return shadow;
@@ -93,7 +93,7 @@ class ImageShadowGenerator{
     let styleElement = document.getElementById('_isg-style');
     let hoverStyleSheet = ``;
 
-    if(this.config.hover === true) {
+    if (this.config.hover === true) {
       const hoverStyles = this._drawShadow(img, true);
       hoverStyleSheet = `
         .${this.config.imgClass}._isg-${index}:hover {
@@ -104,13 +104,13 @@ class ImageShadowGenerator{
       `;
     }
 
-    if(!styleElement){
+    if (!styleElement) {
       styleElement = document.createElement('style');
       styleElement.setAttribute('id', '_isg-style');
       document.head.appendChild(styleElement);
     }
 
-    styleElement.innerHTML = `
+    styleElement.innerHTML = `${styleElement.innerHTML}
       .${this.config.imgClass}._isg-${index} {
         box-shadow: ${styles.join(',')};
         -webkit-box-shadow: ${styles.join(',')};
@@ -119,8 +119,9 @@ class ImageShadowGenerator{
       }
       ${hoverStyleSheet}
     `;
+    styleElement.innerHTML = styleElement.innerHTML.replace(/\n/g, '');
   }
-  _processConfigs(config){
+  _processConfigs(config) {
     this.config = {
       offsetX: 0,
       offsetY: 50,
@@ -131,29 +132,28 @@ class ImageShadowGenerator{
       debug: false
     };
 
-    if(config){
-      Object.keys(config).forEach((key)=>{
+    if (config) {
+      Object.keys(config).forEach((key) => {
         this.config[key] = config[key];
       })
     }
 
-    if(this.config.debug == true) this.config.hover=true;
+    if (this.config.debug == true) this.config.hover = true;
 
-    this.config.offsetX = (this.config.offsetX*30)/100;
-    this.config.offsetY = (this.config.offsetY*30)/100;
+    this.config.offsetX = (this.config.offsetX * 30) / 100;
+    this.config.offsetY = (this.config.offsetY * 30) / 100;
   }
 
-  constructor(config){
+  constructor(config) {
     this._processConfigs(config);
 
     let images = document.getElementsByClassName(this.config.imgClass);
-
-    Object.keys(images).forEach((i)=>{
+    Object.keys(images).forEach((i) => {
       let img = images[i];
-      img.className = img.className+' _isg-'+i;
-      if(img.tagName == 'IMG')
-        img.addEventListener('load', ()=>{ this._applyStyles(img, i) }, false);
-      else if(img.tagName == 'VIDEO')
+      img.className = img.className + ' _isg-' + i;
+      if (img.tagName == 'IMG')
+        img.addEventListener('load', () => { this._applyStyles(img, i) }, false);
+      else if (img.tagName == 'VIDEO')
         img.ontimeupdate = () => { this._applyStyles(img, i) };
     })
   }

diff --git a/isg.min.js b/isg.min.js