diff options
| author | Mario <mario@mariovavti.com> | 2018-11-25 10:09:26 +0100 |
|---|---|---|
| committer | Mario <mario@mariovavti.com> | 2018-11-25 10:09:26 +0100 |
| commit | c667572d3eedb0c31b29a4c469b378ccdcee0ba1 (patch) | |
| tree | 70ec4ee1febc545e49a61d7a9b83c9e2cd955d93 /vendor/desandro/imagesloaded/sandbox/progress | |
| parent | bc9f2922e0e255e97cb607d099f60c8a81c4736f (diff) | |
| download | volse-hubzilla-c667572d3eedb0c31b29a4c469b378ccdcee0ba1.tar.gz volse-hubzilla-c667572d3eedb0c31b29a4c469b378ccdcee0ba1.tar.bz2 volse-hubzilla-c667572d3eedb0c31b29a4c469b378ccdcee0ba1.zip | |
update imagesloaded to version 4.1.4 via composer
Diffstat (limited to 'vendor/desandro/imagesloaded/sandbox/progress')
| -rw-r--r-- | vendor/desandro/imagesloaded/sandbox/progress/index.html | 89 | ||||
| -rw-r--r-- | vendor/desandro/imagesloaded/sandbox/progress/progress.js | 111 |
2 files changed, 200 insertions, 0 deletions
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 @@ +<!doctype html> +<html> +<head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width" /> + + <title>progress</title> + + <style> + #image-container img { + max-height: 140px; + } + + li { + height: 140px; + min-width: 100px; + display: block; + float: left; + list-style: none; + margin: 0 5px 5px 0; + background-color: black; + background-position: center center; + background-repeat: no-repeat; + } + + li img, + #status { + -webkit-transition: opacity 0.4s; + -moz-transition: opacity 0.4s; + -ms-transition: opacity 0.4s; + transition: opacity 0.4s; + } + + li.is-loading { + background-color: black; + background-image: url('http://desandro.github.io/imagesloaded/assets/loading.gif'); + } + + li.is-broken { + background-image: url('http://desandro.github.io/imagesloaded/assets/broken.png'); + background-color: #be3730; + width: 120px; + } + + li.is-loading img, + li.is-broken img { + opacity: 0; + } + + .buttons { margin-bottom: 1.0em; } + + button { + font-size: 18px; + padding: 0.4em 0.8em; + font-family: sans-serif; + } + + #status { + opacity: 0; + position: fixed; + right: 20px; + top: 20px; + background: hsla( 0, 0%, 0%, 0.8); + padding: 20px; + border-radius: 10px; + z-index: 2; /* over other stuff */ + } + </style> + +</head> +<body> + + <h1>progress</h1> + + <div class="buttons"> + <button id="add">Add images</button> + <button id="reset">Reset</button> + </div> + <div id="status"> + <progress max="7" value="0"></progress> + </div> + <div id="image-container"></div> + +<script src="../../bower_components/ev-emitter/ev-emitter.js"></script> +<script src="../../imagesloaded.js"></script> +<script src="progress.js"></script> + +</body> +</html> 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 <li> with a <img> 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; +} |