layzr.js - npm Package Compare versions

Comparing version 1.2.3 to 1.3.0

dist/layzr.js

@@ -0,5 +1,11 @@
+/*!
+ * Layzr.js 1.3.0 - A small, fast, modern, and dependency-free library for lazy loading.
+ * Copyright (c) 2015 Michael Cavalea - http://callmecavs.github.io/layzr.js/
+ * License: MIT
+ */
+
 (function(root, factory) {
-  if(typeof define === 'function' && define.amd) {
+  if (typeof define === 'function' && define.amd) {
     define([], factory);
-  } else if(typeof exports === 'object') {
+  } else if (typeof exports === 'object') {
     module.exports = factory();
@@ -10,154 +16,154 @@ } else {
 }(this, function() {
-  'use strict';
+'use strict';
 
-  // CONSTRUCTOR
+// CONSTRUCTOR
 
-  function Layzr(options) {
-    // debounce
-    this._lastScroll = 0;
-    this._ticking    = false;
+function Layzr(options) {
+  // debounce
+  this._lastScroll = 0;
+  this._ticking    = false;
 
-    // options
-    options = options || {};
+  // options
+  options = options || {};
 
-    this._optionsSelector   = options.selector || '[data-layzr]';
-    this._optionsAttr       = options.attr || 'data-layzr';
-    this._optionsAttrRetina = options.retinaAttr || 'data-layzr-retina';
-    this._optionsAttrBg     = options.bgAttr || 'data-layzr-bg';
-    this._optionsAttrHidden = options.hiddenAttr || 'data-layzr-hidden';
-    this._optionsThreshold  = options.threshold || 0;
-    this._optionsCallback   = options.callback || null;
+  this._optionsSelector   = options.selector || '[data-layzr]';
+  this._optionsAttr       = options.attr || 'data-layzr';
+  this._optionsAttrRetina = options.retinaAttr || 'data-layzr-retina';
+  this._optionsAttrBg     = options.bgAttr || 'data-layzr-bg';
+  this._optionsAttrHidden = options.hiddenAttr || 'data-layzr-hidden';
+  this._optionsThreshold  = options.threshold || 0;
+  this._optionsCallback   = options.callback || null;
 
-    // properties
-    this._retina  = window.devicePixelRatio > 1;
-    this._srcAttr = this._retina ? this._optionsAttrRetina : this._optionsAttr;
+  // properties
+  this._retina  = window.devicePixelRatio > 1;
+  this._srcAttr = this._retina ? this._optionsAttrRetina : this._optionsAttr;
 
-    // nodelist
-    this._nodes = document.querySelectorAll(this._optionsSelector);
+  // nodelist
+  this._nodes = document.querySelectorAll(this._optionsSelector);
 
-    // call to create
-    this._create();
-  }
+  // call to create
+  this._create();
+}
 
-  // DEBOUNCE HELPERS
-  // adapted from: http://www.html5rocks.com/en/tutorials/speed/animations/
+// DEBOUNCE HELPERS
+// adapted from: http://www.html5rocks.com/en/tutorials/speed/animations/
 
-  Layzr.prototype._requestScroll = function() {
-    this._lastScroll = window.scrollY || window.pageYOffset;
-    this._requestTick();
-  };
+Layzr.prototype._requestScroll = function() {
+  this._lastScroll = window.scrollY || window.pageYOffset;
+  this._requestTick();
+};
 
-  Layzr.prototype._requestTick = function() {
-    if(!this._ticking) {
-      requestAnimationFrame(this.update.bind(this));
-      this._ticking = true;
-    }
-  };
+Layzr.prototype._requestTick = function() {
+  if(!this._ticking) {
+    requestAnimationFrame(this.update.bind(this));
+    this._ticking = true;
+  }
+};
 
-  // OFFSET HELPER
-  // borrowed from: http://stackoverflow.com/questions/5598743/finding-elements-position-relative-to-the-document
+// OFFSET HELPER
+// borrowed from: http://stackoverflow.com/questions/5598743/finding-elements-position-relative-to-the-document
 
-  Layzr.prototype._getOffset = function(element) {
-    var offsetTop = 0;
+Layzr.prototype._getOffset = function(element) {
+  var offsetTop = 0;
 
-    do {
-      if(!isNaN(element.offsetTop)) {
-        offsetTop += element.offsetTop;
-      }
-    } while(element = element.offsetParent);
+  do {
+    if(!isNaN(element.offsetTop)) {
+      offsetTop += element.offsetTop;
+    }
+  } while(element = element.offsetParent);
 
-    return offsetTop;
-  };
+  return offsetTop;
+};
 
-  // LAYZR METHODS
+// LAYZR METHODS
 
-  Layzr.prototype._create = function() {
-    // fire scroll event once
-    this._requestScroll();
+Layzr.prototype._create = function() {
+  // fire scroll event once
+  this._requestScroll();
 
-    // bind scroll and resize event
-    window.addEventListener('scroll', this._requestScroll.bind(this), false);
-    window.addEventListener('resize', this._requestScroll.bind(this), false);
-  };
+  // bind scroll and resize event
+  window.addEventListener('scroll', this._requestScroll.bind(this), false);
+  window.addEventListener('resize', this._requestScroll.bind(this), false);
+};
 
-  Layzr.prototype._destroy = function() {
-    // possibly remove attributes, and set all sources?
+Layzr.prototype._destroy = function() {
+  // possibly remove attributes, and set all sources?
 
-    // unbind scroll and resize event
-    window.removeEventListener('scroll', this._requestScroll.bind(this), false);
-    window.removeEventListener('resize', this._requestScroll.bind(this), false);
-  };
+  // unbind scroll and resize event
+  window.removeEventListener('scroll', this._requestScroll.bind(this), false);
+  window.removeEventListener('resize', this._requestScroll.bind(this), false);
+};
 
-  Layzr.prototype._inViewport = function(node) {
-    // get viewport top and bottom offset
-    var viewportTop = this._lastScroll;
-    var viewportBottom = viewportTop + window.innerHeight;
+Layzr.prototype._inViewport = function(node) {
+  // get viewport top and bottom offset
+  var viewportTop = this._lastScroll;
+  var viewportBottom = viewportTop + window.innerHeight;
 
-    // get node top and bottom offset
-    var elementTop = this._getOffset(node);
-    var elementBottom = elementTop + node.offsetHeight;
+  // get node top and bottom offset
+  var elementTop = this._getOffset(node);
+  var elementBottom = elementTop + node.offsetHeight;
 
-    // calculate threshold, convert percentage to pixel value
-    var threshold = (this._optionsThreshold / 100) * window.innerHeight;
+  // calculate threshold, convert percentage to pixel value
+  var threshold = (this._optionsThreshold / 100) * window.innerHeight;
 
-    // return if element in viewport
-    return elementBottom >= viewportTop - threshold
-        && elementTop <= viewportBottom + threshold
-        && !node.hasAttribute(this._optionsAttrHidden);
-  };
+  // return if element in viewport
+  return elementBottom >= viewportTop - threshold
+      && elementTop <= viewportBottom + threshold
+      && !node.hasAttribute(this._optionsAttrHidden);
+};
 
-  Layzr.prototype._reveal = function(node) {
-    // get node source
-    var source = node.getAttribute(this._srcAttr) || node.getAttribute(this._optionsAttr);
+Layzr.prototype._reveal = function(node) {
+  // get node source
+  var source = node.getAttribute(this._srcAttr) || node.getAttribute(this._optionsAttr);
 
-    // set node src or bg image
-    if(node.hasAttribute(this._optionsAttrBg)) {
-      node.style.backgroundImage = 'url(' + source + ')';
-    }
-    else {
-      node.setAttribute('src', source);
-    }
+  // set node src or bg image
+  if(node.hasAttribute(this._optionsAttrBg)) {
+    node.style.backgroundImage = 'url(' + source + ')';
+  }
+  else {
+    node.setAttribute('src', source);
+  }
 
-    // call the callback
-    if(typeof this._optionsCallback === 'function') {
-      // "this" will be the node in the callback
-      this._optionsCallback.call(node);
-    }
+  // call the callback
+  if(typeof this._optionsCallback === 'function') {
+    // "this" will be the node in the callback
+    this._optionsCallback.call(node);
+  }
 
-    // remove node data attributes
-    node.removeAttribute(this._optionsAttr);
-    node.removeAttribute(this._optionsAttrRetina);
-    node.removeAttribute(this._optionsAttrBg);
-    node.removeAttribute(this._optionsAttrHidden);
-  };
+  // remove node data attributes
+  node.removeAttribute(this._optionsAttr);
+  node.removeAttribute(this._optionsAttrRetina);
+  node.removeAttribute(this._optionsAttrBg);
+  node.removeAttribute(this._optionsAttrHidden);
+};
 
-  Layzr.prototype.updateSelector = function() {
-    // update cached list of elements matching selector
-    this._nodes = document.querySelectorAll(this._optionsSelector);
-  };
+Layzr.prototype.updateSelector = function() {
+  // update cached list of elements matching selector
+  this._nodes = document.querySelectorAll(this._optionsSelector);
+};
 
-  Layzr.prototype.update = function() {
-    // cache nodelist length
-    var nodesLength = this._nodes.length;
+Layzr.prototype.update = function() {
+  // cache nodelist length
+  var nodesLength = this._nodes.length;
 
-    // loop through nodes
-    for(var i = 0; i < nodesLength; i++) {
-      // cache node
-      var node = this._nodes[i];
+  // loop through nodes
+  for(var i = 0; i < nodesLength; i++) {
+    // cache node
+    var node = this._nodes[i];
 
-      // check if node has mandatory attribute
-      if(node.hasAttribute(this._optionsAttr)) {
-        // check if node in viewport
-        if(this._inViewport(node)) {
-          // reveal node
-          this._reveal(node);
-        }
+    // check if node has mandatory attribute
+    if(node.hasAttribute(this._optionsAttr)) {
+      // check if node in viewport
+      if(this._inViewport(node)) {
+        // reveal node
+        this._reveal(node);
       }
     }
+  }
 
-    // allow for more animation frames
-    this._ticking = false;
-  };
+  // allow for more animation frames
+  this._ticking = false;
+};
 
-  return Layzr;
+return Layzr;
 }));

dist/layzr.min.js

@@ -0,1 +1,6 @@
+/*!
+ * Layzr.js 1.3.0 - A small, fast, modern, and dependency-free library for lazy loading.
+ * Copyright (c) 2015 Michael Cavalea - http://callmecavs.github.io/layzr.js/
+ * License: MIT
+ */
 !function(t,i){"function"==typeof define&&define.amd?define([],i):"object"==typeof exports?module.exports=i():t.Layzr=i()}(this,function(){"use strict";function t(t){this._lastScroll=0,this._ticking=!1,t=t||{},this._optionsSelector=t.selector||"[data-layzr]",this._optionsAttr=t.attr||"data-layzr",this._optionsAttrRetina=t.retinaAttr||"data-layzr-retina",this._optionsAttrBg=t.bgAttr||"data-layzr-bg",this._optionsAttrHidden=t.hiddenAttr||"data-layzr-hidden",this._optionsThreshold=t.threshold||0,this._optionsCallback=t.callback||null,this._retina=window.devicePixelRatio>1,this._srcAttr=this._retina?this._optionsAttrRetina:this._optionsAttr,this._nodes=document.querySelectorAll(this._optionsSelector),this._create()}return t.prototype._requestScroll=function(){this._lastScroll=window.scrollY||window.pageYOffset,this._requestTick()},t.prototype._requestTick=function(){this._ticking||(requestAnimationFrame(this.update.bind(this)),this._ticking=!0)},t.prototype._getOffset=function(t){var i=0;do isNaN(t.offsetTop)||(i+=t.offsetTop);while(t=t.offsetParent);return i},t.prototype._create=function(){this._requestScroll(),window.addEventListener("scroll",this._requestScroll.bind(this),!1),window.addEventListener("resize",this._requestScroll.bind(this),!1)},t.prototype._destroy=function(){window.removeEventListener("scroll",this._requestScroll.bind(this),!1),window.removeEventListener("resize",this._requestScroll.bind(this),!1)},t.prototype._inViewport=function(t){var i=this._lastScroll,e=i+window.innerHeight,o=this._getOffset(t),s=o+t.offsetHeight,r=this._optionsThreshold/100*window.innerHeight;return s>=i-r&&e+r>=o&&!t.hasAttribute(this._optionsAttrHidden)},t.prototype._reveal=function(t){var i=t.getAttribute(this._srcAttr)||t.getAttribute(this._optionsAttr);t.hasAttribute(this._optionsAttrBg)?t.style.backgroundImage="url("+i+")":t.setAttribute("src",i),"function"==typeof this._optionsCallback&&this._optionsCallback.call(t),t.removeAttribute(this._optionsAttr),t.removeAttribute(this._optionsAttrRetina),t.removeAttribute(this._optionsAttrBg),t.removeAttribute(this._optionsAttrHidden)},t.prototype.updateSelector=function(){this._nodes=document.querySelectorAll(this._optionsSelector)},t.prototype.update=function(){for(var t=this._nodes.length,i=0;t>i;i++){var e=this._nodes[i];e.hasAttribute(this._optionsAttr)&&this._inViewport(e)&&this._reveal(e)}this._ticking=!1},t});

package.json

 {
   "name":        "layzr.js",
-  "version":     "1.2.3",
+  "version":     "1.3.0",
   "description": "A small, fast, modern, and dependency-free library for lazy loading.",
@@ -29,2 +29,3 @@ "homepage":    "http://callmecavs.github.io/layzr.js/",
     "gulp-connect":      "^2.2.0",
+    "gulp-header":       "^1.2.2",
     "gulp-load-plugins": "^0.8.0",
@@ -34,4 +35,5 @@ "gulp-plumber":      "^1.0.0",
     "gulp-uglify":       "^1.0.2",
+    "gulp-umd":          "^0.1.3",
     "node-notifier":     "^4.1.2"
   }
 }

README.md

@@ -27,3 +27,3 @@ # Layzr.js
 
-In the examples below, replace `{version}` with your desired version.
+In the examples below, replace `{version}` with your desired version. Refer to the [releases](https://github.com/callmecavs/layzr.js/releases) page for version info.
 
@@ -30,0 +30,0 @@ ##### [cdnjs](https://cdnjs.com/libraries/layzr.js)

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

21714

increased by38.28%

Number of package files

9

increased by28.57%

Lines of code

282

increased by83.12%

Worsened metrics

Dev dependency count

9

increased by28.57%

No dependency changes