From a0d1ce77dc4a74f42cd68c682af8d2d0596cb754 Mon Sep 17 00:00:00 2001 From: Mario Date: Sun, 25 Nov 2018 09:09:26 +0000 Subject: update imagesloaded to version 4.1.4 via composer (cherry picked from commit c667572d3eedb0c31b29a4c469b378ccdcee0ba1) --- .../sandbox/background/css/background.css | 29 ++++++ .../imagesloaded/sandbox/background/index.html | 51 ++++++++++ .../imagesloaded/sandbox/progress/index.html | 89 +++++++++++++++++ .../imagesloaded/sandbox/progress/progress.js | 111 +++++++++++++++++++++ 4 files changed, 280 insertions(+) create mode 100644 vendor/desandro/imagesloaded/sandbox/background/css/background.css create mode 100644 vendor/desandro/imagesloaded/sandbox/background/index.html create mode 100644 vendor/desandro/imagesloaded/sandbox/progress/index.html create mode 100644 vendor/desandro/imagesloaded/sandbox/progress/progress.js (limited to 'vendor/desandro/imagesloaded/sandbox') diff --git a/vendor/desandro/imagesloaded/sandbox/background/css/background.css b/vendor/desandro/imagesloaded/sandbox/background/css/background.css new file mode 100644 index 000000000..509966a7d --- /dev/null +++ b/vendor/desandro/imagesloaded/sandbox/background/css/background.css @@ -0,0 +1,29 @@ +.box { + width: 300px; + height: 300px; + margin: 0 20px 20px 0; + border: 1px solid; + display: inline-block; +} + +.orange-tree { + background: url('http://i.imgur.com/bwy74ok.jpg'); + background-size: cover; +} + +.thunder-cloud { + background: url('../../../test/img/thunder-cloud.jpg'); + background-size: contain; +} + +.multi1 { + background: + url("http://i.imgur.com/ZAVN3.png"), + url('http://i.imgur.com/6UdOxeB.png') bottom right, + url(http://i.imgur.com/LkmcILl.jpg); + background-size: cover; +} + +.blue { + background: #09F; +} \ No newline at end of file diff --git a/vendor/desandro/imagesloaded/sandbox/background/index.html b/vendor/desandro/imagesloaded/sandbox/background/index.html new file mode 100644 index 000000000..853f8ff35 --- /dev/null +++ b/vendor/desandro/imagesloaded/sandbox/background/index.html @@ -0,0 +1,51 @@ + + + + + + + background + + + + + + + +

background

+ +

+ + + + + + + diff --git a/vendor/desandro/imagesloaded/sandbox/progress/index.html b/vendor/desandro/imagesloaded/sandbox/progress/index.html new file mode 100644 index 000000000..b01ce28c5 --- /dev/null +++ b/vendor/desandro/imagesloaded/sandbox/progress/index.html @@ -0,0 +1,89 @@ + + + + + + + progress + + + + + + +

progress

+ +

+ + +

+ +

+ + + + + + + diff --git a/vendor/desandro/imagesloaded/sandbox/progress/progress.js b/vendor/desandro/imagesloaded/sandbox/progress/progress.js new file mode 100644 index 000000000..7c00003f5 --- /dev/null +++ b/vendor/desandro/imagesloaded/sandbox/progress/progress.js @@ -0,0 +1,111 @@ +/* jshint strict: false */ + +var progressElem, statusElem; +var supportsProgress; +var loadedImageCount, imageCount; + +var container = document.querySelector('#image-container'); +statusElem = document.querySelector('#status'); +progressElem = document.querySelector('progress'); + +supportsProgress = progressElem && + // IE does not support progress + progressElem.toString().indexOf('Unknown') === -1; + +document.querySelector('#add').onclick = function() { + // add new images + var fragment = getItemsFragment(); + container.insertBefore( fragment, container.firstChild ); + // use ImagesLoaded + var imgLoad = imagesLoaded( container ); + imgLoad.on( 'progress', onProgress ); + imgLoad.on( 'always', onAlways ); + // reset progress counter + imageCount = imgLoad.images.length; + resetProgress(); + updateProgress( 0 ); +}; + +// reset container +document.querySelector('#reset').onclick = function() { + empty( container ); +}; + +// ----- set text helper ----- // + +var docElem = document.documentElement; +var textSetter = docElem.textContent !== undefined ? 'textContent' : 'innerText'; + +function setText( elem, value ) { + elem[ textSetter ] = value; +} + +function empty( elem ) { + while ( elem.firstChild ) { + elem.removeChild( elem.firstChild ); + } +} + +// ----- ----- // + +// return doc fragment with +function getItemsFragment() { + var fragment = document.createDocumentFragment(); + for ( var i = 0; i < 7; i++ ) { + var item = getImageItem(); + fragment.appendChild( item ); + } + return fragment; +} + +// return an

with a in it +function getImageItem() { + var item = document.createElement('li'); + item.className = 'is-loading'; + var img = document.createElement('img'); + var size = Math.random() * 3 + 1; + var width = Math.random() * 110 + 100; + width = Math.round( width * size ); + var height = Math.round( 140 * size ); + var rando = Math.ceil( Math.random() * 1000 ); + // 10% chance of broken image src + // random parameter to prevent cached images + img.src = rando < 100 ? '//foo/broken-' + rando + '.jpg' : + // use picsum for great random images + 'https://picsum.photos/' + width + '/' + height + '/' + '?random'; + item.appendChild( img ); + return item; +} + +// ----- ----- // + +function resetProgress() { + statusElem.style.opacity = 1; + loadedImageCount = 0; + if ( supportsProgress ) { + progressElem.setAttribute( 'max', imageCount ); + } +} + +function updateProgress( value ) { + if ( supportsProgress ) { + progressElem.setAttribute( 'value', value ); + } else { + // if you don't support progress elem + setText( statusElem, value + ' / ' + imageCount ); + } +} + +// triggered after each item is loaded +function onProgress( imgLoad, image ) { + // change class if the image is loaded or broken + image.img.parentNode.className = image.isLoaded ? '' : 'is-broken'; + // update progress element + loadedImageCount++; + updateProgress( loadedImageCount ); +} + +// hide status when done +function onAlways() { + statusElem.style.opacity = 0; +} -- cgit v1.2.3