From 836dab30585b42f00dc906d477535165f52fa7bf Mon Sep 17 00:00:00 2001 From: Arndt von Lucadou Date: Mon, 1 Aug 2016 14:20:07 +0200 Subject: [PATCH] LazyLoad only visible cells depending on the cellAlign option --- dist/flickity.pkgd.js | 55 +++++++++++++++++++++++++-------------- dist/flickity.pkgd.min.js | 4 +-- js/flickity.js | 4 ++- 3 files changed, 40 insertions(+), 23 deletions(-) diff --git a/dist/flickity.pkgd.js b/dist/flickity.pkgd.js index c5cbff6e..b1b37e7e 100644 --- a/dist/flickity.pkgd.js +++ b/dist/flickity.pkgd.js @@ -11,20 +11,19 @@ /** * Bridget makes jQuery widgets - * v2.0.0 + * v2.0.1 * MIT license */ /* jshint browser: true, strict: true, undef: true, unused: true */ ( function( window, factory ) { - 'use strict'; - /* globals define: false, module: false, require: false */ - + // universal module definition + /*jshint strict: false */ /* globals define, module, require */ if ( typeof define == 'function' && define.amd ) { // AMD define( 'jquery-bridget/jquery-bridget',[ 'jquery' ], function( jQuery ) { - factory( window, jQuery ); + return factory( window, jQuery ); }); } else if ( typeof module == 'object' && module.exports ) { // CommonJS @@ -1228,6 +1227,13 @@ function Flickity( element, options ) { return; } this.element = queryElement; + // do not initialize twice on same element + if ( this.element.flickityGUID ) { + var instance = instances[ this.element.flickityGUID ]; + instance.option( options ); + return instance; + } + // add jQuery if ( jQuery ) { this.$element = jQuery( this.element ); @@ -1844,7 +1850,9 @@ proto.getAdjacentCellElements = function( adjCount, index ) { } var cellElems = []; - for ( var i = index - adjCount; i <= index + adjCount ; i++ ) { + var min = this.options.cellAlign === 'left' ? index : index - adjCount; + var max = this.options.cellAlign === 'right' ? index : index + adjCount; + for ( var i = min; i <= max ; i++ ) { var slideIndex = this.options.wrapAround ? utils.modulo( i, len ) : i; var slide = this.slides[ slideIndex ]; if ( slide ) { @@ -4045,7 +4053,7 @@ return Flickity; }); /*! - * Flickity asNavFor v2.0.0 + * Flickity asNavFor v2.0.1 * enable asNavFor for Flickity */ @@ -4059,26 +4067,22 @@ return Flickity; define( 'flickity-as-nav-for/as-nav-for',[ 'flickity/js/index', 'fizzy-ui-utils/utils' - ], function( classie, Flickity, utils ) { - return factory( window, classie, Flickity, utils ); - }); + ], factory ); } else if ( typeof module == 'object' && module.exports ) { // CommonJS module.exports = factory( - window, require('flickity'), require('fizzy-ui-utils') ); } else { // browser global window.Flickity = factory( - window, window.Flickity, window.fizzyUIUtils ); } -}( window, function factory( window, Flickity, utils ) { +}( window, function factory( Flickity, utils ) { @@ -4124,27 +4128,38 @@ proto.setNavCompanion = function( elem ) { // click this.on( 'staticClick', this.onNavStaticClick ); - this.navCompanionSelect(); + this.navCompanionSelect( true ); }; -proto.navCompanionSelect = function() { +proto.navCompanionSelect = function( isInstant ) { if ( !this.navCompanion ) { return; } // select slide that matches first cell of slide var selectedCell = this.navCompanion.selectedCells[0]; - var cellIndex = this.navCompanion.cells.indexOf( selectedCell ); - this.selectCell( cellIndex ); + var firstIndex = this.navCompanion.cells.indexOf( selectedCell ); + var lastIndex = firstIndex + this.navCompanion.selectedCells.length - 1; + var selectIndex = Math.floor( lerp( firstIndex, lastIndex, + this.navCompanion.cellAlign ) ); + this.selectCell( selectIndex, false, isInstant ); // set nav selected class this.removeNavSelectedElements(); // stop if companion has more cells than this one - if ( cellIndex >= this.cells.length ) { + if ( selectIndex >= this.cells.length ) { return; } - this.navSelectedElements = this.slides[ this.selectedIndex ].getCellElements(); + + var selectedCells = this.cells.slice( firstIndex, lastIndex + 1 ); + this.navSelectedElements = selectedCells.map( function( cell ) { + return cell.element; + }); this.changeNavSelectedClass('add'); }; +function lerp( a, b, t ) { + return ( b - a ) * t + a; +} + proto.changeNavSelectedClass = function( method ) { this.navSelectedElements.forEach( function( navElem ) { navElem.classList[ method ]('is-nav-selected'); @@ -4152,7 +4167,7 @@ proto.changeNavSelectedClass = function( method ) { }; proto.activateAsNavFor = function() { - this.navCompanionSelect(); + this.navCompanionSelect( true ); }; proto.removeNavSelectedElements = function() { diff --git a/dist/flickity.pkgd.min.js b/dist/flickity.pkgd.min.js index c9ea64b5..d48c4f9e 100644 --- a/dist/flickity.pkgd.min.js +++ b/dist/flickity.pkgd.min.js @@ -9,5 +9,5 @@ * Copyright 2016 Metafizzy */ -!function(t,e){"use strict";"function"==typeof define&&define.amd?define("jquery-bridget/jquery-bridget",["jquery"],function(i){e(t,i)}):"object"==typeof module&&module.exports?module.exports=e(t,require("jquery")):t.jQueryBridget=e(t,t.jQuery)}(window,function(t,e){"use strict";function i(i,o,a){function h(t,e,n){var s,o="$()."+i+'("'+e+'")';return t.each(function(t,h){var l=a.data(h,i);if(!l)return void r(i+" not initialized. Cannot call methods, i.e. "+o);var c=l[e];if(!c||"_"==e.charAt(0))return void r(o+" is not a valid method");var d=c.apply(l,n);s=void 0===s?d:s}),void 0!==s?s:t}function l(t,e){t.each(function(t,n){var s=a.data(n,i);s?(s.option(e),s._init()):(s=new o(n,e),a.data(n,i,s))})}a=a||e||t.jQuery,a&&(o.prototype.option||(o.prototype.option=function(t){a.isPlainObject(t)&&(this.options=a.extend(!0,this.options,t))}),a.fn[i]=function(t){if("string"==typeof t){var e=s.call(arguments,1);return h(this,t,e)}return l(this,t),this},n(a))}function n(t){!t||t&&t.bridget||(t.bridget=i)}var s=Array.prototype.slice,o=t.console,r="undefined"==typeof o?function(){}:function(t){o.error(t)};return n(e||t.jQuery),i}),function(t,e){"function"==typeof define&&define.amd?define("ev-emitter/ev-emitter",e):"object"==typeof module&&module.exports?module.exports=e():t.EvEmitter=e()}("undefined"!=typeof window?window:this,function(){function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var i=this._events=this._events||{},n=i[t]=i[t]||[];return n.indexOf(e)==-1&&n.push(e),this}},e.once=function(t,e){if(t&&e){this.on(t,e);var i=this._onceEvents=this._onceEvents||{},n=i[t]=i[t]||{};return n[e]=!0,this}},e.off=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=i.indexOf(e);return n!=-1&&i.splice(n,1),this}},e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=0,s=i[n];e=e||[];for(var o=this._onceEvents&&this._onceEvents[t];s;){var r=o&&o[s];r&&(this.off(t,s),delete o[s]),s.apply(this,e),n+=r?0:1,s=i[n]}return this}},t}),function(t,e){"use strict";"function"==typeof define&&define.amd?define("get-size/get-size",[],function(){return e()}):"object"==typeof module&&module.exports?module.exports=e():t.getSize=e()}(window,function(){"use strict";function t(t){var e=parseFloat(t),i=t.indexOf("%")==-1&&!isNaN(e);return i&&e}function e(){}function i(){for(var t={width:0,height:0,innerWidth:0,innerHeight:0,outerWidth:0,outerHeight:0},e=0;e