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

Latest work

pull/1243/head
jlukic 10 years ago
parent
7c8e338704
commit
5999046530
2 changed files with 134 additions and 59 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 28
      src/definitions/modules/sidebar.js
  2. 165
      src/definitions/modules/sidebar.less

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

@ -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();
@ -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);
@ -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)
;
@ -137,6 +139,9 @@ $.fn.sidebar = function(parameters) {
$context
.off(eventNamespace)
;
$pusher
.off(eventNamespace)
;
if(settings.scrollLock) {
$(window).off('DOMMouseScroll' + eventNamespace);
}
@ -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: {
@ -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();
}
},
@ -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();
@ -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();
}

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

@ -41,6 +41,7 @@
background: @sidebarBackground;
width: @sidebarWidth !important;
z-index: @topLayer;
}
/*--------------
@ -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
---------------*/
@ -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;
@ -168,11 +163,10 @@
Animating
---------------*/
.ui.sidebar.animating {
.ui.animating.sidebar {
visibility: visible;
}
/*--------------
Visible
---------------*/
@ -181,10 +175,6 @@
visibility: visible;
}
/*--------------
Active
---------------*/
.ui.active.sidebar {
-webkit-overflow-scrolling: touch;
}
@ -219,7 +209,7 @@
}
/* Animation */
.ui.animating.overlay.sidebar,
.animating.ui.overlay.sidebar,
.ui.visible.overlay.sidebar {
z-index: @topLayer;
}
@ -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);
}
@ -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);
}
@ -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);
}
@ -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);
}
@ -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);
}
@ -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 {
@ -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 {
@ -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 {
@ -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);
}
Write Preview
Loading…
Cancel
Save