From 8e775d3e6f3e38ee855b5916bb4d8b7c6e78497b Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 28 Aug 2014 11:43:22 -0400 Subject: [PATCH] Sidebar now attaches to correct context, works in contexts other than body --- src/definitions/modules/sidebar.js | 53 +++++----- src/definitions/modules/sidebar.less | 148 ++++++++++++++------------- 2 files changed, 104 insertions(+), 97 deletions(-) diff --git a/src/definitions/modules/sidebar.js b/src/definitions/modules/sidebar.js index d1959aeb5..6178f7ba0 100755 --- a/src/definitions/modules/sidebar.js +++ b/src/definitions/modules/sidebar.js @@ -14,7 +14,6 @@ $.fn.sidebar = function(parameters) { var $allModules = $(this), - $body = $('body'), $head = $('head'), moduleSelector = $allModules.selector || '', @@ -51,7 +50,7 @@ $.fn.sidebar = function(parameters) { moduleNamespace = 'module-' + namespace, $module = $(this), - $body = $('body'), + $context = $(settings.context), $style = $('style[title=' + namespace + ']'), $sidebars = $(selector.sidebar), @@ -73,7 +72,7 @@ $.fn.sidebar = function(parameters) { transitionEnd = module.get.transitionEvent(); - module.setup.page(); + module.setup.context(); // avoid locking rendering to change layout if included in onReady requestAnimationFrame(module.setup.layout); @@ -108,14 +107,14 @@ $.fn.sidebar = function(parameters) { bind: { clickaway: function() { - $body + $context .on('click' + eventNamespace, module.event.clickaway) ; } }, unbind: { clickaway: function() { - $body + $context .off('click' + eventNamespace) ; } @@ -139,17 +138,20 @@ $.fn.sidebar = function(parameters) { $pusher = $('
'); $page = $('
'); $pusher.append($page); - $body + $context .children() .not(selector.omitted) .not($sidebars) .wrapAll($pusher) ; } + if($module.parent()[0] !== $context[0]) { + $module.detach().appendTo($context); + } module.refresh(); }, page: function() { - $body.addClass(className.hasSidebar); + $context.addClass(className.pushable); } }, @@ -337,23 +339,23 @@ $.fn.sidebar = function(parameters) { }, direction: function(direction) { direction = direction || module.get.direction(); - $body.addClass(className[direction]); + $context.addClass(className[direction]); }, visible: function() { $module.addClass(className.visible); }, animation: function(animation) { animation = animation || settings.animation; - $body.addClass(animation); + $context.addClass(animation); }, inward: function() { - $body.addClass(className.inward); + $context.addClass(className.inward); }, outward: function() { - $body.addClass(className.outward); + $context.addClass(className.outward); }, pushed: function() { - $body.addClass(className.pushed); + $context.addClass(className.pushed); } }, remove: { @@ -375,20 +377,20 @@ $.fn.sidebar = function(parameters) { }, animation: function(animation) { animation = animation || settings.animation; - $body.removeClass(animation); + $context.removeClass(animation); }, pushed: function() { - $body.removeClass(className.pushed); + $context.removeClass(className.pushed); }, inward: function() { - $body.removeClass(className.inward); + $context.removeClass(className.inward); }, outward: function() { - $body.removeClass(className.outward); + $context.removeClass(className.outward); }, direction: function(direction) { direction = direction || module.get.direction(); - $body.removeClass(className[direction]); + $context.removeClass(className[direction]); } }, @@ -440,10 +442,10 @@ $.fn.sidebar = function(parameters) { return $module.hasClass(className.top); }, inward: function() { - return $body.hasClass(className.inward); + return $context.hasClass(className.inward); }, outward: function() { - return $body.hasClass(className.outward); + return $context.hasClass(className.outward); }, animating: function() { return module.is.inward() || module.is.outward(); @@ -639,6 +641,7 @@ $.fn.sidebar.settings = { animation : 'pushing', + context : 'body', useCSS : true, duration : 300, @@ -654,12 +657,12 @@ $.fn.sidebar.settings = { onVisible : function(){}, className : { - hasSidebar : 'pushable', - active : 'active', - visible : 'visible', - pushed : 'pushed', - inward : 'show', - outward : 'hide' + pushable : 'ui pushable', + active : 'active', + visible : 'visible', + pushed : 'pushed', + inward : 'show', + outward : 'hide' }, selector: { diff --git a/src/definitions/modules/sidebar.less b/src/definitions/modules/sidebar.less index 58d339185..7be0998f9 100755 --- a/src/definitions/modules/sidebar.less +++ b/src/definitions/modules/sidebar.less @@ -44,7 +44,7 @@ ---------------*/ /* Sets 3D Perspective */ -body.pushable { +.ui.pushable { position: relative; height: 100%; overflow: hidden; @@ -54,7 +54,7 @@ body.pushable { Pusher ---------------*/ -body.pushable > .pusher { +.ui.pushable > .pusher { position: relative; left: 0; height: 100%; @@ -68,7 +68,7 @@ body.pushable > .pusher { Page ---------------*/ -body.pushable > .pusher > .page { +.ui.pushable > .pusher > .page { background: @bodyBackground; position: relative; overflow-y: auto; @@ -80,7 +80,7 @@ body.pushable > .pusher > .page { Dimmer ---------------*/ -body.pushable > .pusher > .page:after { +.ui.pushable > .pusher > .page:after { position: absolute; top: 0px; right: 0px; @@ -105,19 +105,19 @@ body.pushable > .pusher > .page:after { ---------------*/ /* Add Canvas BG */ -body.pushable.pushed, -body.pushable.hide, -body.pushable.show { +.ui.pushable.pushed, +.ui.pushable.hide, +.ui.pushable.show { background: @canvasBackground !important; } /* Remove Scroll */ -body.pushed > .pusher > .page { +.ui.pushable.pushed > .pusher > .page { overflow: hidden; } /* Show Dimmer */ -body.pushed > .pusher > .page:after { +.ui.pushable.pushed > .pusher > .page:after { width: 100% !important; height: 100% !important; opacity: 1 !important; @@ -127,7 +127,7 @@ body.pushed > .pusher > .page:after { Visible ---------------*/ -body > .visible.ui.sidebar { +.ui.pushable > .visible.ui.sidebar { visibility: visible; } @@ -146,24 +146,28 @@ body > .visible.ui.sidebar { } +/******************************* + Animations +*******************************/ + /*-------------- Overlay ---------------*/ /* Set-up */ -body.overlay > .ui.sidebar { +.ui.pushable.overlay > .ui.sidebar { transform: translate3d(-100%, 0, 0); z-index: 3; } /* Pushed */ -body.overlay .visible.ui.sidebar { +.ui.pushable.overlay .visible.ui.sidebar { transform: translate3d(0, 0, 0); } /* Animation */ -body.overlay.show > .visible.ui.sidebar, -body.overlay.hide > .visible.ui.sidebar { +.ui.pushable.overlay.show > .visible.ui.sidebar, +.ui.pushable.overlay.hide > .visible.ui.sidebar { transition: transform @animationDuration ease; } @@ -172,29 +176,29 @@ body.overlay.hide > .visible.ui.sidebar { ---------------*/ /* Set-Up */ -body.pushing.pushed > .pusher { +.ui.pushable.pushing.pushed > .pusher { transform: translate3d(@sidebarWidth, 0, 0); } -body.pushing > .ui.sidebar { +.ui.pushable.pushing > .ui.sidebar { transform: translate3d(-100%, 0, 0); z-index: 3; } -body.pushing > .pusher { +.ui.pushable.pushing > .pusher { transform: translate3d(0px, 0, 0); z-index: 2; } /* Pushed */ -body.pushing.pushed .visible.sidebar { +.ui.pushable.pushing.pushed .visible.sidebar { transform: translate3d(0px, 0, 0); } -body.pushing.pushed > .pusher { +.ui.pushable.pushing.pushed > .pusher { transform: translate3d(@sidebarWidth, 0, 0); } /* Animation */ -body.pushing.show > .visible.ui.sidebar, -body.pushing.hide > .visible.ui.sidebar { +.ui.pushable.pushing.show > .visible.ui.sidebar, +.ui.pushable.pushing.hide > .visible.ui.sidebar { transition: transform @animationDuration ease; } @@ -204,16 +208,16 @@ body.pushing.hide > .visible.ui.sidebar { ---------------*/ /* Set-up */ -body.reveal .visible.ui.sidebar { +.ui.pushable.reveal .visible.ui.sidebar { z-index: 1; } -body.reveal > .pusher { +.ui.pushable.reveal > .pusher { transform: translate3d(0, 0, 0); z-index: 2; } /* Pushed */ -body.reveal.pushed > .pusher { +.ui.pushable.reveal.pushed > .pusher { transform: translate3d(@sidebarWidth, 0, 0); } @@ -223,25 +227,25 @@ body.reveal.pushed > .pusher { ---------------*/ /* Set-up */ -body.slide.along > .ui.sidebar { +.ui.pushable.slide.along > .ui.sidebar { z-index: 2; transform: translate3d(-50%, 0, 0); } -body.slide.along > .pusher { +.ui.pushable.slide.along > .pusher { z-index: 3; } /* Pushed */ -body.slide.along.pushed > .pusher { +.ui.pushable.slide.along.pushed > .pusher { transform: translate3d(@sidebarWidth, 0, 0); } -body.slide.along.pushed > .visible.ui.sidebar { +.ui.pushable.slide.along.pushed > .visible.ui.sidebar { transform: translate3d(0%, 0, 0); } /* Animation */ -body.slide.along.show > .visible.ui.sidebar, -body.slide.along.hide > .visible.ui.sidebar { +.ui.pushable.slide.along.show > .visible.ui.sidebar, +.ui.pushable.slide.along.hide > .visible.ui.sidebar { transition: transform @animationDuration ease; } @@ -252,22 +256,22 @@ body.slide.along.hide > .visible.ui.sidebar { ---------------*/ /* Set-up */ -body.slide.out > .ui.sidebar { +.ui.pushable.slide.out > .ui.sidebar { z-index: 1; transform: translate3d(50%, 0, 0); } /* Pushed */ -body.slide.out.pushed > .pusher { +.ui.pushable.slide.out.pushed > .pusher { transform: translate3d(@sidebarWidth, 0, 0); } -body.slide.out.pushed .visible.ui.sidebar { +.ui.pushable.slide.out.pushed .visible.ui.sidebar { transform: translate3d(0%, 0, 0); } /* Animation */ -body.slide.out.show > .visible.ui.sidebar, -body.slide.out.hide > .visible.ui.sidebar { +.ui.pushable.slide.out.show > .visible.ui.sidebar, +.ui.pushable.slide.out.hide > .visible.ui.sidebar { transition: transform @animationDuration ease; } @@ -276,30 +280,30 @@ body.slide.out.hide > .visible.ui.sidebar { ---------------*/ /* Set-up */ -body.scale.down { +.ui.pushable.scale.down { perspective: 1500px; } -body.scale.down > .pusher { +.ui.pushable.scale.down > .pusher { transform-style: preserve-3d; z-index: 2; } -body.scale.down > .ui.sidebar { +.ui.pushable.scale.down > .ui.sidebar { opacity: 1; transform: translate3d(-100%, 0, 0); z-index: 3; } /* Pushed */ -body.scale.down.pushed > .pusher { +.ui.pushable.scale.down.pushed > .pusher { transform: translate3d(210px, 0px, -500px); } -body.scale.down.pushed > .visible.ui.sidebar { +.ui.pushable.scale.down.pushed > .visible.ui.sidebar { transform: translate3d(0, 0, 0); } /* Animation */ -body.scale.down.show > .visible.ui.sidebar, -body.scale.down.hide > .visible.ui.sidebar { +.ui.pushable.scale.down.show > .visible.ui.sidebar, +.ui.pushable.scale.down.hide > .visible.ui.sidebar { transition: transform @animationDuration ease; } @@ -309,29 +313,29 @@ body.scale.down.hide > .visible.ui.sidebar { ---------------*/ /* Set-up */ -body.scale.up { +.ui.pushable.scale.up { perspective: 1500px; perspective-origin: 0% 50%; } -body.scale.up > .ui.sidebar { +.ui.pushable.scale.up > .ui.sidebar { z-index: 1; transform: translate3d(0, 0, -@sidebarWidth); } -body.scale.up > .pusher { +.ui.pushable.scale.up > .pusher { z-index: 2; } /* Pushed */ -body.scale.up.pushed > .pusher { +.ui.pushable.scale.up.pushed > .pusher { transform: translate3d(@sidebarWidth, 0, 0); } -body.scale.up.pushed > .visible.ui.sidebar { +.ui.pushable.scale.up.pushed > .visible.ui.sidebar { transform: translate3d(0, 0, 0); } /* Animation */ -body.scale.up.show > .visible.ui.sidebar, -body.scale.up.hide > .visible.ui.sidebar { +.ui.pushable.scale.up.show > .visible.ui.sidebar, +.ui.pushable.scale.up.hide > .visible.ui.sidebar { transition: transform @animationDuration ease; } @@ -341,33 +345,33 @@ body.scale.up.hide > .visible.ui.sidebar { ---------------*/ /* Set-up */ -body.recede { +.ui.pushable.recede { perspective: 1500px; } -body.recede > .ui.sidebar { +.ui.pushable.recede > .ui.sidebar { opacity: 1; transform: translate3d(-100%, 0, 0); z-index: 3; } -body.recede > .pusher { +.ui.pushable.recede > .pusher { transform-style: preserve-3d; z-index: 2; } -body.recede > .pusher::after { +.ui.pushable.recede > .pusher::after { background-color: rgba(0, 0, 0, 0.5); } /* Pushed */ -body.recede.pushed > .pusher { +.ui.pushable.recede.pushed > .pusher { transform: translate3d(15%, 0px, -400px) rotateY(-15deg); } -body.recede.pushed > .visible.ui.sidebar { +.ui.pushable.recede.pushed > .visible.ui.sidebar { transform: translate3d(0, 0, 0); } /* Animation */ -body.recede.show > .visible.ui.sidebar, -body.recede.hide > .visible.ui.sidebar { +.ui.pushable.recede.show > .visible.ui.sidebar, +.ui.pushable.recede.hide > .visible.ui.sidebar { transition: transform @animationDuration ease; } @@ -376,15 +380,15 @@ body.recede.hide > .visible.ui.sidebar { ---------------*/ /* Set-up */ -body.open.door { +.ui.pushable.open.door { perspective: 1500px; } -body.open.door > .ui.sidebar { +.ui.pushable.open.door > .ui.sidebar { opacity: 1; transform: translate3d(-100%, 0, 0); z-index: 3; } -body.open.door > .pusher { +.ui.pushable.open.door > .pusher { transform-origin: 100% 50%; transform-style: preserve-3d; z-index: 2; @@ -392,16 +396,16 @@ body.open.door > .pusher { /* Pushed */ -body.open.door.pushed > .pusher { +.ui.pushable.open.door.pushed > .pusher { transform: rotateY(-10deg); } -body.open.door.pushed > .visible.ui.sidebar { +.ui.pushable.open.door.pushed > .visible.ui.sidebar { transform: translate3d(0, 0, 0); } /* Animation */ -body.open.door.show > .visible.ui.sidebar, -body.open.door.hide > .visible.ui.sidebar { +.ui.pushable.open.door.show > .visible.ui.sidebar, +.ui.pushable.open.door.hide > .visible.ui.sidebar { transition: transform @animationDuration; } @@ -410,35 +414,35 @@ body.open.door.hide > .visible.ui.sidebar { ---------------*/ /* Set-up */ -body.rotate.in { +.ui.pushable.rotate.in { perspective: 1500px; perspective-origin: 0% 50%; } -body.rotate.in > .pusher { +.ui.pushable.rotate.in > .pusher { transform-style: preserve-3d; } -body.rotate.in > .ui.sidebar { +.ui.pushable.rotate.in > .ui.sidebar { transform: translate3d(-100%, 0, 0) rotateY(90deg); transform-origin: 50% 100% 0; transform-style: preserve-3d; } /* Pushed */ -body.rotate.in.pushed > .pusher { +.ui.pushable.rotate.in.pushed > .pusher { transform: translate3d(@sidebarWidth, 0, 0); } -body.rotate.in.pushed .visible.ui.sidebar { +.ui.pushable.rotate.in.pushed .visible.ui.sidebar { transform: translate3d(0%, 0, 0) rotateY(0deg); } /* Return Animation */ -body.rotate.in.hide > .visible.ui.sidebar { +.ui.pushable.rotate.in.hide > .visible.ui.sidebar { transform: translate3d(-100%, 0, 0) rotateY(0deg); transition: transform @animationDuration ease 0s; } /* Animation */ -body.rotate.in.show > .visible.ui.sidebar, -body.rotate.in.hide > .visible.ui.sidebar { +.ui.pushable.rotate.in.show > .visible.ui.sidebar, +.ui.pushable.rotate.in.hide > .visible.ui.sidebar { transition: transform @animationDuration ease-in-out 0s; }