diff --git a/gruntfile.js b/gruntfile.js index 3fcdc472..dbe804c2 100644 --- a/gruntfile.js +++ b/gruntfile.js @@ -12,6 +12,8 @@ module.exports = function(grunt) { 'scripts/filemanager.min.js': ['scripts/filemanager.js'], 'scripts/jquery-ui/jquery-ui.min.js': ['scripts/jquery-ui/jquery-ui.js'], 'scripts/jquery.fileDownload/jquery.fileDownload.min.js': ['scripts/jquery.fileDownload/jquery.fileDownload.js'], + // lazyLoad script was modified to support IE9 & IE10 + 'scripts/lazyload/dist/lazyload.min.js': ['scripts/lazyload/dist/lazyload.js'], 'scripts/purl/purl.min.js': ['scripts/purl/purl.js'] } } diff --git a/scripts/lazyload/.eslintrc.json b/scripts/lazyload/.eslintrc.json index 9ce086a3..c9f4da8f 100644 --- a/scripts/lazyload/.eslintrc.json +++ b/scripts/lazyload/.eslintrc.json @@ -42,7 +42,7 @@ "no-labels": 1, "no-lone-blocks": 1, "no-loop-func": 1, - "no-magic-numbers": 1, + "no-magic-numbers": [2, { "ignore": [0, 1] }], "no-multi-spaces": 1, "no-multi-str": 1, "no-new": 1, diff --git a/scripts/lazyload/Gruntfile.js b/scripts/lazyload/Gruntfile.js index 47e7275b..fb8073cf 100644 --- a/scripts/lazyload/Gruntfile.js +++ b/scripts/lazyload/Gruntfile.js @@ -42,7 +42,7 @@ module.exports = function (grunt) { }, watch: { files: ["<%= eslint.src %>"], - tasks: ["eslint", "babel", "uglify"] + tasks: ["eslint", "rollup", "babel", "uglify"] } }); diff --git a/scripts/lazyload/README.md b/scripts/lazyload/README.md index a86cc70e..f610c090 100644 --- a/scripts/lazyload/README.md +++ b/scripts/lazyload/README.md @@ -1,4 +1,4 @@ -LazyLoad is a fast, lightweight and flexible script that _speeds up your web application_ by **loading images only as they enter the viewport**. LazyLoad is written in plain (vanilla) Javascript, it supports [responsive images](https://alistapart.com/article/responsive-images-in-practice), it's SEO friendly and it has some others [notable features](#notable-features). +LazyLoad is a fast, lightweight and flexible script that _speeds up your web application_ by **loading images only as they enter the viewport**. LazyLoad is written in plain (vanilla) Javascript, it supports [responsive images](https://alistapart.com/article/responsive-images-in-practice), it's SEO friendly and it has some other [notable features](#notable-features). Check out the [LazyLoad website](https://verlok.github.io/lazyload/), in case you're reading this on GitHub. @@ -14,7 +14,7 @@ Jump to: Just include the [latest version](https://cdnjs.com/libraries/vanilla-lazyload) script, e.g. like that: ```html - + ``` ### Local install diff --git a/scripts/lazyload/dist/lazyload.es2015.js b/scripts/lazyload/dist/lazyload.es2015.js index 697523f7..879076e5 100644 --- a/scripts/lazyload/dist/lazyload.es2015.js +++ b/scripts/lazyload/dist/lazyload.es2015.js @@ -91,7 +91,7 @@ } }; - const setSourcesForPicture = function(element, srcsetDataAttribute) { + const setSourcesForPicture = function (element, srcsetDataAttribute) { const parent = element.parentElement; if (parent.tagName !== "PICTURE") { return; @@ -107,26 +107,34 @@ } }; - var setSources = function(element, srcsetDataAttribute, srcDataAttribute) { + var setSources = function (element, srcsetDataAttribute, srcDataAttribute) { const tagName = element.tagName; const elementSrc = element.dataset[srcDataAttribute]; if (tagName === "IMG") { setSourcesForPicture(element, srcsetDataAttribute); const imgSrcset = element.dataset[srcsetDataAttribute]; - if (imgSrcset) { element.setAttribute("srcset", imgSrcset); } - if (elementSrc) { element.setAttribute("src", elementSrc); } + if (imgSrcset) { + element.setAttribute("srcset", imgSrcset); + } + if (elementSrc) { + element.setAttribute("src", elementSrc); + } return; } if (tagName === "IFRAME") { - if (elementSrc) { element.setAttribute("src", elementSrc); } + if (elementSrc) { + element.setAttribute("src", elementSrc); + } return; } - if (elementSrc) { element.style.backgroundImage = "url(" + elementSrc + ")"; } + if (elementSrc) { + element.style.backgroundImage = `url("${elementSrc}")`; + } }; /* * Constructor - */ + */ const LazyLoad = function(instanceSettings) { this._settings = Object.assign({}, defaultSettings, instanceSettings); @@ -209,7 +217,7 @@ } } /* Removing processed elements from this._elements. */ - while (processedIndexes.length > 0) { + while (processedIndexes.length) { elements.splice(processedIndexes.pop(), 1); /* Calling the end loop callback */ callCallback(settings.callback_processed, elements.length); @@ -265,8 +273,7 @@ const throttle = this._settings.throttle; if (throttle !== 0) { - const getTime = () => { (new Date()).getTime(); }; - let now = getTime(); + let now = Date.now(); let remainingTime = throttle - (now - this._previousLoopTime); if (remainingTime <= 0 || remainingTime > throttle) { if (this._loopTimeout) { @@ -277,7 +284,7 @@ this._loopThroughElements(); } else if (!this._loopTimeout) { this._loopTimeout = setTimeout(function () { - this._previousLoopTime = getTime(); + this._previousLoopTime = Date.now(); this._loopTimeout = null; this._loopThroughElements(); }.bind(this), remainingTime); diff --git a/scripts/lazyload/dist/lazyload.js b/scripts/lazyload/dist/lazyload.js index 3cc4b8db..0451835e 100644 --- a/scripts/lazyload/dist/lazyload.js +++ b/scripts/lazyload/dist/lazyload.js @@ -96,7 +96,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol for (var i = 0; i < parent.children.length; i++) { var pictureChild = parent.children[i]; if (pictureChild.tagName === "SOURCE") { - var sourceSrcset = pictureChild.dataset[srcsetDataAttribute]; + var sourceSrcset = getData(pictureChild, srcsetDataAttribute); if (sourceSrcset) { pictureChild.setAttribute("srcset", sourceSrcset); } @@ -106,10 +106,10 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol var setSources = function setSources(element, srcsetDataAttribute, srcDataAttribute) { var tagName = element.tagName; - var elementSrc = element.dataset[srcDataAttribute]; + var elementSrc = getData(element, srcDataAttribute); if (tagName === "IMG") { setSourcesForPicture(element, srcsetDataAttribute); - var imgSrcset = element.dataset[srcsetDataAttribute]; + var imgSrcset = getData(element, srcsetDataAttribute); if (imgSrcset) { element.setAttribute("srcset", imgSrcset); } @@ -125,10 +125,26 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol return; } if (elementSrc) { - element.style.backgroundImage = "url(" + elementSrc + ")"; + element.style.backgroundImage = 'url("' + elementSrc + '")'; } }; + function setData(element, key, value) { + window.jQuery ? $(element).data(key, value) : element.dataset[key] = value; + } + + function getData(element, key) { + return window.jQuery ? $(element).data(key) : element.dataset[key]; + } + + function removeClass(element, className) { + window.jQuery ? $(element).removeClass(className) : element.classList.remove(className); + } + + function addClass(element, className) { + window.jQuery ? $(element).addClass(className) : element.classList.add(className); + } + /* * Constructor */ @@ -162,8 +178,8 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol } element.removeEventListener("load", loadCallback); element.removeEventListener("error", errorCallback); - element.classList.remove(settings.class_loading); - element.classList.add(settings.class_error); + removeClass(element, settings.class_loading); + addClass(element, settings.class_error); callCallback(settings.callback_error, element); }; @@ -172,8 +188,8 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol if (!settings) { return; } - element.classList.remove(settings.class_loading); - element.classList.add(settings.class_loaded); + removeClass(element, settings.class_loading); + addClass(element, settings.class_loaded); element.removeEventListener("load", loadCallback); element.removeEventListener("error", errorCallback); /* Calling LOAD callback */ @@ -183,7 +199,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol if (element.tagName === "IMG" || element.tagName === "IFRAME") { element.addEventListener("load", loadCallback); element.addEventListener("error", errorCallback); - element.classList.add(settings.class_loading); + addClass(element, settings.class_loading); } setSources(element, settings.data_srcset, settings.data_src); @@ -208,17 +224,17 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol if (isBot || isInsideViewport(element, settings.container, settings.threshold)) { if (firstLoop) { - element.classList.add(settings.class_initial); + addClass(element, settings.class_initial); } /* Start loading the image */ this._reveal(element); /* Marking the element as processed. */ processedIndexes.push(i); - element.dataset.wasProcessed = true; + setData(element, 'wasProcessed', true); } } /* Removing processed elements from this._elements. */ - while (processedIndexes.length > 0) { + while (processedIndexes.length) { elements.splice(processedIndexes.pop(), 1); /* Calling the end loop callback */ callCallback(settings.callback_processed, elements.length); @@ -242,7 +258,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol for (i = 0; i < elementsLength; i++) { var element = elements[i]; /* If the element has already been processed, skip it */ - if (element.dataset.wasProcessed) { + if (getData(element, 'wasProcessed')) { elementsToPurge.push(i); } } @@ -271,32 +287,25 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol */ handleScroll: function handleScroll() { - var _this = this; - var throttle = this._settings.throttle; if (throttle !== 0) { - (function () { - var getTime = function getTime() { - new Date().getTime(); - }; - var now = getTime(); - var remainingTime = throttle - (now - _this._previousLoopTime); - if (remainingTime <= 0 || remainingTime > throttle) { - if (_this._loopTimeout) { - clearTimeout(_this._loopTimeout); - _this._loopTimeout = null; - } - _this._previousLoopTime = now; - _this._loopThroughElements(); - } else if (!_this._loopTimeout) { - _this._loopTimeout = setTimeout(function () { - this._previousLoopTime = getTime(); - this._loopTimeout = null; - this._loopThroughElements(); - }.bind(_this), remainingTime); + var now = Date.now(); + var remainingTime = throttle - (now - this._previousLoopTime); + if (remainingTime <= 0 || remainingTime > throttle) { + if (this._loopTimeout) { + clearTimeout(this._loopTimeout); + this._loopTimeout = null; } - })(); + this._previousLoopTime = now; + this._loopThroughElements(); + } else if (!this._loopTimeout) { + this._loopTimeout = setTimeout(function () { + this._previousLoopTime = Date.now(); + this._loopTimeout = null; + this._loopThroughElements(); + }.bind(this), remainingTime); + } } else { this._loopThroughElements(); } diff --git a/scripts/lazyload/dist/lazyload.min.js b/scripts/lazyload/dist/lazyload.min.js index d8715ec1..b61c2bdf 100644 --- a/scripts/lazyload/dist/lazyload.min.js +++ b/scripts/lazyload/dist/lazyload.min.js @@ -1 +1 @@ -var _extends=Object.assign||function(a){for(var b=1;b=d(a)+c+a.offsetHeight},i=function(a,b,c){return(b===window?window.pageXOffset:f(b))>=f(a)+c+a.offsetWidth},j=function(a,b,c){return!(e(a,b,c)||h(a,b,c)||g(a,b,c)||i(a,b,c))},k=function(a,b){var c=new a(b),d=new CustomEvent("LazyLoad::Initialized",{detail:{instance:c}});window.dispatchEvent(d)},l=function(a,b){var c=a.parentElement;if("PICTURE"===c.tagName)for(var d=0;d0;)d.splice(g.pop(),1),c(a.callback_processed,d.length);0===e&&this._stopScrollHandler(),h&&(this._isFirstLoop=!1)},_purgeElements:function(){var a=this._elements,b=a.length,c=void 0,d=[];for(c=0;c0;)a.splice(d.pop(),1)},_startScrollHandler:function(){this._isHandlingScroll||(this._isHandlingScroll=!0,this._settings.container.addEventListener("scroll",this._boundHandleScroll))},_stopScrollHandler:function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,this._settings.container.removeEventListener("scroll",this._boundHandleScroll))},handleScroll:function(){var a=this,b=this._settings.throttle;0!==b?function(){var c=function(){(new Date).getTime()},d=c(),e=b-(d-a._previousLoopTime);e<=0||e>b?(a._loopTimeout&&(clearTimeout(a._loopTimeout),a._loopTimeout=null),a._previousLoopTime=d,a._loopThroughElements()):a._loopTimeout||(a._loopTimeout=setTimeout(function(){this._previousLoopTime=c(),this._loopTimeout=null,this._loopThroughElements()}.bind(a),e))}():this._loopThroughElements()},update:function(){this._elements=Array.prototype.slice.call(this._queryOriginNode.querySelectorAll(this._settings.elements_selector)),this._purgeElements(),this._loopThroughElements(),this._startScrollHandler()},destroy:function(){window.removeEventListener("resize",this._boundHandleScroll),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null}};var o=window.lazyLoadOptions;return o&&function(a,b){var c=b.length;if(c)for(var d=0;d=h(a)+c+a.offsetHeight},m=function(a,b,c){var d=b===window?window.pageXOffset:j(b);return d>=j(a)+c+a.offsetWidth},n=function(a,b,c){return!(i(a,b,c)||l(a,b,c)||k(a,b,c)||m(a,b,c))},o=function(a,b){var c=new a(b),d=new CustomEvent("LazyLoad::Initialized",{detail:{instance:c}});window.dispatchEvent(d)},p=function(a,b){var c=b.length;if(c)for(var d=0;d0;)a.splice(e.pop(),1)},_startScrollHandler:function(){this._isHandlingScroll||(this._isHandlingScroll=!0,this._settings.container.addEventListener("scroll",this._boundHandleScroll))},_stopScrollHandler:function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,this._settings.container.removeEventListener("scroll",this._boundHandleScroll))},handleScroll:function(){var a=this._settings.throttle;if(0!==a){var b=Date.now(),c=a-(b-this._previousLoopTime);c<=0||c>a?(this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._previousLoopTime=b,this._loopThroughElements()):this._loopTimeout||(this._loopTimeout=setTimeout(function(){this._previousLoopTime=Date.now(),this._loopTimeout=null,this._loopThroughElements()}.bind(this),c))}else this._loopThroughElements()},update:function(){this._elements=Array.prototype.slice.call(this._queryOriginNode.querySelectorAll(this._settings.elements_selector)),this._purgeElements(),this._loopThroughElements(),this._startScrollHandler()},destroy:function(){window.removeEventListener("resize",this._boundHandleScroll),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null}};var t=window.lazyLoadOptions;return t&&p(s,t),s}); \ No newline at end of file diff --git a/scripts/lazyload/package.json b/scripts/lazyload/package.json index 2cfa693d..e93a52b4 100644 --- a/scripts/lazyload/package.json +++ b/scripts/lazyload/package.json @@ -1,11 +1,11 @@ { "name": "vanilla-lazyload", - "version": "8.0.1", + "version": "8.0.3", "description": "A fast, lightweight script to load images as they enter the viewport. SEO friendly, it supports responsive images (both srcset + sizes and picture) and progressive JPEG", "main": "dist/lazyload.min.js", "devDependencies": { "babel-plugin-transform-object-assign": "^6.22.0", - "babel-preset-es2015": "^6.18.0", + "babel-preset-es2015": "^6.24.1", "grunt": "^1.0.1", "grunt-babel": "^6.0.0", "grunt-contrib-concat": "^1.0.1", diff --git a/scripts/lazyload/src/lazyload.core.js b/scripts/lazyload/src/lazyload.core.js index 2d1d003c..0f1b1066 100644 --- a/scripts/lazyload/src/lazyload.core.js +++ b/scripts/lazyload/src/lazyload.core.js @@ -6,7 +6,7 @@ import setSources from "./lazyload.setSources"; /* * Constructor - */ + */ const LazyLoad = function(instanceSettings) { this._settings = Object.assign({}, defaultSettings, instanceSettings); @@ -89,7 +89,7 @@ LazyLoad.prototype = { } } /* Removing processed elements from this._elements. */ - while (processedIndexes.length > 0) { + while (processedIndexes.length) { elements.splice(processedIndexes.pop(), 1); /* Calling the end loop callback */ callCallback(settings.callback_processed, elements.length); @@ -145,8 +145,7 @@ LazyLoad.prototype = { const throttle = this._settings.throttle; if (throttle !== 0) { - const getTime = () => { (new Date()).getTime(); }; - let now = getTime(); + let now = Date.now(); let remainingTime = throttle - (now - this._previousLoopTime); if (remainingTime <= 0 || remainingTime > throttle) { if (this._loopTimeout) { @@ -157,7 +156,7 @@ LazyLoad.prototype = { this._loopThroughElements(); } else if (!this._loopTimeout) { this._loopTimeout = setTimeout(function () { - this._previousLoopTime = getTime(); + this._previousLoopTime = Date.now(); this._loopTimeout = null; this._loopThroughElements(); }.bind(this), remainingTime); diff --git a/scripts/lazyload/src/lazyload.setSources.js b/scripts/lazyload/src/lazyload.setSources.js index e9539146..68fe6b6c 100644 --- a/scripts/lazyload/src/lazyload.setSources.js +++ b/scripts/lazyload/src/lazyload.setSources.js @@ -1,4 +1,4 @@ -const setSourcesForPicture = function(element, srcsetDataAttribute) { +const setSourcesForPicture = function (element, srcsetDataAttribute) { const parent = element.parentElement; if (parent.tagName !== "PICTURE") { return; @@ -14,19 +14,27 @@ const setSourcesForPicture = function(element, srcsetDataAttribute) { } }; -export default function(element, srcsetDataAttribute, srcDataAttribute) { +export default function (element, srcsetDataAttribute, srcDataAttribute) { const tagName = element.tagName; const elementSrc = element.dataset[srcDataAttribute]; if (tagName === "IMG") { setSourcesForPicture(element, srcsetDataAttribute); const imgSrcset = element.dataset[srcsetDataAttribute]; - if (imgSrcset) { element.setAttribute("srcset", imgSrcset); } - if (elementSrc) { element.setAttribute("src", elementSrc); } + if (imgSrcset) { + element.setAttribute("srcset", imgSrcset); + } + if (elementSrc) { + element.setAttribute("src", elementSrc); + } return; } if (tagName === "IFRAME") { - if (elementSrc) { element.setAttribute("src", elementSrc); } + if (elementSrc) { + element.setAttribute("src", elementSrc); + } return; } - if (elementSrc) { element.style.backgroundImage = "url(" + elementSrc + ")"; } + if (elementSrc) { + element.style.backgroundImage = `url("${elementSrc}")`; + } }; \ No newline at end of file