https://www.ecs.org/wp-content/plugins/oxyextras/components/assets/flickity/flickity-fade.js?ver=1.0.0

1/*!
2 * Flickity fade v1.0.0
3 * Fade between Flickity slides
4 * https://github.com/metafizzy/flickity-fade
5 * Licensed under MIT
6 */
7
8/* jshint browser: true, undef: true, unused: true */
9
10( function( window, factory ) {
11  // universal module definition
12  /*globals define, module, require */
13  if ( typeof define == 'function' && define.amd ) {
14    // AMD
15    define( [
16      'flickity/js/index',
17      'fizzy-ui-utils/utils',
18    ], factory );
19  } else if ( typeof module == 'object' && module.exports ) {
20    // CommonJS
21    module.exports = factory(
22      require('flickity'),
23      require('fizzy-ui-utils')
24    );
25  } else {
26    // browser global
27    factory(
28      window.Flickity,
29      window.fizzyUIUtils
30    );
31  }
32
33}( this, function factory( Flickity, utils ) {
34
35// ---- Slide ---- //
36
37var Slide = Flickity.Slide;
38
39var slideUpdateTarget = Slide.prototype.updateTarget;
40Slide.prototype.updateTarget = function() {
41  slideUpdateTarget.apply( this, arguments );
42  if ( !this.parent.options.fade ) {
43    return;
44  }
45  // position cells at selected target
46  var slideTargetX = this.target - this.x;
47  var firstCellX = this.cells[0].x;
48  this.cells.forEach( function( cell ) {
49    var targetX = cell.x - firstCellX - slideTargetX;
50    cell.renderPosition( targetX );
51  });
52};
53
54Slide.prototype.setOpacity = function( alpha ) {
55  this.cells.forEach( function( cell ) {
56    cell.element.style.opacity = alpha;
57  });
58};
59
60// ---- Flickity ---- //
61
62var proto = Flickity.prototype;
63
64Flickity.createMethods.push('_createFade');
65
66proto._createFade = function() {
67  this.fadeIndex = this.selectedIndex;
68  this.prevSelectedIndex = this.selectedIndex;
69  this.on( 'select', this.onSelectFade );
70  this.on( 'dragEnd', this.onDragEndFade );
71  this.on( 'settle', this.onSettleFade );
72  this.on( 'activate', this.onActivateFade );
73  this.on( 'deactivate', this.onDeactivateFade );
74};
75
76var updateSlides = proto.updateSlides;
77proto.updateSlides = function() {
78  updateSlides.apply( this, arguments );
79  if ( !this.options.fade ) {
80    return;
81  }
82  // set initial opacity
83  this.slides.forEach( function( slide, i ) {
84    var alpha = i == this.selectedIndex ? 1 : 0;
85    slide.setOpacity( alpha );
86  }, this );
87};
88
89/* ---- events ---- */
90
91proto.onSelectFade = function() {
92  // in case of resize, keep fadeIndex within current count
93  this.fadeIndex = Math.min( this.prevSelectedIndex, this.slides.length - 1 );
94  this.prevSelectedIndex = this.selectedIndex;
95};
96
97proto.onSettleFade = function() {
98  delete this.didDragEnd;
99  if ( !this.options.fade ) {
100    return;
101  }
102  // set full and 0 opacity on selected & faded slides
103  this.selectedSlide.setOpacity( 1 );
104  var fadedSlide = this.slides[ this.fadeIndex ];
105  if ( fadedSlide && this.fadeIndex != this.selectedIndex ) {
106    this.slides[ this.fadeIndex ].setOpacity( 0 );
107  }
108};
109
110proto.onDragEndFade = function() {
111  // set flag
112  this.didDragEnd = true;
113};
114
115proto.onActivateFade = function() {
116  if ( this.options.fade ) {
117    this.element.classList.add('is-fade');
118  }
119};
120
121proto.onDeactivateFade = function() {
122  if ( !this.options.fade ) {
123    return;
124  }
125  this.element.classList.remove('is-fade');
126  // reset opacity
127  this.slides.forEach( function( slide ) {
128    slide.setOpacity('');
129  });
130};
131
132/* ---- position & fading ---- */
133
134var positionSlider = proto.positionSlider;
135proto.positionSlider = function() {
136  if ( !this.options.fade ) {
137    positionSlider.apply( this, arguments );
138    return;
139  }
140
141  this.fadeSlides();
142  this.dispatchScrollEvent();
143};
144
145var positionSliderAtSelected = proto.positionSliderAtSelected;
146proto.positionSliderAtSelected = function() {
147  if ( this.options.fade ) {
148    // position fade slider at origin
149    this.setTranslateX( 0 );
150  }
151  positionSliderAtSelected.apply( this, arguments );
152};
153
154proto.fadeSlides = function() {
155  if ( this.slides.length < 2 ) {
156    return;
157  }
158  // get slides to fade-in & fade-out
159  var indexes = this.getFadeIndexes();
160  var fadeSlideA = this.slides[ indexes.a ];
161  var fadeSlideB = this.slides[ indexes.b ];
162  var distance = this.wrapDifference( fadeSlideA.target, fadeSlideB.target );
163  var progress = this.wrapDifference( fadeSlideA.target, -this.x );
164  progress = progress / distance;
165
166  fadeSlideA.setOpacity( 1 - progress );
167  fadeSlideB.setOpacity( progress );
168
169  // hide previous slide
170  var fadeHideIndex = indexes.a;
171  if ( this.isDragging ) {
172    fadeHideIndex = progress > 0.5 ? indexes.a : indexes.b;
173  }
174  var isNewHideIndex = this.fadeHideIndex != undefined &&
175    this.fadeHideIndex != fadeHideIndex &&
176    this.fadeHideIndex != indexes.a &&
177    this.fadeHideIndex != indexes.b;
178  if ( isNewHideIndex ) {
179    // new fadeHideSlide set, hide previous
180    this.slides[ this.fadeHideIndex ].setOpacity( 0 );
181  }
182  this.fadeHideIndex = fadeHideIndex;
183};
184
185proto.getFadeIndexes = function() {
186  if ( !this.isDragging && !this.didDragEnd ) {
187    return {
188      a: this.fadeIndex,
189      b: this.selectedIndex,
190    };
191  }
192  if ( this.options.wrapAround ) {
193    return this.getFadeDragWrapIndexes();
194  } else {
195    return this.getFadeDragLimitIndexes();
196  }
197};
198
199proto.getFadeDragWrapIndexes = function() {
200  var distances = this.slides.map( function( slide, i ) {

201    return this.getSlideDistance( -this.x, i );
202  }, this );
203  var absDistances = distances.map( function( distance ) {
204    return Math.abs( distance );
205  });
206  var minDistance = Math.min.apply( Math, absDistances );
207  var closestIndex = absDistances.indexOf( minDistance );
208  var distance = distances[ closestIndex ];
209  var len = this.slides.length;
210
211  var delta = distance >= 0 ? 1 : -1;
212  return {
213    a: closestIndex,
214    b: utils.modulo( closestIndex + delta, len ),
215  };
216};
217
218proto.getFadeDragLimitIndexes = function() {
219  // calculate closest previous slide
220  var dragIndex = 0;
221  for ( var i=0; i < this.slides.length - 1; i++ ) {
222    var slide = this.slides[i];
223    if ( -this.x < slide.target ) {
224      break;
225    }
226    dragIndex = i;
227  }
228  return {
229    a: dragIndex,
230    b: dragIndex + 1,
231  };
232};
233
234proto.wrapDifference = function( a, b ) {
235  var diff = b - a;
236
237  if ( !this.options.wrapAround ) {
238    return diff;
239  }
240
241  var diffPlus = diff + this.slideableWidth;
242  var diffMinus = diff - this.slideableWidth;
243  if ( Math.abs( diffPlus ) < Math.abs( diff ) ) {
244    diff = diffPlus;
245  }
246  if ( Math.abs( diffMinus ) < Math.abs( diff ) ) {
247    diff = diffMinus;
248  }
249  return diff;
250};
251
252// ---- wrapAround ---- //
253
254var _getWrapShiftCells = proto._getWrapShiftCells;
255proto._getWrapShiftCells = function() {
256  if ( !this.options.fade ) {
257    _getWrapShiftCells.apply( this, arguments );
258  }
259};
260
261var shiftWrapCells = proto.shiftWrapCells;
262proto.shiftWrapCells = function() {
263  if ( !this.options.fade ) {
264    shiftWrapCells.apply( this, arguments );
265  }
266};
267
268return Flickity;
269
270}));