foundation-rails 6.2.4.0 → 6.3.0.0

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

@@ -58,7 +58,12 @@ class Sticky {
       }
 
       _this._setSizes(function(){
-        _this._calc(false);
+        var scroll = window.pageYOffset;
+        _this._calc(false, scroll);
+        //Unstick the element will ensure that proper classes are set.
+        if (!_this.isStuck) {
+          _this._removeSticky((scroll >= _this.topPoint) ? false : true);
+        }
       });
       _this._events(id.split('-').reverse().join('-'));
     });
@@ -204,7 +209,6 @@ class Sticky {
     css[mrgn] = `${this.options[mrgn]}em`;
     css[stickTo] = 0;
     css[notStuckTo] = 'auto';
-    css['left'] = this.$container.offset().left + parseInt(window.getComputedStyle(this.$container[0])["padding-left"], 10);
     this.isStuck = true;
     this.$element.removeClass(`is-anchored is-at-${notStuckTo}`)
                  .addClass(`is-stuck is-at-${stickTo}`)
@@ -246,7 +250,6 @@ class Sticky {
       css['top'] = anchorPt;
     }
 
-    css['left'] = '';
     this.isStuck = false;
     this.$element.removeClass(`is-stuck is-at-${stickTo}`)
                  .addClass(`is-anchored is-at-${topOrBottom}`)
@@ -266,14 +269,15 @@ class Sticky {
    * @private
    */
   _setSizes(cb) {
-    this.canStick = Foundation.MediaQuery.atLeast(this.options.stickyOn);
+    this.canStick = Foundation.MediaQuery.is(this.options.stickyOn);
     if (!this.canStick) {
       if (cb && typeof cb === 'function') { cb(); }
     }
     var _this = this,
         newElemWidth = this.$container[0].getBoundingClientRect().width,
         comp = window.getComputedStyle(this.$container[0]),
-        pdng = parseInt(comp['padding-right'], 10);
+        pdngl = parseInt(comp['padding-left'], 10),
+        pdngr = parseInt(comp['padding-right'], 10);
 
     if (this.$anchor && this.$anchor.length) {
       this.anchorHeight = this.$anchor[0].getBoundingClientRect().height;
@@ -282,7 +286,7 @@ class Sticky {
     }
 
     this.$element.css({
-      'max-width': `${newElemWidth - pdng}px`
+      'max-width': `${newElemWidth - pdngl - pdngr}px`
     });
 
     var newContainerHeight = this.$element[0].getBoundingClientRect().height || this.containerHeight;
@@ -295,9 +299,7 @@ class Sticky {
     });
     this.elemHeight = newContainerHeight;
 
-    if (this.isStuck) {
-      this.$element.css({"left":this.$container.offset().left + parseInt(comp['padding-left'], 10)});
-    } else {
+    if (!this.isStuck) {
       if (this.$element.hasClass('is-at-bottom')) {
         var anchorPt = (this.points ? this.points[1] - this.$container.offset().top : this.anchorHeight) - this.elemHeight;
         this.$element.css('top', anchorPt);

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

@@ -42,13 +42,14 @@ class Tabs {
   _init() {
     var _this = this;
 
+    this.$element.attr({'role': 'tablist'});
     this.$tabTitles = this.$element.find(`.${this.options.linkClass}`);
     this.$tabContent = $(`[data-tabs-content="${this.$element[0].id}"]`);
 
     this.$tabTitles.each(function(){
       var $elem = $(this),
           $link = $elem.find('a'),
-          isActive = $elem.hasClass('is-active'),
+          isActive = $elem.hasClass(`${_this.options.linkActiveClass}`),
           hash = $link[0].hash.slice(1),
           linkId = $link[0].id ? $link[0].id : `${hash}-label`,
           $tabContent = $(`#${hash}`);
@@ -69,7 +70,37 @@ class Tabs {
       });
 
       if(isActive && _this.options.autoFocus){
-        $link.focus();
+        $(window).load(function() {
+          $('html, body').animate({ scrollTop: $elem.offset().top }, _this.options.deepLinkSmudgeDelay, () => {
+            $link.focus();
+          });
+        });
+      }
+
+      //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)]);
+           }
+        }
       }
     });
 
@@ -94,10 +125,10 @@ class Tabs {
     this._addKeyHandler();
     this._addClickHandler();
     this._setHeightMqHandler = null;
-    
+
     if (this.options.matchHeight) {
       this._setHeightMqHandler = this._setHeight.bind(this);
-      
+
       $(window).on('changed.zf.mediaquery', this._setHeightMqHandler);
     }
   }
@@ -114,9 +145,6 @@ class Tabs {
       .on('click.zf.tabs', `.${this.options.linkClass}`, function(e){
         e.preventDefault();
         e.stopPropagation();
-        if ($(this).hasClass('is-active')) {
-          return;
-        }
         _this._handleTabChange($(this));
       });
   }
@@ -127,12 +155,10 @@ class Tabs {
    */
   _addKeyHandler() {
     var _this = this;
-    var $firstTab = _this.$element.find('li:first-of-type');
-    var $lastTab = _this.$element.find('li:last-of-type');
 
     this.$tabTitles.off('keydown.zf.tabs').on('keydown.zf.tabs', function(e){
       if (e.which === 9) return;
-      
+
 
       var $element = $(this),
         $elements = $element.parent('ul').children('li'),
@@ -175,38 +201,95 @@ class Tabs {
   }
 
   /**
-   * Opens the tab `$targetContent` defined by `$target`.
+   * Opens the tab `$targetContent` defined by `$target`. Collapses active tab.
    * @param {jQuery} $target - Tab to open.
    * @fires Tabs#change
    * @function
    */
   _handleTabChange($target) {
-    var $tabLink = $target.find('[role="tab"]'),
-        hash = $tabLink[0].hash,
-        $targetContent = this.$tabContent.find(hash),
-        $oldTab = this.$element.
-          find(`.${this.options.linkClass}.is-active`)
-          .removeClass('is-active')
-          .find('[role="tab"]')
-          .attr({ 'aria-selected': 'false' });
-
-    $(`#${$oldTab.attr('aria-controls')}`)
-      .removeClass('is-active')
-      .attr({ 'aria-hidden': 'true' });
 
-    $target.addClass('is-active');
+    /**
+     * Check for active class on target. Collapse if exists.
+     */
+    if ($target.hasClass(`${this.options.linkActiveClass}`)) {
+        if(this.options.activeCollapse) {
+            this._collapseTab($target);
+
+           /**
+            * Fires when the zplugin has successfully collapsed tabs.
+            * @event Tabs#collapse
+            */
+            this.$element.trigger('collapse.zf.tabs', [$target]);
+        }
+        return;
+    }
+
+    var $oldTab = this.$element.
+          find(`.${this.options.linkClass}.${this.options.linkActiveClass}`),
+          $tabLink = $target.find('[role="tab"]'),
+          hash = $tabLink[0].hash,
+          $targetContent = this.$tabContent.find(hash);
+
+    //close old tab
+    this._collapseTab($oldTab);
+
+    //open new tab
+    this._openTab($target);
 
-    $tabLink.attr({'aria-selected': 'true'});
+    //either replace or update browser history
+    if (this.options.deepLink) {
+      var anchor = $target.find('a').attr('href');
 
-    $targetContent
-      .addClass('is-active')
-      .attr({'aria-hidden': 'false'});
+      if (this.options.updateHistory) {
+        history.pushState({}, '', anchor);
+      } else {
+        history.replaceState({}, '', anchor);
+      }
+    }
 
     /**
      * Fires when the plugin has successfully changed tabs.
      * @event Tabs#change
      */
-    this.$element.trigger('change.zf.tabs', [$target]);
+    this.$element.trigger('change.zf.tabs', [$target, $targetContent]);
+
+    //fire to children a mutation event
+    $targetContent.find("[data-mutate]").trigger("mutateme.zf.trigger");
+  }
+
+  /**
+   * Opens the tab `$targetContent` defined by `$target`.
+   * @param {jQuery} $target - Tab to Open.
+   * @function
+   */
+  _openTab($target) {
+      var $tabLink = $target.find('[role="tab"]'),
+          hash = $tabLink[0].hash,
+          $targetContent = this.$tabContent.find(hash);
+
+      $target.addClass(`${this.options.linkActiveClass}`);
+
+      $tabLink.attr({'aria-selected': 'true'});
+
+      $targetContent
+        .addClass(`${this.options.panelActiveClass}`)
+        .attr({'aria-hidden': 'false'});
+  }
+
+  /**
+   * Collapses `$targetContent` defined by `$target`.
+   * @param {jQuery} $target - Tab to Open.
+   * @function
+   */
+  _collapseTab($target) {
+    var $target_anchor = $target
+      .removeClass(`${this.options.linkActiveClass}`)
+      .find('[role="tab"]')
+      .attr({ 'aria-selected': 'false' });
+
+    $(`#${$target_anchor.attr('aria-controls')}`)
+      .removeClass(`${this.options.panelActiveClass}`)
+      .attr({ 'aria-hidden': 'true' });
   }
 
   /**
@@ -245,7 +328,7 @@ class Tabs {
       .css('height', '')
       .each(function() {
         var panel = $(this),
-            isActive = panel.hasClass('is-active');
+            isActive = panel.hasClass(`${this.options.panelActiveClass}`);
 
         if (!isActive) {
           panel.css({'visibility': 'hidden', 'display': 'block'});
@@ -287,8 +370,37 @@ class Tabs {
 }
 
 Tabs.defaults = {
+  /**
+   * Allows the window to scroll to content of pane specified by hash anchor
+   * @option
+   * @example false
+   */
+  deepLink: false,
+
+  /**
+   * Adjust the deep link scroll to make sure the top of the tab panel is visible
+   * @option
+   * @example false
+   */
+  deepLinkSmudge: false,
+
+  /**
+   * Animation time (ms) for the deep link adjustment
+   * @option
+   * @example 300
+   */
+  deepLinkSmudgeDelay: 300,
+
+  /**
+   * Update the browser history with the open tab
+   * @option
+   * @example false
+   */
+  updateHistory: false,
+
   /**
    * 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
    */
@@ -308,6 +420,13 @@ Tabs.defaults = {
    */
   matchHeight: false,
 
+  /**
+   * Allows active tabs to collapse when clicked.
+   * @option
+   * @example false
+   */
+  activeCollapse: false,
+
   /**
    * Class applied to `li`'s in tab link list.
    * @option
@@ -315,17 +434,27 @@ Tabs.defaults = {
    */
   linkClass: 'tabs-title',
 
+  /**
+   * Class applied to the active `li` in tab link list.
+   * @option
+   * @example 'is-active'
+   */
+  linkActiveClass: 'is-active',
+
   /**
    * Class applied to the content containers.
    * @option
    * @example 'tabs-panel'
    */
-  panelClass: 'tabs-panel'
-};
+  panelClass: 'tabs-panel',
 
-function checkClass($elem){
-  return $elem.hasClass('is-active');
-}
+  /**
+   * Class applied to the active content container.
+   * @option
+   * @example 'is-active'
+   */
+  panelActiveClass: 'is-active'
+};
 
 // Window exports
 Foundation.plugin(Tabs, 'Tabs');

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

@@ -96,6 +96,7 @@ class Toggler {
     }
 
     this._updateARIA(isOn);
+    this.$element.find('[data-mutate]').trigger('mutateme.zf.trigger');
   }
 
   _toggleAnimate() {
@@ -105,12 +106,14 @@ class Toggler {
       Foundation.Motion.animateIn(this.$element, this.animationIn, function() {
         _this._updateARIA(true);
         this.trigger('on.zf.toggler');
+        this.find('[data-mutate]').trigger('mutateme.zf.trigger');
       });
     }
     else {
       Foundation.Motion.animateOut(this.$element, this.animationOut, function() {
         _this._updateARIA(false);
         this.trigger('off.zf.toggler');
+        this.find('[data-mutate]').trigger('mutateme.zf.trigger');
       });
     }
   }

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

@@ -40,9 +40,15 @@ class Tooltip {
     this.options.tipText = this.options.tipText || this.$element.attr('title');
     this.template = this.options.template ? $(this.options.template) : this._buildTemplate(elemId);
 
-    this.template.appendTo(document.body)
+    if (this.options.allowHtml) {
+      this.template.appendTo(document.body)
+        .html(this.options.tipText)
+        .hide();
+    } else {
+      this.template.appendTo(document.body)
         .text(this.options.tipText)
         .hide();
+    }
 
     this.$element.attr({
       'title': '',
@@ -165,7 +171,7 @@ class Tooltip {
    * @function
    */
   show() {
-    if (this.options.showOn !== 'all' && !Foundation.MediaQuery.atLeast(this.options.showOn)) {
+    if (this.options.showOn !== 'all' && !Foundation.MediaQuery.is(this.options.showOn)) {
       // console.error('The screen is too small to display this tooltip');
       return false;
     }
@@ -333,12 +339,9 @@ class Tooltip {
    */
   destroy() {
     this.$element.attr('title', this.template.text())
-                 .off('.zf.trigger .zf.tootip')
-                //  .removeClass('has-tip')
-                 .removeAttr('aria-describedby')
-                 .removeAttr('data-yeti-box')
-                 .removeAttr('data-toggle')
-                 .removeAttr('data-resize');
+                 .off('.zf.trigger .zf.tooltip')
+                 .removeClass('has-tip top right left')
+                 .removeAttr('aria-describedby aria-haspopup data-disable-hover data-resize data-toggle data-tooltip data-yeti-box');
 
     this.template.remove();
 
@@ -432,7 +435,14 @@ Tooltip.defaults = {
    * @option
    * @example 12
    */
-  hOffset: 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
+   */
+  allowHtml: false
 };
 
 /**
@@ -442,4 +452,4 @@ Tooltip.defaults = {
 // Window exports
 Foundation.plugin(Tooltip, 'Tooltip');
 
-}(jQuery);
+}(jQuery);

data/vendor/assets/js/foundation.util.box.js.es6

@@ -175,13 +175,13 @@ function GetOffsets(element, anchor, position, vOffset, hOffset, isOverflow) {
     case 'left bottom':
       return {
         left: $anchorDims.offset.left,
-        top: $anchorDims.offset.top + $anchorDims.height
+        top: $anchorDims.offset.top + $anchorDims.height + vOffset
       };
       break;
     case 'right bottom':
       return {
         left: $anchorDims.offset.left + $anchorDims.width + hOffset - $eleDims.width,
-        top: $anchorDims.offset.top + $anchorDims.height
+        top: $anchorDims.offset.top + $anchorDims.height + vOffset
       };
       break;
     default: