https://ccsmed.com/wp-content/themes/view/dist/flickity-fade.js?ver=1.2

1/**
2 * Flickity fade v2.0.0
3 * Fade between Flickity slides
4 */
5
6( function( window, factory ) {
7  // universal module definition
8  if ( typeof module == 'object' && module.exports ) {
9    // CommonJS
10    module.exports = factory(
11        require('flickity'),
12        require('fizzy-ui-utils'),
13    );
14  } else {
15    // browser global
16    factory(
17        window.Flickity,
18        window.fizzyUIUtils,
19    );
20  }
21
22}( typeof window != 'undefined' ? window : this, function factory( Flickity, utils ) {
23
24// ---- Slide ---- //
25
26let Slide = Flickity.Slide;
27
28Slide.prototype.renderFadePosition = function() {
29};
30
31Slide.prototype.setOpacity = function( alpha ) {
32  this.cells.forEach( ( cell ) => {
33    cell.element.style.opacity = alpha;
34  } );
35};
36
37// ---- Flickity ---- //
38
39Flickity.create.fade = function() {
40  this.fadeIndex = this.selectedIndex;
41  this.prevSelectedIndex = this.selectedIndex;
42  this.on( 'select', this.onSelectFade );
43  this.on( 'dragEnd', this.onDragEndFade );
44  this.on( 'settle', this.onSettleFade );
45  this.on( 'activate', this.onActivateFade );
46  this.on( 'deactivate', this.onDeactivateFade );
47};
48
49let proto = Flickity.prototype;
50
51let updateSlides = proto.updateSlides;
52proto.updateSlides = function() {
53  updateSlides.apply( this, arguments );
54  if ( !this.options.fade ) return;
55
56  this.slides.forEach( ( slide, i ) => {
57    // position cells at selected target
58    let slideTargetX = slide.target - slide.x;
59    let firstCellX = slide.cells[0].x;
60    slide.cells.forEach( ( cell ) => {
61      let targetX = cell.x - firstCellX - slideTargetX;
62      this._renderCellPosition( cell, targetX );
63    } );
64    // set initial opacity
65    let alpha = i === this.selectedIndex ? 1 : 0;
66    slide.setOpacity( alpha );
67  } );
68};
69
70/* ---- events ---- */
71
72proto.onSelectFade = function() {
73  // in case of resize, keep fadeIndex within current count
74  this.fadeIndex = Math.min( this.prevSelectedIndex, this.slides.length - 1 );
75  this.prevSelectedIndex = this.selectedIndex;
76};
77
78proto.onSettleFade = function() {
79  delete this.didDragEnd;
80  if ( !this.options.fade ) return;
81
82  // set full and 0 opacity on selected & faded slides
83  this.selectedSlide.setOpacity( 1 );
84  let fadedSlide = this.slides[ this.fadeIndex ];
85  if ( fadedSlide && this.fadeIndex !== this.selectedIndex ) {
86    this.slides[ this.fadeIndex ].setOpacity( 0 );
87  }
88};
89
90proto.onDragEndFade = function() {
91  // set flag
92  this.didDragEnd = true;
93};
94
95proto.onActivateFade = function() {
96  if ( this.options.fade ) {
97    this.element.classList.add('is-fade');
98  }
99};
100
101proto.onDeactivateFade = function() {
102  if ( !this.options.fade ) return;
103
104  this.element.classList.remove('is-fade');
105  // reset opacity
106  this.slides.forEach( ( slide ) => {
107    slide.setOpacity('');
108  } );
109};
110
111/* ---- position & fading ---- */
112
113let positionSlider = proto.positionSlider;
114proto.positionSlider = function() {
115  if ( !this.options.fade ) {
116    positionSlider.apply( this, arguments );
117    return;
118  }
119
120  this.fadeSlides();
121  this.dispatchScrollEvent();
122};
123
124let positionSliderAtSelected = proto.positionSliderAtSelected;
125proto.positionSliderAtSelected = function() {
126  if ( this.options.fade ) {
127    // position fade slider at origin
128    this.setTranslateX( 0 );
129  }
130  positionSliderAtSelected.apply( this, arguments );
131};
132
133proto.fadeSlides = function() {
134  if ( this.slides.length < 2 ) return;
135
136  // get slides to fade-in & fade-out
137  let indexes = this.getFadeIndexes();
138  let fadeSlideA = this.slides[ indexes.a ];
139  let fadeSlideB = this.slides[ indexes.b ];
140  let distance = this.wrapDifference( fadeSlideA.target, fadeSlideB.target );
141  let progress = this.wrapDifference( fadeSlideA.target, -this.x );
142  progress /= distance;
143
144  fadeSlideA.setOpacity( 1 - progress );
145  fadeSlideB.setOpacity( progress );
146
147  // hide previous slide
148  let fadeHideIndex = indexes.a;
149  if ( this.isDragging ) {
150    fadeHideIndex = progress > 0.5 ? indexes.a : indexes.b;
151  }
152  let isNewHideIndex = this.fadeHideIndex !== undefined &&
153    this.fadeHideIndex !== fadeHideIndex &&
154    this.fadeHideIndex !== indexes.a &&
155    this.fadeHideIndex !== indexes.b;
156  if ( isNewHideIndex ) {
157    // new fadeHideSlide set, hide previous
158    this.slides[ this.fadeHideIndex ].setOpacity( 0 );
159  }
160  this.fadeHideIndex = fadeHideIndex;
161};
162
163proto.getFadeIndexes = function() {
164  if ( !this.isDragging && !this.didDragEnd ) {
165    return {
166      a: this.fadeIndex,
167      b: this.selectedIndex,
168    };
169  }
170  if ( this.options.wrapAround ) {
171    return this.getFadeDragWrapIndexes();
172  } else {
173    return this.getFadeDragLimitIndexes();
174  }
175};
176
177proto.getFadeDragWrapIndexes = function() {
178  let distances = this.slides.map( function( slide, i ) {
179    return this.getSlideDistance( -this.x, i );
180  }, this );
181  let absDistances = distances.map( function( distance ) {
182    return Math.abs( distance );
183  } );
184  let minDistance = Math.min( ...absDistances );
185  let closestIndex = absDistances.indexOf( minDistance );
186  let distance = distances[ closestIndex ];
187  let len = this.slides.length;
188
189  let delta = distance >= 0 ? 1 : -1;
190  return {
191    a: closestIndex,
192    b: utils.modulo( closestIndex + delta, len ),
193  };
194};
195
196proto.getFadeDragLimitIndexes = function() {
197  // calculate closest previous slide
198  let dragIndex = 0;
199  for ( let i = 0; i < this.slides.length - 1; i++ ) {
200    let slide = this.slides[i];
201    if ( -this.x < slide.target ) {
202      break;
203    }
204    dragIndex = i;
205  }
206  return {
207    a: dragIndex,
208    b: dragIndex + 1,
209  };
210};
211
212proto.wrapDifference = function( a, b ) {
213  let diff = b - a;
214  if ( !this.options.wrapAround ) return diff;
215
216  let diffPlus = diff + this.slideableWidth;
217  let diffMinus = diff - this.slideableWidth;
218  if ( Math.abs( diffPlus ) < Math.abs( diff ) ) {
219    diff = diffPlus;
220  }
221  if ( Math.abs( diffMinus ) < Math.abs( diff ) ) {
222    diff = diffMinus;
223  }
224  return diff;
225};
226
227// ---- wrapAround ---- //
228
229let _updateWrapShiftCells = proto._updateWrapShiftCells;
230proto._updateWrapShiftCells = function() {
231  if ( this.options.fade ) {
232    // update isWrapping
233    this.isWrapping = this.getIsWrapping();
234  } else {
235    _updateWrapShiftCells.apply( this, arguments );
236  }
237};
238
239let shiftWrapCells = proto.shiftWrapCells;
240proto.shiftWrapCells = function() {
241  if ( !this.options.fade ) {
242    shiftWrapCells.apply( this, arguments );
243  }
244};
245
246return Flickity;
247
248} ) );