https://studioseaview.com/app/themes/Farlo/inc/abstractions/flickity/flickity-fade.js?ver=20261002140558

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  
26  let Slide = Flickity.Slide;
27  
28  Slide.prototype.renderFadePosition = function() {
29  };
30  
31  Slide.prototype.setOpacity = function( alpha ) {
32    this.cells.forEach( ( cell ) => {
33      cell.element.style.opacity = alpha;
34    } );
35  };
36  
37  // ---- Flickity ---- //
38  
39  Flickity.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  
49  let proto = Flickity.prototype;
50  
51  let updateSlides = proto.updateSlides;
52  proto.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  
72  proto.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  
78  proto.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  
90  proto.onDragEndFade = function() {
91    // set flag
92    this.didDragEnd = true;
93  };
94  
95  proto.onActivateFade = function() {
96    if ( this.options.fade ) {
97      this.element.classList.add('is-fade');
98    }
99  };
100  
101  proto.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  
113  let positionSlider = proto.positionSlider;
114  proto.positionSlider = function() {
115    if ( !this.options.fade ) {
116      positionSlider.apply( this, arguments );
117      return;
118    }
119  
120    this.fadeSlides();
121    this.dispatchScrollEvent();
122  };
123  
124  let positionSliderAtSelected = proto.positionSliderAtSelected;
125  proto.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  
133  proto.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  
163  proto.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  
177  proto.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  
196  proto.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  
212  proto.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  
229  let _updateWrapShiftCells = proto._updateWrapShiftCells;
230  proto._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  
239  let shiftWrapCells = proto.shiftWrapCells;
240  proto.shiftWrapCells = function() {
241    if ( !this.options.fade ) {
242      shiftWrapCells.apply( this, arguments );
243    }
244  };
245  
246  return Flickity;
247  
248  } ) );
249