Nearingly done

src/definitions/modules/sidebar.js

@@ -53,10 +53,10 @@ $.fn.sidebar = function(parameters) {
 
         $module         = $(this),
         $context        = $(settings.context),
-        $style          = $('style[title=' + namespace + ']'),
 
         $sidebars       = $module.children(selector.sidebar),
         $pusher         = $context.children(selector.pusher),
+        $style,
 
         element         = this,
         instance        = $module.data(moduleNamespace),
@@ -125,12 +125,13 @@ $.fn.sidebar = function(parameters) {
             }
             $(window)
               .on('touchmove' + eventNamespace, module.event.scroll)
-              .on('scroll' + eventNamespace, module.event)
-            ;
-            $context
-              .on('click' + eventNamespace, module.event.clickaway)
-              .on('touchend' + eventNamespace, module.event.clickaway)
             ;
+            if(settings.closable) {
+              $context
+                .on('click' + eventNamespace, module.event.clickaway)
+                .on('touchend' + eventNamespace, module.event.clickaway)
+              ;
+            }
           }
         },
         unbind: {
@@ -145,10 +146,41 @@ $.fn.sidebar = function(parameters) {
           }
         },
 
+        add: {
+          bodyCSS: function(direction, distance) {
+            var
+              width  = $module.outerWidth(),
+              height = $module.outerHeight(),
+              style  = ''
+                + '<style title="' + namespace + '">'
+                + ' .ui.visible.left.sidebar ~ .fixed,'
+                + ' .ui.visible.left.sidebar ~ .pusher {'
+                + '   transform: translate3d('+ width + 'px, 0, 0);'
+                + ' }'
+                + ' .ui.visible.right.sidebar ~ .fixed,'
+                + ' .ui.visible.right.sidebar ~ .pusher {'
+                + '   transform: translate3d(-'+ width + 'px, 0, 0);'
+                + ' }'
+                + ' .ui.visible.top.sidebar ~ .fixed,'
+                + ' .ui.visible.top.sidebar ~ .pusher {'
+                + '   transform: translate3d(0, ' + height + 'px, 0);'
+                + ' }'
+                + ' .ui.visible.bottom.sidebar ~ .fixed,'
+                + ' .ui.visible.bottom.sidebar ~ .pusher {'
+                + '   transform: translate3d(0, -' + height + 'px, 0);'
+                + ' }'
+                + '</style>'
+            ;
+            $head.append(style);
+            $style = $('style[title=' + namespace + ']');
+            console.log(style);
+            module.debug('Adding sizing css to head', $style);
+          }
+        },
+
         refresh: function() {
           module.verbose('Refreshing selector cache');
           $context  = $(settings.context);
-          $style    = $('style[title=' + namespace + ']');
           $sidebars = $context.children(selector.sidebar);
           $pusher   = $context.children(selector.pusher);
         },
@@ -157,6 +189,7 @@ $.fn.sidebar = function(parameters) {
           module.verbose('Forcing repaint event');
           element.style.display='none';
           element.offsetHeight;
+          element.scrollTop = element.scrollTop;
           element.style.display='';
         },
 
@@ -212,7 +245,7 @@ $.fn.sidebar = function(parameters) {
             ? callback
             : function(){}
           ;
-          if(module.is.closed() || module.is.animating()) {
+          if(module.is.closed()) {
             if(settings.overlay)  {
               module.error(error.overlay);
               settings.transition = 'overlay';
@@ -283,7 +316,7 @@ $.fn.sidebar = function(parameters) {
 
         toggle: function() {
           module.verbose('Determining toggled direction');
-          if(module.is.closed() || module.is.outward()) {
+          if(module.is.closed()) {
             module.show();
           }
           else {
@@ -307,18 +340,21 @@ $.fn.sidebar = function(parameters) {
             : function(){}
           ;
           if(settings.transition == 'scale down' || (module.is.mobile() && transition !== 'overlay')) {
-            //module.scrollToTop();
+            module.scrollToTop();
           }
-          module.set.animating();
+          module.add.bodyCSS();
           module.set.transition();
-          //module.repaint();
+          module.repaint();
           animate = function() {
-            module.set.visible();
-            if(!module.othersActive()) {
-              if(settings.dimPage) {
-                $pusher.addClass(className.dimmed);
+            module.set.animating();
+            requestAnimationFrame(function() {
+              module.set.visible();
+              if(!module.othersActive()) {
+                if(settings.dimPage) {
+                  $pusher.addClass(className.dimmed);
+                }
               }
-            }
+            });
           };
           transitionEnd = function(event) {
             if( event.target == $transition[0] ) {
@@ -365,9 +401,9 @@ $.fn.sidebar = function(parameters) {
               $transition.off(transitionEvent + eventNamespace, transitionEnd);
               module.remove.animating();
               module.remove.transition();
-              module.repaint();
+              module.remove.bodyCSS();
               if(transition == 'scale down' || (settings.returnScroll && transition !== 'overlay' && module.is.mobile()) ) {
-                //module.scrollBack();
+                module.scrollBack();
               }
               $.proxy(callback, element)();
             }
@@ -454,6 +490,9 @@ $.fn.sidebar = function(parameters) {
           },
 
           // sidebar
+          active: function() {
+            $module.addClass(className.active);
+          },
           animating: function() {
             $module.addClass(className.animating);
           },
@@ -473,6 +512,15 @@ $.fn.sidebar = function(parameters) {
           }
         },
         remove: {
+
+          bodyCSS: function() {
+            console.log($style);
+            module.debug('Removing body css styles', $style);
+            if($style.size() > 0) {
+              $style.remove();
+            }
+          },
+
           // context
           pushed: function() {
             $context.removeClass(className.pushed);
@@ -811,6 +859,7 @@ $.fn.sidebar.settings = {
   context           : 'body',
   exclusive         : false,
 
+  closable          : true,
   dimPage           : true,
   scrollLock        : false,
   returnScroll      : true,

src/definitions/modules/sidebar.less

@@ -33,15 +33,13 @@
   backface-visibility: hidden;
   transition: none;
   will-change: transform;
+  transform: translate3d(0, 0, 0);
   visibility: hidden;
 
   height: 100% !important;
   border-radius: 0em !important;
   margin: 0em !important;
   overflow-y: auto !important;
-
-  background: @sidebarBackground;
-  width: @sidebarWidth !important;
   z-index: @topLayer;
 }
 
@@ -86,7 +84,7 @@
 ---------------*/
 
 .pushable {
-  height: 100% !important;
+  height: 100%;
   overflow-x: hidden;
   background: @canvasBackground !important;
 }
@@ -200,6 +198,33 @@
 }
 
 
+/*--------------
+      Sizes
+---------------*/
+
+.ui.sidebar {
+  width: @sidebarWidth !important;
+}
+
+/* Sizes */
+.ui.visible.left.sidebar ~ .fixed,
+.ui.visible.left.sidebar ~ .pusher {
+  transform: translate3d(@sidebarWidth, 0, 0);
+}
+.ui.visible.right.sidebar ~ .fixed,
+.ui.visible.right.sidebar ~ .pusher {
+  transform: translate3d(-@sidebarWidth, 0, 0);
+}
+.ui.visible.top.sidebar ~ .fixed,
+.ui.visible.top.sidebar ~ .pusher {
+  transform: translate3d(0, @sidebarHeight, 0);
+}
+.ui.visible.bottom.sidebar ~ .pusher {
+  transform: translate3d(0, -@sidebarHeight, 0);
+}
+
+
+
 /*******************************
           Animations
 *******************************/
@@ -210,23 +235,23 @@
 
 /* Set-up */
 .ui.overlay.sidebar {
-  transition: transform @duration @easing;
+  z-index: @topLayer;
 }
 
 /* Animation */
 .animating.ui.overlay.sidebar,
 .ui.visible.overlay.sidebar {
-  z-index: @topLayer;
+  transition: transform @duration @easing;
 }
 
 /*--- Left ---*/
 
 /* Set-up */
 .ui.left.overlay.sidebar {
-  transform: translate3d(-100%, 0, 0);
+  transform: translate3d(-100%, 0%, 0);
 }
 .ui.right.overlay.sidebar {
-  transform: translate3d(100%, 0, 0);
+  transform: translate3d(100%, 0%, 0);
 }
 .ui.top.overlay.sidebar {
   transform: translate3d(0%, -100%, 0);
@@ -237,10 +262,10 @@
 
 /* End */
 .ui.visible.left.overlay.sidebar {
-  transform: translate3d(0%, 0, 0);
+  transform: translate3d(0%, 0%, 0);
 }
 .ui.visible.right.overlay.sidebar {
-  transform: translate3d(0%, 0, 0);
+  transform: translate3d(0%, 0%, 0);
 }
 .ui.visible.top.overlay.sidebar {
   transform: translate3d(0%, 0%, 0);
@@ -249,6 +274,12 @@
   transform: translate3d(0%, 0%, 0);
 }
 
+.ui.visible.overlay.sidebar ~ .fixed,
+.ui.visible.overlay.sidebar ~ .pusher {
+  transform: translate3d(0, 0, 0) !important;
+}
+
+
 
 /*--------------
       Push
@@ -259,29 +290,24 @@
   transition: transform @duration @easing;
   z-index: @topLayer;
 }
+
 .ui.left.push.sidebar {
   transform: translate3d(-100%, 0, 0);
 }
 .ui.right.push.sidebar {
   transform: translate3d(100%, 0, 0);
 }
-.ui.visible.push.sidebar ~ .fixed,
-.ui.visible.push.sidebar ~ .pusher {
-  transform: translate3d(0px, 0, 0);
+.ui.top.push.sidebar {
+  transform: translate3d(0%, -100%, 0);
+}
+.ui.bottom.push.sidebar {
+  transform: translate3d(0%, 100%, 0);
 }
 
 /* End */
 .ui.visible.push.sidebar {
   transform: translate3d(0%, 0, 0);
 }
-.ui.visible.left.push.sidebar ~ .fixed,
-.ui.visible.left.push.sidebar ~ .pusher {
-  transform: translate3d(@sidebarWidth, 0, 0);
-}
-.ui.visible.right.push.sidebar ~ .fixed,
-.ui.visible.right.push.sidebar ~ .pusher {
-  transform: translate3d(-@sidebarWidth, 0, 0);
-}
 
 
 /*--------------
@@ -295,19 +321,10 @@
 }
 
 /* End */
-.ui.visible.uncover.sidebar,
 .ui.visible.uncover.sidebar {
   transform: translate3d(0, 0, 0);
   transition: transform @duration @easing;
 }
-.ui.visible.left.uncover.sidebar ~ .fixed,
-.ui.visible.left.uncover.sidebar ~ .pusher {
-  transform: translate3d(@sidebarWidth, 0, 0);
-}
-.ui.visible.right.uncover.sidebar ~ .fixed,
-.ui.visible.right.uncover.sidebar ~ .pusher {
-  transform: translate3d(-@sidebarWidth, 0, 0);
-}
 
 
 /*--------------
@@ -325,24 +342,17 @@
 .ui.right.slide.along.sidebar {
   transform: translate3d(50%, 0, 0);
 }
+.ui.top.slide.along.sidebar {
+  transform: translate3d(0, -50%, 0);
+}
+.ui.bottom.slide.along.sidebar {
+  transform: translate3d(0%, 50%, 0);
+}
 
 /* End */
 .ui.visible.slide.along.sidebar {
   transform: translate3d(0%, 0, 0);
 }
-.ui.visible.slide.along.sidebar ~ .pusher,
-.ui.visible.slide.along.sidebar ~ .pusher {
-  transform: translate3d(0px, 0, 0);
-}
-
-.ui.visible.left.slide.along.sidebar ~ .fixed,
-.ui.visible.left.slide.along.sidebar ~ .pusher {
-  transform: translate3d(@sidebarWidth, 0, 0);
-}
-.ui.visible.right.slide.along.sidebar ~ .fixed,
-.ui.visible.right.slide.along.sidebar ~ .pusher {
-  transform: translate3d(-@sidebarWidth, 0, 0);
-}
 
 
 /*--------------
@@ -351,45 +361,55 @@
 
 /* Initial */
 .ui.slide.out.sidebar {
-  transition: transform @duration @easing;
   z-index: @bottomLayer;
 }
 .ui.left.slide.out.sidebar {
-  transform: translate3d(100%, 0, 0);
+  transform: translate3d(50%, 0, 0);
 }
 .ui.right.slide.out.sidebar {
   transform: translate3d(-50%, 0, 0);
 }
+.ui.top.slide.out.sidebar {
+  transform: translate3d(0%, 50%, 0);
+}
+.ui.bottom.slide.out.sidebar {
+  transform: translate3d(0%, -50%, 0);
+}
+
+/* Animation */
+.ui.animating.slide.out.sidebar {
+  transition: transform @duration @easing;
+}
 
 /* End */
 .ui.visible.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);
-}
-.ui.visible.right.slide.out.sidebar ~ .fixed,
-.ui.visible.right.slide.out.sidebar ~ .pusher {
-  transform: translate3d(-@sidebarWidth, 0, 0);
-}
-
 
 /*--------------
    Scale Down
 ---------------*/
 
 /* Initial */
-
-/* 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%;
+  width: 100%;
+  height: 100%;
   overflow: hidden;
 }
+.ui.scale.down.left.sidebar ~ .pusher,
+.ui.scale.down.right.sidebar ~ .pusher {
+  transform-origin: 75% 50%;
+}
+.ui.scale.down.top.sidebar ~ .pusher,
+.ui.scale.down.bottom.sidebar ~ .pusher {
+  transform-origin: 50% 50%;
+}
+
+/* Animation */
+.pushable.scale.down.animating > .visible.ui.sidebar {
+  transition: transform @duration @easing;
+}
 
 /* Pushed */
 .ui.visible.scale.down.sidebar {
@@ -397,8 +417,4 @@
 }
 .ui.visible.scale.down.sidebar ~ .pusher {
   transform: scale(0.75);
-}
-.ui.visible.scale.down.sidebar ~ .fixed {
-  transform: translate3d(@sidebarWidth, 0, 0);
-}
-
+}

src/themes/default/modules/sidebar.variables

@@ -3,7 +3,7 @@
 *******************************/
 
 @sidebarWidth: 260px;
-@sidebarBackground: @black;
+@sidebarHeight: 50px;
 
 @dimmerColor: rgba(0, 0, 0, 0.4);