Added Motion-UI support to ResponsiveToggle

diff --git a/docs/pages/responsive-navigation.md b/docs/pages/responsive-navigation.md
index 8de17b1668d4c231b9ea39c35c4b876ef7b0dcde..469661ccafa8e19f345ebcaf1168e6b950776c81 100644 (file)
--- a/docs/pages/responsive-navigation.md
+++ b/docs/pages/responsive-navigation.md
@@ -105,6 +105,41 @@ By default, the title bar will be visible on small screens, and the Menu hides.
 
 ---
 
+## Responsive Toggle with animation
+
+To use animations from the Motion UI library, include the <code>data-animation="someAnimationIn someAnimationOut"</code> attribute.
+
+<div class="primary callout show-for-medium">
+  <p>Scale your browser down to see the toggle happen.</p>
+</div>
+
+```html_example
+<div class="title-bar" data-responsive-toggle="example-animated-menu" data-hide-for="medium">
+  <button class="menu-icon" type="button" data-toggle></button>
+  <div class="title-bar-title">Menu</div>
+</div>
+
+<div class="top-bar" id="example-animated-menu" data-animate="hinge-in-from-top spin-out">
+  <div class="top-bar-left">
+    <ul class="dropdown menu" data-dropdown-menu>
+      <li class="menu-text">Site Title</li>
+      <li>
+        <a href="#">One</a>
+        <ul class="menu vertical">
+          <li><a href="#">One</a></li>
+          <li><a href="#">Two</a></li>
+          <li><a href="#">Three</a></li>
+        </ul>
+      </li>
+      <li><a href="#">Two</a></li>
+      <li><a href="#">Three</a></li>
+    </ul>
+  </div>
+</div>
+```
+
+---
+
 ### Preventing FOUC
 
 Before the JavaScript on your page loads, you'll be able to see both the mobile and desktop element at once for a brief second. This is known as a [flash of unstyled content](https://en.wikipedia.org/wiki/Flash_of_unstyled_content). There's not an easy way for the framework to handle this for you, but you can add some extra CSS to account for it.

diff --git a/js/foundation.responsiveToggle.js b/js/foundation.responsiveToggle.js
index c73a1e502ba3e52c3fe91ceb1842aa0df66b7219..294e4f2f4bc6bdc5ffa752d057beb5ec45f3445b 100644 (file)
--- a/js/foundation.responsiveToggle.js
+++ b/js/foundation.responsiveToggle.js
@@ -2,118 +2,150 @@
 
 !function($) {
 
-/**
- * ResponsiveToggle module.
- * @module foundation.responsiveToggle
- * @requires foundation.util.mediaQuery
- */
-
-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.
+   * ResponsiveToggle module.
+   * @module foundation.responsiveToggle
+   * @requires foundation.util.mediaQuery, foundation.util.motion
    */
-  constructor(element, options) {
-    this.$element = $(element);
-    this.options = $.extend({}, ResponsiveToggle.defaults, this.$element.data(), options);
-
-    this._init();
-    this._events();
-
-    Foundation.registerPlugin(this, 'ResponsiveToggle');
-  }
 
-  /**
-   * 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.');
+  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.$targetMenu = $(`#${targetID}`);
-    this.$toggler = this.$element.find('[data-toggle]');
-
-    this._update();
-  }
+    /**
+     * 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.');
+      }
+
+      this.$targetMenu = $(`#${targetID}`);
+      this.$toggler = this.$element.find('[data-toggle]');
+      this.options = $.extend({}, this.options, this.$targetMenu.data());
+
+      // If they were set, parse the animation classes
+      if(this.options.animate) {
+        let input = this.options.animate.split(' ');
+
+        this.animationIn = input[0];
+        this.animationOut = input[1] || null;
+      }
+
+      this._update();
+    }
 
-  /**
-   * Adds necessary event handlers for the tab bar to work.
-   * @function
-   * @private
-   */
-  _events() {
-    var _this = this;
+    /**
+     * Adds necessary event handlers for the tab bar to work.
+     * @function
+     * @private
+     */
+    _events() {
+      var _this = this;
 
-    this._updateMqHandler = this._update.bind(this);
-    
-    $(window).on('changed.zf.mediaquery', this._updateMqHandler);
+      $(window).on('changed.zf.mediaquery', this._update.bind(this));
 
-    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();
+      this.$toggler.on('click.zf.responsiveToggle', this.toggleMenu.bind(this));
     }
 
-    // Desktop
-    else {
-      this.$element.hide();
-      this.$targetMenu.show();
+    /**
+     * 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();
+      }
+
+      // 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)) {
-      this.$targetMenu.toggle(0);
-
-      /**
-       * Fires when the element attached to the tab bar toggles.
-       * @event ResponsiveToggle#toggled
-       */
-      this.$element.trigger('toggled.zf.responsiveToggle');
+    /**
+     * 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');
+            });
+          }
+        }
+        else {
+          this.$targetMenu.toggle(0);
+
+          /**
+           * Fires when the element attached to the tab bar toggles.
+           * @event ResponsiveToggle#toggled
+           */
+          this.$element.trigger('toggled.zf.responsiveToggle');
+        }
+      }
+    };
+
+    destroy() {
+      //TODO this...
     }
-  };
-
-  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'
-};
+  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
+  };
 
 // Window exports
-Foundation.plugin(ResponsiveToggle, 'ResponsiveToggle');
+  Foundation.plugin(ResponsiveToggle, 'ResponsiveToggle');
 
 }(jQuery);