Skip to content

Commit

Permalink
Latest work
Browse files Browse the repository at this point in the history
  • Loading branch information
@jlukic
jlukic committed Nov 4, 2014
1 parent 7c8e338 commit 5999046
Show file tree
Hide file tree
Showing 2 changed files with 134 additions and 59 deletions.
28 changes: 20 additions & 8 deletions src/definitions/modules/sidebar.js
View file
Expand Up @@ -70,7 +70,7 @@ $.fn.sidebar = function(parameters) {
module = {

initialize: function() {
module.debug('Initializing sidebar', $module);
module.debug('Initializing sidebar', parameters);

transitionEvent = module.get.transitionEvent();

Expand All @@ -79,9 +79,6 @@ $.fn.sidebar = function(parameters) {
settings.useLegacy = true;
}

module.set.pushable();
module.set.direction();

// avoid locking rendering if included in onReady
requestAnimationFrame(module.setup.layout);

Expand Down Expand Up @@ -127,6 +124,11 @@ $.fn.sidebar = function(parameters) {
;
}
$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)
;
Expand All @@ -137,6 +139,9 @@ $.fn.sidebar = function(parameters) {
$context
.off(eventNamespace)
;
$pusher
.off(eventNamespace)
;
if(settings.scrollLock) {
$(window).off('DOMMouseScroll' + eventNamespace);
}
Expand All @@ -153,7 +158,9 @@ $.fn.sidebar = function(parameters) {

repaint: function() {
module.verbose('Forcing repaint event');
var fakeAssignment = $module[0].offsetWidth;
element.style.display='none';
element.offsetHeight;
element.style.display='';
},

setup: {
Expand All @@ -167,12 +174,15 @@ $.fn.sidebar = function(parameters) {
.not($sidebars)
.wrapAll($pusher)
;
module.refresh();
}
if($module.prevAll($pusher)[0] !== $pusher[0]) {
if($module.nextAll(selector.pusher)[0] !== $pusher[0]) {
module.debug('Moved sidebar to correct parent element');
$module.detach().prependTo($context);
module.refresh();
}
module.refresh();
module.set.pushable();
module.set.direction();
}
},

Expand Down Expand Up @@ -299,10 +309,11 @@ $.fn.sidebar = function(parameters) {
? callback
: function(){}
;
module.set.transition();
if(settings.transition == 'scale down' || (module.is.mobile() && transition !== 'overlay')) {
module.scrollToTop();
}
module.set.transition();
module.repaint();
animate = function() {
module.set.visible();
module.set.animating();
Expand Down Expand Up @@ -357,6 +368,7 @@ $.fn.sidebar = function(parameters) {
$transition.off(transitionEvent + eventNamespace, transitionEnd);
module.remove.animating();
module.remove.transition();
module.repaint();
if(transition == 'scale down' || (settings.returnScroll && transition !== 'overlay' && module.is.mobile()) ) {
module.scrollBack();
}
Expand Down
165 changes: 114 additions & 51 deletions src/definitions/modules/sidebar.less
View file
Expand Up @@ -41,6 +41,7 @@

background: @sidebarBackground;
width: @sidebarWidth !important;
z-index: @topLayer;
}

/*--------------
Expand Down Expand Up @@ -80,60 +81,62 @@


/*--------------
Pushable
Body
---------------*/

/* Canvas */
.pushable {
position: relative;
height: 100%;
overflow-x: hidden;
background: @canvasBackground !important;
}

/*--------------
Dimmer
---------------*/

.pusher:after {
position: fixed;
top: 0px;
right: 0px;
content: '';
background-color: @dimmerColor;
width: 0px;
height: 0px;
overflow: hidden;
opacity: 0;
transition: opacity @duration;
will-change: opacity;
}

/*--------------
Fixed
---------------*/

.ui.sidebar ~ .fixed {
.pushable > .fixed {
position: fixed;
backface-visibility: hidden;
will-change: transform;

z-index: @fixedLayer;
transition: transform @duration @easing;
will-change: transform;
z-index: @fixedLayer;
}

/*--------------
Page
---------------*/

.ui.sidebar ~ .pusher {
.pushable > .pusher {
position: relative;
backface-visibility: hidden;
height: 100%;
min-height: 100%;

transition: transform @duration @easing;
background: @pageBackground;
z-index: @middleLayer;
}


/*--------------
Dimmer
---------------*/

.pushable > .pusher:after {
position: fixed;
top: 0px;
right: 0px;
content: '';
background-color: @dimmerColor;
width: 0px;
height: 0px;
overflow: hidden;
opacity: 0;
transition: opacity @duration;
will-change: opacity;
z-index: @dimmerLayer;
}

/*--------------
Coupling
---------------*/
Expand All @@ -146,19 +149,11 @@
States
*******************************/

/*--------------
Pushed
---------------*/

.pusher:after {
z-index: @dimmerLayer;
}

/*--------------
Dimmed
---------------*/

.pusher.dimmed:after {
.pushable > .pusher.dimmed:after {
width: 100% !important;
height: 100% !important;
opacity: 1 !important;
Expand All @@ -168,11 +163,10 @@
Animating
---------------*/

.ui.sidebar.animating {
.ui.animating.sidebar {
visibility: visible;
}


/*--------------
Visible
---------------*/
Expand All @@ -181,10 +175,6 @@
visibility: visible;
}

/*--------------
Active
---------------*/

.ui.active.sidebar {
-webkit-overflow-scrolling: touch;
}
Expand Down Expand Up @@ -219,7 +209,7 @@
}

/* Animation */
.ui.animating.overlay.sidebar,
.animating.ui.overlay.sidebar,
.ui.visible.overlay.sidebar {
z-index: @topLayer;
}
Expand All @@ -231,7 +221,7 @@
transform: translate3d(-100%, 0, 0);
}
/* Pushed */
.pushable .ui.visible.left.overlay.sidebar {
.ui.visible.left.overlay.sidebar {
transform: translate3d(0%, 0, 0);
}

Expand All @@ -242,7 +232,7 @@
transform: translate3d(100%, 0, 0);
}
/* Pushed */
.pushable .ui.visible.right.overlay.sidebar {
.ui.visible.right.overlay.sidebar {
transform: translate3d(0%, 0, 0);
}

Expand All @@ -253,7 +243,7 @@
transform: translate3d(0%, -100%, 0);
}
/* Pushed */
.pushable .ui.visible.top.overlay.sidebar {
.ui.visible.top.overlay.sidebar {
transform: translate3d(0%, 0%, 0);
}

Expand All @@ -264,7 +254,7 @@
transform: translate3d(0%, 100%, 0);
}
/* Pushed */
.pushable .ui.visible.bottom.overlay.sidebar {
.ui.visible.bottom.overlay.sidebar {
transform: translate3d(0%, 0%, 0);
}

Expand Down Expand Up @@ -310,11 +300,11 @@
.ui.uncover.sidebar {
transform: translate3d(0, 0, 0);
transition: transform @duration @easing;
z-index: -1;
z-index: @bottomLayer;
}

/* Animation */
.ui.animating.uncover.sidebar,
.ui.visible.uncover.sidebar,
.ui.visible.uncover.sidebar {
transform: translate3d(0, 0, 0);
}
Expand All @@ -335,7 +325,6 @@
/* Set-Up */
.ui.slide.along.sidebar {
transition: transform @duration @easing;
z-index: @bottomLayer;
}
.ui.slide.along.sidebar ~ .pusher,
.ui.slide.along.sidebar ~ .pusher {
Expand All @@ -346,7 +335,7 @@

/* Set-Up */
.ui.left.slide.along.sidebar {
transform: translate3d(50%, 0, 0);
transform: translate3d(-50%, 0, 0);
}
/* Pushed */
.ui.visible.left.slide.along.sidebar {
Expand All @@ -362,7 +351,7 @@

/* Set-Up */
.ui.right.slide.along.sidebar {
transform: translate3d(-50%, 0, 0);
transform: translate3d(50%, 0, 0);
}
/* Pushed */
.ui.visible.right.slide.along.sidebar {
Expand All @@ -372,3 +361,77 @@
.ui.visible.right.slide.along.sidebar ~ .pusher {
transform: translate3d(-@sidebarWidth, 0, 0);
}


/*--------------
Slide Out
---------------*/

/* Set-up */
.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);
}
/* Pushed */
.ui.visible.left.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);
}


/*--------------
Scale Down
---------------*/

/* Set-up */

/* 3D transition cant have duration set until animation */
.pushable.scale.down.animating > .visible.ui.sidebar {
transition: transform @duration @easing;
}
.ui.scale.down.sidebar ~ .pusher {
z-index: @bottomLayer;
transform-origin: 75% 50%;
overflow: hidden;
}

/* Pushed */
.ui.visible.scale.down.sidebar {
transform: translate3d(0, 0, 0);
}
.ui.visible.scale.down.sidebar ~ .pusher {
transform: scale(0.75);
}
.ui.visible.scale.down.sidebar ~ .fixed {
transform: translate3d(@sidebarWidth, 0, 0);
}

0 comments on commit 5999046

Please sign in to comment.