🌅 create bg-lazyload

metafizzy/flickity#173

.gitignore

@@ -0,0 +1,2 @@
+bower_components/
+node_modules/

README.md

@@ -0,0 +1,69 @@
+# Flickity background lazyload
+
+Lazyload background images of selected cells.
+
+## Install
+
+npm: `npm install flickity-bg-lazyload`
+
+Bower: `bower install flickity-bg-lazyload`
+
+## Usage
+
+Set `data-flickity-bg-lazyload` attribute of the cell to the background image's url.
+
+``` js
+<div class="carousel">
+  <div class="carousel-cell" data-flickity-bg-lazyload="oranges.jpg"></div>
+  <div class="carousel-cell" data-flickity-bg-lazyload="submerge.jpg"></div>
+  <div class="carousel-cell" data-flickity-bg-lazyload="cat-nose.jpg"></div>
+</div>
+```
+
+Set `bgLazyLoad` option.
+
+```
+// lazyloads backgroung image of selected cell
+// jQuery
+var $carousel = $('.carousel').flickity({
+  bgLazyLoad: true
+});
+
+// vanilla JS
+var flkty = new Flickity( '.carousel', {
+  bgLazyLoad: true
+});
+```
+
+Set `bgLazyLoad` to a number to load images in adjacent cells.
+
+``` js
+lazyLoad: 2
+// load background images in selected cell
+// and next 2 cells
+// and previous 2 cells
+```
+
+### RequireJS
+
+``` js
+requirejs( [ 'path/to/flickity-bg-lazyload' ], function( Flickity ) {
+  var flkty = new Flickity( '.carousel', {
+    bgLazyLoad: true
+  });
+});
+```
+
+### Browserify
+
+``` js
+var Flickity = require('flickity-flickity-bg-lazyload');
+
+var flkty = new Flickity( '.carousel', {
+  bgLazyLoad: true
+});
+```
+
+---
+
+By [Metafizzy 🌈🐻](http://metafizzy.co) 

bg-lazyload.js

@@ -0,0 +1,119 @@
+/**
+ * Flickity background lazyload v1.0.0
+ * lazyload background cell images
+ */
+
+/*jshint browser: true, unused: true, undef: true */
+
+( function( window, factory ) {
+  // universal module definition
+  /*globals define, module, require */
+  if ( typeof define == 'function' && define.amd ) {
+    // AMD
+    define( [
+      'flickity/js/index',
+      'fizzy-ui-utils/utils'
+    ], factory );
+  } else if ( typeof module == 'object' && module.exports ) {
+    // CommonJS
+    module.exports = factory(
+      require('flickity'),
+      require('fizzy-ui-utils')
+    );
+  } else {
+    // browser global
+    factory(
+      window.Flickity,
+      window.fizzyUIUtils
+    );
+  }
+
+}( window, function factory( Flickity, utils ) {
+/*jshint strict: true */
+'use strict';
+
+Flickity.createMethods.push('_createBgLazyLoad');
+
+var proto = Flickity.prototype;
+
+proto._createBgLazyLoad = function() {
+  this.on( 'select', this.bgLazyLoad );
+};
+
+proto.bgLazyLoad = function() {
+  var lazyLoad = this.options.bgLazyLoad;
+  if ( !lazyLoad ) {
+    return;
+  }
+
+  // get adjacent cells, use lazyLoad option for adjacent count
+  var adjCount = typeof lazyLoad == 'number' ? lazyLoad : 0;
+  var cellElems = this.getAdjacentCellElements( adjCount );
+
+  for ( var i=0; i < cellElems.length; i++ ) {
+    var cellElem = cellElems[i];
+    this.bgLazyLoadElem( cellElem );
+    // select lazy elems in cell
+    var children = cellElem.querySelectorAll('[data-flickity-bg-lazyload]');
+    for ( var j=0; j < children.length; j++ ) {
+      this.bgLazyLoadElem( children[j] );
+    }
+  }
+};
+
+proto.bgLazyLoadElem = function( elem ) {
+  var attr = elem.getAttribute('data-flickity-bg-lazyload');
+  if ( attr ) {
+    new BgLazyLoader( elem, attr, this );
+  }
+};
+
+// -------------------------- LazyBGLoader -------------------------- //
+
+/**
+ * class to handle loading images
+ */
+function BgLazyLoader( elem, url, flickity ) {
+  this.element = elem;
+  this.url = url;
+  this.img = new Image();
+  this.flickity = flickity;
+  this.load();
+}
+
+BgLazyLoader.prototype.handleEvent = utils.handleEvent;
+
+BgLazyLoader.prototype.load = function() {
+  this.img.addEventListener( 'load', this );
+  this.img.addEventListener( 'error', this );
+  // load image
+  this.img.src = this.url;
+  // remove attr
+  this.element.removeAttribute('data-flickity-bg-lazyload');
+};
+
+BgLazyLoader.prototype.onload = function( event ) {
+  this.element.style.backgroundImage = 'url(' + this.url + ')';
+  this.complete( event, 'flickity-bg-lazyloaded' );
+};
+
+BgLazyLoader.prototype.onerror = function( event ) {
+  this.complete( event, 'flickity-bg-lazyerror' );
+};
+
+BgLazyLoader.prototype.complete = function( event, className ) {
+  // unbind events
+  this.img.removeEventListener( 'load', this );
+  this.img.removeEventListener( 'error', this );
+
+  this.element.classList.add( className );
+  this.flickity.dispatchEvent( 'bgLazyLoad', event, this.element );
+};
+
+// -----  ----- //
+
+Flickity.BgLazyLoader = BgLazyLoader;
+
+return Flickity;
+
+}));

bower.json

@@ -0,0 +1,32 @@
+{
+  "name": "flickity-bg-lazyload",
+  "authors": [
+    "David DeSandro"
+  ],
+  "description": "Flickity lazyload background images",
+  "main": "bg-lazyload.js",
+  "dependencies": {
+    "flickity": "v2",
+    "fizzy-ui-utils": "^2.0.2"
+  },
+  "devDependencies": {
+    "qunit": "^2.0.0"
+  },
+  "keywords": [
+    "flickity",
+    "background",
+    "lazyload",
+    "image"
+  ],
+  "license": "MIT",
+  "homepage": "https://github.com/metafizzy/flickity-bg-lazyload",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests",
+    "sandbox",
+    "package.json"
+  ]
+}

package.json

@@ -0,0 +1,35 @@
+{
+  "name": "flickity-bg-lazyload",
+  "version": "1.0.0",
+  "description": "Flickity lazyload background images",
+  "main": "bg-lazyload.js",
+  "dependencies": {
+    "flickity": "v2",
+    "fizzy-ui-utils": "^2.0.2"
+  },
+  "devDependencies": {
+    "qunit": "^2.0.0"
+  },
+  "directories": {
+    "test": "test"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/metafizzy/flickity-bg-lazyload.git"
+  },
+  "keywords": [
+    "flickity",
+    "lazyload",
+    "background",
+    "image"
+  ],
+  "author": "David DeSandro",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/metafizzy/flickity-bg-lazyload/issues"
+  },
+  "homepage": "https://github.com/metafizzy/flickity-bg-lazyload#readme"
+}

test/index.html

@@ -0,0 +1,83 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+
+  <title>Flickity bg lazyLoad</title>
+
+  <link rel="stylesheet" href="../bower_components/qunit/qunit/qunit.css" media="screen" />
+  <link rel="stylesheet" href="../bower_components/flickity/css/flickity.css" media="screen" />
+
+  <style>
+    body {
+      font-family: sans-serif;
+      color: #333;
+    }
+
+    .carousel {
+      border: 1px solid;
+      width: 400px;
+      margin-bottom: 40px;
+    }
+
+    .carousel .cell {
+      width: 100%;
+      height: 100px;
+      background: #F09;
+      font-size: 40px;
+      color: white;
+    }
+  </style>
+
+
+  <!-- dependencies -->
+  <script src="../bower_components/get-size/get-size.js"></script>
+  <script src="../bower_components/desandro-matches-selector/matches-selector.js"></script>
+  <script src="../bower_components/ev-emitter/ev-emitter.js"></script>
+  <script src="../bower_components/fizzy-ui-utils/utils.js"></script>
+  <script src="../bower_components/unipointer/unipointer.js"></script>
+  <script src="../bower_components/unidragger/unidragger.js"></script>
+  <script src="../bower_components/tap-listener/tap-listener.js"></script>
+  <!-- Flickity source -->
+  <script src="../bower_components/flickity/js/cell.js"></script>
+  <script src="../bower_components/flickity/js/slide.js"></script>
+  <script src="../bower_components/flickity/js/animate.js"></script>
+  <script src="../bower_components/flickity/js/flickity.js"></script>
+  <script src="../bower_components/flickity/js/drag.js"></script>
+  <script src="../bower_components/flickity/js/prev-next-button.js"></script>
+  <script src="../bower_components/flickity/js/page-dots.js"></script>
+  <script src="../bower_components/flickity/js/player.js"></script>
+  <script src="../bower_components/flickity/js/add-remove-cell.js"></script>
+  <script src="../bower_components/flickity/js/lazyload.js"></script>
+
+  <script src="../bower_components/qunit/qunit/qunit.js"></script>
+
+  <script src="../bg-lazyload.js"></script>
+  <!-- turn off accessibility for these tests, causing bugs with dragging tests -->
+  <script>
+    Flickity.defaults.accessibility = false;
+  </script>
+  <!-- unit tests -->
+  <script src="test-bg-lazyload.js"></script>
+
+</head>
+<body>
+
+  <div id="qunit"></div>
+
+  <h2>bgLazyLoad</h2>
+  <div class="carousel carousel--bg-lazyload">
+    <div class="cell" data-flickity-bg-lazyload="http://i.imgur.com/r8p3Xgq.jpg"></div>
+    <div class="cell" data-flickity-bg-lazyload="http://i.imgur.com/q9zO6tw.jpg"></div>
+    <div class="cell" data-flickity-bg-lazyload="http://i.imgur.com/bwy74ok.jpg"></div>
+    <div class="cell" data-flickity-bg-lazyload="http://i.imgur.com/hODreXI.jpg"></div>
+    <div class="cell" data-flickity-bg-lazyload="http://i.imgur.com/UORFJ3w.jpg"></div>
+    <div class="cell" data-flickity-bg-lazyload="http://i.imgur.com/bAZWoqx.jpg"></div>
+    <div class="cell" data-flickity-bg-lazyload="http://i.imgur.com/PgmEBSB.jpg"></div>
+    <div class="cell" data-flickity-bg-lazyload="http://i.imgur.com/aboaFoB.jpg"></div>
+    <div class="cell" data-flickity-bg-lazyload="http://i.imgur.com/LkmcILl.jpg"></div>
+  </div>
+
+</body>
+</html>

test/test-bg-lazyload.js

@@ -0,0 +1,31 @@
+/*jshint browser: true, undef: true, strict: true, unused: true */
+/*globals QUnit, Flickity */
+QUnit.test( 'bgLazyLoad', function( assert ) {
+  'use strict';
+
+  var done = assert.async();
+
+  var carousel = document.querySelector('.carousel--bg-lazyload')
+  var flkty = new Flickity( carousel, {
+    bgLazyLoad: 1
+  });
+
+  var loadCount = 0;
+  flkty.on( 'bgLazyLoad', function( event, elem ) {
+    loadCount++;
+
+    assert.equal( event.type, 'load', 'event.type == load' );
+    assert.ok( elem, 'elem argument there' );
+
+    // after first 2 have loaded, select 7th cell
+    if ( loadCount == 2 ) {
+      flkty.select( 6 );
+    }
+    if ( loadCount == 5 ) {
+      var loadedImgs = carousel.querySelectorAll('.flickity-bg-lazyloaded');
+      assert.equal( loadedImgs.length, '5', 'only 5 images loaded' );
+      done();
+    }
+  });
+
+});