foundation-rails 6.2.0.1 → 6.2.1.0

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

@@ -69,8 +69,11 @@ class Dropdown {
    * @returns {String} position - string value of a position class.
    */
   getPositionClass() {
-    var position = this.$element[0].className.match(/\b(top|left|right)\b/g);
-        position = position ? position[0] : '';
+    var verticalPosition = this.$element[0].className.match(/(top|left|right|bottom)/g);
+        verticalPosition = verticalPosition ? verticalPosition[0] : '';
+    var horizontalPosition = /float-(.+)\s/.exec(this.$anchor[0].className);
+        horizontalPosition = horizontalPosition ? horizontalPosition[1] : '';
+    var position = horizontalPosition ? horizontalPosition + ' ' + verticalPosition : verticalPosition;
     return position;
   }
 
@@ -130,6 +133,8 @@ class Dropdown {
         param = (direction === 'top') ? 'height' : 'width',
         offset = (param === 'height') ? this.options.vOffset : this.options.hOffset;
 
+
+
     if(($eleDims.width >= $eleDims.windowDims.width) || (!this.counter && !Foundation.Box.ImNotTouchingYou(this.$element))){
       this.$element.offset(Foundation.Box.GetOffsets(this.$element, this.$anchor, 'center bottom', this.options.vOffset, this.options.hOffset, true)).css({
         'width': $eleDims.windowDims.width - (this.options.hOffset * 2),
@@ -141,7 +146,7 @@ class Dropdown {
 
     this.$element.offset(Foundation.Box.GetOffsets(this.$element, this.$anchor, position, this.options.vOffset, this.options.hOffset));
 
-    while(!Foundation.Box.ImNotTouchingYou(this.$element) && this.counter){
+    while(!Foundation.Box.ImNotTouchingYou(this.$element, false, true) && this.counter){
       this._reposition(position);
       this._setPosition();
     }

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

@@ -50,7 +50,7 @@ class DropdownMenu {
     this.$tabs = this.$element.children('[role="menuitem"]');
     this.$tabs.find('ul.is-dropdown-submenu').addClass(this.options.verticalClass);
 
-    if (this.$element.hasClass(this.options.rightClass) || this.options.alignment === 'right' || Foundation.rtl()) {
+    if (this.$element.hasClass(this.options.rightClass) || this.options.alignment === 'right' || Foundation.rtl() || this.$element.parents('.top-bar-right').is('*')) {
       this.options.alignment = 'right';
       subs.addClass('opens-left');
     } else {

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

@@ -155,7 +155,7 @@ class Equalizer {
    * @returns {Array} groups - An array of heights of children within Equalizer container grouped by row with element,height and max as last child
    */
   getHeightsByRow(cb) {
-    var lastElTopOffset = this.$watched.first().offset().top,
+    var lastElTopOffset = (this.$watched.length ? this.$watched.first().offset().top : 0),
         groups = [],
         group = 0;
     //group by Row

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

@@ -139,7 +139,7 @@ class Interchange {
       .trigger(trigger);
     }
     // Replacing background images
-    else if (path.match(/\.(gif|jpg|jpeg|tiff|png)([?#].*)?/i)) {
+    else if (path.match(/\.(gif|jpg|jpeg|png|svg|tiff)([?#].*)?/i)) {
       this.$element.css({ 'background-image': 'url('+path+')' })
           .trigger(trigger);
     }

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

@@ -200,7 +200,8 @@ class Orbit {
         var $controls = this.$element.find(`.${this.options.nextClass}, .${this.options.prevClass}`);
         $controls.attr('tabindex', 0)
         //also need to handle enter/return and spacebar key presses
-        .on('click.zf.orbit touchend.zf.orbit', function(){
+        .on('click.zf.orbit touchend.zf.orbit', function(e){
+	  e.preventDefault();
           _this.changeSlide($(this).hasClass(_this.options.nextClass));
         });
       }

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

@@ -38,25 +38,28 @@ class ResponsiveMenu {
    * @private
    */
   _init() {
-    var rulesTree = {};
-
-    // Parse rules from "classes" in data attribute
-    var rules = this.rules.split(' ');
-
-    // Iterate through every rule found
-    for (var i = 0; i < rules.length; i++) {
-      var rule = rules[i].split('-');
-      var ruleSize = rule.length > 1 ? rule[0] : 'small';
-      var rulePlugin = rule.length > 1 ? rule[1] : rule[0];
-
-      if (MenuPlugins[rulePlugin] !== null) {
-        rulesTree[ruleSize] = MenuPlugins[rulePlugin];
+    // The first time an Interchange plugin is initialized, this.rules is converted from a string of "classes" to an object of rules
+    if (typeof this.rules === 'string') {
+      let rulesTree = {};
+
+      // Parse rules from "classes" pulled from data attribute
+      let rules = this.rules.split(' ');
+
+      // Iterate through every rule found
+      for (let i = 0; i < rules.length; i++) {
+        let rule = rules[i].split('-');
+        let ruleSize = rule.length > 1 ? rule[0] : 'small';
+        let rulePlugin = rule.length > 1 ? rule[1] : rule[0];
+
+        if (MenuPlugins[rulePlugin] !== null) {
+          rulesTree[ruleSize] = MenuPlugins[rulePlugin];
+        }
       }
-    }
 
-    this.rules = rulesTree;
+      this.rules = rulesTree;
+    }
 
-    if (!$.isEmptyObject(rulesTree)) {
+    if (!$.isEmptyObject(this.rules)) {
       this._checkMediaQueries();
     }
   }

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

@@ -109,17 +109,27 @@ class Reveal {
     var outerWidth = $(window).width();
     var height = this.$element.outerHeight();
     var outerHeight = $(window).height();
-    var left = parseInt((outerWidth - width) / 2, 10);
-    var top;
-    if (height > outerHeight) {
-      top = parseInt(Math.min(100, outerHeight / 10), 10);
+    var left, top;
+    if (this.options.hOffset === 'auto') {
+      left = parseInt((outerWidth - width) / 2, 10);
     } else {
-      top = parseInt((outerHeight - height) / 4, 10);
+      left = parseInt(this.options.hOffset, 10);
+    }
+    if (this.options.vOffset === 'auto') {
+      if (height > outerHeight) {
+        top = parseInt(Math.min(100, outerHeight / 10), 10);
+      } else {
+        top = parseInt((outerHeight - height) / 4, 10);
+      }
+    } else {
+      top = parseInt(this.options.vOffset, 10);
     }
     this.$element.css({top: top + 'px'});
-    // only worry about left if we don't have an overlay, otherwise we're perfectly in the middle
-    if(!this.$overlay) {
+    // only worry about left if we don't have an overlay or we havea  horizontal offset,
+    // otherwise we're perfectly in the middle
+    if(!this.$overlay || (this.options.hOffset !== 'auto')) {
       this.$element.css({left: left + 'px'});
+      this.$element.css({margin: '0px'});
     }
 
   }
@@ -224,7 +234,7 @@ class Reveal {
       if (this.options.overlay) {
         Foundation.Motion.animateIn(this.$overlay, 'fade-in');
       }
-      Foundation.Motion.animateIn(this.$element, this.options.animationIn, function() {
+      Foundation.Motion.animateIn(this.$element, this.options.animationIn, () => {
         this.focusableElements = Foundation.Keyboard.findFocusable(this.$element);
       });
     }
@@ -292,9 +302,6 @@ class Reveal {
             }
           }
         });
-        if (_this.focusableElements.length === 0) { // no focusable elements inside the modal at all, prevent tabbing in general
-          e.preventDefault();
-        }
       });
     }
 
@@ -308,12 +315,18 @@ class Reveal {
             _this.focusableElements.eq(0).focus();
             e.preventDefault();
           }
+          if (_this.focusableElements.length === 0) { // no focusable elements inside the modal at all, prevent tabbing in general
+            e.preventDefault();
+          }
         },
         tab_backward: function() {
           if (_this.$element.find(':focus').is(_this.focusableElements.eq(0)) || _this.$element.is(':focus')) { // left modal upwards, setting focus to last element
             _this.focusableElements.eq(-1).focus();
             e.preventDefault();
           }
+          if (_this.focusableElements.length === 0) { // no focusable elements inside the modal at all, prevent tabbing in general
+            e.preventDefault();
+          }
         },
         open: function() {
           if (_this.$element.find(':focus').is(_this.$element.find('[data-close]'))) {
@@ -437,6 +450,7 @@ class Reveal {
    */
   destroy() {
     if (this.options.overlay) {
+      this.$element.appendTo($('body')); // move $element outside of $overlay to prevent error unregisterPlugin()
       this.$overlay.hide().off().remove();
     }
     this.$element.hide().off();
@@ -493,15 +507,15 @@ Reveal.defaults = {
   /**
    * Distance, in pixels, the modal should push down from the top of the screen.
    * @option
-   * @example 100
+   * @example auto
    */
-  vOffset: 100,
+  vOffset: 'auto',
   /**
    * Distance, in pixels, the modal should push in from the side of the screen.
    * @option
-   * @example 0
+   * @example auto
    */
-  hOffset: 0,
+  hOffset: 'auto',
   /**
    * Allows the modal to be fullscreen, completely blocking out the rest of the view. JS checks for this as well.
    * @option

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

@@ -103,6 +103,7 @@ class Slider {
    * @param {Number} location - floating point between the start and end values of the slider bar.
    * @param {Function} cb - callback function to fire on completion.
    * @fires Slider#moved
+   * @fires Slider#changed
    */
   _setHandlePos($hndl, location, noInvert, cb) {
   //might need to alter that slightly for bars that will have odd number selections.
@@ -137,7 +138,7 @@ class Slider {
         handleDim = $hndl[0].getBoundingClientRect()[hOrW],
         elemDim = this.$element[0].getBoundingClientRect()[hOrW],
         //percentage of bar min/max value based on click or drag point
-        pctOfBar = percent(location, this.options.end).toFixed(2),
+        pctOfBar = percent(location - this.options.start, this.options.end - this.options.start).toFixed(2),
         //number of actual pixels to shift the handle, based on the percentage obtained above
         pxToMove = (elemDim - handleDim) * pctOfBar,
         //percentage of bar to shift the handle
@@ -199,6 +200,15 @@ class Slider {
         _this.$fill.css(css);
       }
     });
+
+    /**
+     * Fires when the value has not been change for a given time.
+     * @event Slider#changed
+     */    
+    clearTimeout(_this.timeout);
+    _this.timeout = setTimeout(function(){
+      _this.$element.trigger('changed.zf.slider', [$hndl]);
+    }, _this.options.changedDelay);
   }
 
   /**
@@ -265,7 +275,7 @@ class Slider {
           //if the cursor position is less than or greater than the elements bounding coordinates, set coordinates within those bounds
           barXY = barOffset > 0 ? -halfOfHandle : (barOffset - halfOfHandle) < -barDim ? barDim : Math.abs(barOffset),
           offsetPct = percent(barXY, barDim);
-      value = (this.options.end - this.options.start) * offsetPct;
+      value = (this.options.end - this.options.start) * offsetPct + this.options.start;
 
       // turn everything around for RTL, yay math!
       if (Foundation.rtl() && !this.options.vertical) {value = this.options.end - value;}
@@ -520,7 +530,13 @@ Slider.defaults = {
    * @option
    * @example false
    */
-  invertVertical: false
+  invertVertical: false,
+  /**
+   * Milliseconds before the `changed.zf-slider` event is triggered after value change. 
+   * @option
+   * @example 500
+   */
+  changedDelay: 500
 };
 
 function percent(frac, num) {

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

@@ -103,14 +103,14 @@ class Toggler {
 
     if (this.$element.is(':hidden')) {
       Foundation.Motion.animateIn(this.$element, this.animationIn, function() {
-        this.trigger('on.zf.toggler');
         _this._updateARIA(true);
+        this.trigger('on.zf.toggler');
       });
     }
     else {
       Foundation.Motion.animateOut(this.$element, this.animationOut, function() {
-        this.trigger('off.zf.toggler');
         _this._updateARIA(false);
+        this.trigger('off.zf.toggler');
       });
     }
   }

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

@@ -172,6 +172,18 @@ function GetOffsets(element, anchor, position, vOffset, hOffset, isOverflow) {
         top: $eleDims.windowDims.offset.top
       }
       break;
+    case 'left bottom':
+      return {
+        left: $anchorDims.offset.left - ($eleDims.width + hOffset),
+        top: $anchorDims.offset.top + $anchorDims.height
+      };
+      break;
+    case 'right bottom':
+      return {
+        left: $anchorDims.offset.left + $anchorDims.width + hOffset - $eleDims.width,
+        top: $anchorDims.offset.top + $anchorDims.height
+      };
+      break;
     default:
       return {
         left: (Foundation.rtl() ? $anchorDims.offset.left - $eleDims.width + $anchorDims.width : $anchorDims.offset.left),

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

@@ -84,7 +84,7 @@ var MediaQuery = {
   _getCurrentSize() {
     var matched;
 
-    for (var i in this.queries) {
+    for (var i = 0; i < this.queries.length; i++) {
       var query = this.queries[i];
 
       if (window.matchMedia(query.value).matches) {

data/vendor/assets/scss/_global.scss

@@ -128,8 +128,8 @@ $-zf-flex-classes-imported: false;
 
   // Set box-sizing globally to handle padding and border widths
   *,
-  *:before,
-  *:after {
+  *::before,
+  *::after {
     box-sizing: inherit;
   }
 
@@ -187,6 +187,7 @@ $-zf-flex-classes-imported: false;
 
   // Reset <button> styles created by most browsers
   button {
+    @include disable-mouse-outline;
     -webkit-appearance: none;
     -moz-appearance: none;
     background: transparent;
@@ -512,7 +513,7 @@ $-zf-flex-classes-imported: false;
 
   button[disabled],
   html input[disabled] {
-    cursor: default;
+    cursor: not-allowed;
   }
 
   /**

data/vendor/assets/scss/components/_breadcrumbs.scss

@@ -89,6 +89,7 @@ $breadcrumbs-item-slash: true !default;
 
     .disabled {
       color: $breadcrumbs-item-color-disabled;
+      cursor: not-allowed;
     }
   }
 }

data/vendor/assets/scss/components/_button-group.scss

@@ -29,13 +29,15 @@ $buttongroup-expand-max: 6 !default;
 ) {
   @include clearfix;
   margin-bottom: $buttongroup-margin;
-  font-size: 0;
 
   @if $global-flexbox {
     display: flex;
     flex-wrap: nowrap;
     align-items: stretch;
   }
+  @else {
+    font-size: 0;
+  }
 
   #{$child-selector} {
     margin: 0;
@@ -44,17 +46,9 @@ $buttongroup-expand-max: 6 !default;
     @if $global-flexbox {
       flex: 0 0 auto;
     }
-    @else {
-      float: #{$global-left};
-    }
 
     &:not(:last-child) {
-      @if $global-flexbox {
-        margin-right: $buttongroup-spacing;
-      }
-      @else {
-        border-#{$global-right}: $buttongroup-spacing solid $body-background;
-      }
+      margin-right: $buttongroup-spacing;
     }
   }
 }
@@ -84,7 +78,11 @@ $buttongroup-expand-max: 6 !default;
         &:first-child:nth-last-child(#{$i}) {
           &, &:first-child:nth-last-child(#{$i}) ~ #{$selector} {
             display: inline-block;
-            width: calc(#{percentage(1/$i)} - #{$buttongroup-spacing});
+            @if #{$buttongroup-spacing} == '0' {
+              width: #{percentage(1 / $i)};
+            } @else {
+              width: calc(#{percentage(1 / $i)} - #{$buttongroup-spacing});
+            }
             margin-right: $buttongroup-spacing;
           }
         }
@@ -105,13 +103,20 @@ $buttongroup-expand-max: 6 !default;
   #{$selector} {
     @if $global-flexbox {
       flex: 0 0 100%;
+      margin-#{$global-right}: 0; 
     }
     @else {
       width: 100%;
+      border-#{$global-right}: $buttongroup-spacing solid transparent;
     }
-
+    
     &:not(:last-child) {
-      margin-#{$global-right}: 0;
+      @if $global-flexbox {
+        margin-bottom: $buttongroup-spacing;
+      }
+      @else {
+        border-bottom: $buttongroup-spacing solid $body-background;
+      }
     }
   }
 }
@@ -142,7 +147,9 @@ $buttongroup-expand-max: 6 !default;
 
     // Sizes
     @each $size, $value in map-remove($button-sizes, default) {
-      &.#{$size} #{$buttongroup-child-selector} { font-size: $value; }
+      &.#{$size} #{$buttongroup-child-selector} {
+        font-size: $value;
+      }
     }
 
     // Even-width Group

data/vendor/assets/scss/components/_button.scss

@@ -99,7 +99,7 @@ $button-opacity-disabled: 0.25 !default;
   $color: $button-color
 ) {
   @if $color == auto {
-    $color: foreground($background);
+    $color: foreground($background, $button-color-alt, $button-color);
   }
 
   @if $background-hover == auto {
@@ -139,7 +139,6 @@ $button-opacity-disabled: 0.25 !default;
 @mixin button-disabled {
   opacity: $button-opacity-disabled;
   cursor: not-allowed;
-  pointer-events: none;
 }
 
 /// Adds a dropdown arrow to a button.
@@ -195,15 +194,18 @@ $button-opacity-disabled: 0.25 !default;
 
     // Sizes
     @each $size, $value in map-remove($button-sizes, default) {
-      &.#{$size} { font-size: $value; }
+      &.#{$size} {
+        font-size: $value;
+      }
     }
+
     &.expanded { @include button-expand; }
 
     // Colors
     @each $name, $color in $foundation-palette {
       @if $button-fill != hollow {
         &.#{$name} {
-          @include button-style($color, auto);
+          @include button-style($color, auto, auto);
         }
       }
       @else {