From a24115c4d857c8a18d1d003d6bc61b229f170a25 Mon Sep 17 00:00:00 2001 From: jlukic Date: Sun, 7 Sep 2014 03:19:42 -0400 Subject: [PATCH] Fixes for fixed elements used with sidebars --- src/definitions/modules/sidebar.js | 51 ++++++----- src/definitions/modules/sidebar.less | 85 +++++++++++++------ .../default/modules/sidebar.variables | 3 +- 3 files changed, 85 insertions(+), 54 deletions(-) diff --git a/src/definitions/modules/sidebar.js b/src/definitions/modules/sidebar.js index 6b2597539..3f7420060 100755 --- a/src/definitions/modules/sidebar.js +++ b/src/definitions/modules/sidebar.js @@ -115,9 +115,11 @@ $.fn.sidebar = function(parameters) { bind: { clickaway: function() { - $(window) - .on('DOMMouseScroll' + eventNamespace, module.event.scroll) - ; + if(settings.scrollLock) { + $(window) + .on('DOMMouseScroll' + eventNamespace, module.event.scroll) + ; + } $context .on('click' + eventNamespace, module.event.clickaway) .on('touchend' + eventNamespace, module.event.clickaway) @@ -129,7 +131,9 @@ $.fn.sidebar = function(parameters) { $context .off(eventNamespace) ; - $(window).off('DOMMouseScroll' + eventNamespace); + if(settings.scrollLock) { + $(window).off('DOMMouseScroll' + eventNamespace); + } } }, @@ -294,9 +298,6 @@ $.fn.sidebar = function(parameters) { else { if(settings.transition !== 'safe') { $module.scrollTop(0); - if(settings.workaround === 'scroll') { - window.scrollTo(0, 0); - } } module.remove.allVisible(); requestAnimationFrame(transition); @@ -646,34 +647,30 @@ $.fn.sidebar = function(parameters) { $.fn.sidebar.settings = { - name : 'Sidebar', - namespace : 'sidebar', + name : 'Sidebar', + namespace : 'sidebar', - debug : false, - verbose : false, - performance : false, + debug : false, + verbose : false, + performance : false, + workaround : false, transition : 'overlay', mobileTransition : 'slide along', + context : 'body', + exclusive : true, - context : 'body', - useCSS : true, - duration : 300, - - dimPage : true, - - exclusive : true, + scrollLock : false, - onChange : function(){}, - onShow : function(){}, - onHide : function(){}, + onChange : function(){}, + onShow : function(){}, + onHide : function(){}, - onHidden : function(){}, - onVisible : function(){}, + onHidden : function(){}, + onVisible : function(){}, - workaround : 'scroll', - className : { + className : { pushable : 'pushable', active : 'active', visible : 'visible', @@ -687,7 +684,7 @@ $.fn.sidebar.settings = { pusher : '.pusher', fixed : '.ui.fixed', page : '.page', - omitted : 'script, link, style, .ui.modal, .ui.nag' + omitted : 'script, link, style, .ui.modal, .ui.nag, .ui.fixed' }, error : { diff --git a/src/definitions/modules/sidebar.less b/src/definitions/modules/sidebar.less index 4355483da..db4720afc 100755 --- a/src/definitions/modules/sidebar.less +++ b/src/definitions/modules/sidebar.less @@ -55,6 +55,16 @@ overflow-x: hidden; } +/*-------------- + Fixed +---------------*/ + +.pushable > .ui.fixed { + position: fixed; + transition: transform @duration @easing; + z-index: @fixedLayer; +} + /*-------------- Pusher ---------------*/ @@ -62,7 +72,7 @@ .pushable > .pusher { background: @canvasBackground; height: 100%; - z-index: 1002; + z-index: @middleLayer; transition: transform @duration @easing; } @@ -192,31 +202,6 @@ transition: transform @duration @easing; } -/*-------------- - Push ----------------*/ - -/* Set-Up */ -.pushable.push > .pusher { - transform: translate3d(0px, 0, 0); -} -.pushable.push > .visible.ui.sidebar { - transform: translate3d(-100%, 0, 0); -} - -/* Pushed */ -.pushable.push.pushed > .visible.ui.sidebar { - transform: translate3d(0%, 0, 0); -} -.pushable.push.pushed > .pusher { - transform: translate3d(@sidebarWidth, 0, 0); -} - -.pushable.push.show > .visible.ui.sidebar, -.pushable.push.hide > .visible.ui.sidebar { - transition: transform @duration @easing; -} - /*-------------- Safe Mode ---------------*/ @@ -243,14 +228,44 @@ } +/*-------------- + Push +---------------*/ + +/* Set-Up */ +.pushable.push > .fixed, +.pushable.push > .pusher { + transform: translate3d(0px, 0, 0); +} +.pushable.push > .visible.ui.sidebar { + transform: translate3d(-100%, 0, 0); +} + +/* Pushed */ +.pushable.push.pushed > .visible.ui.sidebar { + transform: translate3d(0%, 0, 0); +} +.pushable.push.pushed > .fixed, +.pushable.push.pushed > .pusher { + transform: translate3d(@sidebarWidth, 0, 0); +} + +.pushable.push.show > .visible.ui.sidebar, +.pushable.push.hide > .visible.ui.sidebar { + transition: transform @duration @easing; +} + /*-------------- Reveal ---------------*/ /* Set-up */ +.pushable.reveal > .fixed, .pushable.reveal > .pusher { transform: translate3d(0px, 0, 0); +} +.pushable.reveal > .pusher { z-index: @bottomLayer; } .pushable.reveal > .visible.ui.sidebar { @@ -258,6 +273,7 @@ } /* Pushed */ +.pushable.reveal.pushed > .fixed, .pushable.reveal.pushed > .pusher { transform: translate3d(@sidebarWidth, 0, 0); } @@ -268,8 +284,11 @@ ---------------*/ /* Set-up */ +.pushable.slide.along > .fixed, .pushable.slide.along > .pusher { transform: translate3d(0px, 0, 0); +} +.pushable.slide.along > .pusher { z-index: @bottomLayer; } .pushable.slide.along > .visible.ui.sidebar { @@ -277,6 +296,7 @@ } /* Pushed */ +.pushable.slide.along.pushed > .fixed, .pushable.slide.along.pushed > .pusher { transform: translate3d(@sidebarWidth, 0, 0); } @@ -295,6 +315,7 @@ ---------------*/ /* Set-up */ +.pushable.slide.out > .fixed, .pushable.slide.out > .pusher { transform: translate3d(0px, 0, 0); } @@ -303,6 +324,7 @@ } /* Pushed */ +.pushable.slide.out.pushed > .fixed, .pushable.slide.out.pushed > .pusher { transform: translate3d(@sidebarWidth, 0, 0); } @@ -322,6 +344,9 @@ ---------------*/ /* Set-up */ +.pushable.scale.down > .fixed { + transform: translate3d(0px, 0, 0); +} .pushable.scale.down > .pusher { z-index: @bottomLayer; transform-origin: 75% 50%; @@ -339,6 +364,9 @@ .pushable.scale.down.pushed > .visible.ui.sidebar { transform: translate3d(0, 0, 0); } +.pushable.scale.down.pushed > .fixed { + transform: translate3d(@sidebarWidth, 0, 0); +} /* 3D transition cant have duration set until animation */ .pushable.scale.down.show > .visible.ui.sidebar, @@ -361,6 +389,7 @@ } /* Pushed */ +.pushable.scale.up.pushed > .fixed, .pushable.scale.up.pushed > .pusher { transform: translate3d(@sidebarWidth, 0, 0); } @@ -439,6 +468,10 @@ transform: translate3d(-100%, 0, 0) rotateY(0deg); transition: transform @duration ease 0s; } +.pushable.rotate.in.active, +.pushable.rotate.in.hide { + overflow-y: hidden; +} /* Animation */ .pushable.rotate.in.show > .ui.sidebar, diff --git a/src/themes/packages/default/modules/sidebar.variables b/src/themes/packages/default/modules/sidebar.variables index b07eab6bd..1c5cc08e8 100755 --- a/src/themes/packages/default/modules/sidebar.variables +++ b/src/themes/packages/default/modules/sidebar.variables @@ -18,4 +18,5 @@ @bottomLayer: 1001; @middleLayer: 1002; @dimmerLayer: 1003; -@topLayer: 1004; \ No newline at end of file +@topLayer: 1005; +@fixedLayer: 1006; \ No newline at end of file