lazy-blur.js - npm Package Compare versions

Comparing version 0.1.5 to 0.1.6

dist/lazy-blur.js

 /*!
- * lazy-blur.js 0.1.5 - Progressive image loader with SVG blur effect
- * Copyright (c) 2015 Rplus - https://github.com/Rplus/lazy-blur.js
+ * lazy-blur.js 0.1.6 - Progressive image loader with SVG blur effect
+ * Copyright (c) 2016 Rplus - https://github.com/Rplus/lazy-blur.js
  * License: MIT
@@ -88,2 +88,6 @@ */'use strict';
 
+  var bindManualEvent = function bindManualEvent(e) {
+    appendSrcImg(e.target);
+  };
+
   var appendSrcImg = function appendSrcImg(imgS) {
@@ -99,13 +103,18 @@ var imgL = new Image();
     imgS.parentNode.insertBefore(imgL, imgS.nextSibling);
+
+    if (opt.eventType !== 'scroll') {
+      imgS.removeEventListener(opt.eventType, bindManualEvent);
+    }
   };
 
   // events for loading img
-  if (opt.eventType === 'click' || opt.eventType === 'mouseenter') {
-    opt.imgs.map(function (img) {
-      img.addEventListener(opt.eventType, function () {
-        return appendSrcImg(img);
+  switch (opt.eventType) {
+    case 'click':
+    case 'mouseenter':
+      opt.imgs.map(function (img) {
+        img.addEventListener(opt.eventType, bindManualEvent);
       });
-    });
-  } else if (opt.eventType === 'scroll') {
-    (function () {
+      break;
+
+    case 'scroll':
       var getImgPos = function getImgPos() {
@@ -160,4 +169,4 @@ // return if all lazy-blur images loaded
       });
-    })();
+      break;
   }
 };

dist/lazy-blur.min.js

 /*!
- * lazy-blur.js 0.1.5 - Progressive image loader with SVG blur effect
- * Copyright (c) 2015 Rplus - https://github.com/Rplus/lazy-blur.js
+ * lazy-blur.js 0.1.6 - Progressive image loader with SVG blur effect
+ * Copyright (c) 2016 Rplus - https://github.com/Rplus/lazy-blur.js
  * License: MIT
  */
-"use strict";function _classCallCheck(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}var _extends=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e},LazyBlur=function e(){var n=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];if(_classCallCheck(this,e),n.imgSQuery=n.imgSQuery||".lazy-blur__imgS",n=_extends({imgLClass:"lazy-blur__imgL",filterSelector:"html.svg *:not(.done) > "+n.imgSQuery,getImgLSrc:function(e){return e.getAttribute("data-src")},onLoad:function(e){e.parentElement.className+=" done "},blurSize:20,scrollThreshold:50,eventType:"scroll"},n),n.imgs=[].slice.call(document.querySelectorAll(n.imgSQuery)),n.imgs.length){"function"!=typeof n.onLoad&&(n.onLoad=!1);var t='\n    <svg xmlns="http://www.w3.org/2000/svg" style="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;">\n      <def>\n        <filter id="lazy-blur-filter">\n          <feGaussianBlur stdDeviation="'+n.blurSize+'"></feGaussianBlur>\n        </filter>\n      </def>\n    </svg>\n    <style>\n      '+n.filterSelector+' {\n        -webkit-filter: url("#lazy-blur-filter");\n                filter: url("#lazy-blur-filter");\n      }\n    </style>';document.body.appendChild(function(){var e=document.createElement("div");return e.innerHTML=t,e}());var i=function(e){var t=new Image;n.onLoad&&(t.onload=function(){n.onLoad(e)}),t.className=n.imgLClass,t.src=n.getImgLSrc(e),e.parentNode.insertBefore(t,e.nextSibling)};"click"===n.eventType||"mouseenter"===n.eventType?n.imgs.map(function(e){e.addEventListener(n.eventType,function(){return i(e)})}):"scroll"===n.eventType&&!function(){var e=function(){(!n.imgsWithPos||n.imgsWithPos.length)&&(n.imgsWithPos=n.imgs.map(function(e){var n=e.getBoundingClientRect(),t=window.pageYOffset;return{imgEl:e,top:n.top+t,bottom:n.bottom+t}}))},t=function(){if(n.imgsWithPos.length){var e=window.pageYOffset,t=e-n.scrollThreshold,r=e+window.innerHeight+n.scrollThreshold;n.imgsWithPos=n.imgsWithPos.filter(function(e,n){var o=e.bottom<r&&e.bottom>t||e.top>t&&e.top<r;return o&&i(e.imgEl),!o})}};e(),t(),window.addEventListener("scroll",function(){t()}),window.addEventListener("resize",function(){e(),t()})}()}};
+"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},LazyBlur=function e(){var t=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];if(_classCallCheck(this,e),t.imgSQuery=t.imgSQuery||".lazy-blur__imgS",t=_extends({imgLClass:"lazy-blur__imgL",filterSelector:"html.svg *:not(.done) > "+t.imgSQuery,getImgLSrc:function(e){return e.getAttribute("data-src")},onLoad:function(e){e.parentElement.className+=" done "},blurSize:20,scrollThreshold:50,eventType:"scroll"},t),t.imgs=[].slice.call(document.querySelectorAll(t.imgSQuery)),t.imgs.length){"function"!=typeof t.onLoad&&(t.onLoad=!1);var n='\n    <svg xmlns="http://www.w3.org/2000/svg" style="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;">\n      <def>\n        <filter id="lazy-blur-filter">\n          <feGaussianBlur stdDeviation="'+t.blurSize+'"></feGaussianBlur>\n        </filter>\n      </def>\n    </svg>\n    <style>\n      '+t.filterSelector+' {\n        -webkit-filter: url("#lazy-blur-filter");\n                filter: url("#lazy-blur-filter");\n      }\n    </style>';document.body.appendChild(function(){var e=document.createElement("div");return e.innerHTML=n,e}());var r=function(e){i(e.target)},i=function(e){var n=new Image;t.onLoad&&(n.onload=function(){t.onLoad(e)}),n.className=t.imgLClass,n.src=t.getImgLSrc(e),e.parentNode.insertBefore(n,e.nextSibling),"scroll"!==t.eventType&&e.removeEventListener(t.eventType,r)};switch(t.eventType){case"click":case"mouseenter":t.imgs.map(function(e){e.addEventListener(t.eventType,r)});break;case"scroll":var o=function(){(!t.imgsWithPos||t.imgsWithPos.length)&&(t.imgsWithPos=t.imgs.map(function(e){var t=e.getBoundingClientRect(),n=window.pageYOffset;return{imgEl:e,top:t.top+n,bottom:t.bottom+n}}))},l=function(){if(t.imgsWithPos.length){var e=window.pageYOffset,n=e-t.scrollThreshold,r=e+window.innerHeight+t.scrollThreshold;t.imgsWithPos=t.imgsWithPos.filter(function(e,t){var o=e.bottom<r&&e.bottom>n||e.top>n&&e.top<r;return o&&i(e.imgEl),!o})}};o(),l(),window.addEventListener("scroll",function(){l()}),window.addEventListener("resize",function(){o(),l()})}}};
 //# sourceMappingURL=maps/lazy-blur.min.js.map

gulpfile.babel.js

@@ -14,3 +14,2 @@ 'use strict';
 import jade from 'gulp-jade';
-import ghPages from 'gulp-gh-pages';
 
@@ -59,3 +58,3 @@ const reload = browserSync.reload;
     scrollThrottle: 500,
-    startPath: './dist',
+    startPath: './dist/demo.html',
     server: ''
@@ -73,7 +72,2 @@ });
 
-gulp.task('demo-deploy', () => {
-  return gulp.src('./dist/*')
-    .pipe(ghPages());
-});
-
 gulp.task('dev', ['default'], () => {
@@ -80,0 +74,0 @@ gulp.watch('src/lazy-blur.js', ['js', reload]);

package.json

 {
   "name": "lazy-blur.js",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Progressive image loader with SVG blur effect",
   "main": "dist/lazy-blur.min.js",
   "scripts": {
+    "dev": "gulp dev",
+    "demo-deploy": "gulp demo && gh-pages -d dist",
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -29,6 +31,6 @@ },
     "browser-sync": "^2.10.0",
+    "gh-pages": "^0.11.0",
     "gulp": "^3.9.0",
     "gulp-babel": "^6.1.1",
     "gulp-connect": "^2.2.0",
-    "gulp-gh-pages": "^0.5.4",
     "gulp-header": "^1.7.1",
@@ -35,0 +37,0 @@ "gulp-jade": "^1.1.0",

src/lazy-blur.js

@@ -80,2 +80,6 @@ /* global Image */
 
+    let bindManualEvent = (e) => {
+      appendSrcImg(e.target);
+    };
+
     let appendSrcImg = (imgS) => {
@@ -91,59 +95,67 @@ let imgL = new Image();
       imgS.parentNode.insertBefore(imgL, imgS.nextSibling);
+
+      if (opt.eventType !== 'scroll') {
+        imgS.removeEventListener(opt.eventType, bindManualEvent);
+      }
     };
 
     // events for loading img
-    if (opt.eventType === 'click' || opt.eventType === 'mouseenter') {
-      opt.imgs.map(img => {
-        img.addEventListener(opt.eventType, () => appendSrcImg(img));
-      });
-    } else if (opt.eventType === 'scroll') {
-      let getImgPos = () => {
-        // return if all lazy-blur images loaded
-        if (opt.imgsWithPos && !opt.imgsWithPos.length) { return; }
-
-        opt.imgsWithPos = opt.imgs.map(img => {
-          let _rect = img.getBoundingClientRect();
-          let _offsetY = window.pageYOffset;
-          return {
-            imgEl: img,
-            top: _rect.top + _offsetY,
-            bottom: _rect.bottom + _offsetY
-          };
+    switch (opt.eventType) {
+      case 'click':
+      case 'mouseenter':
+        opt.imgs.map(img => {
+          img.addEventListener(opt.eventType, bindManualEvent);
         });
-      };
+        break;
 
-      let detectImgsAreInViewport = () => {
-        // return if all imgs loaded
-        if (!opt.imgsWithPos.length) { return; }
+      case 'scroll':
+        let getImgPos = () => {
+          // return if all lazy-blur images loaded
+          if (opt.imgsWithPos && !opt.imgsWithPos.length) { return; }
 
-        let _offsetY = window.pageYOffset;
-        let _vpTop = _offsetY - opt.scrollThreshold;
-        let _vpBottom = _offsetY + window.innerHeight + opt.scrollThreshold;
+          opt.imgsWithPos = opt.imgs.map(img => {
+            let _rect = img.getBoundingClientRect();
+            let _offsetY = window.pageYOffset;
+            return {
+              imgEl: img,
+              top: _rect.top + _offsetY,
+              bottom: _rect.bottom + _offsetY
+            };
+          });
+        };
 
-        opt.imgsWithPos = opt.imgsWithPos.filter((imgData, idx) => {
-          let isInVp = (imgData.bottom < _vpBottom && imgData.bottom > _vpTop) ||
-                       (imgData.top > _vpTop && imgData.top < _vpBottom);
+        let detectImgsAreInViewport = () => {
+          // return if all imgs loaded
+          if (!opt.imgsWithPos.length) { return; }
 
-          if (isInVp) {
-            appendSrcImg(imgData.imgEl);
-          }
+          let _offsetY = window.pageYOffset;
+          let _vpTop = _offsetY - opt.scrollThreshold;
+          let _vpBottom = _offsetY + window.innerHeight + opt.scrollThreshold;
 
-          return !isInVp;
-        });
-      };
+          opt.imgsWithPos = opt.imgsWithPos.filter((imgData, idx) => {
+            let isInVp = (imgData.bottom < _vpBottom && imgData.bottom > _vpTop) ||
+                         (imgData.top > _vpTop && imgData.top < _vpBottom);
 
-      getImgPos();
-      detectImgsAreInViewport();
+            if (isInVp) {
+              appendSrcImg(imgData.imgEl);
+            }
 
-      window.addEventListener('scroll', () => {
-        detectImgsAreInViewport();
-      });
+            return !isInVp;
+          });
+        };
 
-      window.addEventListener('resize', () => {
         getImgPos();
         detectImgsAreInViewport();
-      });
+
+        window.addEventListener('scroll', () => {
+          detectImgsAreInViewport();
+        });
+
+        window.addEventListener('resize', () => {
+          getImgPos();
+          detectImgsAreInViewport();
+        });
+        break;
     }
   }
-
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

27666

increased by0.56%

Lines of code

360

increased by3.15%

No dependency changes