From a433a781a46010a6f7cfc97520ee6869dabb3a77 Mon Sep 17 00:00:00 2001 From: jlukic Date: Mon, 3 Nov 2014 19:19:18 -0500 Subject: [PATCH] Working on sidebar rewrite --- src/definitions/modules/sidebar.js | 94 +++++++++++++++------------- src/definitions/modules/sidebar.less | 70 ++++++++++----------- 2 files changed, 84 insertions(+), 80 deletions(-) diff --git a/src/definitions/modules/sidebar.js b/src/definitions/modules/sidebar.js index c1756d917..f738c64ac 100644 --- a/src/definitions/modules/sidebar.js +++ b/src/definitions/modules/sidebar.js @@ -82,6 +82,8 @@ $.fn.sidebar = function(parameters) { } module.setup.context(); + module.set.direction(); + module.set.transition(); // avoid locking rendering to change layout if included in onReady requestAnimationFrame(module.setup.layout); @@ -99,6 +101,8 @@ $.fn.sidebar = function(parameters) { destroy: function() { module.verbose('Destroying previous module for', $module); + module.remove.direction(); + module.remove.transition(); $module .off(eventNamespace) .removeData(moduleNamespace) @@ -290,8 +294,6 @@ $.fn.sidebar = function(parameters) { animate = function() { module.remove.outward(); module.set.visible(); - module.set.transition(); - module.set.direction(); requestAnimationFrame(function() { module.set.inward(); module.set.pushed(); @@ -345,8 +347,6 @@ $.fn.sidebar = function(parameters) { .on(transitionEnd + eventNamespace, function(event) { if( event.target == $transition[0] ) { $transition.off(transitionEnd + eventNamespace); - module.remove.transition(); - module.remove.direction(); module.remove.outward(); module.remove.visible(); if(transition == 'scale down' || (settings.returnScroll && transition !== 'overlay' && module.is.mobile()) ) { @@ -410,8 +410,6 @@ $.fn.sidebar = function(parameters) { module.remove.pushed(); $context .animate(properties, settings.duration, settings.easing, function() { - module.remove.transition(); - module.remove.direction(); module.remove.outward(); module.remove.visible(); $.proxy(callback, module)(); @@ -420,65 +418,71 @@ $.fn.sidebar = function(parameters) { }, set: { - active: function() { - $context.addClass(className.active); - }, - direction: function(direction) { - direction = direction || module.get.direction(); - $context.addClass(className[direction]); - }, - visible: function() { - $module.addClass(className.visible); - }, - transition: function(transition) { - transition = transition || module.get.transition(); - $context.addClass(transition); - }, - inward: function() { - $context.addClass(className.inward); - }, - outward: function() { - $context.addClass(className.outward); - }, + // container pushed: function() { if(settings.dimPage) { $page.addClass(className.dimmed); } $context.addClass(className.pushed); - } - }, - remove: { + }, active: function() { - $context.removeClass(className.active); + $context.addClass(className.active); }, - visible: function() { - $module.removeClass(className.visible); + + // sidebar + inward: function() { + $module.addClass(className.inward); }, - allVisible: function() { - if($sidebars.hasClass(className.visible)) { - module.debug('Other sidebars visible, hiding'); - $sidebars.removeClass(className.visible); - } + outward: function() { + $module.addClass(className.outward); }, transition: function(transition) { transition = transition || module.get.transition(); - $context.removeClass(transition); + console.log('transition'); + $module.addClass(transition); + }, + direction: function(direction) { + direction = direction || module.get.direction(); + $module.addClass(className[direction]); }, + visible: function() { + $module.addClass(className.visible); + } + }, + remove: { + // context pushed: function() { if(settings.dimPage) { $page.removeClass(className.dimmed); } $context.removeClass(className.pushed); }, + active: function() { + $context.removeClass(className.active); + }, + // sidebar inward: function() { - $context.removeClass(className.inward); + $module.removeClass(className.inward); }, outward: function() { - $context.removeClass(className.outward); + $module.removeClass(className.outward); + }, + transition: function(transition) { + transition = transition || module.get.transition(); + $module.removeClass(transition); }, direction: function(direction) { direction = direction || module.get.direction(); - $context.removeClass(className[direction]); + $module.removeClass(className[direction]); + }, + visible: function() { + $module.removeClass(className.visible); + }, + allVisible: function() { + if($sidebars.hasClass(className.visible)) { + module.debug('Other sidebars visible, hiding'); + $sidebars.removeClass(className.visible); + } } }, @@ -812,15 +816,15 @@ $.fn.sidebar.settings = { className : { active : 'active', - bottom : 'bottom', dimmed : 'dimmed', - inward : 'show', - left : 'left', - outward : 'hide', + inward : 'inward', + outward : 'outward', pushable : 'pushable', pushed : 'pushed', right : 'right', top : 'top', + left : 'left', + bottom : 'bottom', visible : 'visible' }, diff --git a/src/definitions/modules/sidebar.less b/src/definitions/modules/sidebar.less index b905f454d..5a7f32bab 100755 --- a/src/definitions/modules/sidebar.less +++ b/src/definitions/modules/sidebar.less @@ -179,12 +179,12 @@ Animation ---------------*/ -.pushable.show > .pusher, -.pushable.hide > .pusher { +.pushable.inward > .pusher, +.pushable.outward > .pusher { backface-visibility: hidden; } -.pushable.show > .visible.sidebar, -.pushable.hide > .visible.sidebar { +.pushable.inward > .visible.sidebar, +.pushable.outward > .visible.sidebar { backface-visibility: hidden; } @@ -220,56 +220,56 @@ ---------------*/ /* Set-up */ -.pushable.overlay > .visible.ui.sidebar { +.pushable > .visible.ui.overlay.sidebar { z-index: @topLayer; } /* Animation */ -.pushable.overlay.show > .visible.ui.sidebar, -.pushable.overlay.hide > .visible.ui.sidebar { +.pushable.inward > .visible.ui.overlay.sidebar, +.pushable.outward > .visible.ui.overlay.sidebar { transition: transform @duration @easing; } /*--- Left ---*/ /* Set-up */ -.left.pushable.overlay > .visible.ui.sidebar { +.pushable > .ui.left.overlay.sidebar { transform: translate3d(-100%, 0, 0); } /* Pushed */ -.left.pushable.overlay.pushed .visible.ui.sidebar { +.pushable.pushed .ui.visible.left.overlay.sidebar { transform: translate3d(0%, 0, 0); } /*--- Right ---*/ /* Set-up */ -.right.pushable.overlay > .visible.ui.sidebar { +.pushable > .ui.right.overlay.sidebar { transform: translate3d(100%, 0, 0); } /* Pushed */ -.right.pushable.overlay.pushed .visible.ui.sidebar { +.pushable.pushed .ui.visible.right.overlay.sidebar { transform: translate3d(0%, 0, 0); } /*--- Top ---*/ /* Set-up */ -.top.pushable.overlay > .visible.ui.sidebar { +.pushable > .ui.top.overlay.sidebar { transform: translate3d(0%, -100%, 0); } /* Pushed */ -.top.pushable.overlay.pushed .visible.ui.sidebar { +.pushable.pushed .ui.visible.top.overlay.sidebar { transform: translate3d(0%, 0%, 0); } /*--- Bottom ---*/ /* Set-up */ -.bottom.pushable.overlay > .visible.ui.sidebar { +.pushable > .ui.bottom.overlay.sidebar { transform: translate3d(0%, 100%, 0); } /* Pushed */ -.bottom.pushable.overlay.pushed .visible.ui.sidebar { +.pushable.pushed .ui.visible.bottom.overlay.sidebar { transform: translate3d(0%, 0%, 0); } @@ -278,26 +278,26 @@ ---------------*/ /* Set-Up */ -.pushable.push > .fixed, -.pushable.push > .pusher { +.pushable > .ui.push.sidebar.inward ~ .pusher, +.pushable > .ui.push.sidebar.outward ~ .pusher { transform: translate3d(0px, 0, 0); } -.pushable.push > .visible.ui.sidebar { +.pushable > .push.ui.sidebar { transform: translate3d(-100%, 0, 0); + transition: transform @duration @easing; } /* Pushed */ -.pushable.push.pushed > .visible.ui.sidebar { +.pushable.pushed > .visible.ui.push.sidebar { transform: translate3d(0%, 0, 0); } -.pushable.push.pushed > .fixed, -.pushable.push.pushed > .pusher { +.pushable.pushed > .visible.ui.left.push.sidebar ~ .fixed, +.pushable.pushed > .visible.ui.left.push.sidebar ~ .pusher { transform: translate3d(@sidebarWidth, 0, 0); } - -.pushable.push.show > .visible.ui.sidebar, -.pushable.push.hide > .visible.ui.sidebar { - transition: transform @duration @easing; +.pushable.pushed > .visible.ui.right.push.sidebar ~ .fixed, +.pushable.pushed > .visible.ui.right.push.sidebar ~ .pusher { + transform: translate3d(-@sidebarWidth, 0, 0); } @@ -356,8 +356,8 @@ transform: translate3d(0%, 0, 0); } -.pushable.slide.along.show > .visible.ui.sidebar, -.pushable.slide.along.hide > .visible.ui.sidebar { +.pushable.slide.along.inward > .visible.ui.sidebar, +.pushable.slide.along.outward > .visible.ui.sidebar { transition: transform @duration @easing; } @@ -384,8 +384,8 @@ transform: translate3d(0%, 0, 0); } -.pushable.slide.out.show > .visible.ui.sidebar, -.pushable.slide.out.hide > .visible.ui.sidebar { +.pushable.slide.out.inward > .visible.ui.sidebar, +.pushable.slide.out.outward > .visible.ui.sidebar { transition: transform @duration @easing; } @@ -419,8 +419,8 @@ } /* 3D transition cant have duration set until animation */ -.pushable.scale.down.show > .visible.ui.sidebar, -.pushable.scale.down.hide > .visible.ui.sidebar { +.pushable.scale.down.inward > .visible.ui.sidebar, +.pushable.scale.down.outward > .visible.ui.sidebar { transition: transform @duration @easing; } @@ -449,9 +449,9 @@ .pushable.safe.pushed > .fixed { margin-left: @sidebarWidth !important; } -.pushable.safe.show, -.pushable.safe.hide, -.pushable.safe.show > .fixed, -.pushable.safe.hide > .fixed { +.pushable.safe.inward, +.pushable.safe.outward, +.pushable.safe.inward > .fixed, +.pushable.safe.outward > .fixed { transition: margin @duration @easing !important; }