From 58c50fdbc37e8f87f7af788434b1c9ffe6b4ca16 Mon Sep 17 00:00:00 2001 From: jlukic Date: Wed, 5 Nov 2014 12:36:41 -0500 Subject: [PATCH] Add new features for mobile sidebar, fix issues with gulpfile breaking on js changes --- gulpfile.js | 1 + src/definitions/collections/menu.less | 2 +- src/definitions/globals/site.less | 1 - src/definitions/modules/sidebar.js | 32 ++++++++++++-------- src/definitions/modules/sidebar.less | 17 ++++++++--- src/themes/default/modules/sidebar.variables | 7 +++-- 6 files changed, 38 insertions(+), 22 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 0c6068683..60db2d06e 100755 --- a/gulpfile.js +++ b/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()) diff --git a/src/definitions/collections/menu.less b/src/definitions/collections/menu.less index f47cf06c3..bf928a9f0 100755 --- a/src/definitions/collections/menu.less +++ b/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%; diff --git a/src/definitions/globals/site.less b/src/definitions/globals/site.less index 5daf3e7af..6971afe84 100755 --- a/src/definitions/globals/site.less +++ b/src/definitions/globals/site.less @@ -49,7 +49,6 @@ body { line-height: @lineHeight; color: @textColor; font-smoothing: @fontSmoothing; - overflow-x: @pageOverflowX; } diff --git a/src/definitions/modules/sidebar.js b/src/definitions/modules/sidebar.js index 2f6a5550e..b74170c5d 100644 --- a/src/definitions/modules/sidebar.js +++ b/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); }, diff --git a/src/definitions/modules/sidebar.less b/src/definitions/modules/sidebar.less index c06272cdc..cd1cb75f7 100755 --- a/src/definitions/modules/sidebar.less +++ b/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%; diff --git a/src/themes/default/modules/sidebar.variables b/src/themes/default/modules/sidebar.variables index c69bbf9b0..7c0392e55 100644 --- a/src/themes/default/modules/sidebar.variables +++ b/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;