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