foundation.orbit.js.es6 in foundation-rails-6.3.0.0

- old
+ new

@@ -41,15 +41,25 @@
   * Initializes the plugin by creating jQuery collections, setting attributes, and starting the animation.
   * @function
   * @private
   */
   _init() {
+    // @TODO: consider discussion on PR #9278 about DOM pollution by changeSlide
+    this._reset();
+
     this.$wrapper = this.$element.find(`.${this.options.containerClass}`);
     this.$slides = this.$element.find(`.${this.options.slideClass}`);
+
     var $images = this.$element.find('img'),
-    initActive = this.$slides.filter('.is-active');
+        initActive = this.$slides.filter('.is-active'),
+        id = this.$element[0].id || Foundation.GetYoDigits(6, 'orbit');
 
+    this.$element.attr({
+      'data-resize': id,
+      'id': id
+    });
+
     if (!initActive.length) {
       this.$slides.eq(0).addClass('is-active');
     }
 
     if (!this.options.useMUI) {
@@ -109,38 +119,36 @@
   * @function
   * @private
   */
   _prepareForOrbit() {
     var _this = this;
-    this._setWrapperHeight(function(max){
-      _this._setSlideHeight(max);
-    });
+    this._setWrapperHeight();
   }
 
   /**
   * Calulates the height of each slide in the collection, and uses the tallest one for the wrapper height.
   * @function
   * @private
   * @param {Function} cb - a callback function to fire when complete.
   */
   _setWrapperHeight(cb) {//rewrite this to `for` loop
-    var max = 0, temp, counter = 0;
+    var max = 0, temp, counter = 0, _this = this;
 
     this.$slides.each(function() {
       temp = this.getBoundingClientRect().height;
       $(this).attr('data-slide', counter);
 
-      if (counter) {//if not the first slide, set css position and display property
+      if (_this.$slides.filter('.is-active')[0] !== _this.$slides.eq(counter)[0]) {//if not the active slide, set css position and display property
         $(this).css({'position': 'relative', 'display': 'none'});
       }
       max = temp > max ? temp : max;
       counter++;
     });
 
     if (counter === this.$slides.length) {
       this.$wrapper.css({'height': max}); //only change the wrapper height property once.
-      cb(max); //fire callback with max height dimension.
+      if(cb) {cb(max);} //fire callback with max height dimension.
     }
   }
 
   /**
   * Sets the max-height of each slide.
@@ -163,10 +171,14 @@
 
     //***************************************
     //**Now using custom event - thanks to:**
     //**      Yohai Ararat of Toronto      **
     //***************************************
+    //
+    this.$element.off('.resizeme.zf.trigger').on({
+      'resizeme.zf.trigger': this._prepareForOrbit.bind(this)
+    })
     if (this.$slides.length > 1) {
 
       if (this.options.swipe) {
         this.$slides.off('swipeleft.zf.orbit swiperight.zf.orbit')
         .on('swipeleft.zf.orbit', function(e){
@@ -214,11 +226,11 @@
           $slide = _this.$slides.eq(idx);
 
           _this.changeSlide(ltr, $slide, idx);
         });
       }
-      
+
       if (this.options.accessible) {
         this.$wrapper.add(this.$bullets).on('keydown.zf.orbit', function(e) {
           // handle keyboard event with keyboard util
           Foundation.Keyboard.handleKey(e, 'Orbit', {
             next: function() {
@@ -237,18 +249,57 @@
       }
     }
   }
 
   /**
+   * Resets Orbit so it can be reinitialized
+   */
+  _reset() {
+    // Don't do anything if there are no slides (first run)
+    if (typeof this.$slides == 'undefined') {
+      return;
+    }
+
+    if (this.$slides.length > 1) {
+      // Remove old events
+      this.$element.off('.zf.orbit').find('*').off('.zf.orbit')
+
+      // Restart timer if autoPlay is enabled
+      if (this.options.autoPlay) {
+        this.timer.restart();
+      }
+
+      // Reset all sliddes
+      this.$slides.each(function(el) {
+        $(el).removeClass('is-active is-active is-in')
+          .removeAttr('aria-live')
+          .hide();
+      });
+
+      // Show the first slide
+      this.$slides.first().addClass('is-active').show();
+
+      // Triggers when the slide has finished animating
+      this.$element.trigger('slidechange.zf.orbit', [this.$slides.first()]);
+
+      // Select first bullet if bullets are present
+      if (this.options.bullets) {
+        this._updateBullets(0);
+      }
+    }
+  }
+
+  /**
   * Changes the current slide to a new one.
   * @function
   * @param {Boolean} isLTR - flag if the slide should move left to right.
   * @param {jQuery} chosenSlide - the jQuery element of the slide to show next, if one is selected.
   * @param {Number} idx - the index of the new slide in its collection, if one chosen.
   * @fires Orbit#slidechange
   */
   changeSlide(isLTR, chosenSlide, idx) {
+    if (!this.$slides) {return; } // Don't freak out if we're in the middle of cleanup
     var $curSlide = this.$slides.filter('.is-active').eq(0);
 
     if (/mui/g.test($curSlide[0].className)) { return false; } //if the slide is currently animating, kick out of the function
 
     var $firstSlide = this.$slides.first(),
@@ -271,16 +322,16 @@
       /**
       * Triggers before the next slide starts animating in and only if a next slide has been found.
       * @event Orbit#beforeslidechange
       */
       this.$element.trigger('beforeslidechange.zf.orbit', [$curSlide, $newSlide]);
-      
+
       if (this.options.bullets) {
         idx = idx || this.$slides.index($newSlide); //grab index to update bullets
         this._updateBullets(idx);
       }
 
-      if (this.options.useMUI) {
+      if (this.options.useMUI && !this.$element.is(':hidden')) {
         Foundation.Motion.animateIn(
           $newSlide.addClass('is-active').css({'position': 'absolute', 'top': 0}),
           this.options[`animInFrom${dirIn}`],
           function(){
             $newSlide.css({'position': 'relative', 'display': 'block'})