]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
removed merge failure
authorDominik Pieper <dominik@pieperhome.de>
Tue, 12 Apr 2016 10:32:04 +0000 (12:32 +0200)
committerDominik Pieper <dominik@pieperhome.de>
Tue, 12 Apr 2016 10:32:04 +0000 (12:32 +0200)
js/foundation.responsiveToggle.js

index 294e4f2f4bc6bdc5ffa752d057beb5ec45f3445b..0c75a6de2f650b03ecc4d5a373b0133910e1a73a 100644 (file)
 
 !function($) {
 
+/**
+ * ResponsiveToggle module.
+ * @module foundation.responsiveToggle
+ * @requires foundation.util.mediaQuery
+ */
+
+class ResponsiveToggle {
   /**
-   * ResponsiveToggle module.
-   * @module foundation.responsiveToggle
-   * @requires foundation.util.mediaQuery, foundation.util.motion
+   * Creates a new instance of Tab Bar.
+   * @class
+   * @fires ResponsiveToggle#init
+   * @param {jQuery} element - jQuery object to attach tab bar functionality to.
+   * @param {Object} options - Overrides to the default plugin settings.
    */
+  constructor(element, options) {
+    this.$element = $(element);
+    this.options = $.extend({}, ResponsiveToggle.defaults, this.$element.data(), options);
 
-  class ResponsiveToggle {
-    /**
-     * Creates a new instance of Tab Bar.
-     * @class
-     * @fires ResponsiveToggle#init
-     * @param {jQuery} element - jQuery object to attach tab bar functionality to.
-     * @param {Object} options - Overrides to the default plugin settings.
-     */
-    constructor(element, options) {
-      this.$element = $(element);
-      this.options = $.extend({}, ResponsiveToggle.defaults, this.$element.data(), options);
-
-      this._init();
-      this._events();
-
-      Foundation.registerPlugin(this, 'ResponsiveToggle');
-    }
+    this._init();
+    this._events();
 
-    /**
-     * Initializes the tab bar by finding the target element, toggling element, and running update().
-     * @function
-     * @private
-     */
-    _init() {
-      var targetID = this.$element.data('responsive-toggle');
-      if (!targetID) {
-        console.error('Your tab bar needs an ID of a Menu as the value of data-tab-bar.');
-      }
+    Foundation.registerPlugin(this, 'ResponsiveToggle');
+  }
 
-      this.$targetMenu = $(`#${targetID}`);
-      this.$toggler = this.$element.find('[data-toggle]');
-      this.options = $.extend({}, this.options, this.$targetMenu.data());
+  /**
+   * Initializes the tab bar by finding the target element, toggling element, and running update().
+   * @function
+   * @private
+   */
+  _init() {
+    var targetID = this.$element.data('responsive-toggle');
+    if (!targetID) {
+      console.error('Your tab bar needs an ID of a Menu as the value of data-tab-bar.');
+    }
 
-      // If they were set, parse the animation classes
-      if(this.options.animate) {
-        let input = this.options.animate.split(' ');
+    this.$targetMenu = $(`#${targetID}`);
+    this.$toggler = this.$element.find('[data-toggle]');
+    this.options = $.extend({}, this.options, this.$targetMenu.data());
 
-        this.animationIn = input[0];
-        this.animationOut = input[1] || null;
-      }
+    // If they were set, parse the animation classes
+    if(this.options.animate) {
+      let input = this.options.animate.split(' ');
 
-      this._update();
+      this.animationIn = input[0];
+      this.animationOut = input[1] || null;
     }
 
-    /**
-     * Adds necessary event handlers for the tab bar to work.
-     * @function
-     * @private
-     */
-    _events() {
-      var _this = this;
+    this._update();
+  }
 
-      $(window).on('changed.zf.mediaquery', this._update.bind(this));
+  /**
+   * Adds necessary event handlers for the tab bar to work.
+   * @function
+   * @private
+   */
+  _events() {
+    var _this = this;
 
-      this.$toggler.on('click.zf.responsiveToggle', this.toggleMenu.bind(this));
-    }
+    this._updateMqHandler = this._update.bind(this);
 
-    /**
-     * Checks the current media query to determine if the tab bar should be visible or hidden.
-     * @function
-     * @private
-     */
-    _update() {
-      // Mobile
-      if (!Foundation.MediaQuery.atLeast(this.options.hideFor)) {
-        this.$element.show();
-        this.$targetMenu.hide();
-      }
+    $(window).on('changed.zf.mediaquery', this._updateMqHandler);
 
-      // Desktop
-      else {
-        this.$element.hide();
-        this.$targetMenu.show();
-      }
+    this.$toggler.on('click.zf.responsiveToggle', this.toggleMenu.bind(this));
+  }
+
+  /**
+   * Checks the current media query to determine if the tab bar should be visible or hidden.
+   * @function
+   * @private
+   */
+  _update() {
+    // Mobile
+    if (!Foundation.MediaQuery.atLeast(this.options.hideFor)) {
+      this.$element.show();
+      this.$targetMenu.hide();
     }
 
-    /**
-     * Toggles the element attached to the tab bar. The toggle only happens if the screen is small enough to allow it.
-     * @function
-     * @fires ResponsiveToggle#toggled
-     */
-    toggleMenu() {
-      if (!Foundation.MediaQuery.atLeast(this.options.hideFor)) {
-
-        if(this.options.animate) {
-          if (this.$targetMenu.is(':hidden')) {
-            Foundation.Motion.animateIn(this.$targetMenu, this.animationIn, () => {
-              /**
-               * Fires when the element attached to the tab bar toggles.
-               * @event ResponsiveToggle#toggled
-               */
-              this.$element.trigger('toggled.zf.responsiveToggle');
-            });
-          }
-          else {
-            Foundation.Motion.animateOut(this.$targetMenu, this.animationOut, () => {
-              /**
-               * Fires when the element attached to the tab bar toggles.
-               * @event ResponsiveToggle#toggled
-               */
-              this.$element.trigger('toggled.zf.responsiveToggle');
-            });
-          }
+    // Desktop
+    else {
+      this.$element.hide();
+      this.$targetMenu.show();
+    }
+  }
+
+  /**
+   * Toggles the element attached to the tab bar. The toggle only happens if the screen is small enough to allow it.
+   * @function
+   * @fires ResponsiveToggle#toggled
+   */
+  toggleMenu() {
+    if (!Foundation.MediaQuery.atLeast(this.options.hideFor)) {
+      if(this.options.animate) {
+        if (this.$targetMenu.is(':hidden')) {
+          Foundation.Motion.animateIn(this.$targetMenu, this.animationIn, () => {
+            /**
+             * Fires when the element attached to the tab bar toggles.
+             * @event ResponsiveToggle#toggled
+             */
+            this.$element.trigger('toggled.zf.responsiveToggle');
+          });
         }
         else {
-          this.$targetMenu.toggle(0);
-
-          /**
-           * Fires when the element attached to the tab bar toggles.
-           * @event ResponsiveToggle#toggled
-           */
-          this.$element.trigger('toggled.zf.responsiveToggle');
+          Foundation.Motion.animateOut(this.$targetMenu, this.animationOut, () => {
+            /**
+             * Fires when the element attached to the tab bar toggles.
+             * @event ResponsiveToggle#toggled
+             */
+            this.$element.trigger('toggled.zf.responsiveToggle');
+          });
         }
       }
-    };
+      else {
+        this.$targetMenu.toggle(0);
 
-    destroy() {
-      //TODO this...
+        /**
+         * Fires when the element attached to the tab bar toggles.
+         * @event ResponsiveToggle#toggled
+         */
+        this.$element.trigger('toggled.zf.responsiveToggle');
+      }
     }
+  };
+
+  destroy() {
+    this.$element.off('.zf.responsiveToggle');
+    this.$toggler.off('.zf.responsiveToggle');
+
+    $(window).off('changed.zf.mediaquery', this._updateMqHandler);
+
+    Foundation.unregisterPlugin(this);
   }
+}
 
-  ResponsiveToggle.defaults = {
-    /**
-     * The breakpoint after which the menu is always shown, and the tab bar is hidden.
-     * @option
-     * @example 'medium'
-     */
-    hideFor: 'medium',
-
-    /**
-     * To decide if the toggle should be animated or not.
-     * @option
-     * @example false
-     */
-    animate: false
-  };
+ResponsiveToggle.defaults = {
+  /**
+   * The breakpoint after which the menu is always shown, and the tab bar is hidden.
+   * @option
+   * @example 'medium'
+   */
+  hideFor: 'medium'
+};
 
 // Window exports
-  Foundation.plugin(ResponsiveToggle, 'ResponsiveToggle');
+Foundation.plugin(ResponsiveToggle, 'ResponsiveToggle');
 
 }(jQuery);