foundation-rails 6.3.1.0 → 6.4.1.0

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

@@ -1,29 +1,33 @@
 'use strict';
 
-!function($) {
+import $ from 'jquery';
+import { MediaQuery } from './foundation.util.mediaQuery';
+import { onImagesLoaded } from './foundation.util.imageLoader';
+import { GetYoDigits } from './foundation.util.core';
+import { Plugin } from './foundation.plugin';
 
 /**
  * Equalizer module.
  * @module foundation.equalizer
  * @requires foundation.util.mediaQuery
- * @requires foundation.util.timerAndImageLoader if equalizer contains images
+ * @requires foundation.util.imageLoader if equalizer contains images
  */
 
-class Equalizer {
+class Equalizer extends Plugin {
   /**
    * Creates a new instance of Equalizer.
    * @class
+   * @name Equalizer
    * @fires Equalizer#init
    * @param {Object} element - jQuery object to add the trigger to.
    * @param {Object} options - Overrides to the default plugin settings.
    */
-  constructor(element, options){
+  _setup(element, options){
     this.$element = element;
     this.options  = $.extend({}, Equalizer.defaults, this.$element.data(), options);
+    this.className = 'Equalizer'; // ie9 back compat
 
     this._init();
-
-    Foundation.registerPlugin(this, 'Equalizer');
   }
 
   /**
@@ -34,9 +38,11 @@ class Equalizer {
     var eqId = this.$element.attr('data-equalizer') || '';
     var $watched = this.$element.find(`[data-equalizer-watch="${eqId}"]`);
 
+    MediaQuery._init();
+
     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.$element.attr('data-resize', (eqId || GetYoDigits(6, 'eq')));
+    this.$element.attr('data-mutate', (eqId || GetYoDigits(6, 'eq')));
 
     this.hasNested = this.$element.find('[data-equalizer]').length > 0;
     this.isNested = this.$element.parentsUntil(document.body, '[data-equalizer]').length > 0;
@@ -56,7 +62,7 @@ class Equalizer {
     }
     if((tooSmall !== undefined && tooSmall === false) || tooSmall === undefined){
       if(imgs.length){
-        Foundation.onImagesLoaded(imgs, this._reflow.bind(this));
+        onImagesLoaded(imgs, this._reflow.bind(this));
       }else{
         this._reflow();
       }
@@ -113,7 +119,7 @@ class Equalizer {
    * @private
    */
   _checkMQ() {
-    var tooSmall = !Foundation.MediaQuery.is(this.options.equalizeOn);
+    var tooSmall = !MediaQuery.is(this.options.equalizeOn);
     if(tooSmall){
       if(this.isOn){
         this._pauseEvents();
@@ -276,11 +282,9 @@ class Equalizer {
    * Destroys an instance of Equalizer.
    * @function
    */
-  destroy() {
+  _destroy() {
     this._pauseEvents();
     this.$watched.css('height', 'auto');
-
-    Foundation.unregisterPlugin(this);
   }
 }
 
@@ -311,7 +315,4 @@ Equalizer.defaults = {
   equalizeOn: ''
 };
 
-// Window exports
-Foundation.plugin(Equalizer, 'Equalizer');
-
-}(jQuery);
+export {Equalizer};

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

@@ -1,32 +1,35 @@
 'use strict';
 
-!function($) {
+import $ from 'jquery';
+import { MediaQuery } from './foundation.util.mediaQuery';
+import { Plugin } from './foundation.plugin';
+import { GetYoDigits } from './foundation.util.core';
+
 
 /**
  * Interchange module.
  * @module foundation.interchange
  * @requires foundation.util.mediaQuery
- * @requires foundation.util.timerAndImageLoader
  */
 
-class Interchange {
+class Interchange extends Plugin {
   /**
    * Creates a new instance of Interchange.
    * @class
+   * @name Interchange
    * @fires Interchange#init
    * @param {Object} element - jQuery object to add the trigger to.
    * @param {Object} options - Overrides to the default plugin settings.
    */
-  constructor(element, options) {
+  _setup(element, options) {
     this.$element = element;
     this.options = $.extend({}, Interchange.defaults, options);
     this.rules = [];
     this.currentPath = '';
+    this.className = 'Interchange'; // ie9 back compat
 
     this._init();
     this._events();
-
-    Foundation.registerPlugin(this, 'Interchange');
   }
 
   /**
@@ -35,6 +38,14 @@ class Interchange {
    * @private
    */
   _init() {
+    MediaQuery._init();
+
+    var id = this.$element[0].id || GetYoDigits(6, 'interchange');
+    this.$element.attr({
+      'data-resize': id,
+      'id': id
+    });
+
     this._addBreakpoints();
     this._generateRules();
     this._reflow();
@@ -46,9 +57,7 @@ class Interchange {
    * @private
    */
   _events() {
-    $(window).on('resize.zf.interchange', Foundation.util.throttle(() => {
-      this._reflow();
-    }, 50));
+    this.$element.off('resizeme.zf.trigger').on('resizeme.zf.trigger', () => this._reflow());
   }
 
   /**
@@ -80,9 +89,9 @@ class Interchange {
    * @private
    */
   _addBreakpoints() {
-    for (var i in Foundation.MediaQuery.queries) {
-      if (Foundation.MediaQuery.queries.hasOwnProperty(i)) {
-        var query = Foundation.MediaQuery.queries[i];
+    for (var i in MediaQuery.queries) {
+      if (MediaQuery.queries.hasOwnProperty(i)) {
+        var query = MediaQuery.queries[i];
         Interchange.SPECIAL_QUERIES[query.name] = query.value;
       }
     }
@@ -105,7 +114,7 @@ class Interchange {
     else {
       rules = this.$element.data('interchange');
     }
-    
+
     rules =  typeof rules === 'string' ? rules.match(/\[.*?\]/g) : rules;
 
     for (var i in rules) {
@@ -149,6 +158,7 @@ class Interchange {
     }
     // Replacing background images
     else if (path.match(/\.(gif|jpg|jpeg|png|svg|tiff)([?#].*)?/i)) {
+      path = path.replace(/\(/g, '%28').replace(/\)/g, '%29');
       this.$element.css({ 'background-image': 'url('+path+')' })
           .trigger(trigger);
     }
@@ -173,8 +183,8 @@ class Interchange {
    * Destroys an instance of interchange.
    * @function
    */
-  destroy() {
-    //TODO this.
+  _destroy() {
+    this.$element.off('resizeme.zf.trigger')
   }
 }
 
@@ -197,7 +207,4 @@ Interchange.SPECIAL_QUERIES = {
   'retina': 'only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)'
 };
 
-// Window exports
-Foundation.plugin(Interchange, 'Interchange');
-
-}(jQuery);
+export {Interchange};

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

@@ -10,20 +10,25 @@
 //= require foundation.magellan.js
 //= require foundation.offcanvas.js
 //= require foundation.orbit.js
+//= require foundation.plugin.js
+//= require foundation.positionable.js
+//= require foundation.responsiveAccordionTabs.js
 //= require foundation.responsiveMenu.js
 //= require foundation.responsiveToggle.js
 //= require foundation.reveal.js
 //= require foundation.slider.js
+//= require foundation.smoothScroll.js
 //= require foundation.sticky.js
 //= require foundation.tabs.js
 //= require foundation.toggler.js
 //= require foundation.tooltip.js
 //= require foundation.util.box.js
+//= require foundation.util.core.js
+//= require foundation.util.imageLoader.js
 //= require foundation.util.keyboard.js
 //= require foundation.util.mediaQuery.js
 //= require foundation.util.motion.js
 //= require foundation.util.nest.js
-//= require foundation.util.timerAndImageLoader.js
+//= require foundation.util.timer.js
 //= require foundation.util.touch.js
-//= require foundation.util.triggers.js
-//= require foundation.zf.responsiveAccordionTabs.js
+//= require foundation.util.triggers.js

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

@@ -1,28 +1,33 @@
 'use strict';
 
-!function($) {
+
+import $ from 'jquery';
+import { GetYoDigits } from './foundation.util.core';
+import { Plugin } from './foundation.plugin';
+import { SmoothScroll } from './foundation.smoothScroll';
 
 /**
  * Magellan module.
  * @module foundation.magellan
+ * @requires foundation.smoothScroll
  */
 
-class Magellan {
+class Magellan extends Plugin {
   /**
    * Creates a new instance of Magellan.
    * @class
+   * @name Magellan
    * @fires Magellan#init
    * @param {Object} element - jQuery object to add the trigger to.
    * @param {Object} options - Overrides to the default plugin settings.
    */
-  constructor(element, options) {
+  _setup(element, options) {
     this.$element = element;
     this.options  = $.extend({}, Magellan.defaults, this.$element.data(), options);
+    this.className = 'Magellan'; // ie9 back compat
 
     this._init();
     this.calcPoints();
-
-    Foundation.registerPlugin(this, 'Magellan');
   }
 
   /**
@@ -30,7 +35,7 @@ class Magellan {
    * @private
    */
   _init() {
-    var id = this.$element[0].id || Foundation.GetYoDigits(6, 'magellan');
+    var id = this.$element[0].id || GetYoDigits(6, 'magellan');
     var _this = this;
     this.$targets = $('[data-magellan-target]');
     this.$links = this.$element.find('a');
@@ -96,11 +101,14 @@ class Magellan {
         var arrival   = this.getAttribute('href');
         _this.scrollToLoc(arrival);
       });
-    $(window).on('popstate', function(e) {
+
+    this._deepLinkScroll = function(e) {
       if(_this.options.deepLinking) {
         _this.scrollToLoc(window.location.hash);
       }
-    });
+    };
+
+    $(window).on('popstate', this._deepLinkScroll);
   }
 
   /**
@@ -109,18 +117,20 @@ class Magellan {
    * @function
    */
   scrollToLoc(loc) {
-    // Do nothing if target does not exist to prevent errors
-    if (!$(loc).length) {return false;}
     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()}
-    );
+    var _this = this;
+
+    var options = {
+      animationEasing: this.options.animationEasing,
+      animationDuration: this.options.animationDuration,
+      threshold: this.options.threshold,
+      offset: this.options.offset
+    };
+
+    SmoothScroll.scrollToLoc(loc, options, function() {
+      _this._inTransition = false;
+      _this._updateActive();
+    })
   }
 
   /**
@@ -149,7 +159,7 @@ class Magellan {
       var isDown = this.scrollPos < winPos,
           _this = this,
           curVisible = this.points.filter(function(p, i){
-            return isDown ? p - _this.options.barOffset <= winPos : p - _this.options.barOffset - _this.options.threshold <= winPos;
+            return isDown ? p - _this.options.offset <= winPos : p - _this.options.offset - _this.options.threshold <= winPos;
           });
       curIdx = curVisible.length ? curVisible.length - 1 : 0;
     }
@@ -183,7 +193,7 @@ class Magellan {
    * Destroys an instance of Magellan and resets the url of the window.
    * @function
    */
-  destroy() {
+  _destroy() {
     this.$element.off('.zf.trigger .zf.magellan')
         .find(`.${this.options.activeClass}`).removeClass(this.options.activeClass);
 
@@ -191,8 +201,7 @@ class Magellan {
       var hash = this.$active[0].getAttribute('href');
       window.location.hash.replace(hash, '');
     }
-
-    Foundation.unregisterPlugin(this);
+    $(window).off('popstate', this._deepLinkScroll);
   }
 }
 
@@ -226,9 +235,9 @@ Magellan.defaults = {
    * Class applied to the active locations link on the magellan container.
    * @option
    * @type {string}
-   * @default 'active'
+   * @default 'is-active'
    */
-  activeClass: 'active',
+  activeClass: 'is-active',
   /**
    * Allows the script to manipulate the url of the current page, and if supported, alter the history.
    * @option
@@ -242,10 +251,7 @@ Magellan.defaults = {
    * @type {number}
    * @default 0
    */
-  barOffset: 0
+  offset: 0
 }
 
-// Window exports
-Foundation.plugin(Magellan, 'Magellan');
-
-}(jQuery);
+export {Magellan};

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

@@ -1,6 +1,12 @@
 'use strict';
 
-!function($) {
+import $ from 'jquery';
+import { Keyboard } from './foundation.util.keyboard';
+import { MediaQuery } from './foundation.util.mediaQuery';
+import { transitionend } from './foundation.util.core';
+import { Plugin } from './foundation.plugin';
+
+import { Triggers } from './foundation.util.triggers';
 
 /**
  * OffCanvas module.
@@ -8,28 +14,45 @@
  * @requires foundation.util.keyboard
  * @requires foundation.util.mediaQuery
  * @requires foundation.util.triggers
- * @requires foundation.util.motion
  */
 
-class OffCanvas {
+class OffCanvas extends Plugin {
   /**
    * Creates a new instance of an off-canvas wrapper.
    * @class
+   * @name OffCanvas
    * @fires OffCanvas#init
    * @param {Object} element - jQuery object to initialize.
    * @param {Object} options - Overrides to the default plugin settings.
    */
-  constructor(element, options) {
+  _setup(element, options) {
+    this.className = 'OffCanvas'; // ie9 back compat
     this.$element = element;
     this.options = $.extend({}, OffCanvas.defaults, this.$element.data(), options);
+    this.contentClasses = { base: [], reveal: [] };
     this.$lastTrigger = $();
     this.$triggers = $();
+    this.position = 'left';
+    this.$content = $();
+    this.nested = !!(this.options.nested);
+
+    // Defines the CSS transition/position classes of the off-canvas content container.
+    $(['push', 'overlap']).each((index, val) => {
+      this.contentClasses.base.push('has-transition-'+val);
+    });
+    $(['left', 'right', 'top', 'bottom']).each((index, val) => {
+      this.contentClasses.base.push('has-position-'+val);
+      this.contentClasses.reveal.push('has-reveal-'+val);
+    });
+
+    // Triggers init is idempotent, just need to make sure it is initialized
+    Triggers.init($);
+    MediaQuery._init();
 
     this._init();
     this._events();
 
-    Foundation.registerPlugin(this, 'OffCanvas')
-    Foundation.Keyboard.register('OffCanvas', {
+    Keyboard.register('OffCanvas', {
       'ESCAPE': 'close'
     });
 
@@ -45,7 +68,33 @@ class OffCanvas {
 
     this.$element.attr('aria-hidden', 'true');
 
-    this.$element.addClass(`is-transition-${this.options.transition}`);
+    // Find off-canvas content, either by ID (if specified), by siblings or by closest selector (fallback)
+    if (this.options.contentId) {
+      this.$content = $('#'+this.options.contentId);
+    } else if (this.$element.siblings('[data-off-canvas-content]').length) {
+      this.$content = this.$element.siblings('[data-off-canvas-content]').first();
+    } else {
+      this.$content = this.$element.closest('[data-off-canvas-content]').first();
+    }
+
+    if (!this.options.contentId) {
+      // Assume that the off-canvas element is nested if it isn't a sibling of the content
+      this.nested = this.$element.siblings('[data-off-canvas-content]').length === 0;
+
+    } else if (this.options.contentId && this.options.nested === null) {
+      // Warning if using content ID without setting the nested option
+      // Once the element is nested it is required to work properly in this case
+      console.warn('Remember to use the nested option if using the content ID option!');
+    }
+
+    if (this.nested === true) {
+      // Force transition overlap if nested
+      this.options.transition = 'overlap';
+      // Remove appropriate classes if already assigned in markup
+      this.$element.removeClass('is-transition-push');
+    }
+
+    this.$element.addClass(`is-transition-${this.options.transition} is-closed`);
 
     // Find triggers that affect this element and add aria-expanded to them
     this.$triggers = $(document)
@@ -53,6 +102,9 @@ class OffCanvas {
       .attr('aria-expanded', 'false')
       .attr('aria-controls', id);
 
+    // Get position by checking for related CSS class
+    this.position = this.$element.is('.position-left, .position-top, .position-right, .position-bottom') ? this.$element.attr('class').match(/position\-(left|top|right|bottom)/)[1] : this.position;
+
     // Add an overlay over the content if necessary
     if (this.options.contentOverlay === true) {
       var overlay = document.createElement('div');
@@ -60,9 +112,9 @@ class OffCanvas {
       overlay.setAttribute('class', 'js-off-canvas-overlay ' + overlayPosition);
       this.$overlay = $(overlay);
       if(overlayPosition === 'is-overlay-fixed') {
-        $('body').append(this.$overlay);
+        $(this.$overlay).insertAfter(this.$element);
       } else {
-        this.$element.siblings('[data-off-canvas-content]').append(this.$overlay);
+        this.$content.append(this.$overlay);
       }
     }
 
@@ -72,9 +124,13 @@ class OffCanvas {
       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 === true) {
-      this.options.transitionTime = parseFloat(window.getComputedStyle($('[data-off-canvas]')[0]).transitionDuration) * 1000;
+
+    if (this.options.transitionTime) {
+      this.$element.css('transition-duration', this.options.transitionTime);
     }
+
+    // Initally remove all transition/position CSS classes from off-canvas content container.
+    this._removeContentClasses();
   }
 
   /**
@@ -91,7 +147,7 @@ class OffCanvas {
     });
 
     if (this.options.closeOnClick === true) {
-      var $target = this.options.contentOverlay ? this.$overlay : $('[data-off-canvas-content]');
+      var $target = this.options.contentOverlay ? this.$overlay : this.$content;
       $target.on({'click.zf.offcanvas': this.close.bind(this)});
     }
   }
@@ -104,31 +160,56 @@ class OffCanvas {
     var _this = this;
 
     $(window).on('changed.zf.mediaquery', function() {
-      if (Foundation.MediaQuery.atLeast(_this.options.revealOn)) {
+      if (MediaQuery.atLeast(_this.options.revealOn)) {
         _this.reveal(true);
       } else {
         _this.reveal(false);
       }
     }).one('load.zf.offcanvas', function() {
-      if (Foundation.MediaQuery.atLeast(_this.options.revealOn)) {
+      if (MediaQuery.atLeast(_this.options.revealOn)) {
         _this.reveal(true);
       }
     });
   }
 
+  /**
+   * Removes the CSS transition/position classes of the off-canvas content container.
+   * Removing the classes is important when another off-canvas gets opened that uses the same content container.
+   * @private
+   */
+  _removeContentClasses(hasReveal) {
+    this.$content.removeClass(this.contentClasses.base.join(' '));
+    if (hasReveal === true) {
+      this.$content.removeClass(this.contentClasses.reveal.join(' '));
+    }
+  }
+
+  /**
+   * Adds the CSS transition/position classes of the off-canvas content container, based on the opening off-canvas element.
+   * Beforehand any transition/position class gets removed.
+   * @param {Boolean} hasReveal - true if related off-canvas element is revealed.
+   * @private
+   */
+  _addContentClasses(hasReveal) {
+    this._removeContentClasses();
+    this.$content.addClass(`has-transition-${this.options.transition} has-position-${this.position}`);
+    if (hasReveal === true) {
+      this.$content.addClass(`has-reveal-${this.position}`);
+    }
+  }
+
   /**
    * Handles the revealing/hiding the off-canvas at breakpoints, not the same as open.
    * @param {Boolean} isRevealed - true if element should be revealed.
    * @function
    */
   reveal(isRevealed) {
-    var $closer = this.$element.find('[data-close]');
     if (isRevealed) {
       this.close();
       this.isRevealed = true;
       this.$element.attr('aria-hidden', 'false');
       this.$element.off('open.zf.trigger toggle.zf.trigger');
-      if ($closer.length) { $closer.hide(); }
+      this.$element.removeClass('is-closed');
     } else {
       this.isRevealed = false;
       this.$element.attr('aria-hidden', 'true');
@@ -136,10 +217,9 @@ class OffCanvas {
         'open.zf.trigger': this.open.bind(this),
         'toggle.zf.trigger': this.toggle.bind(this)
       });
-      if ($closer.length) {
-        $closer.show();
-      }
+      this.$element.addClass('is-closed');
     }
+    this._addContentClasses(isRevealed);
   }
 
   /**
@@ -205,16 +285,24 @@ class OffCanvas {
       window.scrollTo(0,document.body.scrollHeight);
     }
 
+    if (this.options.transitionTime && this.options.transition !== 'overlap') {
+      this.$element.siblings('[data-off-canvas-content]').css('transition-duration', this.options.transitionTime);
+    } else {
+      this.$element.siblings('[data-off-canvas-content]').css('transition-duration', '');
+    }
+
     /**
      * Fires when the off-canvas menu opens.
      * @event OffCanvas#opened
      */
-    _this.$element.addClass('is-open')
+    this.$element.addClass('is-open').removeClass('is-closed');
 
     this.$triggers.attr('aria-expanded', 'true');
     this.$element.attr('aria-hidden', 'false')
         .trigger('opened.zf.offcanvas');
 
+    this.$content.addClass('is-open-' + this.position);
+
     // 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);
@@ -231,7 +319,10 @@ class OffCanvas {
     }
 
     if (this.options.autoFocus === true) {
-      this.$element.one(Foundation.transitionend(this.$element), function() {
+      this.$element.one(transitionend(this.$element), function() {
+        if (!_this.$element.hasClass('is-open')) {
+          return; // exit if prematurely closed
+        }
         var canvasFocus = _this.$element.find('[data-autofocus]');
         if (canvasFocus.length) {
             canvasFocus.eq(0).focus();
@@ -242,9 +333,11 @@ class OffCanvas {
     }
 
     if (this.options.trapFocus === true) {
-      this.$element.siblings('[data-off-canvas-content]').attr('tabindex', '-1');
-      Foundation.Keyboard.trapFocus(this.$element);
+      this.$content.attr('tabindex', '-1');
+      Keyboard.trapFocus(this.$element);
     }
+
+    this._addContentClasses();
   }
 
   /**
@@ -258,7 +351,7 @@ class OffCanvas {
 
     var _this = this;
 
-    _this.$element.removeClass('is-open');
+    this.$element.removeClass('is-open');
 
     this.$element.attr('aria-hidden', 'true')
       /**
@@ -267,6 +360,8 @@ class OffCanvas {
        */
         .trigger('closed.zf.offcanvas');
 
+    this.$content.removeClass('is-open-left is-open-top is-open-right is-open-bottom');
+
     // 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);
@@ -285,9 +380,15 @@ class OffCanvas {
     this.$triggers.attr('aria-expanded', 'false');
 
     if (this.options.trapFocus === true) {
-      this.$element.siblings('[data-off-canvas-content]').removeAttr('tabindex');
-      Foundation.Keyboard.releaseFocus(this.$element);
+      this.$content.removeAttr('tabindex');
+      Keyboard.releaseFocus(this.$element);
     }
+
+    // Listen to transitionEnd and add class when done.
+    this.$element.one(transitionend(this.$element), function(e) {
+      _this.$element.addClass('is-closed');
+      _this._removeContentClasses();
+    });
   }
 
   /**
@@ -311,7 +412,7 @@ class OffCanvas {
    * @private
    */
   _handleKeyboard(e) {
-    Foundation.Keyboard.handleKey(e, 'OffCanvas', {
+    Keyboard.handleKey(e, 'OffCanvas', {
       close: () => {
         this.close();
         this.$lastTrigger.focus();
@@ -328,12 +429,10 @@ class OffCanvas {
    * Destroys the offcanvas plugin.
    * @function
    */
-  destroy() {
+  _destroy() {
     this.close();
     this.$element.off('.zf.trigger .zf.offcanvas');
     this.$overlay.off('.zf.offcanvas');
-
-    Foundation.unregisterPlugin(this);
   }
 }
 
@@ -354,6 +453,22 @@ OffCanvas.defaults = {
    */
   contentOverlay: true,
 
+  /**
+   * Target an off-canvas content container by ID that may be placed anywhere. If null the closest content container will be taken.
+   * @option
+   * @type {?string}
+   * @default null
+   */
+  contentId: null,
+
+  /**
+   * Define the off-canvas element is nested in an off-canvas content. This is required when using the contentId option for a nested element.
+   * @option
+   * @type {boolean}
+   * @default null
+   */
+  nested: null,
+
   /**
    * Enable/disable scrolling of the main content when an off canvas panel is open.
    * @option
@@ -366,9 +481,9 @@ OffCanvas.defaults = {
    * Amount of time in ms the open and close transition requires. If none selected, pulls from body style.
    * @option
    * @type {number}
-   * @default 0
+   * @default null
    */
-  transitionTime: 0,
+  transitionTime: null,
 
   /**
    * Type of transition for the offcanvas menu. Options are 'push', 'detached' or 'slide'.
@@ -428,7 +543,4 @@ OffCanvas.defaults = {
   trapFocus: false
 }
 
-// Window exports
-Foundation.plugin(OffCanvas, 'OffCanvas');
-
-}(jQuery);
+export {OffCanvas};