foundation-rails 6.2.4.0 → 6.3.0.0

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

@@ -27,9 +27,7 @@ class Dropdown {
     Foundation.Keyboard.register('Dropdown', {
       'ENTER': 'open',
       'SPACE': 'open',
-      'ESCAPE': 'close',
-      'TAB': 'tab_forward',
-      'SHIFT_TAB': 'tab_backward'
+      'ESCAPE': 'close'
     });
   }
 
@@ -51,6 +49,11 @@ class Dropdown {
 
     });
 
+    if(this.options.parentClass){
+      this.$parent = this.$element.parents('.' + this.options.parentClass);
+    }else{
+      this.$parent = null;
+    }
     this.options.positionClass = this.getPositionClass();
     this.counter = 4;
     this.usedPositions = [];
@@ -134,11 +137,19 @@ 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.$parent))){
+      var newWidth = $eleDims.windowDims.width,
+          parentHOffset = 0;
+      if(this.$parent){
+        var $parentDims = Foundation.Box.GetDimensions(this.$parent),
+            parentHOffset = $parentDims.offset.left;
+        if ($parentDims.width < newWidth){
+          newWidth = $parentDims.width;
+        }
+      }
 
-
-    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),
+      this.$element.offset(Foundation.Box.GetOffsets(this.$element, this.$anchor, 'center bottom', this.options.vOffset, this.options.hOffset + parentHOffset, true)).css({
+        'width': newWidth - (this.options.hOffset * 2),
         'height': 'auto'
       });
       this.classChanged = true;
@@ -147,7 +158,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, false, true) && this.counter){
+    while(!Foundation.Box.ImNotTouchingYou(this.$element, this.$parent, true) && this.counter){
       this._reposition(position);
       this._setPosition();
     }
@@ -170,20 +181,21 @@ class Dropdown {
     if(this.options.hover){
       this.$anchor.off('mouseenter.zf.dropdown mouseleave.zf.dropdown')
       .on('mouseenter.zf.dropdown', function(){
-            if($('body[data-whatinput="mouse"]').is('*')) {
-              clearTimeout(_this.timeout);
-              _this.timeout = setTimeout(function(){
-                _this.open();
-                _this.$anchor.data('hover', true);
-              }, _this.options.hoverDelay);
-            }
-          }).on('mouseleave.zf.dropdown', function(){
-            clearTimeout(_this.timeout);
-            _this.timeout = setTimeout(function(){
-              _this.close();
-              _this.$anchor.data('hover', false);
-            }, _this.options.hoverDelay);
-          });
+        var bodyData = $('body').data();
+        if(typeof(bodyData.whatinput) === 'undefined' || bodyData.whatinput === 'mouse') {
+          clearTimeout(_this.timeout);
+          _this.timeout = setTimeout(function(){
+            _this.open();
+            _this.$anchor.data('hover', true);
+          }, _this.options.hoverDelay);
+        }
+      }).on('mouseleave.zf.dropdown', function(){
+        clearTimeout(_this.timeout);
+        _this.timeout = setTimeout(function(){
+          _this.close();
+          _this.$anchor.data('hover', false);
+        }, _this.options.hoverDelay);
+      });
       if(this.options.hoverPane){
         this.$element.off('mouseenter.zf.dropdown mouseleave.zf.dropdown')
             .on('mouseenter.zf.dropdown', function(){
@@ -203,26 +215,6 @@ class Dropdown {
         visibleFocusableElements = Foundation.Keyboard.findFocusable(_this.$element);
 
       Foundation.Keyboard.handleKey(e, 'Dropdown', {
-        tab_forward: function() {
-          if (_this.$element.find(':focus').is(visibleFocusableElements.eq(-1))) { // left modal downwards, setting focus to first element
-            if (_this.options.trapFocus) { // if focus shall be trapped
-              visibleFocusableElements.eq(0).focus();
-              e.preventDefault();
-            } else { // if focus is not trapped, close dropdown on focus out
-              _this.close();
-            }
-          }
-        },
-        tab_backward: function() {
-          if (_this.$element.find(':focus').is(visibleFocusableElements.eq(0)) || _this.$element.is(':focus')) { // left modal upwards, setting focus to last element
-            if (_this.options.trapFocus) { // if focus shall be trapped
-              visibleFocusableElements.eq(-1).focus();
-              e.preventDefault();
-            } else { // if focus is not trapped, close dropdown on focus out
-              _this.close();
-            }
-          }
-        },
         open: function() {
           if ($target.is(_this.$anchor)) {
             _this.open();
@@ -288,6 +280,10 @@ class Dropdown {
 
     if(this.options.closeOnClick){ this._addBodyHandler(); }
 
+    if (this.options.trapFocus) {
+      Foundation.Keyboard.trapFocus(this.$element);
+    }
+
     /**
      * Fires once the dropdown is visible.
      * @event Dropdown#show
@@ -322,6 +318,10 @@ class Dropdown {
       this.usedPositions.length = 0;
     }
     this.$element.trigger('hide.zf.dropdown', [this.$element]);
+
+    if (this.options.trapFocus) {
+      Foundation.Keyboard.releaseFocus(this.$element);
+    }
   }
 
   /**
@@ -350,6 +350,12 @@ class Dropdown {
 }
 
 Dropdown.defaults = {
+  /**
+   * Class that designates bounding container of Dropdown (Default: window)
+   * @option
+   * @example 'dropdown-parent'
+   */
+  parentClass: null,
   /**
    * Amount of time to delay opening a submenu on hover event.
    * @option

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

@@ -95,11 +95,6 @@ class DropdownMenu {
           _this._show($sub);
           $elem.add($elem.parentsUntil(_this.$element, `.${parClass}`)).attr('data-is-click', true);
         }
-      } else {
-        if(_this.options.closeOnClickInside){
-          _this._hide($elem);
-        }
-        return;
       }
     };
 
@@ -107,16 +102,27 @@ class DropdownMenu {
       this.$menuItems.on('click.zf.dropdownmenu touchstart.zf.dropdownmenu', handleClickFn);
     }
 
+    // Handle Leaf element Clicks
+    if(_this.options.closeOnClickInside){
+      this.$menuItems.on('click.zf.dropdownmenu touchend.zf.dropdownmenu', function(e) {
+        var $elem = $(this),
+            hasSub = $elem.hasClass(parClass);
+        if(!hasSub){
+          _this._hide();
+        }
+      });
+    }
+
     if (!this.options.disableHover) {
       this.$menuItems.on('mouseenter.zf.dropdownmenu', function(e) {
         var $elem = $(this),
             hasSub = $elem.hasClass(parClass);
 
         if (hasSub) {
-          clearTimeout(_this.delay);
-          _this.delay = setTimeout(function() {
+          clearTimeout($elem.data('_delay'));
+          $elem.data('_delay', setTimeout(function() {
             _this._show($elem.children('.is-dropdown-submenu'));
-          }, _this.options.hoverDelay);
+          }, _this.options.hoverDelay));
         }
       }).on('mouseleave.zf.dropdownmenu', function(e) {
         var $elem = $(this),
@@ -124,10 +130,10 @@ class DropdownMenu {
         if (hasSub && _this.options.autoclose) {
           if ($elem.attr('data-is-click') === 'true' && _this.options.clickOpen) { return false; }
 
-          clearTimeout(_this.delay);
-          _this.delay = setTimeout(function() {
+          clearTimeout($elem.data('_delay'));
+          $elem.data('_delay', setTimeout(function() {
             _this._hide($elem);
-          }, _this.options.closingTime);
+          }, _this.options.closingTime));
         }
       });
     }
@@ -268,9 +274,8 @@ class DropdownMenu {
     }));
     var $sibs = $sub.parent('li.is-dropdown-submenu-parent').siblings('li.is-dropdown-submenu-parent');
     this._hide($sibs, idx);
-    $sub.css('visibility', 'hidden').addClass('js-dropdown-active').attr({'aria-hidden': false})
-        .parent('li.is-dropdown-submenu-parent').addClass('is-active')
-        .attr({'aria-expanded': true});
+    $sub.css('visibility', 'hidden').addClass('js-dropdown-active')
+        .parent('li.is-dropdown-submenu-parent').addClass('is-active');
     var clear = Foundation.Box.ImNotTouchingYou($sub, null, true);
     if (!clear) {
       var oldClass = this.options.alignment === 'left' ? '-right' : '-left',
@@ -314,13 +319,10 @@ class DropdownMenu {
 
     if (somethingToClose) {
       $toClose.find('li.is-active').add($toClose).attr({
-        'aria-expanded': false,
         'data-is-click': false
       }).removeClass('is-active');
 
-      $toClose.find('ul.js-dropdown-active').attr({
-        'aria-hidden': true
-      }).removeClass('js-dropdown-active');
+      $toClose.find('ul.js-dropdown-active').removeClass('js-dropdown-active');
 
       if (this.changed || $toClose.find('opens-inner').length) {
         var oldClass = this.options.alignment === 'left' ? 'right' : 'left';

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

@@ -36,6 +36,7 @@ class Equalizer {
 
     this.$watched = $watched.length ? $watched : this.$element.find('[data-equalizer-watch]');
     this.$element.attr('data-resize', (eqId || Foundation.GetYoDigits(6, 'eq')));
+	this.$element.attr('data-mutate', (eqId || Foundation.GetYoDigits(6, 'eq')));
 
     this.hasNested = this.$element.find('[data-equalizer]').length > 0;
     this.isNested = this.$element.parentsUntil(document.body, '[data-equalizer]').length > 0;
@@ -70,7 +71,8 @@ class Equalizer {
     this.isOn = false;
     this.$element.off({
       '.zf.equalizer': this._bindHandler.onPostEqualizedBound,
-      'resizeme.zf.trigger': this._bindHandler.onResizeMeBound
+      'resizeme.zf.trigger': this._bindHandler.onResizeMeBound,
+	  'mutateme.zf.trigger': this._bindHandler.onResizeMeBound
     });
   }
 
@@ -101,6 +103,7 @@ class Equalizer {
       this.$element.on('postequalized.zf.equalizer', this._bindHandler.onPostEqualizedBound);
     }else{
       this.$element.on('resizeme.zf.trigger', this._bindHandler.onResizeMeBound);
+	  this.$element.on('mutateme.zf.trigger', this._bindHandler.onResizeMeBound);
     }
     this.isOn = true;
   }
@@ -110,7 +113,7 @@ class Equalizer {
    * @private
    */
   _checkMQ() {
-    var tooSmall = !Foundation.MediaQuery.atLeast(this.options.equalizeOn);
+    var tooSmall = !Foundation.MediaQuery.is(this.options.equalizeOn);
     if(tooSmall){
       if(this.isOn){
         this._pauseEvents();
@@ -155,6 +158,9 @@ class Equalizer {
    * @private
    */
   _isStacked() {
+    if (!this.$watched[0] || !this.$watched[1]) {
+      return true;
+    }
     return this.$watched[0].getBoundingClientRect().top !== this.$watched[1].getBoundingClientRect().top;
   }
 
@@ -230,8 +236,8 @@ class Equalizer {
    * Changes the CSS height property of each child in an Equalizer parent to match the tallest by row
    * @param {array} groups - An array of heights of children within Equalizer container grouped by row with element,height and max as last child
    * @fires Equalizer#preequalized
-   * @fires Equalizer#preequalizedRow
-   * @fires Equalizer#postequalizedRow
+   * @fires Equalizer#preequalizedrow
+   * @fires Equalizer#postequalizedrow
    * @fires Equalizer#postequalized
    */
   applyHeightByRow(groups) {
@@ -248,7 +254,7 @@ class Equalizer {
       }
       /**
         * Fires before the heights per row are applied
-        * @event Equalizer#preequalizedRow
+        * @event Equalizer#preequalizedrow
         */
       this.$element.trigger('preequalizedrow.zf.equalizer');
       for (var j = 0, lenJ = (groupsILength-1); j < lenJ ; j++) {
@@ -256,7 +262,7 @@ class Equalizer {
       }
       /**
         * Fires when the heights per row have been applied
-        * @event Equalizer#postequalizedRow
+        * @event Equalizer#postequalizedrow
         */
       this.$element.trigger('postequalizedrow.zf.equalizer');
     }

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

@@ -46,7 +46,9 @@ class Interchange {
    * @private
    */
   _events() {
-    $(window).on('resize.zf.interchange', Foundation.util.throttle(this._reflow.bind(this), 50));
+    $(window).on('resize.zf.interchange', Foundation.util.throttle(() => {
+      this._reflow();
+    }, 50));
   }
 
   /**
@@ -61,7 +63,6 @@ class Interchange {
     for (var i in this.rules) {
       if(this.rules.hasOwnProperty(i)) {
         var rule = this.rules[i];
-
         if (window.matchMedia(rule.query).matches) {
           match = rule;
         }

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

@@ -25,4 +25,5 @@
 //= require foundation.util.nest.js
 //= require foundation.util.timerAndImageLoader.js
 //= require foundation.util.touch.js
-//= require foundation.util.triggers.js
+//= require foundation.util.triggers.js
+//= require foundation.zf.responsiveAccordionTabs.js

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

@@ -20,6 +20,7 @@ class Magellan {
     this.options  = $.extend({}, Magellan.defaults, this.$element.data(), options);
 
     this._init();
+    this.calcPoints();
 
     Foundation.registerPlugin(this, 'Magellan');
   }
@@ -94,6 +95,11 @@ class Magellan {
         e.preventDefault();
         var arrival   = this.getAttribute('href');
         _this.scrollToLoc(arrival);
+      });
+    $(window).on('popstate', function(e) {
+      if(_this.options.deepLinking) {
+        _this.scrollToLoc(window.location.hash);
+      }
     });
   }
 
@@ -105,9 +111,16 @@ class Magellan {
   scrollToLoc(loc) {
     // Do nothing if target does not exist to prevent errors
     if (!$(loc).length) {return false;}
-    var scrollPos = Math.round($(loc).offset().top - this.options.threshold / 2 - this.options.barOffset);
-
-    $('html, body').stop(true).animate({ scrollTop: scrollPos }, this.options.animationDuration, this.options.animationEasing);
+    this._inTransition = true;
+    var _this = this,
+        scrollPos = Math.round($(loc).offset().top - this.options.threshold / 2 - this.options.barOffset);
+
+    $('html, body').stop(true).animate(
+      { scrollTop: scrollPos },
+      this.options.animationDuration,
+      this.options.animationEasing,
+      function() {_this._inTransition = false; _this._updateActive()}
+    );
   }
 
   /**
@@ -126,11 +139,12 @@ class Magellan {
    * @fires Magellan#update
    */
   _updateActive(/*evt, elem, scrollPos*/) {
+    if(this._inTransition) {return;}
     var winPos = /*scrollPos ||*/ parseInt(window.pageYOffset, 10),
         curIdx;
 
     if(winPos + this.winHeight === this.docHeight){ curIdx = this.points.length - 1; }
-    else if(winPos < this.points[0]){ curIdx = 0; }
+    else if(winPos < this.points[0]){ curIdx = undefined; }
     else{
       var isDown = this.scrollPos < winPos,
           _this = this,
@@ -144,11 +158,16 @@ class Magellan {
     this.$active = this.$links.filter('[href="#' + this.$targets.eq(curIdx).data('magellan-target') + '"]').addClass(this.options.activeClass);
 
     if(this.options.deepLinking){
-      var hash = this.$active[0].getAttribute('href');
-      if(window.history.pushState){
-        window.history.pushState(null, null, hash);
-      }else{
-        window.location.hash = hash;
+      var hash = "";
+      if(curIdx != undefined){
+        hash = this.$active[0].getAttribute('href');
+      }
+      if(hash !== window.location.hash) {
+        if(window.history.pushState){
+          window.history.pushState(null, null, hash);
+        }else{
+          window.location.hash = hash;
+        }
       }
     }
 

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

@@ -44,33 +44,35 @@ class OffCanvas {
 
     this.$element.attr('aria-hidden', 'true');
 
+    this.$element.addClass(`is-transition-${this.options.transition}`);
+
     // Find triggers that affect this element and add aria-expanded to them
     this.$triggers = $(document)
       .find('[data-open="'+id+'"], [data-close="'+id+'"], [data-toggle="'+id+'"]')
       .attr('aria-expanded', 'false')
       .attr('aria-controls', id);
 
-    // Add a close trigger over the body if necessary
-    if (this.options.closeOnClick) {
-      if ($('.js-off-canvas-exit').length) {
-        this.$exiter = $('.js-off-canvas-exit');
+    // Add an overlay over the content if necessary
+    if (this.options.contentOverlay === true) {
+      var overlay = document.createElement('div');
+      var overlayPosition = $(this.$element).css("position") === 'fixed' ? 'is-overlay-fixed' : 'is-overlay-absolute';
+      overlay.setAttribute('class', 'js-off-canvas-overlay ' + overlayPosition);
+      this.$overlay = $(overlay);
+      if(overlayPosition === 'is-overlay-fixed') {
+        $('body').append(this.$overlay);
       } else {
-        var exiter = document.createElement('div');
-        exiter.setAttribute('class', 'js-off-canvas-exit');
-        $('[data-off-canvas-content]').append(exiter);
-
-        this.$exiter = $(exiter);
+        this.$element.siblings('[data-off-canvas-content]').append(this.$overlay);
       }
     }
 
     this.options.isRevealed = this.options.isRevealed || new RegExp(this.options.revealClass, 'g').test(this.$element[0].className);
 
-    if (this.options.isRevealed) {
+    if (this.options.isRevealed === true) {
       this.options.revealOn = this.options.revealOn || this.$element[0].className.match(/(reveal-for-medium|reveal-for-large)/g)[0].split('-')[2];
       this._setMQChecker();
     }
-    if (!this.options.transitionTime) {
-      this.options.transitionTime = parseFloat(window.getComputedStyle($('[data-off-canvas-wrapper]')[0]).transitionDuration) * 1000;
+    if (!this.options.transitionTime === true) {
+      this.options.transitionTime = parseFloat(window.getComputedStyle($('[data-off-canvas]')[0]).transitionDuration) * 1000;
     }
   }
 
@@ -87,8 +89,9 @@ class OffCanvas {
       'keydown.zf.offcanvas': this._handleKeyboard.bind(this)
     });
 
-    if (this.options.closeOnClick && this.$exiter.length) {
-      this.$exiter.on({'click.zf.offcanvas': this.close.bind(this)});
+    if (this.options.closeOnClick === true) {
+      var $target = this.options.contentOverlay ? this.$overlay : $('[data-off-canvas-content]');
+      $target.on({'click.zf.offcanvas': this.close.bind(this)});
     }
   }
 
@@ -122,19 +125,12 @@ class OffCanvas {
     if (isRevealed) {
       this.close();
       this.isRevealed = true;
-      // if (!this.options.forceTop) {
-      //   var scrollPos = parseInt(window.pageYOffset);
-      //   this.$element[0].style.transform = 'translate(0,' + scrollPos + 'px)';
-      // }
-      // if (this.options.isSticky) { this._stick(); }
+      this.$element.attr('aria-hidden', 'false');
       this.$element.off('open.zf.trigger toggle.zf.trigger');
       if ($closer.length) { $closer.hide(); }
     } else {
       this.isRevealed = false;
-      // if (this.options.isSticky || !this.options.forceTop) {
-      //   this.$element[0].style.transform = '';
-      //   $(window).off('scroll.zf.offcanvas');
-      // }
+      this.$element.attr('aria-hidden', 'true');
       this.$element.on({
         'open.zf.trigger': this.open.bind(this),
         'toggle.zf.trigger': this.toggle.bind(this)
@@ -145,6 +141,14 @@ class OffCanvas {
     }
   }
 
+  /**
+   * Stops scrolling of the body when offcanvas is open on mobile Safari and other troublesome browsers.
+   * @private
+   */
+  _stopScrolling(event) {
+  	return false;
+  }
+
   /**
    * Opens the off-canvas menu.
    * @function
@@ -154,107 +158,53 @@ class OffCanvas {
    */
   open(event, trigger) {
     if (this.$element.hasClass('is-open') || this.isRevealed) { return; }
-    var _this = this,
-        $body = $(document.body);
+    var _this = this;
+
+    if (trigger) {
+      this.$lastTrigger = trigger;
+    }
 
-    if (this.options.forceTop) {
-      $('body').scrollTop(0);
+    if (this.options.forceTo === 'top') {
+      window.scrollTo(0, 0);
+    } else if (this.options.forceTo === 'bottom') {
+      window.scrollTo(0,document.body.scrollHeight);
     }
-    // window.pageYOffset = 0;
-
-    // if (!this.options.forceTop) {
-    //   var scrollPos = parseInt(window.pageYOffset);
-    //   this.$element[0].style.transform = 'translate(0,' + scrollPos + 'px)';
-    //   if (this.$exiter.length) {
-    //     this.$exiter[0].style.transform = 'translate(0,' + scrollPos + 'px)';
-    //   }
-    // }
+
     /**
      * Fires when the off-canvas menu opens.
      * @event OffCanvas#opened
      */
-
-    var $wrapper = $('[data-off-canvas-wrapper]');
-    $wrapper.addClass('is-off-canvas-open is-open-'+ _this.options.position);
-
     _this.$element.addClass('is-open')
 
-      // if (_this.options.isSticky) {
-      //   _this._stick();
-      // }
-
     this.$triggers.attr('aria-expanded', 'true');
     this.$element.attr('aria-hidden', 'false')
         .trigger('opened.zf.offcanvas');
 
-    if (this.options.closeOnClick) {
-      this.$exiter.addClass('is-visible');
+    // If `contentScroll` is set to false, add class and disable scrolling on touch devices.
+    if (this.options.contentScroll === false) {
+      $('body').addClass('is-off-canvas-open').on('touchmove', this._stopScrolling);
     }
 
-    if (trigger) {
-      this.$lastTrigger = trigger;
+    if (this.options.contentOverlay === true) {
+      this.$overlay.addClass('is-visible');
     }
 
-    if (this.options.autoFocus) {
-      $wrapper.one(Foundation.transitionend($wrapper), function() {
-        if(_this.$element.hasClass('is-open')) { // handle double clicks
-          _this.$element.attr('tabindex', '-1');
-          _this.$element.focus();
-        }
-      });
+    if (this.options.closeOnClick === true && this.options.contentOverlay === true) {
+      this.$overlay.addClass('is-closable');
     }
 
-    if (this.options.trapFocus) {
-      $wrapper.one(Foundation.transitionend($wrapper), function() {
-        if(_this.$element.hasClass('is-open')) { // handle double clicks
-          _this.$element.attr('tabindex', '-1');
-          _this.trapFocus();
-        }
+    if (this.options.autoFocus === true) {
+      this.$element.one(Foundation.transitionend(this.$element), function() {
+        _this.$element.find('a, button').eq(0).focus();
       });
     }
-  }
 
-  /**
-   * Traps focus within the offcanvas on open.
-   * @private
-   */
-  _trapFocus() {
-    var focusable = Foundation.Keyboard.findFocusable(this.$element),
-        first = focusable.eq(0),
-        last = focusable.eq(-1);
-
-    focusable.off('.zf.offcanvas').on('keydown.zf.offcanvas', function(e) {
-      var key = Foundation.Keyboard.parseKey(e);
-      if (key === 'TAB' && e.target === last[0]) {
-        e.preventDefault();
-        first.focus();
-      }
-      if (key === 'SHIFT_TAB' && e.target === first[0]) {
-        e.preventDefault();
-        last.focus();
-      }
-    });
+    if (this.options.trapFocus === true) {
+      this.$element.siblings('[data-off-canvas-content]').attr('tabindex', '-1');
+      Foundation.Keyboard.trapFocus(this.$element);
+    }
   }
 
-  /**
-   * Allows the offcanvas to appear sticky utilizing translate properties.
-   * @private
-   */
-  // OffCanvas.prototype._stick = function() {
-  //   var elStyle = this.$element[0].style;
-  //
-  //   if (this.options.closeOnClick) {
-  //     var exitStyle = this.$exiter[0].style;
-  //   }
-  //
-  //   $(window).on('scroll.zf.offcanvas', function(e) {
-  //     console.log(e);
-  //     var pageY = window.pageYOffset;
-  //     elStyle.transform = 'translate(0,' + pageY + 'px)';
-  //     if (exitStyle !== undefined) { exitStyle.transform = 'translate(0,' + pageY + 'px)'; }
-  //   });
-  //   // this.$element.trigger('stuck.zf.offcanvas');
-  // };
   /**
    * Closes the off-canvas menu.
    * @function
@@ -266,30 +216,33 @@ class OffCanvas {
 
     var _this = this;
 
-    //  Foundation.Move(this.options.transitionTime, this.$element, function() {
-    $('[data-off-canvas-wrapper]').removeClass(`is-off-canvas-open is-open-${_this.options.position}`);
     _this.$element.removeClass('is-open');
-      // Foundation._reflow();
-    // });
+
     this.$element.attr('aria-hidden', 'true')
       /**
        * Fires when the off-canvas menu opens.
        * @event OffCanvas#closed
        */
         .trigger('closed.zf.offcanvas');
-    // if (_this.options.isSticky || !_this.options.forceTop) {
-    //   setTimeout(function() {
-    //     _this.$element[0].style.transform = '';
-    //     $(window).off('scroll.zf.offcanvas');
-    //   }, this.options.transitionTime);
-    // }
-    if (this.options.closeOnClick) {
-      this.$exiter.removeClass('is-visible');
+
+    // If `contentScroll` is set to false, remove class and re-enable scrolling on touch devices.
+    if (this.options.contentScroll === false) {
+      $('body').removeClass('is-off-canvas-open').off('touchmove', this._stopScrolling);
+    }
+
+    if (this.options.contentOverlay === true) {
+      this.$overlay.removeClass('is-visible');
+    }
+
+    if (this.options.closeOnClick === true && this.options.contentOverlay === true) {
+      this.$overlay.removeClass('is-closable');
     }
 
     this.$triggers.attr('aria-expanded', 'false');
-    if (this.options.trapFocus) {
-      $('[data-off-canvas-content]').removeAttr('tabindex');
+
+    if (this.options.trapFocus === true) {
+      this.$element.siblings('[data-off-canvas-content]').removeAttr('tabindex');
+      Foundation.Keyboard.releaseFocus(this.$element);
     }
   }
 
@@ -334,7 +287,7 @@ class OffCanvas {
   destroy() {
     this.close();
     this.$element.off('.zf.trigger .zf.offcanvas');
-    this.$exiter.off('.zf.offcanvas');
+    this.$overlay.off('.zf.offcanvas');
 
     Foundation.unregisterPlugin(this);
   }
@@ -348,6 +301,20 @@ OffCanvas.defaults = {
    */
   closeOnClick: true,
 
+  /**
+   * Adds an overlay on top of `[data-off-canvas-content]`.
+   * @option
+   * @example true
+   */
+  contentOverlay: true,
+
+  /**
+   * Enable/disable scrolling of the main content when an off canvas panel is open.
+   * @option
+   * @example true
+   */
+  contentScroll: true,
+
   /**
    * Amount of time in ms the open and close transition requires. If none selected, pulls from body style.
    * @option
@@ -356,18 +323,18 @@ OffCanvas.defaults = {
   transitionTime: 0,
 
   /**
-   * Direction the offcanvas opens from. Determines class applied to body.
+   * Type of transition for the offcanvas menu. Options are 'push', 'detached' or 'slide'.
    * @option
-   * @example left
+   * @example push
    */
-  position: 'left',
+  transition: 'push',
 
   /**
-   * Force the page to scroll to top on open.
+   * Force the page to scroll to top or bottom on open.
    * @option
-   * @example true
+   * @example top
    */
-  forceTop: true,
+  forceTo: null,
 
   /**
    * Allow the offcanvas to remain open for certain breakpoints.
@@ -384,7 +351,7 @@ OffCanvas.defaults = {
   revealOn: null,
 
   /**
-   * Force focus to the offcanvas on open. If true, will focus the opening trigger on close. Sets tabindex of [data-off-canvas-content] to -1 for accessibility purposes.
+   * Force focus to the offcanvas on open. If true, will focus the opening trigger on close.
    * @option
    * @example true
    */