Latest work

src/definitions/modules/sidebar.js

@@ -70,7 +70,7 @@ $.fn.sidebar = function(parameters) {
       module      = {
 
         initialize: function() {
-          module.debug('Initializing sidebar', $module);
+          module.debug('Initializing sidebar', parameters);
 
           transitionEvent = module.get.transitionEvent();
 
@@ -79,9 +79,6 @@ $.fn.sidebar = function(parameters) {
             settings.useLegacy = true;
           }
 
-          module.set.pushable();
-          module.set.direction();
-
           // avoid locking rendering if included in onReady
           requestAnimationFrame(module.setup.layout);
 
@@ -127,6 +124,11 @@ $.fn.sidebar = function(parameters) {
               ;
             }
             $context
+              .on('touchmove' + eventNamespace, function(event) {
+                if($(event.target).closest($module).size() == 0) {
+                  event.preventDefault();
+                }
+              })
               .on('click' + eventNamespace, module.event.clickaway)
               .on('touchend' + eventNamespace, module.event.clickaway)
             ;
@@ -137,6 +139,9 @@ $.fn.sidebar = function(parameters) {
             $context
               .off(eventNamespace)
             ;
+            $pusher
+              .off(eventNamespace)
+            ;
             if(settings.scrollLock) {
               $(window).off('DOMMouseScroll' + eventNamespace);
             }
@@ -153,7 +158,9 @@ $.fn.sidebar = function(parameters) {
 
         repaint: function() {
           module.verbose('Forcing repaint event');
-          var fakeAssignment = $module[0].offsetWidth;
+          element.style.display='none';
+          element.offsetHeight;
+          element.style.display='';
         },
 
         setup: {
@@ -167,12 +174,15 @@ $.fn.sidebar = function(parameters) {
                   .not($sidebars)
                   .wrapAll($pusher)
               ;
+              module.refresh();
             }
-            if($module.prevAll($pusher)[0] !== $pusher[0]) {
+            if($module.nextAll(selector.pusher)[0] !== $pusher[0]) {
               module.debug('Moved sidebar to correct parent element');
               $module.detach().prependTo($context);
+              module.refresh();
             }
-            module.refresh();
+            module.set.pushable();
+            module.set.direction();
           }
         },
 
@@ -299,10 +309,11 @@ $.fn.sidebar = function(parameters) {
             ? callback
             : function(){}
           ;
+          module.set.transition();
           if(settings.transition == 'scale down' || (module.is.mobile() && transition !== 'overlay')) {
             module.scrollToTop();
           }
-          module.set.transition();
+          module.repaint();
           animate = function() {
             module.set.visible();
             module.set.animating();
@@ -357,6 +368,7 @@ $.fn.sidebar = function(parameters) {
               $transition.off(transitionEvent + eventNamespace, transitionEnd);
               module.remove.animating();
               module.remove.transition();
+              module.repaint();
               if(transition == 'scale down' || (settings.returnScroll && transition !== 'overlay' && module.is.mobile()) ) {
                 module.scrollBack();
               }

src/definitions/modules/sidebar.less

@@ -41,6 +41,7 @@
 
   background: @sidebarBackground;
   width: @sidebarWidth !important;
+  z-index: @topLayer;
 }
 
 /*--------------
@@ -80,60 +81,62 @@
 
 
 /*--------------
-     Pushable
+     Body
 ---------------*/
 
-/* Canvas */
 .pushable {
-  position: relative;
   height: 100%;
   overflow-x: hidden;
   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
 ---------------*/
 
-.ui.sidebar ~ .fixed {
+.pushable > .fixed {
   position: fixed;
   backface-visibility: hidden;
-  will-change: transform;
 
-  z-index: @fixedLayer;
   transition: transform @duration @easing;
+  will-change: transform;
+  z-index: @fixedLayer;
 }
 
 /*--------------
      Page
 ---------------*/
 
-.ui.sidebar ~ .pusher {
+.pushable > .pusher {
+  position: relative;
   backface-visibility: hidden;
-  height: 100%;
+  min-height: 100%;
+
   transition: transform @duration @easing;
   background: @pageBackground;
+  z-index: @middleLayer;
 }
 
 
+/*--------------
+     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;
+  z-index: @dimmerLayer;
+}
+
 /*--------------
     Coupling
 ---------------*/
@@ -146,19 +149,11 @@
             States
 *******************************/
 
-/*--------------
-     Pushed
----------------*/
-
-.pusher:after {
-  z-index: @dimmerLayer;
-}
-
 /*--------------
      Dimmed
 ---------------*/
 
-.pusher.dimmed:after {
+.pushable > .pusher.dimmed:after {
   width: 100% !important;
   height: 100% !important;
   opacity: 1 !important;
@@ -168,11 +163,10 @@
      Animating
 ---------------*/
 
-.ui.sidebar.animating {
+.ui.animating.sidebar {
   visibility: visible;
 }
 
-
 /*--------------
      Visible
 ---------------*/
@@ -181,10 +175,6 @@
   visibility: visible;
 }
 
-/*--------------
-     Active
----------------*/
-
 .ui.active.sidebar {
   -webkit-overflow-scrolling: touch;
 }
@@ -219,7 +209,7 @@
 }
 
 /* Animation */
-.ui.animating.overlay.sidebar,
+.animating.ui.overlay.sidebar,
 .ui.visible.overlay.sidebar {
   z-index: @topLayer;
 }
@@ -231,7 +221,7 @@
   transform: translate3d(-100%, 0, 0);
 }
 /* Pushed */
-.pushable .ui.visible.left.overlay.sidebar {
+.ui.visible.left.overlay.sidebar {
   transform: translate3d(0%, 0, 0);
 }
 
@@ -242,7 +232,7 @@
   transform: translate3d(100%, 0, 0);
 }
 /* Pushed */
-.pushable .ui.visible.right.overlay.sidebar {
+.ui.visible.right.overlay.sidebar {
   transform: translate3d(0%, 0, 0);
 }
 
@@ -253,7 +243,7 @@
   transform: translate3d(0%, -100%, 0);
 }
 /* Pushed */
-.pushable .ui.visible.top.overlay.sidebar {
+.ui.visible.top.overlay.sidebar {
   transform: translate3d(0%, 0%, 0);
 }
 
@@ -264,7 +254,7 @@
   transform: translate3d(0%, 100%, 0);
 }
 /* Pushed */
-.pushable .ui.visible.bottom.overlay.sidebar {
+.ui.visible.bottom.overlay.sidebar {
   transform: translate3d(0%, 0%, 0);
 }
 
@@ -310,11 +300,11 @@
 .ui.uncover.sidebar {
   transform: translate3d(0, 0, 0);
   transition: transform @duration @easing;
-  z-index: -1;
+  z-index: @bottomLayer;
 }
 
 /* Animation */
-.ui.animating.uncover.sidebar,
+.ui.visible.uncover.sidebar,
 .ui.visible.uncover.sidebar {
   transform: translate3d(0, 0, 0);
 }
@@ -335,7 +325,6 @@
 /* Set-Up */
 .ui.slide.along.sidebar {
   transition: transform @duration @easing;
-  z-index: @bottomLayer;
 }
 .ui.slide.along.sidebar ~ .pusher,
 .ui.slide.along.sidebar ~ .pusher {
@@ -346,7 +335,7 @@
 
 /* Set-Up */
 .ui.left.slide.along.sidebar {
-  transform: translate3d(50%, 0, 0);
+  transform: translate3d(-50%, 0, 0);
 }
 /* Pushed */
 .ui.visible.left.slide.along.sidebar {
@@ -362,7 +351,7 @@
 
 /* Set-Up */
 .ui.right.slide.along.sidebar {
-  transform: translate3d(-50%, 0, 0);
+  transform: translate3d(50%, 0, 0);
 }
 /* Pushed */
 .ui.visible.right.slide.along.sidebar {
@@ -372,3 +361,77 @@
 .ui.visible.right.slide.along.sidebar ~ .pusher {
   transform: translate3d(-@sidebarWidth, 0, 0);
 }
+
+
+/*--------------
+   Slide Out
+---------------*/
+
+/* Set-up */
+.ui.slide.out.sidebar {
+  transition: transform @duration @easing;
+  z-index: @bottomLayer;
+}
+.ui.slide.out.sidebar ~ .pusher,
+.ui.slide.out.sidebar ~ .pusher {
+  transform: translate3d(0px, 0, 0);
+}
+
+/*--- Left ---*/
+
+/* Set-Up */
+.ui.left.slide.out.sidebar {
+  transform: translate3d(50%, 0, 0);
+}
+/* Pushed */
+.ui.visible.left.slide.out.sidebar {
+  transform: translate3d(0%, 0, 0);
+}
+.ui.visible.left.slide.out.sidebar ~ .fixed,
+.ui.visible.left.slide.out.sidebar ~ .pusher {
+  transform: translate3d(@sidebarWidth, 0, 0);
+}
+
+
+/*--- Right ---*/
+
+/* Set-Up */
+.ui.right.slide.out.sidebar {
+  transform: translate3d(-50%, 0, 0);
+}
+/* Pushed */
+.ui.visible.right.slide.out.sidebar {
+  transform: translate3d(0%, 0, 0);
+}
+.ui.visible.right.slide.out.sidebar ~ .fixed,
+.ui.visible.right.slide.out.sidebar ~ .pusher {
+  transform: translate3d(-@sidebarWidth, 0, 0);
+}
+
+
+/*--------------
+   Scale Down
+---------------*/
+
+/* Set-up */
+
+/* 3D transition cant have duration set until animation */
+.pushable.scale.down.animating > .visible.ui.sidebar {
+  transition: transform @duration @easing;
+}
+.ui.scale.down.sidebar ~ .pusher {
+  z-index: @bottomLayer;
+  transform-origin: 75% 50%;
+  overflow: hidden;
+}
+
+/* Pushed */
+.ui.visible.scale.down.sidebar {
+  transform: translate3d(0, 0, 0);
+}
+.ui.visible.scale.down.sidebar ~ .pusher {
+  transform: scale(0.75);
+}
+.ui.visible.scale.down.sidebar ~ .fixed {
+  transform: translate3d(@sidebarWidth, 0, 0);
+}