Adding a top/bottom functionality to zurb offcanvas with push,overlap and submenu

diff --git a/js/foundation/foundation.offcanvas.js b/js/foundation/foundation.offcanvas.js
old mode 100644 (file)
new mode 100755 (executable)
index f9cc39c..d58ce56
--- a/js/foundation/foundation.offcanvas.js
+++ b/js/foundation/foundation.offcanvas.js
@@ -20,16 +20,22 @@
           S = self.S,
           move_class = '',
           right_postfix = '',
-          left_postfix = '';
+          left_postfix = '',
+          top_postfix = '',
+          bottom_postfix = '';
 
       if (this.settings.open_method === 'move') {
         move_class = 'move-';
         right_postfix = 'right';
         left_postfix = 'left';
+        top_postfix = 'top';
+        bottom_postfix = 'bottom';
       } else if (this.settings.open_method === 'overlap_single') {
         move_class = 'offcanvas-overlap-';
         right_postfix = 'right';
         left_postfix = 'left';
+        top_postfix = 'top';
+        bottom_postfix = 'bottom';
       } else if (this.settings.open_method === 'overlap') {
         move_class = 'offcanvas-overlap';
       }
@@ -58,6 +64,7 @@
           }
           $('.left-off-canvas-toggle').attr('aria-expanded', 'true');
         })
+        //end of left canvas
         .on('click.fndtn.offcanvas', '.right-off-canvas-toggle', function (e) {
           self.click_toggle_class(e, move_class + left_postfix);
           if (self.settings.open_method !== 'overlap') {
@@ -81,6 +88,55 @@
           }
           $('.right-off-canvas-toggle').attr('aria-expanded', 'true');
         })
+        //end of right canvas
+        .on('click.fndtn.offcanvas', '.top-off-canvas-toggle', function (e) {
+          self.click_toggle_class(e, move_class + bottom_postfix);
+          if (self.settings.open_method !== 'overlap') {
+            S('.top-submenu').removeClass(move_class + bottom_postfix);
+          }
+          $('.top-off-canvas-toggle').attr('aria-expanded', 'true');
+        })
+        .on('click.fndtn.offcanvas', '.top-off-canvas-menu a', function (e) {
+          var settings = self.get_settings(e);
+          var parent = S(this).parent();
+
+          if (settings.close_on_click && !parent.hasClass('has-submenu') && !parent.hasClass('back')) {
+            self.hide.call(self, move_class + bottom_postfix, self.get_wrapper(e));
+            parent.parent().removeClass(move_class + bottom_postfix);
+          } else if (S(this).parent().hasClass('has-submenu')) {
+            e.preventDefault();
+            S(this).siblings('.top-submenu').toggleClass(move_class + bottom_postfix);
+          } else if (parent.hasClass('back')) {
+            e.preventDefault();
+            parent.parent().removeClass(move_class + bottom_postfix);
+          }
+          $('.top-off-canvas-toggle').attr('aria-expanded', 'true');
+        })
+        //end of top canvas
+        .on('click.fndtn.offcanvas', '.bottom-off-canvas-toggle', function (e) {
+          self.click_toggle_class(e, move_class + top_postfix);
+          if (self.settings.open_method !== 'overlap') {
+            S('.bottom-submenu').removeClass(move_class + top_postfix);
+          }
+          $('.bottom-off-canvas-toggle').attr('aria-expanded', 'true');
+        })
+        .on('click.fndtn.offcanvas', '.bottom-off-canvas-menu a', function (e) {
+          var settings = self.get_settings(e);
+          var parent = S(this).parent();
+
+          if (settings.close_on_click && !parent.hasClass('has-submenu') && !parent.hasClass('back')) {
+            self.hide.call(self, move_class + top_postfix, self.get_wrapper(e));
+            parent.parent().removeClass(move_class + top_postfix);
+          } else if (S(this).parent().hasClass('has-submenu')) {
+            e.preventDefault();
+            S(this).siblings('.bottom-submenu').toggleClass(move_class + top_postfix);
+          } else if (parent.hasClass('back')) {
+            e.preventDefault();
+            parent.parent().removeClass(move_class + top_postfix);
+          }
+          $('.bottom-off-canvas-toggle').attr('aria-expanded', 'true');
+        })
+        //end of bottom
         .on('click.fndtn.offcanvas', '.exit-off-canvas', function (e) {
           self.click_remove_class(e, move_class + left_postfix);
           S('.right-submenu').removeClass(move_class + left_postfix);
@@ -97,6 +153,23 @@
             self.click_remove_class(e, move_class + right_postfix);
             $('.right-off-canvas-toggle').attr('aria-expanded', 'false');
           }
+        })
+        .on('click.fndtn.offcanvas', '.exit-off-canvas', function (e) {
+          self.click_remove_class(e, move_class + top_postfix);
+          S('.bottom-submenu').removeClass(move_class + top_postfix);
+          if (bottom_postfix) {
+            self.click_remove_class(e, move_class + bottom_postfix);
+            S('.top-submenu').removeClass(move_class + top_postfix);
+          }
+          $('.bottom-off-canvas-toggle').attr('aria-expanded', 'true');
+        })
+        .on('click.fndtn.offcanvas', '.exit-off-canvas', function (e) {
+          self.click_remove_class(e, move_class + top_postfix);
+          $('.top-off-canvas-toggle').attr('aria-expanded', 'false');
+          if (bottom_postfix) {
+            self.click_remove_class(e, move_class + bottom_postfix);
+            $('.bottom-off-canvas-toggle').attr('aria-expanded', 'false');
+          }
         });
     },
 

diff --git a/scss/foundation/components/_offcanvas.scss b/scss/foundation/components/_offcanvas.scss
old mode 100644 (file)
new mode 100755 (executable)
index f23da55..d04c0ec
--- a/scss/foundation/components/_offcanvas.scss
+++ b/scss/foundation/components/_offcanvas.scss
@@ -28,6 +28,7 @@ $tabbar-header-margin: 0 !default;
 
 // Off Canvas Menu Variables
 $off-canvas-width: rem-calc(250) !default;
+$off-canvas-height: rem-calc(300) !default;
 $off-canvas-bg: $oil !default;
 $off-canvas-bg-hover: scale-color($tabbar-bg, $lightness: -30%) !default;
 $off-canvas-bg-active: scale-color($tabbar-bg, $lightness: -30%) !default;
@@ -112,7 +113,6 @@ $menu-slide: "transform 500ms ease" !default;
   overflow-x: hidden;
   overflow-y: auto;
   position: absolute;
-  top: 0;
   transition: transform 500ms ease 0s;
   width: $off-canvas-width;
   z-index: 1001;
@@ -120,10 +120,24 @@ $menu-slide: "transform 500ms ease" !default;
   @if $position == left {
     @include translate3d(-100%,0,0);
     left: 0;
+    top: 0;
   }
   @if $position == right {
     @include translate3d(100%,0,0);
     right: 0;
+    top: 0;
+  }
+  @if $position == top {
+    @include translate3d(0,-100%,0);
+    top: 0;
+    width: 100%;
+    height: $off-canvas-height;
+  }
+  @if $position == bottom {
+    @include translate3d(0,100%,0);
+    bottom: 0;
+    width: 100%;
+    height: $off-canvas-height;
   }
 }
 
@@ -134,7 +148,9 @@ $menu-slide: "transform 500ms ease" !default;
   @include wrap-base;
   overflow: hidden;
   &.move-right,
-  &.move-left { min-height: 100%; -webkit-overflow-scrolling: touch; }
+  &.move-left,
+  &.move-bottom,
+  &.move-top { min-height: 100%; -webkit-overflow-scrolling: touch; }
 }
 
 // INNER WRAP
@@ -300,6 +316,7 @@ $menu-slide: "transform 500ms ease" !default;
   position: absolute;
   top: 0;
   width: $off-canvas-width;
+  height: $off-canvas-height;
   z-index: 1002;
   @if $position == left {
     @include translate3d(-100%,0,0);
@@ -309,6 +326,16 @@ $menu-slide: "transform 500ms ease" !default;
     @include translate3d(100%,0,0);
     right: 0;
   }
+  @if $position == top {
+    @include translate3d(0,-100%,0);
+    top: 0;
+    width: 100%;
+  }  
+  @if $position == bottom {
+    @include translate3d(0,100%,0);
+    bottom: 0;
+    width: 100%;
+  }
   -webkit-transition: -webkit-#{$menu-slide};
   -moz-transition: -moz-#{$menu-slide};
   -ms-transition: -ms-#{$menu-slide};
@@ -421,6 +448,8 @@ $menu-slide: "transform 500ms ease" !default;
 
     .left-off-canvas-menu { @include off-canvas-menu($position: left); }
     .right-off-canvas-menu { @include off-canvas-menu($position: right); }
+    .top-off-canvas-menu { @include off-canvas-menu($position: top); }
+    .bottom-off-canvas-menu { @include off-canvas-menu($position: bottom); }
 
     ul.off-canvas-list { @include off-canvas-list; }
 
@@ -441,8 +470,23 @@ $menu-slide: "transform 500ms ease" !default;
       }
       .exit-off-canvas { @include back-link; }
     }
+    .move-top {
+      > .inner-wrap {
+        @include translate3d(0,-($off-canvas-height),0);
+
+      }
+      .exit-off-canvas { @include back-link; }
+    }
+    .move-bottom {
+      > .inner-wrap {
+        @include translate3d(0,($off-canvas-height),0);
+
+      }
+      .exit-off-canvas { @include back-link; }
+    }
     .offcanvas-overlap {
-      .left-off-canvas-menu, .right-off-canvas-menu {
+      .left-off-canvas-menu, .right-off-canvas-menu,
+      .top-off-canvas-menu, .bottom-off-canvas-menu {
         -ms-transform: none;
         -webkit-transform: none;
         -moz-transform: none;
@@ -474,14 +518,42 @@ $menu-slide: "transform 500ms ease" !default;
       }
       .exit-off-canvas { @include back-link; }
     }
+    .offcanvas-overlap-top {
+      .bottom-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-bottom {
+      .top-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 {
       .left-off-canvas-menu { left: -($off-canvas-width); }
       .right-off-canvas-menu { right: -($off-canvas-width); }
+      .top-off-canvas-menu { top: -($off-canvas-height); }
+      .bottom-off-canvas-menu { bottom: -($off-canvas-height); }
 
       .move-left > .inner-wrap { right: $off-canvas-width; }
       .move-right > .inner-wrap { left: $off-canvas-width; }
+      .move-top > .inner-wrap { right: $off-canvas-height; }
+      .move-bottom > .inner-wrap { left: $off-canvas-height; }
+
+
     }
 
     .left-submenu {
@@ -498,6 +570,20 @@ $menu-slide: "transform 500ms ease" !default;
       }
     }
 
+    .top-submenu {
+      @include off-canvas-submenu($position: top);
+      &.move-bottom, &.offcanvas-overlap-bottom, &.offcanvas-overlap {
+        @include translate3d(0,0%,0);
+      }
+    }
+
+    .bottom-submenu {
+      @include off-canvas-submenu($position: bottom);
+      &.move-top, &.offcanvas-overlap-top, &.offcanvas-overlap {
+        @include translate3d(0,0%,0);
+      }
+    }
+
     @if $text-direction == rtl {
       .left-off-canvas-menu ul.off-canvas-list li.has-submenu > a:before {
         @include icon-double-arrows($position: left);
@@ -516,3 +602,6 @@ $menu-slide: "transform 500ms ease" !default;
 
   }
 }
+
+
+