v1

2026-04-30 21:58:39 +03:00
commit aabe5fe2b7
2923 changed files with 366740 additions and 0 deletions
@@ -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>
@@ -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;
+}