Browse Source

This will drive me bananas

pull/1243/head
jlukic 10 years ago
parent
commit
7fec295c61
3 changed files with 56 additions and 95 deletions
  1. 26
      src/definitions/modules/sidebar.js
  2. 123
      src/definitions/modules/sidebar.less
  3. 2
      src/themes/default/modules/sidebar.variables

26
src/definitions/modules/sidebar.js

@ -123,12 +123,11 @@ $.fn.sidebar = function(parameters) {
.on('DOMMouseScroll' + eventNamespace, module.event.scroll) .on('DOMMouseScroll' + eventNamespace, module.event.scroll)
; ;
} }
$(window)
.on('touchmove' + eventNamespace, module.event.scroll)
.on('scroll' + eventNamespace, module.event)
;
$context $context
.on('touchmove' + eventNamespace, function(event) {
if($(event.target).closest($module).size() == 0) {
event.preventDefault();
}
})
.on('click' + eventNamespace, module.event.clickaway) .on('click' + eventNamespace, module.event.clickaway)
.on('touchend' + eventNamespace, module.event.clickaway) .on('touchend' + eventNamespace, module.event.clickaway)
; ;
@ -142,9 +141,7 @@ $.fn.sidebar = function(parameters) {
$pusher $pusher
.off(eventNamespace) .off(eventNamespace)
; ;
if(settings.scrollLock) {
$(window).off('DOMMouseScroll' + eventNamespace);
}
$(window).off(eventNamespace);
} }
}, },
@ -309,14 +306,14 @@ $.fn.sidebar = function(parameters) {
? callback ? callback
: function(){} : function(){}
; ;
module.set.transition();
if(settings.transition == 'scale down' || (module.is.mobile() && transition !== 'overlay')) { 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() { animate = function() {
module.set.visible(); module.set.visible();
module.set.animating();
if(!module.othersActive()) { if(!module.othersActive()) {
if(settings.dimPage) { if(settings.dimPage) {
$pusher.addClass(className.dimmed); $pusher.addClass(className.dimmed);
@ -370,7 +367,7 @@ $.fn.sidebar = function(parameters) {
module.remove.transition(); module.remove.transition();
module.repaint(); module.repaint();
if(transition == 'scale down' || (settings.returnScroll && transition !== 'overlay' && module.is.mobile()) ) { if(transition == 'scale down' || (settings.returnScroll && transition !== 'overlay' && module.is.mobile()) ) {
module.scrollBack();
//module.scrollBack();
} }
$.proxy(callback, element)(); $.proxy(callback, element)();
} }
@ -457,9 +454,6 @@ $.fn.sidebar = function(parameters) {
}, },
// sidebar // sidebar
active: function() {
$module.addClass(className.active);
},
animating: function() { animating: function() {
$module.addClass(className.animating); $module.addClass(className.animating);
}, },

123
src/definitions/modules/sidebar.less

@ -29,6 +29,7 @@
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
backface-visibility: hidden; backface-visibility: hidden;
transition: none; transition: none;
will-change: transform; will-change: transform;
@ -85,7 +86,7 @@
---------------*/ ---------------*/
.pushable { .pushable {
height: 100%;
height: 100% !important;
overflow-x: hidden; overflow-x: hidden;
background: @canvasBackground !important; background: @canvasBackground !important;
} }
@ -175,6 +176,10 @@
visibility: visible; visibility: visible;
} }
/*--------------
Active
---------------*/
.ui.active.sidebar { .ui.active.sidebar {
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
@ -220,44 +225,31 @@
.ui.left.overlay.sidebar { .ui.left.overlay.sidebar {
transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);
} }
/* Pushed */
.ui.visible.left.overlay.sidebar {
transform: translate3d(0%, 0, 0);
}
/*--- Right ---*/
/* Set-up */
.ui.right.overlay.sidebar { .ui.right.overlay.sidebar {
transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);
} }
/* Pushed */
.ui.visible.right.overlay.sidebar {
transform: translate3d(0%, 0, 0);
}
/*--- Top ---*/
/* Set-up */
.ui.top.overlay.sidebar { .ui.top.overlay.sidebar {
transform: translate3d(0%, -100%, 0); transform: translate3d(0%, -100%, 0);
} }
/* Pushed */
.ui.visible.top.overlay.sidebar {
transform: translate3d(0%, 0%, 0);
}
/*--- Bottom ---*/
/* Set-up */
.ui.bottom.overlay.sidebar { .ui.bottom.overlay.sidebar {
transform: translate3d(0%, 100%, 0); 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 { .ui.visible.bottom.overlay.sidebar {
transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0);
} }
/*-------------- /*--------------
Push Push
---------------*/ ---------------*/
@ -278,7 +270,7 @@
transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0);
} }
/* Animation */
/* End */
.ui.visible.push.sidebar { .ui.visible.push.sidebar {
transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0);
} }
@ -299,14 +291,14 @@
/* Initial */ /* Initial */
.ui.uncover.sidebar { .ui.uncover.sidebar {
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
transition: transform @duration @easing;
z-index: @bottomLayer; z-index: @bottomLayer;
} }
/* Animation */
/* End */
.ui.visible.uncover.sidebar, .ui.visible.uncover.sidebar,
.ui.visible.uncover.sidebar { .ui.visible.uncover.sidebar {
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
transition: transform @duration @easing;
} }
.ui.visible.left.uncover.sidebar ~ .fixed, .ui.visible.left.uncover.sidebar ~ .fixed,
.ui.visible.left.uncover.sidebar ~ .pusher { .ui.visible.left.uncover.sidebar ~ .pusher {
@ -322,41 +314,31 @@
Slide Along Slide Along
---------------*/ ---------------*/
/* Set-Up */
/* Initial */
.ui.slide.along.sidebar { .ui.slide.along.sidebar {
transition: transform @duration @easing; 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 { .ui.left.slide.along.sidebar {
transform: translate3d(-50%, 0, 0); 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); 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 ~ .fixed,
.ui.visible.left.slide.along.sidebar ~ .pusher { .ui.visible.left.slide.along.sidebar ~ .pusher {
transform: translate3d(@sidebarWidth, 0, 0); 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 ~ .fixed,
.ui.visible.right.slide.along.sidebar ~ .pusher { .ui.visible.right.slide.along.sidebar ~ .pusher {
transform: translate3d(-@sidebarWidth, 0, 0); transform: translate3d(-@sidebarWidth, 0, 0);
@ -367,42 +349,26 @@
Slide Out Slide Out
---------------*/ ---------------*/
/* Set-up */
/* Initial */
.ui.slide.out.sidebar { .ui.slide.out.sidebar {
transition: transform @duration @easing; transition: transform @duration @easing;
z-index: @bottomLayer; 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 { .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); transform: translate3d(0%, 0, 0);
} }
.ui.visible.left.slide.out.sidebar ~ .fixed, .ui.visible.left.slide.out.sidebar ~ .fixed,
.ui.visible.left.slide.out.sidebar ~ .pusher { .ui.visible.left.slide.out.sidebar ~ .pusher {
transform: translate3d(@sidebarWidth, 0, 0); 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 ~ .fixed,
.ui.visible.right.slide.out.sidebar ~ .pusher { .ui.visible.right.slide.out.sidebar ~ .pusher {
transform: translate3d(-@sidebarWidth, 0, 0); transform: translate3d(-@sidebarWidth, 0, 0);
@ -413,7 +379,7 @@
Scale Down Scale Down
---------------*/ ---------------*/
/* Set-up */
/* Initial */
/* 3D transition cant have duration set until animation */ /* 3D transition cant have duration set until animation */
.pushable.scale.down.animating > .visible.ui.sidebar { .pushable.scale.down.animating > .visible.ui.sidebar {
@ -434,4 +400,5 @@
} }
.ui.visible.scale.down.sidebar ~ .fixed { .ui.visible.scale.down.sidebar ~ .fixed {
transform: translate3d(@sidebarWidth, 0, 0); transform: translate3d(@sidebarWidth, 0, 0);
}
}

2
src/themes/default/modules/sidebar.variables

@ -10,7 +10,7 @@
@canvasBackground: @lightBlack; @canvasBackground: @lightBlack;
@perspective: 1500px; @perspective: 1500px;
@duration: 0.5s;
@duration: 500ms;
@easing: ease; @easing: ease;
@bottomLayer: 900; @bottomLayer: 900;

Loading…
Cancel
Save