Remove position option from the JavaScript as its no longer needed or used.

diff --git a/js/foundation.offcanvas.js b/js/foundation.offcanvas.js
index 08347c6b510f6b1b743429702eb489695193c8ba..c71f2218f09e4ad5b86e9ce7780c3b4a132b718e 100644 (file)
--- a/js/foundation.offcanvas.js
+++ b/js/foundation.offcanvas.js
@@ -344,13 +344,6 @@ OffCanvas.defaults = {
    */
   transition: 'push',
 
-  /**
-   * Direction the offcanvas opens from. Determines class applied to body.
-   * @option
-   * @example left
-   */
-  position: 'left',
-
   /**
    * Force the page to scroll to top or bottom on open.
    * @option

diff --git a/test/visual/offcanvas/all-options.html b/test/visual/offcanvas/all-options.html
index 5d9fac71412c841031310b992f14629834d7b6be..f4820103fe01aec770ba69087e9cd719b4c27498 100644 (file)
--- a/test/visual/offcanvas/all-options.html
+++ b/test/visual/offcanvas/all-options.html
@@ -19,77 +19,77 @@
         <h3>This is a left off-canvas panel</h3>
       </div>
 
-      <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
+      <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas>
         <button class="close-button" aria-label="Close panel" type="button" data-close>
           <span aria-hidden="true">&times;</span>
         </button>
         <h3>This is a right off-canvas panel</h3>
       </div>
 
-      <div class="off-canvas position-top" id="offCanvasTop" data-off-canvas data-position="top">
+      <div class="off-canvas position-top" id="offCanvasTop" data-off-canvas>
         <button class="close-button" aria-label="Close panel" type="button" data-close>
           <span aria-hidden="true">&times;</span>
         </button>
         <h3>This is a top off-canvas panel</h3>
       </div>
 
-      <div class="off-canvas position-bottom" id="offCanvasBottom" data-off-canvas data-position="bottom">
+      <div class="off-canvas position-bottom" id="offCanvasBottom" data-off-canvas>
         <button class="close-button" aria-label="Close panel" type="button" data-close>
           <span aria-hidden="true">&times;</span>
         </button>
         <h3>This is a bottom off-canvas panel</h3>
       </div>
 
-      <div class="off-canvas position-left" id="offCanvasLeftOverlap" data-off-canvas data-position="left" data-transition="overlap">
+      <div class="off-canvas position-left" id="offCanvasLeftOverlap" data-off-canvas data-transition="overlap">
         <button class="close-button" aria-label="Close panel" type="button" data-close>
           <span aria-hidden="true">&times;</span>
         </button>
         <h3>This is a left off-canvas panel with 'overlap' transition</h3>
       </div>
 
-      <div class="off-canvas position-right" id="offCanvasRightOverlap" data-off-canvas data-position="right" data-transition="overlap">
+      <div class="off-canvas position-right" id="offCanvasRightOverlap" data-off-canvas data-transition="overlap">
         <button class="close-button" aria-label="Close panel" type="button" data-close>
           <span aria-hidden="true">&times;</span>
         </button>
         <h3>This is a right off-canvas panel with 'overlap' transition</h3>
       </div>
 
-      <div class="off-canvas position-top" id="offCanvasTopOverlap" data-off-canvas data-position="top" data-transition="overlap">
+      <div class="off-canvas position-top" id="offCanvasTopOverlap" data-off-canvas data-transition="overlap">
         <button class="close-button" aria-label="Close panel" type="button" data-close>
           <span aria-hidden="true">&times;</span>
         </button>
         <h3>This is a top off-canvas panel with 'overlap' transition</h3>
       </div>
 
-      <div class="off-canvas position-bottom" id="offCanvasBottomOverlap" data-off-canvas data-position="bottom" data-transition="overlap">
+      <div class="off-canvas position-bottom" id="offCanvasBottomOverlap" data-off-canvas data-transition="overlap">
         <button class="close-button" aria-label="Close panel" type="button" data-close>
           <span aria-hidden="true">&times;</span>
         </button>
         <h3>This is a bottom off-canvas panel with 'overlap' transition</h3>
       </div>
 
-      <div class="off-canvas position-top" id="offCanvasForceTop" data-off-canvas data-position="top" data-force-to="top">
+      <div class="off-canvas position-top" id="offCanvasForceTop" data-off-canvas data-force-to="top">
         <button class="close-button" aria-label="Close panel" type="button" data-close>
           <span aria-hidden="true">&times;</span>
         </button>
         <h3>This is a top off-canvas panel with force-to set to top</h3>
       </div>
 
-      <div class="off-canvas position-bottom" id="offCanvasForceBottom" data-off-canvas data-position="bottom" data-force-to="bottom">
+      <div class="off-canvas position-bottom" id="offCanvasForceBottom" data-off-canvas data-force-to="bottom">
         <button class="close-button" aria-label="Close panel" type="button" data-close>
           <span aria-hidden="true">&times;</span>
         </button>
         <h3>This is a bottom off-canvas panel with force-to set to bottom</h3>
       </div>
 
-      <div class="off-canvas position-left" id="noOverlay" data-off-canvas data-position="left" data-content-overlay="false">
+      <div class="off-canvas position-left" id="noOverlay" data-off-canvas data-content-overlay="false">
         <button class="close-button" aria-label="Close panel" type="button" data-close>
           <span aria-hidden="true">&times;</span>
         </button>
         <h3>This is a left off-canvas panel with no content overlay. You can still click the content to close me.</h3>
       </div>
 
-      <div class="off-canvas position-right" id="noCloseOnClick" data-off-canvas data-position="right" data-close-on-click="false">
+      <div class="off-canvas position-right" id="noCloseOnClick" data-off-canvas data-close-on-click="false">
         <button class="close-button" aria-label="Close panel" type="button" data-close>
           <span aria-hidden="true">&times;</span>
         </button>

diff --git a/test/visual/offcanvas/reveal.html b/test/visual/offcanvas/reveal.html
index 36e056eb3041831a3f2afa7da4ae8824c2f39e7f..7cddb777fa77f6680eb1ce376b8bdf6ebca9e88d 100644 (file)
--- a/test/visual/offcanvas/reveal.html
+++ b/test/visual/offcanvas/reveal.html
@@ -19,7 +19,7 @@
         <h3>This is a left off-canvas panel. It should reveal on large and up screens.</h3>
       </div>
 
-      <div class="off-canvas position-right reveal-for-medium" id="offCanvasRight" data-off-canvas data-position="right">
+      <div class="off-canvas position-right reveal-for-medium" id="offCanvasRight" data-off-canvas>
         <button class="close-button" aria-label="Close panel" type="button" data-close>
           <span aria-hidden="true">&times;</span>
         </button>

diff --git a/test/visual/offcanvas/sticky.html b/test/visual/offcanvas/sticky.html
index 56f00cd4041fdafa78f049a0d5cd4ce05ac925be..6fb78ee596f92f2f3659d2535b3bd14baa6b1e2a 100644 (file)
--- a/test/visual/offcanvas/sticky.html
+++ b/test/visual/offcanvas/sticky.html
@@ -18,77 +18,77 @@
         <h3>This is a left off-canvas panel</h3>
       </div>
 
-      <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
+      <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas>
         <button class="close-button" aria-label="Close panel" type="button" data-close>
           <span aria-hidden="true">&times;</span>
         </button>
         <h3>This is a right off-canvas panel</h3>
       </div>
 
-      <div class="off-canvas position-top" id="offCanvasTop" data-off-canvas data-position="top">
+      <div class="off-canvas position-top" id="offCanvasTop" data-off-canvas>
         <button class="close-button" aria-label="Close panel" type="button" data-close>
           <span aria-hidden="true">&times;</span>
         </button>
         <h3>This is a top off-canvas panel</h3>
       </div>
 
-      <div class="off-canvas position-bottom" id="offCanvasBottom" data-off-canvas data-position="bottom">
+      <div class="off-canvas position-bottom" id="offCanvasBottom" data-off-canvas>
         <button class="close-button" aria-label="Close panel" type="button" data-close>
           <span aria-hidden="true">&times;</span>
         </button>
         <h3>This is a bottom off-canvas panel</h3>
       </div>
 
-      <div class="off-canvas position-left" id="offCanvasLeftOverlap" data-off-canvas data-position="left" data-transition="overlap">
+      <div class="off-canvas position-left" id="offCanvasLeftOverlap" data-off-canvas data-transition="overlap">
         <button class="close-button" aria-label="Close panel" type="button" data-close>
           <span aria-hidden="true">&times;</span>
         </button>
         <h3>This is a left off-canvas panel with 'overlap' transition</h3>
       </div>
 
-      <div class="off-canvas position-right" id="offCanvasRightOverlap" data-off-canvas data-position="right" data-transition="overlap">
+      <div class="off-canvas position-right" id="offCanvasRightOverlap" data-off-canvas data-transition="overlap">
         <button class="close-button" aria-label="Close panel" type="button" data-close>
           <span aria-hidden="true">&times;</span>
         </button>
         <h3>This is a right off-canvas panel with 'overlap' transition</h3>
       </div>
 
-      <div class="off-canvas position-top" id="offCanvasTopOverlap" data-off-canvas data-position="top" data-transition="overlap">
+      <div class="off-canvas position-top" id="offCanvasTopOverlap" data-off-canvas data-transition="overlap">
         <button class="close-button" aria-label="Close panel" type="button" data-close>
           <span aria-hidden="true">&times;</span>
         </button>
         <h3>This is a top off-canvas panel with 'overlap' transition</h3>
       </div>
 
-      <div class="off-canvas position-bottom" id="offCanvasBottomOverlap" data-off-canvas data-position="bottom" data-transition="overlap">
+      <div class="off-canvas position-bottom" id="offCanvasBottomOverlap" data-off-canvas data-transition="overlap">
         <button class="close-button" aria-label="Close panel" type="button" data-close>
           <span aria-hidden="true">&times;</span>
         </button>
         <h3>This is a bottom off-canvas panel with 'overlap' transition</h3>
       </div>
 
-      <div class="off-canvas position-top" id="offCanvasForceTop" data-off-canvas data-position="top" data-force-to="top">
+      <div class="off-canvas position-top" id="offCanvasForceTop" data-off-canvas data-force-to="top">
         <button class="close-button" aria-label="Close panel" type="button" data-close>
           <span aria-hidden="true">&times;</span>
         </button>
         <h3>This is a top off-canvas panel with force-to set to top</h3>
       </div>
 
-      <div class="off-canvas position-bottom" id="offCanvasForceBottom" data-off-canvas data-position="bottom" data-force-to="bottom">
+      <div class="off-canvas position-bottom" id="offCanvasForceBottom" data-off-canvas data-force-to="bottom">
         <button class="close-button" aria-label="Close panel" type="button" data-close>
           <span aria-hidden="true">&times;</span>
         </button>
         <h3>This is a bottom off-canvas panel with force-to set to bottom</h3>
       </div>
 
-      <div class="off-canvas position-left" id="noOverlay" data-off-canvas data-position="left" data-content-overlay="false">
+      <div class="off-canvas position-left" id="noOverlay" data-off-canvas data-content-overlay="false">
         <button class="close-button" aria-label="Close panel" type="button" data-close>
           <span aria-hidden="true">&times;</span>
         </button>
         <h3>This is a left off-canvas panel with no content overlay. You can still click the content to close me.</h3>
       </div>
 
-      <div class="off-canvas position-right" id="noCloseOnClick" data-off-canvas data-position="right" data-close-on-click="false">
+      <div class="off-canvas position-right" id="noCloseOnClick" data-off-canvas data-close-on-click="false">
         <button class="close-button" aria-label="Close panel" type="button" data-close>
           <span aria-hidden="true">&times;</span>
         </button>