162 lines
4.0 KiB
JavaScript
162 lines
4.0 KiB
JavaScript
// 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;
|
|
|
|
}));
|