diff --git a/src/definitions/modules/sidebar.js b/src/definitions/modules/sidebar.js index a5e558028..a8cdd7c20 100644 --- a/src/definitions/modules/sidebar.js +++ b/src/definitions/modules/sidebar.js @@ -123,12 +123,11 @@ $.fn.sidebar = function(parameters) { .on('DOMMouseScroll' + eventNamespace, module.event.scroll) ; } + $(window) + .on('touchmove' + eventNamespace, module.event.scroll) + .on('scroll' + eventNamespace, module.event) + ; $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) ; @@ -142,9 +141,7 @@ $.fn.sidebar = function(parameters) { $pusher .off(eventNamespace) ; - if(settings.scrollLock) { - $(window).off('DOMMouseScroll' + eventNamespace); - } + $(window).off(eventNamespace); } }, @@ -309,14 +306,14 @@ $.fn.sidebar = function(parameters) { ? callback : function(){} ; - module.set.transition(); if(settings.transition == 'scale down' || (module.is.mobile() && transition !== 'overlay')) { - module.scrollToTop(); + //module.scrollToTop(); } - module.repaint(); + module.set.animating(); + module.set.transition(); + //module.repaint(); animate = function() { module.set.visible(); - module.set.animating(); if(!module.othersActive()) { if(settings.dimPage) { $pusher.addClass(className.dimmed); @@ -370,7 +367,7 @@ $.fn.sidebar = function(parameters) { module.remove.transition(); module.repaint(); if(transition == 'scale down' || (settings.returnScroll && transition !== 'overlay' && module.is.mobile()) ) { - module.scrollBack(); + //module.scrollBack(); } $.proxy(callback, element)(); } @@ -457,9 +454,6 @@ $.fn.sidebar = function(parameters) { }, // sidebar - active: function() { - $module.addClass(className.active); - }, animating: function() { $module.addClass(className.animating); }, diff --git a/src/definitions/modules/sidebar.less b/src/definitions/modules/sidebar.less index e37c493f0..480e211ac 100755 --- a/src/definitions/modules/sidebar.less +++ b/src/definitions/modules/sidebar.less @@ -29,6 +29,7 @@ position: fixed; top: 0; left: 0; + backface-visibility: hidden; transition: none; will-change: transform; @@ -85,7 +86,7 @@ ---------------*/ .pushable { - height: 100%; + height: 100% !important; overflow-x: hidden; background: @canvasBackground !important; } @@ -175,6 +176,10 @@ visibility: visible; } +/*-------------- + Active +---------------*/ + .ui.active.sidebar { -webkit-overflow-scrolling: touch; } @@ -220,44 +225,31 @@ .ui.left.overlay.sidebar { transform: translate3d(-100%, 0, 0); } -/* Pushed */ -.ui.visible.left.overlay.sidebar { - transform: translate3d(0%, 0, 0); -} - -/*--- Right ---*/ - -/* Set-up */ .ui.right.overlay.sidebar { transform: translate3d(100%, 0, 0); } -/* Pushed */ -.ui.visible.right.overlay.sidebar { - transform: translate3d(0%, 0, 0); -} - -/*--- Top ---*/ - -/* Set-up */ .ui.top.overlay.sidebar { transform: translate3d(0%, -100%, 0); } -/* Pushed */ -.ui.visible.top.overlay.sidebar { - transform: translate3d(0%, 0%, 0); -} - -/*--- Bottom ---*/ - -/* Set-up */ .ui.bottom.overlay.sidebar { transform: translate3d(0%, 100%, 0); } -/* Pushed */ + +/* End */ +.ui.visible.left.overlay.sidebar { + transform: translate3d(0%, 0, 0); +} +.ui.visible.right.overlay.sidebar { + transform: translate3d(0%, 0, 0); +} +.ui.visible.top.overlay.sidebar { + transform: translate3d(0%, 0%, 0); +} .ui.visible.bottom.overlay.sidebar { transform: translate3d(0%, 0%, 0); } + /*-------------- Push ---------------*/ @@ -278,7 +270,7 @@ transform: translate3d(0px, 0, 0); } -/* Animation */ +/* End */ .ui.visible.push.sidebar { transform: translate3d(0%, 0, 0); } @@ -299,14 +291,14 @@ /* Initial */ .ui.uncover.sidebar { transform: translate3d(0, 0, 0); - transition: transform @duration @easing; z-index: @bottomLayer; } -/* Animation */ +/* 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 { @@ -322,41 +314,31 @@ Slide Along ---------------*/ -/* Set-Up */ +/* Initial */ .ui.slide.along.sidebar { transition: transform @duration @easing; + z-index: @bottomLayer; } -.ui.slide.along.sidebar ~ .pusher, -.ui.slide.along.sidebar ~ .pusher { - transform: translate3d(0px, 0, 0); -} - -/*--- Left ---*/ - -/* Set-Up */ .ui.left.slide.along.sidebar { transform: translate3d(-50%, 0, 0); } -/* Pushed */ -.ui.visible.left.slide.along.sidebar { +.ui.right.slide.along.sidebar { + transform: translate3d(50%, 0, 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); } - - -/*--- Right ---*/ - -/* Set-Up */ -.ui.right.slide.along.sidebar { - transform: translate3d(50%, 0, 0); -} -/* Pushed */ -.ui.visible.right.slide.along.sidebar { - transform: translate3d(0%, 0, 0); -} .ui.visible.right.slide.along.sidebar ~ .fixed, .ui.visible.right.slide.along.sidebar ~ .pusher { transform: translate3d(-@sidebarWidth, 0, 0); @@ -367,42 +349,26 @@ Slide Out ---------------*/ -/* Set-up */ +/* Initial */ .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); + transform: translate3d(100%, 0, 0); } -/* Pushed */ -.ui.visible.left.slide.out.sidebar { +.ui.right.slide.out.sidebar { + transform: translate3d(-50%, 0, 0); +} + +/* 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); } - - -/*--- 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); @@ -413,7 +379,7 @@ Scale Down ---------------*/ -/* Set-up */ +/* Initial */ /* 3D transition cant have duration set until animation */ .pushable.scale.down.animating > .visible.ui.sidebar { @@ -434,4 +400,5 @@ } .ui.visible.scale.down.sidebar ~ .fixed { transform: translate3d(@sidebarWidth, 0, 0); -} \ No newline at end of file +} + diff --git a/src/themes/default/modules/sidebar.variables b/src/themes/default/modules/sidebar.variables index c8e9618f0..4b8734c3a 100644 --- a/src/themes/default/modules/sidebar.variables +++ b/src/themes/default/modules/sidebar.variables @@ -10,7 +10,7 @@ @canvasBackground: @lightBlack; @perspective: 1500px; -@duration: 0.5s; +@duration: 500ms; @easing: ease; @bottomLayer: 900;