Adjust in-canvas feature to define clear priorities and update docs

The priorities are now:
CSS classname > option > default
Besides I've created _checkInCanvas() method to avoid duplicate code.

diff --git a/docs/pages/off-canvas.md b/docs/pages/off-canvas.md
index 2984e620f0903f35e25c75a60dcbb2e05a6210d2..e0a9414887cbd26554fc11f508cf0862e46cacf4 100644 (file)
--- a/docs/pages/off-canvas.md
+++ b/docs/pages/off-canvas.md
@@ -346,17 +346,17 @@ For an example of off-canvas, checkout this top bar with off-canvas navigation a
 
 ## In-Canvas to Off-Canvas
 
-With this feature you can have a standard page element move off-canvas at a particular breakpoint. Use the new class <code>.in-canvas-for-[BREAKPOINT]</code> and the <code>inCanvasOn</code> option for this. This differs from the <a href="#reveal-on-larger-screens">Reveal on Larger Screens</a> feature as it doesn't actually open the off-canvas for specific screen sizes but overrides the off-canvas styles so it behaves as a regular page element. This way you can place an element anywhere on the page and move it into off-canvas for e.g. small screens only.
+With this feature you can have a standard page element move off-canvas at a particular breakpoint. Use the <code>inCanvasOn</code> option for this. In-Canvas differs from the <a href="#reveal-on-larger-screens">Reveal on Larger Screens</a> feature as it doesn't actually open the off-canvas for specific screen sizes but overrides the off-canvas styles so it behaves as a regular page element. This way you can place an element anywhere on the page and move it into off-canvas for e.g. small screens only.
 
 <div class="primary callout">
-  <p>Most of the work is done via CSS only. Nevertheless the <code>inCanvasOn</code> option is required as well to cover window resizing. This makes sure a visible overlay gets closed if the element gets moved into canvas.</p>
+  <p>The <code>inCanvasOn</code> option will automatically add the <code>.in-canvas-for-[BREAKPOINT]</code> class since most of the work is done via CSS only. However you may also add this class yourself which will override the option.</p>
 </div>
 
 ```html_example
 <button type="button" class="button hide-for-large" data-toggle="inCanvasExample">
   Open in-canvas that is off-canvas now
 </button>
-<div class="off-canvas in-canvas-for-large position-right" id="inCanvasExample" data-off-canvas data-options="inCanvasFor:large;">
+<div class="off-canvas position-right" id="inCanvasExample" data-off-canvas data-options="inCanvasFor:large;">
   <div class="callout">I'm in-canvas for medium screen size and move off-canvas for medium down.</div>
 </div>
 ```

diff --git a/js/foundation.offcanvas.js b/js/foundation.offcanvas.js
index 38cc02afbedb171b609844e25be016f01ad562c0..d3139bc5f4b3d53507760a11a54ecee6657a3c95 100644 (file)
--- a/js/foundation.offcanvas.js
+++ b/js/foundation.offcanvas.js
@@ -139,16 +139,16 @@ class OffCanvas extends Plugin {
 
     let inCanvasFor = this.$element.attr('class').match(/\bin-canvas-for-(\w+)/);
 
-    if (!this.options.inCanvasOn && inCanvasFor && inCanvasFor.length === 2) {
-      // Extract breakpoint name from CSS class if no inCanvasOn option set but using .in-canvas-for-[BREAKPOINT]
+    if (inCanvasFor && inCanvasFor.length === 2) {
+      // Set `inCanvasOn` option if found in-canvas-for-[BREAKPONT] CSS class
       this.options.inCanvasOn = inCanvasFor[1];
-    } else if (this.options.inCanvasOn && !inCanvasFor) {
-      // Add CSS class if only inCanvasOn option set
+    } else if (this.options.inCanvasOn) {
+      // Ensure the CSS class is set
       this.$element.addClass(`in-canvas-for-${this.options.inCanvasOn}`);
     }
 
     if (this.options.inCanvasOn) {
-      this.isInCanvas = MediaQuery.atLeast(this.options.inCanvasOn);
+      this._checkInCanvas();
     }
 
     // Initally remove all transition/position CSS classes from off-canvas content container.
@@ -175,12 +175,7 @@ class OffCanvas extends Plugin {
 
     if (this.options.inCanvasOn) {
       $(window).on('changed.zf.mediaquery', () => {
-        if(MediaQuery.atLeast(this.options.inCanvasOn)) {
-          this.close();
-          this.isInCanvas = true;
-        } else {
-          this.isInCanvas = false;
-        }
+        this._checkInCanvas();
       });
     }
 
@@ -206,6 +201,17 @@ class OffCanvas extends Plugin {
     });
   }
 
+  /**
+   * Checks if InCanvas on current breakpoint and adjust off-canvas accordingly
+   * @private
+   */
+  _checkInCanvas() {
+    this.isInCanvas = MediaQuery.atLeast(this.options.inCanvasOn);
+    if (this.isInCanvas === true) {
+      this.close();
+    }
+  }
+
   /**
    * 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.