Iteration on sidebar

src/definitions/modules/sidebar.js

@@ -81,7 +81,6 @@ $.fn.sidebar = function(parameters) {
 
           module.set.pushable();
           module.set.direction();
-          module.set.transition();
 
           // avoid locking rendering if included in onReady
           requestAnimationFrame(module.setup.layout);
@@ -100,7 +99,6 @@ $.fn.sidebar = function(parameters) {
         destroy: function() {
           module.verbose('Destroying previous module for', $module);
           module.remove.direction();
-          module.remove.transition();
           $module
             .off(eventNamespace)
             .removeData(moduleNamespace)
@@ -155,7 +153,7 @@ $.fn.sidebar = function(parameters) {
 
         repaint: function() {
           module.verbose('Forcing repaint event');
-          var fakeAssignment = $context[0].offsetWidth;
+          var fakeAssignment = $module[0].offsetWidth;
         },
 
         setup: {
@@ -207,7 +205,7 @@ $.fn.sidebar = function(parameters) {
             ? callback
             : function(){}
           ;
-          if(module.is.closed() || module.is.outward()) {
+          if(module.is.closed() || module.is.animating()) {
             if(settings.overlay)  {
               module.error(error.overlay);
               settings.transition = 'overlay';
@@ -241,7 +239,7 @@ $.fn.sidebar = function(parameters) {
             ? callback
             : function(){}
           ;
-          if(module.is.visible() || module.is.inward()) {
+          if(module.is.visible() || module.is.animating()) {
             module.debug('Hiding sidebar', callback);
             animateMethod(function() {
               $.proxy(callback, element)();
@@ -266,11 +264,9 @@ $.fn.sidebar = function(parameters) {
             sidebarCount   = $otherSidebars.size(),
             callbackCount  = 0
           ;
-          console.log($sidebars);
           $otherSidebars
             .sidebar('hide', function() {
               callbackCount++;
-              console.log('callback count');
               if(callbackCount == sidebarCount) {
                 callback();
               }
@@ -303,30 +299,30 @@ $.fn.sidebar = function(parameters) {
             ? callback
             : function(){}
           ;
-          module.set.inward();
+          if(settings.transition == 'scale down' || (module.is.mobile() && transition !== 'overlay')) {
+            module.scrollToTop();
+          }
+          module.set.transition();
           animate = function() {
+            module.set.visible();
+            module.set.animating();
             if(!module.othersActive()) {
               if(settings.dimPage) {
                 $pusher.addClass(className.dimmed);
               }
-              module.set.pushed();
             }
-            module.set.visible();
           };
           transitionEnd = function(event) {
             if( event.target == $transition[0] ) {
               $transition.off(transitionEvent + eventNamespace, transitionEnd);
-              module.remove.inward();
+              module.remove.animating();
               module.bind.clickaway();
               module.set.active();
               $.proxy(callback, element)();
             }
           };
           $transition.on(transitionEvent + eventNamespace, transitionEnd);
-          if(settings.transition == 'scale down' || (module.is.mobile() && transition !== 'overlay')) {
-            module.scrollToTop();
-          }
-          animate();
+          requestAnimationFrame(animate);
         },
 
         pullPage: function(callback) {
@@ -348,19 +344,19 @@ $.fn.sidebar = function(parameters) {
           if(!module.othersActive()) {
             module.unbind.clickaway();
           }
+          module.remove.active();
           animate = function() {
-            module.set.outward();
-            module.remove.active();
+            module.set.animating();
+            module.remove.visible();
             if(settings.dimPage && !module.othersActive()) {
               $pusher.removeClass(className.dimmed);
-              module.remove.pushed();
             }
           };
           transitionEnd = function(event) {
             if( event.target == $transition[0] ) {
               $transition.off(transitionEvent + eventNamespace, transitionEnd);
-              module.remove.outward();
-              module.remove.visible();
+              module.remove.animating();
+              module.remove.transition();
               if(transition == 'scale down' || (settings.returnScroll && transition !== 'overlay' && module.is.mobile()) ) {
                 module.scrollBack();
               }
@@ -368,7 +364,7 @@ $.fn.sidebar = function(parameters) {
             }
           };
           $transition.on(transitionEvent + eventNamespace, transitionEnd);
-          animate();
+          requestAnimationFrame(animate);
         },
 
         legacyPushPage: function(callback) {
@@ -386,14 +382,13 @@ $.fn.sidebar = function(parameters) {
           module.debug('Using javascript to push context', properties);
           module.set.visible();
           module.set.transition();
-          module.set.inward();
+          module.set.animating();
           if(settings.dimPage) {
             $pusher.addClass(className.dimmed);
           }
-          module.set.pushed();
           $context
             .animate(properties, settings.duration, settings.easing, function() {
-              module.remove.inward();
+              module.remove.animating();
               module.bind.clickaway();
               module.set.active();
               $.proxy(callback, module)();
@@ -414,16 +409,15 @@ $.fn.sidebar = function(parameters) {
           properties[direction] = '0px';
           module.debug('Using javascript to pull context', properties);
           module.unbind.clickaway();
-          module.set.outward();
+          module.set.animating();
+          module.remove.visible();
           module.remove.active();
           if(settings.dimPage && !module.othersVisible()) {
             $pusher.removeClass(className.dimmed);
           }
-          module.remove.pushed();
           $context
             .animate(properties, settings.duration, settings.easing, function() {
-              module.remove.outward();
-              module.remove.visible();
+              module.remove.animating();
               $.proxy(callback, module)();
             })
           ;
@@ -454,11 +448,8 @@ $.fn.sidebar = function(parameters) {
           active: function() {
             $module.addClass(className.active);
           },
-          inward: function() {
-            $module.addClass(className.inward);
-          },
-          outward: function() {
-            $module.addClass(className.outward);
+          animating: function() {
+            $module.addClass(className.animating);
           },
           transition: function(transition) {
             transition = transition || module.get.transition();
@@ -488,11 +479,8 @@ $.fn.sidebar = function(parameters) {
           active: function() {
             $module.removeClass(className.active);
           },
-          inward: function() {
-            $module.removeClass(className.inward);
-          },
-          outward: function() {
-            $module.removeClass(className.outward);
+          animating: function() {
+            $module.removeClass(className.animating);
           },
           transition: function(transition) {
             transition = transition || module.get.transition();
@@ -605,14 +593,8 @@ $.fn.sidebar = function(parameters) {
           vertical: function() {
             return $module.hasClass(className.top);
           },
-          inward: function() {
-            return $context.hasClass(className.inward);
-          },
-          outward: function() {
-            return $context.hasClass(className.outward);
-          },
           animating: function() {
-            return module.is.inward() || module.is.outward();
+            return $context.hasClass(className.animating);
           }
         },
 
@@ -839,17 +821,16 @@ $.fn.sidebar.settings = {
   onVisible         : function(){},
 
   className         : {
-    active   : 'active',
-    dimmed   : 'dimmed',
-    inward   : 'inward',
-    outward  : 'outward',
-    pushable : 'pushable',
-    pushed   : 'pushed',
-    right    : 'right',
-    top      : 'top',
-    left     : 'left',
-    bottom   : 'bottom',
-    visible  : 'visible'
+    active    : 'active',
+    animating : 'animating',
+    dimmed    : 'dimmed',
+    pushable  : 'pushable',
+    pushed    : 'pushed',
+    right     : 'right',
+    top       : 'top',
+    left      : 'left',
+    bottom    : 'bottom',
+    visible   : 'visible'
   },
 
   selector: {

src/definitions/modules/sidebar.less

@@ -69,7 +69,7 @@
 .ui.right.sidebar {
   right: 0px !important;
   left: auto !important;
-  transform: translate3d(0, 100%, 0);
+  transform: translate3d(100%, 0%, 0);
 }
 
 .ui.bottom.sidebar {
@@ -79,12 +79,11 @@
 }
 
 
-
 /*--------------
-     Body
+     Pushable
 ---------------*/
 
-/* Sets 3D Perspective */
+/* Canvas */
 .pushable {
   position: relative;
   height: 100%;
@@ -92,11 +91,29 @@
   background: @canvasBackground !important;
 }
 
+/*--------------
+     Dimmer
+---------------*/
+
+.pusher:after {
+  position: fixed;
+  top: 0px;
+  right: 0px;
+  content: '';
+  background-color: @dimmerColor;
+  width: 0px;
+  height: 0px;
+  overflow: hidden;
+  opacity: 0;
+  transition: opacity @duration;
+  will-change: opacity;
+}
+
 /*--------------
      Fixed
 ---------------*/
 
-.pushable > .fixed {
+.ui.sidebar ~ .fixed {
   position: fixed;
   backface-visibility: hidden;
   will-change: transform;
@@ -109,33 +126,14 @@
      Page
 ---------------*/
 
-.pushable > .pusher {
+.ui.sidebar ~ .pusher {
   backface-visibility: hidden;
-
   height: 100%;
   transition: transform @duration @easing;
   background: @pageBackground;
 }
 
 
-/*--------------
-     Dimmer
----------------*/
-
-.pushable > .pusher:after {
-  position: fixed;
-  top: 0px;
-  right: 0px;
-  content: '';
-  background-color: @dimmerColor;
-  width: 0px;
-  height: 0px;
-  overflow: hidden;
-  opacity: 0;
-  transition: opacity @duration;
-  will-change: opacity;
-}
-
 /*--------------
     Coupling
 ---------------*/
@@ -152,29 +150,34 @@
      Pushed
 ---------------*/
 
-
-.pushable.pushed > .pusher:after {
+.pusher:after {
   z-index: @dimmerLayer;
 }
-.pushable.pushed > .pusher {
-  z-index: @middleLayer;
-}
 
 /*--------------
      Dimmed
 ---------------*/
 
-.pushable > .pusher.dimmed:after {
+.pusher.dimmed:after {
   width: 100% !important;
   height: 100% !important;
   opacity: 1 !important;
 }
 
+/*--------------
+     Animating
+---------------*/
+
+.ui.sidebar.animating {
+  visibility: visible;
+}
+
+
 /*--------------
      Visible
 ---------------*/
 
-.pushable > .visible.ui.sidebar {
+.ui.visible.sidebar {
   visibility: visible;
 }
 
@@ -184,7 +187,6 @@
 
 .ui.active.sidebar {
   -webkit-overflow-scrolling: touch;
-  z-index: @topLayer !important;
 }
 
 
@@ -212,60 +214,57 @@
 ---------------*/
 
 /* Set-up */
-.pushable > .visible.ui.overlay.sidebar {
-  z-index: @topLayer;
+.ui.overlay.sidebar {
+  transition: transform @duration @easing;
 }
+
 /* Animation */
-.pushable > .ui.overlay.sidebar,
-.pushable > .ui.overlay.sidebar {
-  transition: transform @duration @easing;
+.ui.animating.overlay.sidebar,
+.ui.visible.overlay.sidebar {
+  z-index: @topLayer;
 }
 
 /*--- Left ---*/
 
 /* Set-up */
-.pushable > .ui.left.overlay.sidebar {
+.ui.left.overlay.sidebar {
   transform: translate3d(-100%, 0, 0);
 }
 /* Pushed */
-.pushable.pushed .ui.inward.left.overlay.sidebar,
-.pushable.pushed .ui.active.left.overlay.sidebar {
+.pushable .ui.visible.left.overlay.sidebar {
   transform: translate3d(0%, 0, 0);
 }
 
 /*--- Right ---*/
 
 /* Set-up */
-.pushable > .ui.right.overlay.sidebar {
+.ui.right.overlay.sidebar {
   transform: translate3d(100%, 0, 0);
 }
 /* Pushed */
-.pushable.pushed .ui.inward.right.overlay.sidebar,
-.pushable.pushed .ui.active.right.overlay.sidebar {
+.pushable .ui.visible.right.overlay.sidebar {
   transform: translate3d(0%, 0, 0);
 }
 
 /*--- Top ---*/
 
 /* Set-up */
-.pushable > .ui.top.overlay.sidebar {
+.ui.top.overlay.sidebar {
   transform: translate3d(0%, -100%, 0);
 }
 /* Pushed */
-.pushable.pushed .ui.inward.top.overlay.sidebar,
-.pushable.pushed .ui.active.top.overlay.sidebar {
+.pushable .ui.visible.top.overlay.sidebar {
   transform: translate3d(0%, 0%, 0);
 }
 
 /*--- Bottom ---*/
 
 /* Set-up */
-.pushable > .ui.bottom.overlay.sidebar {
+.ui.bottom.overlay.sidebar {
   transform: translate3d(0%, 100%, 0);
 }
 /* Pushed */
-.pushable.pushed .ui.inward.bottom.overlay.sidebar,
-.pushable.pushed .ui.active.bottom.overlay.sidebar {
+.pushable .ui.visible.bottom.overlay.sidebar {
   transform: translate3d(0%, 0%, 0);
 }
 
@@ -274,36 +273,31 @@
 ---------------*/
 
 /* Initial */
-.pushable > .ui.push.sidebar {
+.ui.push.sidebar {
   transition: transform @duration @easing;
   z-index: @topLayer;
 }
-.pushable > .ui.left.push.sidebar {
+.ui.left.push.sidebar {
   transform: translate3d(-100%, 0, 0);
 }
-.pushable > .ui.right.push.sidebar {
+.ui.right.push.sidebar {
   transform: translate3d(100%, 0, 0);
 }
-
-/* Animating */
-.pushable > .ui.visible.push.sidebar ~ .pusher,
-.pushable > .ui.visible.push.sidebar ~ .pusher {
+.ui.visible.push.sidebar ~ .fixed,
+.ui.visible.push.sidebar ~ .pusher {
   transform: translate3d(0px, 0, 0);
 }
 
-/* Inward */
-.pushable.pushed > .inward.ui.push.sidebar,
-.pushable.pushed > .active.ui.push.sidebar {
+/* Animation */
+.ui.visible.push.sidebar {
   transform: translate3d(0%, 0, 0);
 }
-
-/* Visible */
-.pushable.pushed > .visible.ui.left.push.sidebar ~ .fixed,
-.pushable.pushed > .visible.ui.left.push.sidebar ~ .pusher {
+.ui.visible.left.push.sidebar ~ .fixed,
+.ui.visible.left.push.sidebar ~ .pusher {
   transform: translate3d(@sidebarWidth, 0, 0);
 }
-.pushable.pushed > .visible.ui.right.push.sidebar ~ .fixed,
-.pushable.pushed > .visible.ui.right.push.sidebar ~ .pusher {
+.ui.visible.right.push.sidebar ~ .fixed,
+.ui.visible.right.push.sidebar ~ .pusher {
   transform: translate3d(-@sidebarWidth, 0, 0);
 }
 
@@ -313,21 +307,23 @@
 ---------------*/
 
 /* Initial */
-.ui.left.uncover.sidebar,
-.ui.right.uncover.sidebar,
-.ui.top.uncover.sidebar,
-.ui.bottom.uncover.sidebar {
+.ui.uncover.sidebar {
   transform: translate3d(0, 0, 0);
   transition: transform @duration @easing;
+  z-index: -1;
 }
 
-/* Visible */
-.pushable.pushed > .visible.ui.left.uncover.sidebar ~ .fixed,
-.pushable.pushed > .visible.ui.left.uncover.sidebar ~ .pusher {
+/* Animation */
+.ui.animating.uncover.sidebar,
+.ui.visible.uncover.sidebar {
+  transform: translate3d(0, 0, 0);
+}
+.ui.visible.left.uncover.sidebar ~ .fixed,
+.ui.visible.left.uncover.sidebar ~ .pusher {
   transform: translate3d(@sidebarWidth, 0, 0);
 }
-.pushable.pushed > .visible.ui.right.uncover.sidebar ~ .fixed,
-.pushable.pushed > .visible.ui.right.uncover.sidebar ~ .pusher {
+.ui.visible.right.uncover.sidebar ~ .fixed,
+.ui.visible.right.uncover.sidebar ~ .pusher {
   transform: translate3d(-@sidebarWidth, 0, 0);
 }
 
@@ -337,27 +333,27 @@
 ---------------*/
 
 /* Set-Up */
-.pushable > .ui.slide.along.sidebar {
+.ui.slide.along.sidebar {
   transition: transform @duration @easing;
   z-index: @bottomLayer;
 }
-.pushable > .ui.slide.along.sidebar ~ .pusher,
-.pushable > .ui.slide.along.sidebar ~ .pusher {
+.ui.slide.along.sidebar ~ .pusher,
+.ui.slide.along.sidebar ~ .pusher {
   transform: translate3d(0px, 0, 0);
 }
 
 /*--- Left ---*/
 
 /* Set-Up */
-.pushable > .ui.left.slide.along.sidebar {
+.ui.left.slide.along.sidebar {
   transform: translate3d(50%, 0, 0);
 }
 /* Pushed */
-.pushable.pushed > .visible.ui.left.slide.along.sidebar {
+.ui.visible.left.slide.along.sidebar {
   transform: translate3d(0%, 0, 0);
 }
-.pushable.pushed > .visible.ui.left.slide.along.sidebar ~ .fixed,
-.pushable.pushed > .visible.ui.left.slide.along.sidebar ~ .pusher {
+.ui.visible.left.slide.along.sidebar ~ .fixed,
+.ui.visible.left.slide.along.sidebar ~ .pusher {
   transform: translate3d(@sidebarWidth, 0, 0);
 }
 
@@ -365,14 +361,14 @@
 /*--- Right ---*/
 
 /* Set-Up */
-.pushable > .ui.right.slide.along.sidebar {
+.ui.right.slide.along.sidebar {
   transform: translate3d(-50%, 0, 0);
 }
 /* Pushed */
-.pushable.pushed > .visible.ui.right.slide.along.sidebar {
+.ui.visible.right.slide.along.sidebar {
   transform: translate3d(0%, 0, 0);
 }
-.pushable.pushed > .visible.ui.right.slide.along.sidebar ~ .fixed,
-.pushable.pushed > .visible.ui.right.slide.along.sidebar ~ .pusher {
+.ui.visible.right.slide.along.sidebar ~ .fixed,
+.ui.visible.right.slide.along.sidebar ~ .pusher {
   transform: translate3d(-@sidebarWidth, 0, 0);
 }