Add new features for mobile sidebar, fix issues with gulpfile breaking on js changes

gulpfile.js

@@ -278,6 +278,7 @@ gulp.task('watch', 'Watch for site/theme changes (Default Task)', function(callb
       source.definitions   + '**/*.js'
     ], function(file) {
       gulp.src(file.path)
+        .pipe(plumber())
         .pipe(gulp.dest(output.uncompressed))
         .pipe(print(log.created))
         .pipe(sourcemaps.init())

src/definitions/collections/menu.less

@@ -1452,7 +1452,7 @@
 
 .ui.menu.fixed {
   position: fixed;
-  z-index: 903;
+  z-index: 101;
   margin: 0em;
   border: none;
   width: 100%;

src/definitions/globals/site.less

@@ -49,7 +49,6 @@ body {
   line-height: @lineHeight;
   color: @textColor;
   font-smoothing: @fontSmoothing;
-  overflow-x: @pageOverflowX;
 }
 
 

src/definitions/modules/sidebar.js

@@ -109,6 +109,17 @@ $.fn.sidebar = function(parameters) {
               module.hide();
             }
           },
+          touch: function(event) {
+            //event.stopPropagation();
+          },
+          containScroll: function(event) {
+            if(element.scrollTop <= 0)  {
+              element.scrollTop = 1;
+            }
+            if((element.scrollTop + element.offsetHeight) >= element.scrollHeight) {
+              element.scrollTop = element.scrollHeight - element.offsetHeight - 1;
+            }
+          },
           scroll: function(event) {
             if( $module.find(event.target).size() === 0 && $(event.target).filter($module).size() === 0 ) {
               event.preventDefault();
@@ -123,8 +134,11 @@ $.fn.sidebar = function(parameters) {
                 .on('DOMMouseScroll' + eventNamespace, module.event.scroll)
               ;
             }
-            $(window)
-              .on('touchmove' + eventNamespace, module.event.scroll)
+            $(document)
+              .on('touchmove' + eventNamespace, module.event.touch)
+            ;
+            $module
+              .on('scroll' + eventNamespace, module.event.containScroll)
             ;
             if(settings.closable) {
               $context
@@ -136,12 +150,9 @@ $.fn.sidebar = function(parameters) {
         },
         unbind: {
           clickaway: function() {
-            $context
-              .off(eventNamespace)
-            ;
-            $pusher
-              .off(eventNamespace)
-            ;
+            $context.off(eventNamespace);
+            $pusher.off(eventNamespace);
+            $(document).off(eventNamespace);
             $(window).off(eventNamespace);
           }
         },
@@ -364,7 +375,6 @@ $.fn.sidebar = function(parameters) {
               $transition.off(transitionEvent + eventNamespace, transitionEnd);
               module.remove.animating();
               module.bind.clickaway();
-              module.set.active();
               $.proxy(callback, element)();
             }
           };
@@ -391,7 +401,6 @@ $.fn.sidebar = function(parameters) {
           if(!module.othersActive()) {
             module.unbind.clickaway();
           }
-          module.remove.active();
           animate = function() {
             module.set.animating();
             module.remove.visible();
@@ -438,7 +447,6 @@ $.fn.sidebar = function(parameters) {
             .animate(properties, settings.duration, settings.easing, function() {
               module.remove.animating();
               module.bind.clickaway();
-              module.set.active();
               $.proxy(callback, module)();
             })
           ;
@@ -459,7 +467,6 @@ $.fn.sidebar = function(parameters) {
           module.unbind.clickaway();
           module.set.animating();
           module.remove.visible();
-          module.remove.active();
           if(settings.dimPage && !module.othersVisible()) {
             $pusher.removeClass(className.dimmed);
           }
@@ -474,7 +481,6 @@ $.fn.sidebar = function(parameters) {
         scrollToTop: function() {
           module.verbose('Scrolling to top of page to avoid animation issues');
           $module.scrollTop(0);
-          currentScroll = $(window).scrollTop();
           window.scrollTo(0, 0);
         },
 

src/definitions/modules/sidebar.less

@@ -35,6 +35,7 @@
   will-change: transform;
   transform: translate3d(0, 0, 0);
   visibility: hidden;
+  -webkit-overflow-scrolling: touch;
 
   height: 100% !important;
   border-radius: 0em !important;
@@ -42,6 +43,10 @@
   overflow-y: auto !important;
   z-index: @topLayer;
 }
+.ui.sidebar * {
+  backface-visibility: hidden;
+  transform: rotateZ(0deg);
+}
 
 /*--------------
    Direction
@@ -174,12 +179,16 @@
   visibility: visible;
 }
 
+
 /*--------------
-     Active
+     Mobile
 ---------------*/
 
-.ui.active.sidebar {
-  -webkit-overflow-scrolling: touch;
+@media only screen and (max-width: @computerBreakpoint) {
+  html {
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+  }
 }
 
 
@@ -419,7 +428,7 @@
 .ui.animating.scale.down > .visible.ui.sidebar {
   transition: transform @duration @easing;
 }
-.ui.active.scale.down.sidebar ~ .pusher,
+.ui.visible.scale.down.sidebar ~ .pusher,
 .ui.animating.scale.down.sidebar ~ .pusher {
   display: block !important;
   width: 100%;

src/themes/default/modules/sidebar.variables

@@ -15,6 +15,7 @@
 
 @bottomLayer: 1;
 @middleLayer: 2;
-@topLayer: 3;
-@dimmerLayer: 900;
-@fixedLayer: 901;
+@fixedLayer: 101;
+@topLayer: 102;
+
+@dimmerLayer: 1000;