foundation-rails 6.3.0.0 → 6.3.1.0

data/vendor/assets/js/foundation.sticky.js.es6

@@ -41,8 +41,10 @@ class Sticky {
     this.$container = $parent.length ? $parent : $(this.options.container).wrapInner(this.$element);
     this.$container.addClass(this.options.containerClass);
 
-    this.$element.addClass(this.options.stickyClass)
-                 .attr({'data-resize': id});
+    this.$element.addClass(this.options.stickyClass).attr({ 'data-resize': id, 'data-mutate': id });
+    if (this.options.anchor !== '') {
+        $('#' + _this.options.anchor).attr({ 'data-mutate': id });
+    }
 
     this.scrollCount = this.options.checkEvery;
     this.isStuck = false;
@@ -127,17 +129,39 @@ class Sticky {
 
     this.$element.off('resizeme.zf.trigger')
                  .on('resizeme.zf.trigger', function(e, el) {
-                     _this._setSizes(function() {
-                       _this._calc(false);
-                       if (_this.canStick) {
-                         if (!_this.isOn) {
-                           _this._events(id);
-                         }
-                       } else if (_this.isOn) {
-                         _this._pauseListeners(scrollListener);
-                       }
-                     });
+                    _this._eventsHandler(id);
+    });
+
+    this.$element.on('mutateme.zf.trigger', function (e, el) {
+        _this._eventsHandler(id);
     });
+
+    if(this.$anchor) {
+      this.$anchor.on('mutateme.zf.trigger', function (e, el) {
+          _this._eventsHandler(id);
+      });
+    }
+  }
+
+  /**
+   * Handler for events.
+   * @private
+   * @param {String} id - psuedo-random id for unique scroll event listener.
+   */
+  _eventsHandler(id) {
+       var _this = this,
+        scrollListener = this.scrollListener = `scroll.zf.${id}`;
+
+       _this._setSizes(function() {
+       _this._calc(false);
+       if (_this.canStick) {
+         if (!_this.isOn) {
+           _this._events(id);
+         }
+       } else if (_this.isOn) {
+         _this._pauseListeners(scrollListener);
+       }
+     });
   }
 
   /**
@@ -362,7 +386,8 @@ class Sticky {
                    bottom: '',
                    'max-width': ''
                  })
-                 .off('resizeme.zf.trigger');
+                 .off('resizeme.zf.trigger')
+                 .off('mutateme.zf.trigger');
     if (this.$anchor && this.$anchor.length) {
       this.$anchor.off('change.zf.sticky');
     }
@@ -384,67 +409,78 @@ Sticky.defaults = {
   /**
    * Customizable container template. Add your own classes for styling and sizing.
    * @option
-   * @example '<div data-sticky-container class="small-6 columns"></div>'
+   * @type {string}
+   * @default '<div data-sticky-container></div>'
    */
   container: '<div data-sticky-container></div>',
   /**
-   * Location in the view the element sticks to.
+   * Location in the view the element sticks to. Can be `'top'` or `'bottom'`.
    * @option
-   * @example 'top'
+   * @type {string}
+   * @default 'top'
    */
   stickTo: 'top',
   /**
    * If anchored to a single element, the id of that element.
    * @option
-   * @example 'exampleId'
+   * @type {string}
+   * @default ''
    */
   anchor: '',
   /**
    * If using more than one element as anchor points, the id of the top anchor.
    * @option
-   * @example 'exampleId:top'
+   * @type {string}
+   * @default ''
    */
   topAnchor: '',
   /**
    * If using more than one element as anchor points, the id of the bottom anchor.
    * @option
-   * @example 'exampleId:bottom'
+   * @type {string}
+   * @default ''
    */
   btmAnchor: '',
   /**
    * Margin, in `em`'s to apply to the top of the element when it becomes sticky.
    * @option
-   * @example 1
+   * @type {number}
+   * @default 1
    */
   marginTop: 1,
   /**
    * Margin, in `em`'s to apply to the bottom of the element when it becomes sticky.
    * @option
-   * @example 1
+   * @type {number}
+   * @default 1
    */
   marginBottom: 1,
   /**
    * Breakpoint string that is the minimum screen size an element should become sticky.
    * @option
-   * @example 'medium'
+   * @type {string}
+   * @default 'medium'
    */
   stickyOn: 'medium',
   /**
    * Class applied to sticky element, and removed on destruction. Foundation defaults to `sticky`.
    * @option
-   * @example 'sticky'
+   * @type {string}
+   * @default 'sticky'
    */
   stickyClass: 'sticky',
   /**
    * Class applied to sticky container. Foundation defaults to `sticky-container`.
    * @option
-   * @example 'sticky-container'
+   * @type {string}
+   * @default 'sticky-container'
    */
   containerClass: 'sticky-container',
   /**
    * Number of scroll events between the plugin's recalculating sticky points. Setting it to `0` will cause it to recalc every scroll event, setting it to `-1` will prevent recalc on scroll.
    * @option
-   * @example 50
+   * @type {number}
+   * @default -1
    */
   checkEvery: -1
 };

data/vendor/assets/js/foundation.tabs.js.es6

@@ -76,34 +76,7 @@ class Tabs {
           });
         });
       }
-
-      //use browser to open a tab, if it exists in this tabset
-      if (_this.options.deepLink) {
-        var anchor = window.location.hash;
-        //need a hash and a relevant anchor in this tabset
-        if(anchor.length) {
-          var $link = $elem.find('[href="'+anchor+'"]');
-          if ($link.length) {
-            _this.selectTab($(anchor));
-
-            //roll up a little to show the titles
-            if (_this.options.deepLinkSmudge) {
-              $(window).load(function() {
-                var offset = $elem.offset();
-                $('html, body').animate({ scrollTop: offset.top }, _this.options.deepLinkSmudgeDelay);
-              });
-            }
-
-            /**
-              * Fires when the zplugin has deeplinked at pageload
-              * @event Tabs#deeplink
-              */
-             $elem.trigger('deeplink.zf.tabs', [$link, $(anchor)]);
-           }
-        }
-      }
     });
-
     if(this.options.matchHeight) {
       var $images = this.$tabContent.find('img');
 
@@ -114,6 +87,35 @@ class Tabs {
       }
     }
 
+     //current context-bound function to open tabs on page load or history popstate
+    this._checkDeepLink = () => {
+      var anchor = window.location.hash;
+      //need a hash and a relevant anchor in this tabset
+      if(anchor.length) {
+        var $link = this.$element.find('[href$="'+anchor+'"]');
+        if ($link.length) {
+          this.selectTab($(anchor), true);
+
+          //roll up a little to show the titles
+          if (this.options.deepLinkSmudge) {
+            var offset = this.$element.offset();
+            $('html, body').animate({ scrollTop: offset.top }, this.options.deepLinkSmudgeDelay);
+          }
+
+          /**
+            * Fires when the zplugin has deeplinked at pageload
+            * @event Tabs#deeplink
+            */
+           this.$element.trigger('deeplink.zf.tabs', [$link, $(anchor)]);
+         }
+       }
+     }
+
+    //use browser to open a tab, if it exists in this tabset
+    if (this.options.deepLink) {
+      this._checkDeepLink();
+    }
+
     this._events();
   }
 
@@ -131,6 +133,10 @@ class Tabs {
 
       $(window).on('changed.zf.mediaquery', this._setHeightMqHandler);
     }
+
+    if(this.options.deepLink) {
+      $(window).on('popstate', this._checkDeepLink);
+    }
   }
 
   /**
@@ -203,10 +209,11 @@ class Tabs {
   /**
    * Opens the tab `$targetContent` defined by `$target`. Collapses active tab.
    * @param {jQuery} $target - Tab to open.
+   * @param {boolean} historyHandled - browser has already handled a history update
    * @fires Tabs#change
    * @function
    */
-  _handleTabChange($target) {
+  _handleTabChange($target, historyHandled) {
 
     /**
      * Check for active class on target. Collapse if exists.
@@ -237,7 +244,7 @@ class Tabs {
     this._openTab($target);
 
     //either replace or update browser history
-    if (this.options.deepLink) {
+    if (this.options.deepLink && !historyHandled) {
       var anchor = $target.find('a').attr('href');
 
       if (this.options.updateHistory) {
@@ -295,9 +302,10 @@ class Tabs {
   /**
    * Public method for selecting a content pane to display.
    * @param {jQuery | String} elem - jQuery object or string of the id of the pane to display.
+   * @param {boolean} historyHandled - browser has already handled a history update
    * @function
    */
-  selectTab(elem) {
+  selectTab(elem, historyHandled) {
     var idStr;
 
     if (typeof elem === 'object') {
@@ -310,25 +318,29 @@ class Tabs {
       idStr = `#${idStr}`;
     }
 
-    var $target = this.$tabTitles.find(`[href="${idStr}"]`).parent(`.${this.options.linkClass}`);
+    var $target = this.$tabTitles.find(`[href$="${idStr}"]`).parent(`.${this.options.linkClass}`);
 
-    this._handleTabChange($target);
+    this._handleTabChange($target, historyHandled);
   };
   /**
    * Sets the height of each panel to the height of the tallest panel.
    * If enabled in options, gets called on media query change.
    * If loading content via external source, can be called directly or with _reflow.
+   * If enabled with `data-match-height="true"`, tabs sets to equal height
    * @function
    * @private
    */
   _setHeight() {
-    var max = 0;
+    var max = 0,
+        _this = this; // Lock down the `this` value for the root tabs object
+
     this.$tabContent
       .find(`.${this.options.panelClass}`)
       .css('height', '')
       .each(function() {
+
         var panel = $(this),
-            isActive = panel.hasClass(`${this.options.panelActiveClass}`);
+            isActive = panel.hasClass(`${_this.options.panelActiveClass}`); // get the options from the parent instead of trying to get them from the child
 
         if (!isActive) {
           panel.css({'visibility': 'hidden', 'display': 'block'});
@@ -365,6 +377,10 @@ class Tabs {
       }
     }
 
+    if (this.options.deepLink) {
+      $(window).off('popstate', this._checkDeepLink);
+    }
+
     Foundation.unregisterPlugin(this);
   }
 }
@@ -373,28 +389,32 @@ Tabs.defaults = {
   /**
    * Allows the window to scroll to content of pane specified by hash anchor
    * @option
-   * @example false
+   * @type {boolean}
+   * @default false
    */
   deepLink: false,
 
   /**
    * Adjust the deep link scroll to make sure the top of the tab panel is visible
    * @option
-   * @example false
+   * @type {boolean}
+   * @default false
    */
   deepLinkSmudge: false,
 
   /**
    * Animation time (ms) for the deep link adjustment
    * @option
-   * @example 300
+   * @type {number}
+   * @default 300
    */
   deepLinkSmudgeDelay: 300,
 
   /**
    * Update the browser history with the open tab
    * @option
-   * @example false
+   * @type {boolean}
+   * @default false
    */
   updateHistory: false,
 
@@ -402,56 +422,64 @@ Tabs.defaults = {
    * Allows the window to scroll to content of active pane on load if set to true.
    * Not recommended if more than one tab panel per page.
    * @option
-   * @example false
+   * @type {boolean}
+   * @default false
    */
   autoFocus: false,
 
   /**
    * Allows keyboard input to 'wrap' around the tab links.
    * @option
-   * @example true
+   * @type {boolean}
+   * @default true
    */
   wrapOnKeys: true,
 
   /**
    * Allows the tab content panes to match heights if set to true.
    * @option
-   * @example false
+   * @type {boolean}
+   * @default false
    */
   matchHeight: false,
 
   /**
    * Allows active tabs to collapse when clicked.
    * @option
-   * @example false
+   * @type {boolean}
+   * @default false
    */
   activeCollapse: false,
 
   /**
    * Class applied to `li`'s in tab link list.
    * @option
-   * @example 'tabs-title'
+   * @type {string}
+   * @default 'tabs-title'
    */
   linkClass: 'tabs-title',
 
   /**
    * Class applied to the active `li` in tab link list.
    * @option
-   * @example 'is-active'
+   * @type {string}
+   * @default 'is-active'
    */
   linkActiveClass: 'is-active',
 
   /**
    * Class applied to the content containers.
    * @option
-   * @example 'tabs-panel'
+   * @type {string}
+   * @default 'tabs-panel'
    */
   panelClass: 'tabs-panel',
 
   /**
    * Class applied to the active content container.
    * @option
-   * @example 'is-active'
+   * @type {string}
+   * @default 'is-active'
    */
   panelActiveClass: 'is-active'
 };

data/vendor/assets/js/foundation.toggler.js.es6

@@ -136,7 +136,8 @@ Toggler.defaults = {
   /**
    * Tells the plugin if the element should animated when toggled.
    * @option
-   * @example false
+   * @type {boolean}
+   * @default false
    */
   animate: false
 };

data/vendor/assets/js/foundation.tooltip.js.es6

@@ -354,93 +354,108 @@ Tooltip.defaults = {
   /**
    * Time, in ms, before a tooltip should open on hover.
    * @option
-   * @example 200
+   * @type {number}
+   * @default 200
    */
   hoverDelay: 200,
   /**
    * Time, in ms, a tooltip should take to fade into view.
    * @option
-   * @example 150
+   * @type {number}
+   * @default 150
    */
   fadeInDuration: 150,
   /**
    * Time, in ms, a tooltip should take to fade out of view.
    * @option
-   * @example 150
+   * @type {number}
+   * @default 150
    */
   fadeOutDuration: 150,
   /**
    * Disables hover events from opening the tooltip if set to true
    * @option
-   * @example false
+   * @type {boolean}
+   * @default false
    */
   disableHover: false,
   /**
    * Optional addtional classes to apply to the tooltip template on init.
    * @option
-   * @example 'my-cool-tip-class'
+   * @type {string}
+   * @default ''
    */
   templateClasses: '',
   /**
    * Non-optional class added to tooltip templates. Foundation default is 'tooltip'.
    * @option
-   * @example 'tooltip'
+   * @type {string}
+   * @default 'tooltip'
    */
   tooltipClass: 'tooltip',
   /**
    * Class applied to the tooltip anchor element.
    * @option
-   * @example 'has-tip'
+   * @type {string}
+   * @default 'has-tip'
    */
   triggerClass: 'has-tip',
   /**
    * Minimum breakpoint size at which to open the tooltip.
    * @option
-   * @example 'small'
+   * @type {string}
+   * @default 'small'
    */
   showOn: 'small',
   /**
    * Custom template to be used to generate markup for tooltip.
    * @option
-   * @example '<div class="tooltip"></div>'
+   * @type {string}
+   * @default ''
    */
   template: '',
   /**
    * Text displayed in the tooltip template on open.
    * @option
-   * @example 'Some cool space fact here.'
+   * @type {string}
+   * @default ''
    */
   tipText: '',
   touchCloseText: 'Tap to close.',
   /**
    * Allows the tooltip to remain open if triggered with a click or touch event.
    * @option
-   * @example true
+   * @type {boolean}
+   * @default true
    */
   clickOpen: true,
   /**
    * Additional positioning classes, set by the JS
    * @option
-   * @example 'top'
+   * @type {string}
+   * @default ''
    */
   positionClass: '',
   /**
    * Distance, in pixels, the template should push away from the anchor on the Y axis.
    * @option
-   * @example 10
+   * @type {number}
+   * @default 10
    */
   vOffset: 10,
   /**
    * Distance, in pixels, the template should push away from the anchor on the X axis, if aligned to a side.
    * @option
-   * @example 12
+   * @type {number}
+   * @default 12
    */
   hOffset: 12,
     /**
    * Allow HTML in tooltip. Warning: If you are loading user-generated content into tooltips,
    * allowing HTML may open yourself up to XSS attacks.
    * @option
-   * @example false
+   * @type {boolean}
+   * @default false
    */
   allowHtml: false
 };