From 66097454aac5f44e04ed08c74dabfee8ab745176 Mon Sep 17 00:00:00 2001
From: Wing-Hou Chan <winghouchan@gmail.com>
Date: Mon, 21 Apr 2014 19:51:15 +0100
Subject: [PATCH] Add New Offcanvas Functionality

Allow Offcanvas to overlap content instead of pushing content.
---
 js/foundation/foundation.offcanvas.js | 73 ++++++++++++++++++---------
 1 file changed, 50 insertions(+), 23 deletions(-)

diff --git a/js/foundation/foundation.offcanvas.js b/js/foundation/foundation.offcanvas.js
index d4781a31a5..4cb897ecce 100644
--- a/js/foundation/foundation.offcanvas.js
+++ b/js/foundation/foundation.offcanvas.js
@@ -7,7 +7,8 @@
     version : '5.2.2',
 
     settings : {
-      close_on_click: true,
+      open_method: 'move',
+      close_on_click: true
     },
 
     init : function (scope, method, options) {
@@ -17,28 +18,54 @@
     events : function () {
       var self = this,
           S = self.S;
-
-      S(this.scope).off('.offcanvas')
-        .on('click.fndtn.offcanvas', '.left-off-canvas-toggle', function (e) {
-          self.click_toggle_class(e, 'move-right');
-        })
-        .on('click.fndtn.offcanvas', '.left-off-canvas-menu a', function (e) {
-          var settings = self.get_settings(e)
-          if (settings.close_on_click)
-            S(".off-canvas-wrap").removeClass("move-right");
-        })
-        .on('click.fndtn.offcanvas', '.right-off-canvas-toggle', function (e) {
-          self.click_toggle_class(e, 'move-left');
-        })
-        .on('click.fndtn.offcanvas', '.right-off-canvas-menu a', function (e) {
-          var settings = self.get_settings(e)
-          if (settings.close_on_click)
-            S(".off-canvas-wrap").removeClass("move-left");
-        })
-        .on('click.fndtn.offcanvas', '.exit-off-canvas', function (e) {
-          self.click_remove_class(e, 'move-left');
-          self.click_remove_class(e, 'move-right');
-        })
+          
+      if (this.settings.open_method === 'move'){
+        S(this.scope).off('.offcanvas')
+          .on('click.fndtn.offcanvas', '.left-off-canvas-toggle', function (e) {
+            self.click_toggle_class(e, 'move-right');
+          })
+          .on('click.fndtn.offcanvas', '.left-off-canvas-menu a', function (e) {
+            var settings = self.get_settings(e)
+            if (settings.close_on_click)
+              S(".off-canvas-wrap").removeClass("move-right");
+          })
+          .on('click.fndtn.offcanvas', '.right-off-canvas-toggle', function (e) {
+            self.click_toggle_class(e, 'move-left');
+          })
+          .on('click.fndtn.offcanvas', '.right-off-canvas-menu a', function (e) {
+            var settings = self.get_settings(e)
+            if (settings.close_on_click)
+              S(".off-canvas-wrap").removeClass("move-left");
+          })
+          .on('click.fndtn.offcanvas', '.exit-off-canvas', function (e) {
+            self.click_remove_class(e, 'move-left');
+            self.click_remove_class(e, 'move-right');
+          })
+      } else if (this.settings.open_method === 'overlap') {
+        S(this.scope).off('.offcanvas')
+          .on('click.fndtn.offcanvas', '.left-off-canvas-toggle', function (e) {
+            self.click_toggle_class(e, 'offcanvas-overlap');
+          })
+          .on('click.fndtn.offcanvas', '.left-off-canvas-menu a', function (e) {
+            var settings = self.get_settings(e)
+            if (settings.close_on_click)
+              S(".off-canvas-wrap").removeClass("offcanvas-overlap");
+          })
+          .on('click.fndtn.offcanvas', '.right-off-canvas-toggle', function (e) {
+            self.click_toggle_class(e, 'offcanvas-overlap');
+          })
+          .on('click.fndtn.offcanvas', '.right-off-canvas-menu a', function (e) {
+            var settings = self.get_settings(e)
+            if (settings.close_on_click)
+              S(".off-canvas-wrap").removeClass("offcanvas-overlap");
+          })
+          .on('click.fndtn.offcanvas', '.exit-off-canvas', function (e) {
+            self.click_remove_class(e, 'offcanvas-overlap');
+            self.click_remove_class(e, 'offcanvas-overlap');
+          })
+      } else {
+        return;
+      }
     },
 
     click_toggle_class: function(e, class_name) {