1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
|
// 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 );
var selectedIndexDelta = index > this.selectedIndex ? 0 : cells.length;
this._cellAddedRemoved( index, selectedIndexDelta );
};
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 );
var selectedIndexDelta = 0;
var len = cells.length;
var i, cell;
// calculate selectedIndexDelta, easier if done in seperate loop
for ( i=0; i < len; i++ ) {
cell = cells[i];
var wasBefore = this.cells.indexOf( cell ) < this.selectedIndex;
selectedIndexDelta -= wasBefore ? 1 : 0;
}
for ( i=0; i < len; i++ ) {
cell = cells[i];
cell.remove();
// remove item from collection
utils.removeFrom( this.cells, cell );
}
if ( cells.length ) {
// update stuff
this._cellAddedRemoved( 0, selectedIndexDelta );
}
};
// updates when cells are added or removed
proto._cellAddedRemoved = function( changedCellIndex, selectedIndexDelta ) {
// TODO this math isn't perfect with grouped slides
selectedIndexDelta = selectedIndexDelta || 0;
this.selectedIndex += selectedIndexDelta;
this.selectedIndex = Math.max( 0, Math.min( this.slides.length - 1, this.selectedIndex ) );
this.cellChange( changedCellIndex, true );
// backwards compatibility
this.emitEvent( 'cellAddedRemoved', [ changedCellIndex, selectedIndexDelta ] );
};
/**
* 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 prevSlideableWidth = this.slideableWidth;
this._positionCells( changedCellIndex );
this._getWrapShiftCells();
this.setGallerySize();
this.emitEvent( 'cellChange', [ changedCellIndex ] );
// position slider
if ( this.options.freeScroll ) {
// shift x by change in slideableWidth
// TODO fix position shifts when prepending w/ freeScroll
var deltaX = prevSlideableWidth - this.slideableWidth;
this.x += deltaX * this.cellAlign;
this.positionSlider();
} else {
// do not position slider after lazy load
if ( isPositioningSlider ) {
this.positionSliderAtSelected();
}
this.select( this.selectedIndex );
}
};
// ----- ----- //
return Flickity;
}));
|
