first commit

Author: GianlucaGuarini

.eslintrc

@@ -0,0 +1,3 @@
+extends: "@gianlucaguarini/eslint-config"
+env:
+  mocha: true

.gitignore

@@ -0,0 +1,40 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# generated files
+index.js

.travis.yml

@@ -0,0 +1,21 @@
+language: node_js
+node_js:
+   - "6.*"
+
+branches:
+  only:
+    - master
+
+before_install:
+  - npm i [email protected]
+  - npm i [email protected]
+  - npm i @gianlucaguarini/[email protected]
+  - npm i [email protected]
+
+before_script:
+  - npm run build
+
+notifications:
+    email: false
+
+sudo: false

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Gianluca Guarini
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,103 @@
+# bianco-images-loader
+
+[![Build Status][travis-image]][travis-url]
+
+[![NPM version][npm-version-image]][npm-url]
+[![NPM downloads][npm-downloads-image]][npm-url]
+[![MIT License][license-image]][license-url]
+
+
+
+## Usage
+
+
+#### Load a single image
+```js
+import { loadImage } from 'bianco-images-loader'
+
+loadImage('path/to/the/image.jpg')
+  .then(img => {
+    document.body.appendChild(img)
+  })
+  .catch(function(error) {
+    // there was an error loading the image
+  })
+
+```
+
+Or also DOM nodes:
+
+```js
+import $ from 'bianco-query'
+import { loadImage } from 'bianco-images-loader'
+
+loadImage($('img.cool'))
+  .then(img => img.classList.add('loaded'))
+```
+
+#### Load a multiple images
+
+```js
+import { loadImages } from 'bianco-images-loader'
+
+loadImages(['path/to/the/image1.jpg', 'path/to/the/image2.jpg'])
+  .then(img => document.body.appendChild(img))
+  .catch(error => {
+    // there was an error loading one of images
+  })
+
+```
+
+Or also...
+
+```js
+import $ from 'bianco-query'
+import { loadImages } from 'bianco-images-loader'
+
+loadImages($('img', '.main-content'))
+  .then(img => img.classList.add('loaded'))
+  .catch(error => {
+    // there was an error loading one of images
+  })
+
+```
+
+#### Load sequentially images using a generator
+
+```js
+import { loadImagesGen } from 'bianco-images-loader'
+
+const loader = loadImagesGen([
+  'path/to/the/image1.jpg',
+  'path/to/the/image2.jpg',
+  'path/to/the/image3.jpg'
+])
+
+// load the first image
+loader.next().value.then(img => {
+  // do something with the image
+
+  // do something with the remaining images to load
+  for (let promise of loader) {
+    promise.then(i => {
+      // do whathever you want here
+    })
+  }
+})
+```
+
+## API
+
+- `loadImage(String|Image)` load an image returning a promise
+- `loadImages(Array|NodeList)` load in parallel multiple images returning a promise
+- `loadImagesGen(Array|NodeList)` load multiple images sequentially returning a ES6 generator
+
+[travis-image]:https://img.shields.io/travis/biancojs/images-loader.svg?style=flat-square
+[travis-url]:https://travis-ci.org/biancojs/images-loader
+
+[license-image]:http://img.shields.io/badge/license-MIT-000000.svg?style=flat-square
+[license-url]:LICENSE.txt
+
+[npm-version-image]:http://img.shields.io/npm/v/bianco-images-loader.svg?style=flat-square
+[npm-downloads-image]:http://img.shields.io/npm/dm/bianco-images-loader.svg?style=flat-square
+[npm-url]:https://npmjs.org/package/bianco-images-loader

index.next.js

@@ -0,0 +1,49 @@
+import domToArray from 'bianco.dom-to-array'
+
+/**
+ * Preload any image
+ * @param   { String|HTMLElement } img - Path to the image or image object
+ * @returns { Promise } a promise that will be resolved when the image will be completely loaded
+ */
+export function loadImage(img) {
+  const isUrl = typeof img === 'string'
+  let i = isUrl ? document.createElement('img') : img
+
+  // this image was already loaded
+  if (!isUrl && i.complete) return Promise.resolve(i)
+
+  // the image reference will set to null
+  // to avoid memory leaks
+  return new Promise((resolve, reject) => {
+    i.onload = _ => resolve(i)
+    i.onerror = i.onabort = reject
+    if (isUrl) i.src = img
+  })
+}
+
+/**
+ * Load in parallel a collection of images
+ * @param   { Array|NodeList } imgs - array of strings or <img> HTML elements
+ * @returns { Promise } a promise that will be resolved when all the images will be loaded
+ */
+export function loadImages(imgs) {
+  return Promise.all(domToArray(imgs).map(loadImage))
+}
+
+/**
+ * Load sequentially a collection of images
+ * @param  { Array|NodeList } imgs - array of strings or <img> HTML elements
+ * @yields { Promise } a promise that will be resolved when the image will be completely loaded
+ */
+export function * loadImagesGen (imgs) {
+  imgs = domToArray(imgs)
+  for (let img of imgs) {
+    yield loadImage(img)
+  }
+}
+
+export default {
+  loadImage,
+  loadImages,
+  loadImagesGen
+}

package.json

@@ -0,0 +1,42 @@
+{
+  "name": "bianco.images-loader",
+  "version": "0.0.0",
+  "description": "",
+  "main": "index.js",
+  "jsnext:main": "index.next.js",
+  "scripts": {
+    "prepublish": "npm run build && npm test",
+    "lint": "eslint index.next.js test.js rollup.config.js",
+    "build": "rollup -c",
+    "test": "npm run lint && mocha test.js"
+  },
+  "files": [
+    "index.js",
+    "index.next.js"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/biancojs/images-loader.git"
+  },
+  "keywords": [
+    "es6",
+    "es2015",
+    "images loader",
+    "img",
+    "loader",
+    "generators"
+  ],
+  "author": "Gianluca Guarini <[email protected]> (http://gianlucaguarini.com)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/biancojs/images-loader/issues"
+  },
+  "homepage": "https://github.com/biancojs/images-loader#readme",
+  "devDependencies": {
+    "jsdom": "9.5.0",
+    "jsdom-global": "2.1.0"
+  },
+  "dependencies": {
+    "bianco.dom-to-array": "^0.0.4"
+  }
+}

rollup.config.js

@@ -0,0 +1,9 @@
+export default {
+  entry: 'index.next.js',
+  targets: [
+    {
+      dest: 'index.js',
+      format: 'cjs'
+    }
+  ]
+}

test.js

@@ -0,0 +1,66 @@
+require('jsdom-global')()
+const assert = require('assert')
+const jsdom = require('jsdom')
+const body = document.body
+const { loadImage, loadImages, loadImagesGen } = require('./')
+const pathGen = pathGenerator()
+
+function * pathGenerator() {
+  let i = 1
+  while (i) {
+    yield `data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7?${ i++ }`
+  }
+}
+
+describe('Bianco images-loader', function() {
+  beforeEach(function () {
+    var div = document.createElement('div')
+    div.innerHTML = `
+      <img src=''>
+    `
+    body.appendChild(div)
+  })
+
+  it('It can load images in the DOM', function(done) {
+    const img = document.querySelector('img')
+    loadImage(img).then(function(i) {
+      assert.equal(typeof i.src, 'string')
+      done()
+    })
+    img.src = pathGen.next().value
+  })
+
+// this test does not work in jsdom somehow
+/*  it('It can throw properly the errors', function(done) {
+    const img = document.querySelector('img')
+    loadImage(img).catch(function(e) {
+      assert.equal(typeof e, Error)
+      done()
+    })
+    img.src = pathGen.next().value
+  })*/
+
+  it('It can load arrays of images urls', function(done) {
+    loadImages([pathGen.next().value, pathGen.next().value]).then(function(imgs) {
+      assert.equal(imgs.length, 2)
+      done()
+    })
+  })
+
+  it('It can load images sequentially with a generator', function(done) {
+    const gen = loadImagesGen([pathGen.next().value, pathGen.next().value])
+    gen.next().value.then(function (i) {
+      assert.equal(typeof i.src, 'string')
+      done()
+    })
+  })
+
+  it('It can loop generator sequences', function(done) {
+    const gen = loadImagesGen([pathGen.next().value, pathGen.next().value])
+    const promises = []
+    for (let p of gen) {
+      promises.push(p)
+    }
+    Promise.all(promises).then(_ => done())
+  })
+})