Skip to content

Commit

Permalink
Merged multilevel-offcanvas with v5.3.1 changes
Browse files Browse the repository at this point in the history
  • Loading branch information
Eduardo Cataño committed Aug 13, 2014
1 parent 042f736 commit f2c062a
Show file tree
Hide file tree
Showing 4 changed files with 96 additions and 52 deletions.
16 changes: 8 additions & 8 deletions doc/includes/off_canvas/examples_offcanvas_multiple_level_markup.html
View file
Expand Up @@ -19,14 +19,14 @@ <h1 class="title">Foundation</h1>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Foundation</label></li>
<li class="has-submenu"><a href="#" class="icon-left">The Psychohistorians</a>
<li class="has-submenu"><a href="#">The Psychohistorians</a>
<ul class="left-submenu">
<li class="back"><a href="#">Back &raquo;</a></li>
<li class="back"><a href="#">Back</a></li>
<li><label>Level 1</label></li>
<li><a href="#">Link 1</a></li>
<li class="has-submenu"><a href="#" class="icon-left">Link 2 w/ submenu</a>
<li class="has-submenu"><a href="#">Link 2 w/ submenu</a>
<ul class="left-submenu">
<li class="back"><a href="#">Back &raquo;</a></li>
<li class="back"><a href="#">Back</a></li>
<li><label>Level 2</label></li>
<li><a href="#">...</a></li>
</ul>
Expand All @@ -47,12 +47,12 @@ <h1 class="title">Foundation</h1>
<li><a href="#">Hari Seldon</a></li>
<li class="has-submenu"><a href="#">R. Giskard Reventlov</a>
<ul class="right-submenu">
<li class="back"><a href="#" class="icon-right">Back &raquo;</a></li>
<li class="back"><a href="#">Back</a></li>
<li><label>Level 1</label></li>
<li><a href="#">Link 1</a></li>
<li class="has-submenu"><a href="#" class="icon-left">Link 2 w/ submenu</a>
<ul class="left-submenu">
<li class="back"><a href="#">Back &raquo;</a></li>
<li class="has-submenu"><a href="#">Link 2 w/ submenu</a>
<ul class="right-submenu">
<li class="back"><a href="#">Back</a></li>
<li><label>Level 2</label></li>
<li><a href="#">...</a></li>
</ul>
Expand Down
36 changes: 24 additions & 12 deletions doc/includes/off_canvas/examples_offcanvas_multiple_level_rendered.html
View file
Expand Up @@ -17,14 +17,14 @@ <h1 class="title">Foundation</h1>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Foundation</label></li>
<li class="has-submenu"><a href="#" class="icon-left">The Psychohistorians</a>
<li class="has-submenu"><a href="#">The Psychohistorians</a>
<ul class="left-submenu">
<li class="back"><a href="#">Back &raquo;</a></li>
<li class="back"><a href="#">Back</a></li>
<li><label>Level 1</label></li>
<li><a href="#">Link 1</a></li>
<li class="has-submenu"><a href="#" class="icon-left">Link 2 w/ submenu</a>
<li class="has-submenu"><a href="#">Link 2 w/ submenu</a>
<ul class="left-submenu">
<li class="back"><a href="#">Back &raquo;</a></li>
<li class="back"><a href="#">Back</a></li>
<li><label>Level 2</label></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
Expand All @@ -47,14 +47,26 @@ <h1 class="title">Foundation</h1>
<ul class="off-canvas-list">
<li><label>Users</label></li>
<li><a href="#">Hari Seldon</a></li>
<li><a href="#">R. Giskard Reventlov</a></li>
<li><a href="#">R. Daneel Olivaw</a></li>
<li><a href="#">The Mule</a></li>
<li><a href="#">Dors Venabili</a></li>
<li><a href="#">Yugo Amaryl</a></li>
<li><a href="#">The Mule</a></li>
<li><a href="#">Emperor Cleon I</a></li>
<li><a href="#">Gaal Dornick</a></li>
<li class="has-submenu"><a href="#">R. Giskard Reventlov</a>
<ul class="right-submenu">
<li class="back"><a href="#">Back</a></li>
<li><label>Level 1</label></li>
<li><a href="#">Link 1</a></li>
<li class="has-submenu"><a href="#">Link 2 w/ submenu</a>
<ul class="right-submenu">
<li class="back"><a href="#">Back</a></li>
<li><label>Level 2</label></li>
<li><a href="#">R. Daneel Olivaw</a></li>
<li><a href="#">The Mule</a></li>
<li><a href="#">Dors Venabili</a></li>
<li><a href="#">Yugo Amaryl</a></li>
<li><a href="#">The Mule</a></li>
</ul>
</li>
<li><a href="#">Emperor Cleon I</a></li>
<li><a href="#">Gaal Dornick</a></li>
</ul>
</li>
<li><a href="#">Bel Riose</a></li>
<li><a href="#">Salvor Hardin</a></li>
<li><a href="#">Bel Riose</a></li>
Expand Down
39 changes: 33 additions & 6 deletions js/foundation/foundation.offcanvas.js
View file
Expand Up @@ -33,27 +33,54 @@
S(this.scope).off('.offcanvas')
.on('click.fndtn.offcanvas', '.left-off-canvas-toggle', function (e) {
self.click_toggle_class(e, move_class + right_postfix);
if (self.settings.open_method !== 'overlap'){
S(".left-submenu").removeClass(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) {
var parent = S(this).parent();

if(settings.close_on_click && !parent.hasClass("has-submenu") && !parent.hasClass("back")){
self.hide.call(self, move_class + right_postfix, self.get_wrapper(e));
}
parent.parent().removeClass(move_class + right_postfix);
}else if(S(this).parent().hasClass("has-submenu")){
e.preventDefault();
S(this).siblings(".left-submenu").toggleClass(move_class + right_postfix);
}else if(parent.hasClass("back")){
e.preventDefault();
parent.parent().removeClass(move_class + right_postfix);
}
})
.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'){
S(".right-submenu").removeClass(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) {
var parent = S(this).parent();

if(settings.close_on_click && !parent.hasClass("has-submenu") && !parent.hasClass("back")){
self.hide.call(self, move_class + left_postfix, self.get_wrapper(e));
}
parent.parent().removeClass(move_class + left_postfix);
}else if(S(this).parent().hasClass("has-submenu")){
e.preventDefault();
S(this).siblings(".right-submenu").toggleClass(move_class + left_postfix);
}else if(parent.hasClass("back")){
e.preventDefault();
parent.parent().removeClass(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);
S(".right-submenu").removeClass(move_class + left_postfix);
if (right_postfix){
self.click_remove_class(e, move_class + right_postfix);
S(".left-submenu").removeClass(move_class + left_postfix);
}
});

},

toggle: function(class_name, $off_canvas) {
Expand Down
57 changes: 31 additions & 26 deletions scss/foundation/components/_offcanvas.scss
View file
Expand Up @@ -396,47 +396,52 @@ $menu-slide: "transform 500ms ease" !default;
border-top: $off-canvas-label-border-top;
border-bottom: $off-canvas-label-border-bottom;
margin: $off-canvas-label-margin;
@if $position == right {
&:after {
@include icon-double-arrows($position: right);
}
}
@if $position == left {
&:before {
@include icon-double-arrows($position: left);
}
}
}
}
//Left double angle quote or Right double angle quote chars
@mixin icon-double-arrows ($position){
@if $position == left {
content: "\AB";
margin-right: 0.5rem;
}
@if $position == right {
content: "\BB";
margin-left: 0.5rem;
}
content: "\AB";
margin-right: 0.5rem;
}
@if $position == right {
content: "\BB";
margin-left: 0.5rem;
}
display: inline;
position: relative;
}

@if $include-html-off-canvas-classes {

.left-submenu { @include off-canvas-submenu($position: left);
.left-submenu {
@include off-canvas-submenu($position: left);
&.move-right {
@include translate3d(0%,0,0);
}
}

.right-submenu { @include off-canvas-submenu($position: right);

.right-submenu {
@include off-canvas-submenu($position: right);
&.move-left {
@include translate3d(0%,0,0);
}
}

ul.off-canvas-list {
li {
a.icon-left:before {
@include icon-double-arrows($position: left);
display: inline;
position: relative;
}
a.icon-right:after {
@include icon-double-arrows($position: right);
display: inline;
position: relative;
}

}
}
.left-off-canvas-menu ul.off-canvas-list li.has-submenu > a:after {
@include icon-double-arrows($position: right);
}

.right-off-canvas-menu ul.off-canvas-list li.has-submenu > a:before {
@include icon-double-arrows($position: left);
}
}

0 comments on commit f2c062a

Please sign in to comment.