From: Chris Gooding (MBP) <chris.j5dev@gmail.com>
Date: Mon, 4 Aug 2014 23:42:39 +0000 (+0100)
Subject: Added option for opening individual off canvas content when using overlap
X-Git-Tag: v5.4~24^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F5555%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Added option for opening individual off canvas content when using overlap

Added a config option, (‘overlap_single’), to specify overlaping only
the individual off canvas content that was request, as with the slide
in option.

All documentation has also been updated to reflect the new option.
---

diff --git a/doc/includes/off_canvas/examples_offcanvas_javascript_options.html b/doc/includes/off_canvas/examples_offcanvas_javascript_options.html
index 324f50d0f..47f3ccc67 100755
--- a/doc/includes/off_canvas/examples_offcanvas_javascript_options.html
+++ b/doc/includes/off_canvas/examples_offcanvas_javascript_options.html
@@ -3,7 +3,7 @@
 $(document).foundation({
   offcanvas : {
     // Sets method in which offcanvas opens.
-    // [ move | overlap ]
+    // [ move | overlap_single | overlap ]
     open_method: 'move', 
     // Should the menu close when a menu link is clicked?
     // [ true | false ]
diff --git a/doc/pages/components/offcanvas.html b/doc/pages/components/offcanvas.html
index 91ebbb27f..25893214f 100755
--- a/doc/pages/components/offcanvas.html
+++ b/doc/pages/components/offcanvas.html
@@ -302,7 +302,7 @@ Required Foundation Library: `foundation.offcanvas.js`
 
 ### Optional Javascript Configuration
 
-**open_method** <br> Default: `move` <br> Defines how the off-canvas menu behaves. Can be `move` or `overlay`.
+**open_method** <br> Default: `move` <br> Defines how the off-canvas menu behaves. Can be `move` `overlap_single` or `overlap`.
 
 **close_on_click** <br/> Default: `false` <br> Control whether or not clicking menu links will close the menu.
 
@@ -344,7 +344,7 @@ $(document)
 
 ### Programmatic open / close / toggle
 
-The `.off-canvas-wrap` container can be targeted for javascript methods. At this time, the presentational open class needs to be included: either `move-right`, `move-left`, or `offcanvas-overlap`.
+The `.off-canvas-wrap` container can be targeted for javascript methods. At this time, the presentational open class needs to be included: either `move-right`, `move-left`, `offcanvas-overlap-left`, `offcanvas-overlap-right` or `offcanvas-overlap`.
 
 ```js
 $('.off-canvas-wrap').foundation('offcanvas', 'open', 'move-right');
diff --git a/js/foundation/foundation.offcanvas.js b/js/foundation/foundation.offcanvas.js
index 8d9b26f56..e3cb2d3f4 100755
--- a/js/foundation/foundation.offcanvas.js
+++ b/js/foundation/foundation.offcanvas.js
@@ -26,6 +26,10 @@
         move_class = 'move-';
         right_postfix = 'right';
         left_postfix = 'left';
+      } else if (this.settings.open_method === 'overlap_single') {
+        move_class = 'offcanvas-overlap-';
+        right_postfix = 'right';
+        left_postfix = 'left';
       } else if (this.settings.open_method === 'overlap') {
         move_class = 'offcanvas-overlap';
       }
diff --git a/scss/foundation/components/_offcanvas.scss b/scss/foundation/components/_offcanvas.scss
index dd082c02b..a2493338c 100755
--- a/scss/foundation/components/_offcanvas.scss
+++ b/scss/foundation/components/_offcanvas.scss
@@ -340,6 +340,28 @@ $menu-slide: "transform 500ms ease" !default;
       }
       .exit-off-canvas { @include back-link; }
     }
+    .offcanvas-overlap-left {
+      .right-off-canvas-menu {
+        -ms-transform: none;
+        -webkit-transform: none;
+        -moz-transform: none;
+        -o-transform: none;
+        transform: none;
+        z-index: 1003;
+      }
+      .exit-off-canvas { @include back-link; }
+    }
+    .offcanvas-overlap-right {
+      .left-off-canvas-menu {
+        -ms-transform: none;
+        -webkit-transform: none;
+        -moz-transform: none;
+        -o-transform: none;
+        transform: none;
+        z-index: 1003;
+      }
+      .exit-off-canvas { @include back-link; }
+    }
 
     // Older browsers
     .no-csstransforms {