Working on sidebar rewrite

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'
   },
 

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;
 }