Add events & split presentational show/hide methods away from click h…

…andlers
foundation · May 11, 2014 · 0912a93 · 0912a93
1 parent 7a799ba
commit 0912a93
Showing 1 changed file with 43 additions and 15 deletions.
diff --git a/js/foundation/foundation.offcanvas.js b/js/foundation/foundation.offcanvas.js
@@ -22,7 +22,7 @@
           right_postfix = '',
           left_postfix = '';
 
-      if (this.settings.open_method === 'move'){
+      if (this.settings.open_method === 'move') {
         move_class = 'move-';
         right_postfix = 'right';
         left_postfix = 'left';
@@ -32,42 +32,70 @@
 
       S(this.scope).off('.offcanvas')
         .on('click.fndtn.offcanvas', '.left-off-canvas-toggle', function (e) {
-        self.click_toggle_class(e, move_class + right_postfix);
+          self.click_toggle_class(e, move_class + right_postfix);
         })
         .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_class + right_postfix);
+          var settings = self.get_settings(e);
+          if (settings.close_on_click) {
+            self.hide.call(self, move_class + right_postfix);
+          }
         })
         .on('click.fndtn.offcanvas', '.right-off-canvas-toggle', function (e) {
-        self.click_toggle_class(e, move_class + left_postfix);
+          self.click_toggle_class(e, move_class + left_postfix);
         })
         .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_class + left_postfix);
+          var settings = self.get_settings(e);
+          if (settings.close_on_click) {
+            self.hide.call(self, move_class + left_postfix);
+          }
         })
         .on('click.fndtn.offcanvas', '.exit-off-canvas', function (e) {
-        self.click_remove_class(e, move_class + left_postfix);
-        if (right_postfix) self.click_remove_class(e, move_class + right_postfix);
-      });
+          self.click_remove_class(e, move_class + left_postfix);
+          if (right_postfix) self.click_remove_class(e, move_class + right_postfix);
+        });
+
+    },
+
+    toggle: function(class_name) {
+      if (this.get_wrapper().is(class_name)) {
+        this.hide(class_name);
+      } else {
+        this.show(class_name);
+      }
+    },
+
+    show: function(class_name) {
+      var $off_canvas = this.get_wrapper();
+      $off_canvas.trigger('open');
+      $off_canvas.addClass(class_name);
+    },
+
+    hide: function(class_name) {
+      var $off_canvas = this.get_wrapper();
+      $off_canvas.trigger('close');
+      $off_canvas.removeClass(class_name);
     },
 
     click_toggle_class: function(e, class_name) {
       e.preventDefault();
-      this.S(e.target).closest('.off-canvas-wrap').toggleClass(class_name);
+      this.toggle(class_name);
     },
 
     click_remove_class: function(e, class_name) {
       e.preventDefault();
-      this.S('.off-canvas-wrap').removeClass(class_name);
+      this.hide(class_name);
     },
 
     get_settings: function(e) {
-      var offcanvas  = this.S(e.target).closest('[' + this.attr_name() + ']')
+      var offcanvas  = this.S(e.target).closest('[' + this.attr_name() + ']');
       return offcanvas.data(this.attr_name(true) + '-init') || this.settings;
     },
 
+    get_wrapper: function() {
+      // TODO - cache this, right?
+      return this.S('.off-canvas-wrap');
+    },
+
     reflow : function () {}
   };
 }(jQuery, window, window.document));