https://oldofrediresidence.it/site/assets/unify/js/components/text-animation/hs.text-slideshow.js

1/**
2 * Text Slideshow wrapper.
3 *
4 * @author Htmlstream
5 * @version 1.0
6 * @requires charming.js, anime.js, textfx.js
7 *
8 */
9;
10(function($) {
11  'use strict';
12
13  $.HSCore.components.HSTextSlideshow = {
14
15    /**
16     * Base configuration.
17     *
18     * @var Object _baseConfig
19     */
20    _baseConfig: {
21      autoplay: false,
22      autoplayDelay: 3000,
23      slideSelector: '.u-text-slideshow__slide',
24      activeSlideClass: 'u-text-slideshow__slide--current',
25      slideTargetSelector: '.u-text-slideshow__slide-target'
26    },
27
28    /**
29     * Collection of all instances of the page.
30     *
31     * @var jQuery _pageCollection
32     */
33    _pageCollection: $(),
34
35
36    /**
37     * Initialization of Slideshow.
38     *
39     * @param jQuery collection (optional)
40     * @param Object config (optional)
41     *
42     * @return jQuery pageCollection - collection of initialized items.
43     */
44    init: function(collection, config) {
45
46      if(!collection || !collection.length) return this._pageCollection;
47
48      var self = this;
49
50      config = config && $.isPlainObject(config) ? $.extend(true, {}, this._baseConfig, config) : this._baseConfig;
51
52
53      collection.each(function(i, el){
54
55        var $this = $(this);
56
57        if(!$this.data('HSTextSlideshow')) {
58
59          $this.data('HSTextSlideshow', new HSTextSlideshow($this, $.extend(true, {}, config, {
60            effect: $this.data('effect') ? $this.data('effect') : 'fx1'
61          })));
62          self._pageCollection = self._pageCollection.add($this);
63
64        }
65
66
67      });
68
69      return this._pageCollection;
70    }
71
72  }
73
74  /**
75   * Constructor function of Slideshow.
76   *
77   * @param jQuery element
78   * @param Object config
79   *
80   * @return undefined
81   */
82  function HSTextSlideshow(element, config) {
83    this.config = config && $.isPlainObject(config) ? config : {};
84
85    this.element = element;
86
87    this.config = $.extend(true, {}, this.config, this.element.data() );
88
89    var jCurrentSlide = this.element.find('.' + this.config.activeSlideClass);
90
91    this.currentIndex = this.config.currentIndex = jCurrentSlide.length ? jCurrentSlide.index() : 0;
92
93    this.slides = [];
94
95    if( this.element.attr('id') ) this._initNavigation();
96
97    this._initSlides();
98
99    if( this.config.autoplay ) {
100      this._autoplayStart();
101    }
102  }
103
104  /**
105   *
106   *
107   * @param
108   *
109   * @return
110   */
111  HSTextSlideshow.prototype._initSlides = function() {
112
113    var self = this,
114        jSlides = this.element.find(this.config.slideSelector);
115
116    if(jSlides.length) {
117      jSlides.each(function(i, el){
118
119        self.addSlide( $(el), self.config );
120
121      });
122    }
123
124  }
125
126  /**
127   *
128   *
129   * @param
130   *
131   * @return
132   */
133  HSTextSlideshow.prototype._updateCarouselBounds = function() {
134
135    var self = this;
136
137    this.element.stop().animate({
138      'width': self.slides[self.currentIndex].getElement().outerWidth() + 1
139    }, {
140      duration: 300,
141      easing: 'linear'
142    });
143
144  }
145
146  /**
147   *
148   *
149   * @param
150   *
151   * @return
152   */
153  HSTextSlideshow.prototype._autoplayStart = function() {
154
155    var self = this;
156
157    this.autoplayTimeoutId = setTimeout( function autoplay() {
158
159      self.next();
160
161      self.autoplayTimeoutId = setTimeout( autoplay, self.config.autoplayDelay );
162
163    }, this.config.autoplayDelay );
164
165  }
166
167  /**
168   *
169   *
170   * @param
171   *
172   * @return
173   */
174  HSTextSlideshow.prototype._autoplayStop = function() {
175
176    clearTimeout( this.autoplayTimeoutId );
177
178  }
179
180  /**
181   *
182   *
183   * @param
184   *
185   * @return
186   */
187  HSTextSlideshow.prototype._initNavigation = function() {
188
189    var self = this,
190        navElements = $( '[data-target="#'+this.element.attr('id')+'"]' );
191
192    navElements.on('click', function(e){
193
194      var $this = $(this);
195
196      if( $this.data('action').toUpperCase() == 'PREV' ) {
197        if( self.config.autoplay ) {
198          self._autoplayStop();
199          self._autoplayStart();
200        }
201        self.prev();
202      }
203      else if( $this.data('action').toUpperCase() == 'NEXT' ) {
204        if( self.config.autoplay ) {
205          self._autoplayStop();
206          self._autoplayStart();
207        }
208        self.next();
209      }
210
211      e.preventDefault();
212    });
213
214    navElements.each(function(i, el){
215
216      var $this = $(el);
217
218      if( $this.data('action') ) {
219        self['_initAction' + $this.data('action').toUpperCase( $this )];
220      }
221
222    });
223
224  }
225
226  /**
227   *
228   *
229   * @param
230   *
231   * @return
232   */
233  HSTextSlideshow.prototype.addSlide = function(element, config) {
234
235    if(!element || !element.length) return;
236    this.slides.push( new HSTextSlide( element, config ) );
237
238  }
239
240  /**
241   *
242   *
243   * @param
244   *
245   * @return
246   */
247  HSTextSlideshow.prototype.next = function() {
248
249    if(this.slides.length <= 1) return;
250
251    this.slides[this.currentIndex].hide();
252
253    this.currentIndex++;
254
255    if(this.currentIndex > this.slides.length - 1) this.currentIndex = 0;
256
257    this._updateCarouselBounds();
258    this.slides[this.currentIndex].show();
259  }
260
261  /**
262   *
263   *
264   * @param
265   *
266   * @return
267   */
268  HSTextSlideshow.prototype.prev = function() {
269
270    if(this.slides.length <= 1) return;
271
272    this.slides[this.currentIndex].hide();
273
274    this.currentIndex--;
275
276    if(this.currentIndex < 0) this.currentIndex = this.slides.length - 1;
277
278    this._updateCarouselBounds();
279    this.slides[this.currentIndex].show();
280  }
281
282
283  /**
284   * Constructor function of Slide.
285   *
286   * @param jQuery element
287   *
288   * @return undefined
289   */
290  function HSTextSlide(element, config) {
291    this.element = element;
292    this.config = config;
293
294    this.target = element.find( config.slideTargetSelector ).get(0);
295
296    if(!this.target) return;
297
298    this.textfx = new TextFx( this.target );
299
300    if( this.config.currentIndex != this.element.index() ) {
301      $(this.target).find('[class*="letter"]').css( this.textfx.effects[config.effect].out );
302    }
303  }
304
305  /**
306   *
307   *
308   * @param
309   *
310   * @return
311   */
312  HSTextSlide.prototype.show = function() {
313    if(!this.target) return;
314
315    this.element.addClass(this.config.activeSlideClass);
316
317    this.textfx.show(this.config.effect);
318  }
319
320  /**
321   *
322   *
323   * @param
324   *
325   * @return
326   */
327  HSTextSlide.prototype.hide = function() {
328    if(!this.target) return;
329
330    this.element.removeClass(this.config.activeSlideClass);
331
332    this.textfx.hide(this.config.effect);
333  }
334
335  /**
336   *
337   *
338   * @param
339   *
340   * @return
341   */
342  HSTextSlide.prototype.getElement = function() {
343
344    return this.element;
345
346  }
347
348})(jQuery);