richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Iteration on sidebar

pull/1243/head
jlukic 10 years ago
parent
3000178c23
commit
7c8e338704
2 changed files with 119 additions and 142 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 93
      src/definitions/modules/sidebar.js
  2. 168
      src/definitions/modules/sidebar.less

93
src/definitions/modules/sidebar.js
View File

@ -81,7 +81,6 @@ $.fn.sidebar = function(parameters) {
module.set.pushable();
module.set.direction();
module.set.transition();
// avoid locking rendering if included in onReady
requestAnimationFrame(module.setup.layout);
@ -100,7 +99,6 @@ $.fn.sidebar = function(parameters) {
destroy: function() {
module.verbose('Destroying previous module for', $module);
module.remove.direction();
module.remove.transition();
$module
.off(eventNamespace)
.removeData(moduleNamespace)
@ -155,7 +153,7 @@ $.fn.sidebar = function(parameters) {
repaint: function() {
module.verbose('Forcing repaint event');
var fakeAssignment = $context[0].offsetWidth;
var fakeAssignment = $module[0].offsetWidth;
},
setup: {
@ -207,7 +205,7 @@ $.fn.sidebar = function(parameters) {
? callback
: function(){}
;
if(module.is.closed() || module.is.outward()) {
if(module.is.closed() || module.is.animating()) {
if(settings.overlay) {
module.error(error.overlay);
settings.transition = 'overlay';
@ -241,7 +239,7 @@ $.fn.sidebar = function(parameters) {
? callback
: function(){}
;
if(module.is.visible() || module.is.inward()) {
if(module.is.visible() || module.is.animating()) {
module.debug('Hiding sidebar', callback);
animateMethod(function() {
$.proxy(callback, element)();
@ -266,11 +264,9 @@ $.fn.sidebar = function(parameters) {
sidebarCount = $otherSidebars.size(),
callbackCount = 0
;
console.log($sidebars);
$otherSidebars
.sidebar('hide', function() {
callbackCount++;
console.log('callback count');
if(callbackCount == sidebarCount) {
callback();
}
@ -303,30 +299,30 @@ $.fn.sidebar = function(parameters) {
? callback
: function(){}
;
module.set.inward();
if(settings.transition == 'scale down' || (module.is.mobile() && transition !== 'overlay')) {
module.scrollToTop();
}
module.set.transition();
animate = function() {
module.set.visible();
module.set.animating();
if(!module.othersActive()) {
if(settings.dimPage) {
$pusher.addClass(className.dimmed);
}
module.set.pushed();
}
module.set.visible();
};
transitionEnd = function(event) {
if( event.target == $transition[0] ) {
$transition.off(transitionEvent + eventNamespace, transitionEnd);
module.remove.inward();
module.remove.animating();
module.bind.clickaway();
module.set.active();
$.proxy(callback, element)();
}
};
$transition.on(transitionEvent + eventNamespace, transitionEnd);
if(settings.transition == 'scale down' || (module.is.mobile() && transition !== 'overlay')) {
module.scrollToTop();
}
animate();
requestAnimationFrame(animate);
},
pullPage: function(callback) {
@ -348,19 +344,19 @@ $.fn.sidebar = function(parameters) {
if(!module.othersActive()) {
module.unbind.clickaway();
}
module.remove.active();
animate = function() {
module.set.outward();
module.remove.active();
module.set.animating();
module.remove.visible();
if(settings.dimPage && !module.othersActive()) {
$pusher.removeClass(className.dimmed);
module.remove.pushed();
}
};
transitionEnd = function(event) {
if( event.target == $transition[0] ) {
$transition.off(transitionEvent + eventNamespace, transitionEnd);
module.remove.outward();
module.remove.visible();
module.remove.animating();
module.remove.transition();
if(transition == 'scale down' || (settings.returnScroll && transition !== 'overlay' && module.is.mobile()) ) {
module.scrollBack();
}
@ -368,7 +364,7 @@ $.fn.sidebar = function(parameters) {
}
};
$transition.on(transitionEvent + eventNamespace, transitionEnd);
animate();
requestAnimationFrame(animate);
},
legacyPushPage: function(callback) {
@ -386,14 +382,13 @@ $.fn.sidebar = function(parameters) {
module.debug('Using javascript to push context', properties);
module.set.visible();
module.set.transition();
module.set.inward();
module.set.animating();
if(settings.dimPage) {
$pusher.addClass(className.dimmed);
}
module.set.pushed();
$context
.animate(properties, settings.duration, settings.easing, function() {
module.remove.inward();
module.remove.animating();
module.bind.clickaway();
module.set.active();
$.proxy(callback, module)();
@ -414,16 +409,15 @@ $.fn.sidebar = function(parameters) {
properties[direction] = '0px';
module.debug('Using javascript to pull context', properties);
module.unbind.clickaway();
module.set.outward();
module.set.animating();
module.remove.visible();
module.remove.active();
if(settings.dimPage && !module.othersVisible()) {
$pusher.removeClass(className.dimmed);
}
module.remove.pushed();
$context
.animate(properties, settings.duration, settings.easing, function() {
module.remove.outward();
module.remove.visible();
module.remove.animating();
$.proxy(callback, module)();
})
;
@ -454,11 +448,8 @@ $.fn.sidebar = function(parameters) {
active: function() {
$module.addClass(className.active);
},
inward: function() {
$module.addClass(className.inward);
},
outward: function() {
$module.addClass(className.outward);
animating: function() {
$module.addClass(className.animating);
},
transition: function(transition) {
transition = transition || module.get.transition();
@ -488,11 +479,8 @@ $.fn.sidebar = function(parameters) {
active: function() {
$module.removeClass(className.active);
},
inward: function() {
$module.removeClass(className.inward);
},
outward: function() {
$module.removeClass(className.outward);
animating: function() {
$module.removeClass(className.animating);
},
transition: function(transition) {
transition = transition || module.get.transition();
@ -605,14 +593,8 @@ $.fn.sidebar = function(parameters) {
vertical: function() {
return $module.hasClass(className.top);
},
inward: function() {
return $context.hasClass(className.inward);
},
outward: function() {
return $context.hasClass(className.outward);
},
animating: function() {
return module.is.inward() || module.is.outward();
return $context.hasClass(className.animating);
}
},
@ -839,17 +821,16 @@ $.fn.sidebar.settings = {
onVisible : function(){},
className : {
active : 'active',
dimmed : 'dimmed',
inward : 'inward',
outward : 'outward',
pushable : 'pushable',
pushed : 'pushed',
right : 'right',
top : 'top',
left : 'left',
bottom : 'bottom',
visible : 'visible'
active : 'active',
animating : 'animating',
dimmed : 'dimmed',
pushable : 'pushable',
pushed : 'pushed',
right : 'right',
top : 'top',
left : 'left',
bottom : 'bottom',
visible : 'visible'
},
selector: {

168
src/definitions/modules/sidebar.less
View File

@ -69,7 +69,7 @@
.ui.right.sidebar {
right: 0px !important;
left: auto !important;
transform: translate3d(0, 100%, 0);
transform: translate3d(100%, 0%, 0);
}
.ui.bottom.sidebar {
@ -79,12 +79,11 @@
}
/*--------------
Body
Pushable
---------------*/
/* Sets 3D Perspective */
/* Canvas */
.pushable {
position: relative;
height: 100%;
@ -92,11 +91,29 @@
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
---------------*/
.pushable > .fixed {
.ui.sidebar ~ .fixed {
position: fixed;
backface-visibility: hidden;
will-change: transform;
@ -109,33 +126,14 @@
Page
---------------*/
.pushable > .pusher {
.ui.sidebar ~ .pusher {
backface-visibility: hidden;
height: 100%;
transition: transform @duration @easing;
background: @pageBackground;
}
/*--------------
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;
}
/*--------------
Coupling
---------------*/
@ -152,29 +150,34 @@
Pushed
---------------*/
.pushable.pushed > .pusher:after {
.pusher:after {
z-index: @dimmerLayer;
}
.pushable.pushed > .pusher {
z-index: @middleLayer;
}
/*--------------
Dimmed
---------------*/
.pushable > .pusher.dimmed:after {
.pusher.dimmed:after {
width: 100% !important;
height: 100% !important;
opacity: 1 !important;
}
/*--------------
Animating
---------------*/
.ui.sidebar.animating {
visibility: visible;
}
/*--------------
Visible
---------------*/
.pushable > .visible.ui.sidebar {
.ui.visible.sidebar {
visibility: visible;
}
@ -184,7 +187,6 @@
.ui.active.sidebar {
-webkit-overflow-scrolling: touch;
z-index: @topLayer !important;
}
@ -212,60 +214,57 @@
---------------*/
/* Set-up */
.pushable > .visible.ui.overlay.sidebar {
z-index: @topLayer;
.ui.overlay.sidebar {
transition: transform @duration @easing;
}
/* Animation */
.pushable > .ui.overlay.sidebar,
.pushable > .ui.overlay.sidebar {
transition: transform @duration @easing;
.ui.animating.overlay.sidebar,
.ui.visible.overlay.sidebar {
z-index: @topLayer;
}
/*--- Left ---*/
/* Set-up */
.pushable > .ui.left.overlay.sidebar {
.ui.left.overlay.sidebar {
transform: translate3d(-100%, 0, 0);
}
/* Pushed */
.pushable.pushed .ui.inward.left.overlay.sidebar,
.pushable.pushed .ui.active.left.overlay.sidebar {
.pushable .ui.visible.left.overlay.sidebar {
transform: translate3d(0%, 0, 0);
}
/*--- Right ---*/
/* Set-up */
.pushable > .ui.right.overlay.sidebar {
.ui.right.overlay.sidebar {
transform: translate3d(100%, 0, 0);
}
/* Pushed */
.pushable.pushed .ui.inward.right.overlay.sidebar,
.pushable.pushed .ui.active.right.overlay.sidebar {
.pushable .ui.visible.right.overlay.sidebar {
transform: translate3d(0%, 0, 0);
}
/*--- Top ---*/
/* Set-up */
.pushable > .ui.top.overlay.sidebar {
.ui.top.overlay.sidebar {
transform: translate3d(0%, -100%, 0);
}
/* Pushed */
.pushable.pushed .ui.inward.top.overlay.sidebar,
.pushable.pushed .ui.active.top.overlay.sidebar {
.pushable .ui.visible.top.overlay.sidebar {
transform: translate3d(0%, 0%, 0);
}
/*--- Bottom ---*/
/* Set-up */
.pushable > .ui.bottom.overlay.sidebar {
.ui.bottom.overlay.sidebar {
transform: translate3d(0%, 100%, 0);
}
/* Pushed */
.pushable.pushed .ui.inward.bottom.overlay.sidebar,
.pushable.pushed .ui.active.bottom.overlay.sidebar {
.pushable .ui.visible.bottom.overlay.sidebar {
transform: translate3d(0%, 0%, 0);
}
@ -274,36 +273,31 @@
---------------*/
/* Initial */
.pushable > .ui.push.sidebar {
.ui.push.sidebar {
transition: transform @duration @easing;
z-index: @topLayer;
}
.pushable > .ui.left.push.sidebar {
.ui.left.push.sidebar {
transform: translate3d(-100%, 0, 0);
}
.pushable > .ui.right.push.sidebar {
.ui.right.push.sidebar {
transform: translate3d(100%, 0, 0);
}
/* Animating */
.pushable > .ui.visible.push.sidebar ~ .pusher,
.pushable > .ui.visible.push.sidebar ~ .pusher {
.ui.visible.push.sidebar ~ .fixed,
.ui.visible.push.sidebar ~ .pusher {
transform: translate3d(0px, 0, 0);
}
/* Inward */
.pushable.pushed > .inward.ui.push.sidebar,
.pushable.pushed > .active.ui.push.sidebar {
/* Animation */
.ui.visible.push.sidebar {
transform: translate3d(0%, 0, 0);
}
/* Visible */
.pushable.pushed > .visible.ui.left.push.sidebar ~ .fixed,
.pushable.pushed > .visible.ui.left.push.sidebar ~ .pusher {
.ui.visible.left.push.sidebar ~ .fixed,
.ui.visible.left.push.sidebar ~ .pusher {
transform: translate3d(@sidebarWidth, 0, 0);
}
.pushable.pushed > .visible.ui.right.push.sidebar ~ .fixed,
.pushable.pushed > .visible.ui.right.push.sidebar ~ .pusher {
.ui.visible.right.push.sidebar ~ .fixed,
.ui.visible.right.push.sidebar ~ .pusher {
transform: translate3d(-@sidebarWidth, 0, 0);
}
@ -313,21 +307,23 @@
---------------*/
/* Initial */
.ui.left.uncover.sidebar,
.ui.right.uncover.sidebar,
.ui.top.uncover.sidebar,
.ui.bottom.uncover.sidebar {
.ui.uncover.sidebar {
transform: translate3d(0, 0, 0);
transition: transform @duration @easing;
z-index: -1;
}
/* Visible */
.pushable.pushed > .visible.ui.left.uncover.sidebar ~ .fixed,
.pushable.pushed > .visible.ui.left.uncover.sidebar ~ .pusher {
/* Animation */
.ui.animating.uncover.sidebar,
.ui.visible.uncover.sidebar {
transform: translate3d(0, 0, 0);
}
.ui.visible.left.uncover.sidebar ~ .fixed,
.ui.visible.left.uncover.sidebar ~ .pusher {
transform: translate3d(@sidebarWidth, 0, 0);
}
.pushable.pushed > .visible.ui.right.uncover.sidebar ~ .fixed,
.pushable.pushed > .visible.ui.right.uncover.sidebar ~ .pusher {
.ui.visible.right.uncover.sidebar ~ .fixed,
.ui.visible.right.uncover.sidebar ~ .pusher {
transform: translate3d(-@sidebarWidth, 0, 0);
}
@ -337,27 +333,27 @@
---------------*/
/* Set-Up */
.pushable > .ui.slide.along.sidebar {
.ui.slide.along.sidebar {
transition: transform @duration @easing;
z-index: @bottomLayer;
}
.pushable > .ui.slide.along.sidebar ~ .pusher,
.pushable > .ui.slide.along.sidebar ~ .pusher {
.ui.slide.along.sidebar ~ .pusher,
.ui.slide.along.sidebar ~ .pusher {
transform: translate3d(0px, 0, 0);
}
/*--- Left ---*/
/* Set-Up */
.pushable > .ui.left.slide.along.sidebar {
.ui.left.slide.along.sidebar {
transform: translate3d(50%, 0, 0);
}
/* Pushed */
.pushable.pushed > .visible.ui.left.slide.along.sidebar {
.ui.visible.left.slide.along.sidebar {
transform: translate3d(0%, 0, 0);
}
.pushable.pushed > .visible.ui.left.slide.along.sidebar ~ .fixed,
.pushable.pushed > .visible.ui.left.slide.along.sidebar ~ .pusher {
.ui.visible.left.slide.along.sidebar ~ .fixed,
.ui.visible.left.slide.along.sidebar ~ .pusher {
transform: translate3d(@sidebarWidth, 0, 0);
}
@ -365,14 +361,14 @@
/*--- Right ---*/
/* Set-Up */
.pushable > .ui.right.slide.along.sidebar {
.ui.right.slide.along.sidebar {
transform: translate3d(-50%, 0, 0);
}
/* Pushed */
.pushable.pushed > .visible.ui.right.slide.along.sidebar {
.ui.visible.right.slide.along.sidebar {
transform: translate3d(0%, 0, 0);
}
.pushable.pushed > .visible.ui.right.slide.along.sidebar ~ .fixed,
.pushable.pushed > .visible.ui.right.slide.along.sidebar ~ .pusher {
.ui.visible.right.slide.along.sidebar ~ .fixed,
.ui.visible.right.slide.along.sidebar ~ .pusher {
transform: translate3d(-@sidebarWidth, 0, 0);
}
Write Preview
Loading…
Cancel
Save