// add, remove cell ( function( window, factory ) { // universal module definition /* jshint strict: false */ if ( typeof define == 'function' && define.amd ) { // AMD define( [ './flickity', 'fizzy-ui-utils/utils' ], function( Flickity, utils ) { return factory( window, Flickity, utils ); }); } else if ( typeof module == 'object' && module.exports ) { // CommonJS module.exports = factory( window, require('./flickity'), require('fizzy-ui-utils') ); } else { // browser global factory( window, window.Flickity, window.fizzyUIUtils ); } }( window, function factory( window, Flickity, utils ) { 'use strict'; // append cells to a document fragment function getCellsFragment( cells ) { var fragment = document.createDocumentFragment(); cells.forEach( function( cell ) { fragment.appendChild( cell.element ); }); return fragment; } // -------------------------- add/remove cell prototype -------------------------- // var proto = Flickity.prototype; /** * Insert, prepend, or append cells * @param {Element, Array, NodeList} elems * @param {Integer} index */ proto.insert = function( elems, index ) { var cells = this._makeCells( elems ); if ( !cells || !cells.length ) { return; } var len = this.cells.length; // default to append index = index === undefined ? len : index; // add cells with document fragment var fragment = getCellsFragment( cells ); // append to slider var isAppend = index == len; if ( isAppend ) { this.slider.appendChild( fragment ); } else { var insertCellElement = this.cells[ index ].element; this.slider.insertBefore( fragment, insertCellElement ); } // add to this.cells if ( index === 0 ) { // prepend, add to start this.cells = cells.concat( this.cells ); } else if ( isAppend ) { // append, add to end this.cells = this.cells.concat( cells ); } else { // insert in this.cells var endCells = this.cells.splice( index, len - index ); this.cells = this.cells.concat( cells ).concat( endCells ); } this._sizeCells( cells ); this.cellChange( index, true ); }; proto.append = function( elems ) { this.insert( elems, this.cells.length ); }; proto.prepend = function( elems ) { this.insert( elems, 0 ); }; /** * Remove cells * @param {Element, Array, NodeList} elems */ proto.remove = function( elems ) { var cells = this.getCells( elems ); if ( !cells || !cells.length ) { return; } var minCellIndex = this.cells.length - 1; // remove cells from collection & DOM cells.forEach( function( cell ) { cell.remove(); var index = this.cells.indexOf( cell ); minCellIndex = Math.min( index, minCellIndex ); utils.removeFrom( this.cells, cell ); }, this ); this.cellChange( minCellIndex, true ); }; /** * logic to be run after a cell's size changes * @param {Element} elem - cell's element */ proto.cellSizeChange = function( elem ) { var cell = this.getCell( elem ); if ( !cell ) { return; } cell.getSize(); var index = this.cells.indexOf( cell ); this.cellChange( index ); }; /** * logic any time a cell is changed: added, removed, or size changed * @param {Integer} changedCellIndex - index of the changed cell, optional */ proto.cellChange = function( changedCellIndex, isPositioningSlider ) { var prevSelectedElem = this.selectedElement; this._positionCells( changedCellIndex ); this._getWrapShiftCells(); this.setGallerySize(); // update selectedIndex // try to maintain position & select previous selected element var cell = this.getCell( prevSelectedElem ); if ( cell ) { this.selectedIndex = this.getCellSlideIndex( cell ); } this.selectedIndex = Math.min( this.slides.length - 1, this.selectedIndex ); this.emitEvent( 'cellChange', [ changedCellIndex ] ); // position slider this.select( this.selectedIndex ); // do not position slider after lazy load if ( isPositioningSlider ) { this.positionSliderAtSelected(); } }; // ----- ----- // return Flickity; }));