From 402d7f10ac5d4cfda0d01d5e71ce3a3a1df28ab0 Mon Sep 17 00:00:00 2001 From: tomsah Date: Wed, 3 Jun 2015 09:31:34 +0100 Subject: [PATCH] Adding a top/bottom functionality to zurb offcanvas with push,overlap and submenu --- js/foundation/foundation.offcanvas.js | 75 ++++++++++++++++- scss/foundation/components/_offcanvas.scss | 95 +++++++++++++++++++++- 2 files changed, 166 insertions(+), 4 deletions(-) mode change 100644 => 100755 js/foundation/foundation.offcanvas.js mode change 100644 => 100755 scss/foundation/components/_offcanvas.scss diff --git a/js/foundation/foundation.offcanvas.js b/js/foundation/foundation.offcanvas.js old mode 100644 new mode 100755 index f9cc39cf7..d58ce56dc --- 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 new mode 100755 index f23da55c0..d04c0ec9d --- 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; } } + + + -- 2.47.2