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

Sidebar now attaches to correct context, works in contexts other than body

pull/1063/head
jlukic 10 years ago
parent
4106715fde
commit
8e775d3e6f
2 changed files with 104 additions and 97 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 53
      src/definitions/modules/sidebar.js
  2. 148
      src/definitions/modules/sidebar.less

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

@ -14,7 +14,6 @@
$.fn.sidebar = function(parameters) {
var
$allModules = $(this),
$body = $('body'),
$head = $('head'),
moduleSelector = $allModules.selector || '',
@ -51,7 +50,7 @@ $.fn.sidebar = function(parameters) {
moduleNamespace = 'module-' + namespace,
$module = $(this),
$body = $('body'),
$context = $(settings.context),
$style = $('style[title=' + namespace + ']'),
$sidebars = $(selector.sidebar),
@ -73,7 +72,7 @@ $.fn.sidebar = function(parameters) {
transitionEnd = module.get.transitionEvent();
module.setup.page();
module.setup.context();
// avoid locking rendering to change layout if included in onReady
requestAnimationFrame(module.setup.layout);
@ -108,14 +107,14 @@ $.fn.sidebar = function(parameters) {
bind: {
clickaway: function() {
$body
$context
.on('click' + eventNamespace, module.event.clickaway)
;
}
},
unbind: {
clickaway: function() {
$body
$context
.off('click' + eventNamespace)
;
}
@ -139,17 +138,20 @@ $.fn.sidebar = function(parameters) {
$pusher = $('<div class="pusher" />');
$page = $('<div class="page" />');
$pusher.append($page);
$body
$context
.children()
.not(selector.omitted)
.not($sidebars)
.wrapAll($pusher)
;
}
if($module.parent()[0] !== $context[0]) {
$module.detach().appendTo($context);
}
module.refresh();
},
page: function() {
$body.addClass(className.hasSidebar);
$context.addClass(className.pushable);
}
},
@ -337,23 +339,23 @@ $.fn.sidebar = function(parameters) {
},
direction: function(direction) {
direction = direction || module.get.direction();
$body.addClass(className[direction]);
$context.addClass(className[direction]);
},
visible: function() {
$module.addClass(className.visible);
},
animation: function(animation) {
animation = animation || settings.animation;
$body.addClass(animation);
$context.addClass(animation);
},
inward: function() {
$body.addClass(className.inward);
$context.addClass(className.inward);
},
outward: function() {
$body.addClass(className.outward);
$context.addClass(className.outward);
},
pushed: function() {
$body.addClass(className.pushed);
$context.addClass(className.pushed);
}
},
remove: {
@ -375,20 +377,20 @@ $.fn.sidebar = function(parameters) {
},
animation: function(animation) {
animation = animation || settings.animation;
$body.removeClass(animation);
$context.removeClass(animation);
},
pushed: function() {
$body.removeClass(className.pushed);
$context.removeClass(className.pushed);
},
inward: function() {
$body.removeClass(className.inward);
$context.removeClass(className.inward);
},
outward: function() {
$body.removeClass(className.outward);
$context.removeClass(className.outward);
},
direction: function(direction) {
direction = direction || module.get.direction();
$body.removeClass(className[direction]);
$context.removeClass(className[direction]);
}
},
@ -440,10 +442,10 @@ $.fn.sidebar = function(parameters) {
return $module.hasClass(className.top);
},
inward: function() {
return $body.hasClass(className.inward);
return $context.hasClass(className.inward);
},
outward: function() {
return $body.hasClass(className.outward);
return $context.hasClass(className.outward);
},
animating: function() {
return module.is.inward() || module.is.outward();
@ -639,6 +641,7 @@ $.fn.sidebar.settings = {
animation : 'pushing',
context : 'body',
useCSS : true,
duration : 300,
@ -654,12 +657,12 @@ $.fn.sidebar.settings = {
onVisible : function(){},
className : {
hasSidebar : 'pushable',
active : 'active',
visible : 'visible',
pushed : 'pushed',
inward : 'show',
outward : 'hide'
pushable : 'ui pushable',
active : 'active',
visible : 'visible',
pushed : 'pushed',
inward : 'show',
outward : 'hide'
},
selector: {

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

@ -44,7 +44,7 @@
---------------*/
/* Sets 3D Perspective */
body.pushable {
.ui.pushable {
position: relative;
height: 100%;
overflow: hidden;
@ -54,7 +54,7 @@ body.pushable {
Pusher
---------------*/
body.pushable > .pusher {
.ui.pushable > .pusher {
position: relative;
left: 0;
height: 100%;
@ -68,7 +68,7 @@ body.pushable > .pusher {
Page
---------------*/
body.pushable > .pusher > .page {
.ui.pushable > .pusher > .page {
background: @bodyBackground;
position: relative;
overflow-y: auto;
@ -80,7 +80,7 @@ body.pushable > .pusher > .page {
Dimmer
---------------*/
body.pushable > .pusher > .page:after {
.ui.pushable > .pusher > .page:after {
position: absolute;
top: 0px;
right: 0px;
@ -105,19 +105,19 @@ body.pushable > .pusher > .page:after {
---------------*/
/* Add Canvas BG */
body.pushable.pushed,
body.pushable.hide,
body.pushable.show {
.ui.pushable.pushed,
.ui.pushable.hide,
.ui.pushable.show {
background: @canvasBackground !important;
}
/* Remove Scroll */
body.pushed > .pusher > .page {
.ui.pushable.pushed > .pusher > .page {
overflow: hidden;
}
/* Show Dimmer */
body.pushed > .pusher > .page:after {
.ui.pushable.pushed > .pusher > .page:after {
width: 100% !important;
height: 100% !important;
opacity: 1 !important;
@ -127,7 +127,7 @@ body.pushed > .pusher > .page:after {
Visible
---------------*/
body > .visible.ui.sidebar {
.ui.pushable > .visible.ui.sidebar {
visibility: visible;
}
@ -146,24 +146,28 @@ body > .visible.ui.sidebar {
}
/*******************************
Animations
*******************************/
/*--------------
Overlay
---------------*/
/* Set-up */
body.overlay > .ui.sidebar {
.ui.pushable.overlay > .ui.sidebar {
transform: translate3d(-100%, 0, 0);
z-index: 3;
}
/* Pushed */
body.overlay .visible.ui.sidebar {
.ui.pushable.overlay .visible.ui.sidebar {
transform: translate3d(0, 0, 0);
}
/* Animation */
body.overlay.show > .visible.ui.sidebar,
body.overlay.hide > .visible.ui.sidebar {
.ui.pushable.overlay.show > .visible.ui.sidebar,
.ui.pushable.overlay.hide > .visible.ui.sidebar {
transition: transform @animationDuration ease;
}
@ -172,29 +176,29 @@ body.overlay.hide > .visible.ui.sidebar {
---------------*/
/* Set-Up */
body.pushing.pushed > .pusher {
.ui.pushable.pushing.pushed > .pusher {
transform: translate3d(@sidebarWidth, 0, 0);
}
body.pushing > .ui.sidebar {
.ui.pushable.pushing > .ui.sidebar {
transform: translate3d(-100%, 0, 0);
z-index: 3;
}
body.pushing > .pusher {
.ui.pushable.pushing > .pusher {
transform: translate3d(0px, 0, 0);
z-index: 2;
}
/* Pushed */
body.pushing.pushed .visible.sidebar {
.ui.pushable.pushing.pushed .visible.sidebar {
transform: translate3d(0px, 0, 0);
}
body.pushing.pushed > .pusher {
.ui.pushable.pushing.pushed > .pusher {
transform: translate3d(@sidebarWidth, 0, 0);
}
/* Animation */
body.pushing.show > .visible.ui.sidebar,
body.pushing.hide > .visible.ui.sidebar {
.ui.pushable.pushing.show > .visible.ui.sidebar,
.ui.pushable.pushing.hide > .visible.ui.sidebar {
transition: transform @animationDuration ease;
}
@ -204,16 +208,16 @@ body.pushing.hide > .visible.ui.sidebar {
---------------*/
/* Set-up */
body.reveal .visible.ui.sidebar {
.ui.pushable.reveal .visible.ui.sidebar {
z-index: 1;
}
body.reveal > .pusher {
.ui.pushable.reveal > .pusher {
transform: translate3d(0, 0, 0);
z-index: 2;
}
/* Pushed */
body.reveal.pushed > .pusher {
.ui.pushable.reveal.pushed > .pusher {
transform: translate3d(@sidebarWidth, 0, 0);
}
@ -223,25 +227,25 @@ body.reveal.pushed > .pusher {
---------------*/
/* Set-up */
body.slide.along > .ui.sidebar {
.ui.pushable.slide.along > .ui.sidebar {
z-index: 2;
transform: translate3d(-50%, 0, 0);
}
body.slide.along > .pusher {
.ui.pushable.slide.along > .pusher {
z-index: 3;
}
/* Pushed */
body.slide.along.pushed > .pusher {
.ui.pushable.slide.along.pushed > .pusher {
transform: translate3d(@sidebarWidth, 0, 0);
}
body.slide.along.pushed > .visible.ui.sidebar {
.ui.pushable.slide.along.pushed > .visible.ui.sidebar {
transform: translate3d(0%, 0, 0);
}
/* Animation */
body.slide.along.show > .visible.ui.sidebar,
body.slide.along.hide > .visible.ui.sidebar {
.ui.pushable.slide.along.show > .visible.ui.sidebar,
.ui.pushable.slide.along.hide > .visible.ui.sidebar {
transition: transform @animationDuration ease;
}
@ -252,22 +256,22 @@ body.slide.along.hide > .visible.ui.sidebar {
---------------*/
/* Set-up */
body.slide.out > .ui.sidebar {
.ui.pushable.slide.out > .ui.sidebar {
z-index: 1;
transform: translate3d(50%, 0, 0);
}
/* Pushed */
body.slide.out.pushed > .pusher {
.ui.pushable.slide.out.pushed > .pusher {
transform: translate3d(@sidebarWidth, 0, 0);
}
body.slide.out.pushed .visible.ui.sidebar {
.ui.pushable.slide.out.pushed .visible.ui.sidebar {
transform: translate3d(0%, 0, 0);
}
/* Animation */
body.slide.out.show > .visible.ui.sidebar,
body.slide.out.hide > .visible.ui.sidebar {
.ui.pushable.slide.out.show > .visible.ui.sidebar,
.ui.pushable.slide.out.hide > .visible.ui.sidebar {
transition: transform @animationDuration ease;
}
@ -276,30 +280,30 @@ body.slide.out.hide > .visible.ui.sidebar {
---------------*/
/* Set-up */
body.scale.down {
.ui.pushable.scale.down {
perspective: 1500px;
}
body.scale.down > .pusher {
.ui.pushable.scale.down > .pusher {
transform-style: preserve-3d;
z-index: 2;
}
body.scale.down > .ui.sidebar {
.ui.pushable.scale.down > .ui.sidebar {
opacity: 1;
transform: translate3d(-100%, 0, 0);
z-index: 3;
}
/* Pushed */
body.scale.down.pushed > .pusher {
.ui.pushable.scale.down.pushed > .pusher {
transform: translate3d(210px, 0px, -500px);
}
body.scale.down.pushed > .visible.ui.sidebar {
.ui.pushable.scale.down.pushed > .visible.ui.sidebar {
transform: translate3d(0, 0, 0);
}
/* Animation */
body.scale.down.show > .visible.ui.sidebar,
body.scale.down.hide > .visible.ui.sidebar {
.ui.pushable.scale.down.show > .visible.ui.sidebar,
.ui.pushable.scale.down.hide > .visible.ui.sidebar {
transition: transform @animationDuration ease;
}
@ -309,29 +313,29 @@ body.scale.down.hide > .visible.ui.sidebar {
---------------*/
/* Set-up */
body.scale.up {
.ui.pushable.scale.up {
perspective: 1500px;
perspective-origin: 0% 50%;
}
body.scale.up > .ui.sidebar {
.ui.pushable.scale.up > .ui.sidebar {
z-index: 1;
transform: translate3d(0, 0, -@sidebarWidth);
}
body.scale.up > .pusher {
.ui.pushable.scale.up > .pusher {
z-index: 2;
}
/* Pushed */
body.scale.up.pushed > .pusher {
.ui.pushable.scale.up.pushed > .pusher {
transform: translate3d(@sidebarWidth, 0, 0);
}
body.scale.up.pushed > .visible.ui.sidebar {
.ui.pushable.scale.up.pushed > .visible.ui.sidebar {
transform: translate3d(0, 0, 0);
}
/* Animation */
body.scale.up.show > .visible.ui.sidebar,
body.scale.up.hide > .visible.ui.sidebar {
.ui.pushable.scale.up.show > .visible.ui.sidebar,
.ui.pushable.scale.up.hide > .visible.ui.sidebar {
transition: transform @animationDuration ease;
}
@ -341,33 +345,33 @@ body.scale.up.hide > .visible.ui.sidebar {
---------------*/
/* Set-up */
body.recede {
.ui.pushable.recede {
perspective: 1500px;
}
body.recede > .ui.sidebar {
.ui.pushable.recede > .ui.sidebar {
opacity: 1;
transform: translate3d(-100%, 0, 0);
z-index: 3;
}
body.recede > .pusher {
.ui.pushable.recede > .pusher {
transform-style: preserve-3d;
z-index: 2;
}
body.recede > .pusher::after {
.ui.pushable.recede > .pusher::after {
background-color: rgba(0, 0, 0, 0.5);
}
/* Pushed */
body.recede.pushed > .pusher {
.ui.pushable.recede.pushed > .pusher {
transform: translate3d(15%, 0px, -400px) rotateY(-15deg);
}
body.recede.pushed > .visible.ui.sidebar {
.ui.pushable.recede.pushed > .visible.ui.sidebar {
transform: translate3d(0, 0, 0);
}
/* Animation */
body.recede.show > .visible.ui.sidebar,
body.recede.hide > .visible.ui.sidebar {
.ui.pushable.recede.show > .visible.ui.sidebar,
.ui.pushable.recede.hide > .visible.ui.sidebar {
transition: transform @animationDuration ease;
}
@ -376,15 +380,15 @@ body.recede.hide > .visible.ui.sidebar {
---------------*/
/* Set-up */
body.open.door {
.ui.pushable.open.door {
perspective: 1500px;
}
body.open.door > .ui.sidebar {
.ui.pushable.open.door > .ui.sidebar {
opacity: 1;
transform: translate3d(-100%, 0, 0);
z-index: 3;
}
body.open.door > .pusher {
.ui.pushable.open.door > .pusher {
transform-origin: 100% 50%;
transform-style: preserve-3d;
z-index: 2;
@ -392,16 +396,16 @@ body.open.door > .pusher {
/* Pushed */
body.open.door.pushed > .pusher {
.ui.pushable.open.door.pushed > .pusher {
transform: rotateY(-10deg);
}
body.open.door.pushed > .visible.ui.sidebar {
.ui.pushable.open.door.pushed > .visible.ui.sidebar {
transform: translate3d(0, 0, 0);
}
/* Animation */
body.open.door.show > .visible.ui.sidebar,
body.open.door.hide > .visible.ui.sidebar {
.ui.pushable.open.door.show > .visible.ui.sidebar,
.ui.pushable.open.door.hide > .visible.ui.sidebar {
transition: transform @animationDuration;
}
@ -410,35 +414,35 @@ body.open.door.hide > .visible.ui.sidebar {
---------------*/
/* Set-up */
body.rotate.in {
.ui.pushable.rotate.in {
perspective: 1500px;
perspective-origin: 0% 50%;
}
body.rotate.in > .pusher {
.ui.pushable.rotate.in > .pusher {
transform-style: preserve-3d;
}
body.rotate.in > .ui.sidebar {
.ui.pushable.rotate.in > .ui.sidebar {
transform: translate3d(-100%, 0, 0) rotateY(90deg);
transform-origin: 50% 100% 0;
transform-style: preserve-3d;
}
/* Pushed */
body.rotate.in.pushed > .pusher {
.ui.pushable.rotate.in.pushed > .pusher {
transform: translate3d(@sidebarWidth, 0, 0);
}
body.rotate.in.pushed .visible.ui.sidebar {
.ui.pushable.rotate.in.pushed .visible.ui.sidebar {
transform: translate3d(0%, 0, 0) rotateY(0deg);
}
/* Return Animation */
body.rotate.in.hide > .visible.ui.sidebar {
.ui.pushable.rotate.in.hide > .visible.ui.sidebar {
transform: translate3d(-100%, 0, 0) rotateY(0deg);
transition: transform @animationDuration ease 0s;
}
/* Animation */
body.rotate.in.show > .visible.ui.sidebar,
body.rotate.in.hide > .visible.ui.sidebar {
.ui.pushable.rotate.in.show > .visible.ui.sidebar,
.ui.pushable.rotate.in.hide > .visible.ui.sidebar {
transition: transform @animationDuration ease-in-out 0s;
}
Write Preview
Loading…
Cancel
Save