123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161 |
- // 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;
- }));
|