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

- old
+ new

@@ -1,33 +1,45 @@
 'use strict';
 
-!function($) {
+import $ from 'jquery';
+import { Keyboard } from './foundation.util.keyboard';
+import { Motion } from './foundation.util.motion';
+import { Timer } from './foundation.util.timer';
+import { onImagesLoaded } from './foundation.util.imageLoader';
+import { GetYoDigits } from './foundation.util.core';
+import { Plugin } from './foundation.plugin';
+import { Touch } from './foundation.util.touch'
 
+
 /**
  * Orbit module.
  * @module foundation.orbit
  * @requires foundation.util.keyboard
  * @requires foundation.util.motion
- * @requires foundation.util.timerAndImageLoader
+ * @requires foundation.util.timer
+ * @requires foundation.util.imageLoader
  * @requires foundation.util.touch
  */
 
-class Orbit {
+class Orbit extends Plugin {
   /**
   * Creates a new instance of an orbit carousel.
   * @class
+  * @name Orbit
   * @param {jQuery} element - jQuery object to make into an Orbit Carousel.
   * @param {Object} options - Overrides to the default plugin settings.
   */
-  constructor(element, options){
+  _setup(element, options){
     this.$element = element;
     this.options = $.extend({}, Orbit.defaults, this.$element.data(), options);
+    this.className = 'Orbit'; // ie9 back compat
 
+    Touch.init($); // Touch init is idempotent, we just need to make sure it's initialied.
+
     this._init();
 
-    Foundation.registerPlugin(this, 'Orbit');
-    Foundation.Keyboard.register('Orbit', {
+    Keyboard.register('Orbit', {
       'ltr': {
         'ARROW_RIGHT': 'next',
         'ARROW_LEFT': 'previous'
       },
       'rtl': {
@@ -49,11 +61,11 @@
     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'),
-        id = this.$element[0].id || Foundation.GetYoDigits(6, 'orbit');
+        id = this.$element[0].id || GetYoDigits(6, 'orbit');
 
     this.$element.attr({
       'data-resize': id,
       'id': id
     });
@@ -65,11 +77,11 @@
     if (!this.options.useMUI) {
       this.$slides.addClass('no-motionui');
     }
 
     if ($images.length) {
-      Foundation.onImagesLoaded($images, this._prepareForOrbit.bind(this));
+      onImagesLoaded($images, this._prepareForOrbit.bind(this));
     } else {
       this._prepareForOrbit();//hehe
     }
 
     if (this.options.bullets) {
@@ -100,11 +112,11 @@
   * Sets a `timer` object on the orbit, and starts the counter for the next slide.
   * @function
   */
   geoSync() {
     var _this = this;
-    this.timer = new Foundation.Timer(
+    this.timer = new Timer(
       this.$element,
       {
         duration: this.options.timerDelay,
         infinite: false
       },
@@ -230,11 +242,11 @@
       }
 
       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', {
+          Keyboard.handleKey(e, 'Orbit', {
             next: function() {
               _this.changeSlide(true);
             },
             previous: function() {
               _this.changeSlide(false);
@@ -329,19 +341,19 @@
         idx = idx || this.$slides.index($newSlide); //grab index to update bullets
         this._updateBullets(idx);
       }
 
       if (this.options.useMUI && !this.$element.is(':hidden')) {
-        Foundation.Motion.animateIn(
+        Motion.animateIn(
           $newSlide.addClass('is-active').css({'position': 'absolute', 'top': 0}),
           this.options[`animInFrom${dirIn}`],
           function(){
             $newSlide.css({'position': 'relative', 'display': 'block'})
             .attr('aria-live', 'polite');
         });
 
-        Foundation.Motion.animateOut(
+        Motion.animateOut(
           $curSlide.removeClass('is-active'),
           this.options[`animOutTo${dirOut}`],
           function(){
             $curSlide.removeAttr('aria-live');
             if(_this.options.autoPlay && !_this.timer.isPaused){
@@ -379,13 +391,12 @@
 
   /**
   * Destroys the carousel and hides the element.
   * @function
   */
-  destroy() {
+  _destroy() {
     this.$element.off('.zf.orbit').find('*').off('.zf.orbit').end().hide();
-    Foundation.unregisterPlugin(this);
   }
 }
 
 Orbit.defaults = {
   /**
@@ -515,9 +526,6 @@
   * @default true
   */
   useMUI: true
 };
 
-// Window exports
-Foundation.plugin(Orbit, 'Orbit');
-
-}(jQuery);
+export {Orbit};