Add New Offcanvas Functionality

Allow Offcanvas to overlap content instead of pushing content.
foundation · Apr 21, 2014 · 6609745 · 6609745
1 parent 5cc0934
commit 6609745
Showing 1 changed file with 50 additions and 23 deletions.
diff --git 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) {