diff options
Diffstat (limited to 'vendor/desandro/imagesloaded/sandbox')
4 files changed, 280 insertions, 0 deletions
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 @@ +<!doctype html> +<html> +<head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width" /> + + <title>background</title> + + <!-- put in separate folder so JS path is different from CSS path --> + <link rel="stylesheet" href="css/background.css" > + +</head> +<body> + + <h1>background</h1> + +<div class="box orange-tree"></div> + +<div class="box thunder-cloud"></div> + +<div class="box multi1"></div> + +<div class="box blue"></div> + +<script src="../../bower_components/ev-emitter/ev-emitter.js"></script> +<script src="../../imagesloaded.js"></script> +<script> + +var imgLoad0 = imagesLoaded( '.orange-tree', { background: true }, function() { + console.log('orange tree bg images loaded', imgLoad0.images.length ); +}); + +var imgLoad1 = imagesLoaded( '.thunder-cloud', { background: true }, function() { + console.log('thunder cloud bg images loaded', imgLoad1.images.length); +}); + +var imgLoad2 = imagesLoaded( '.multi1', { background: true }, function() { + console.log('multi1 bg images loaded', imgLoad2.images.length); +}); + +var imgLoad3 = imagesLoaded( '.box', { background: true }, function() { + console.log('.box bg images loaded', imgLoad3.images.length); +}); +imgLoad3.on('progress', function( instance, image, element ) { + console.log( 'progress on .box', image.img.src, element.className ); +}); + +</script> + +</body> +</html> 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; +} |