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

This code is bananas

pull/1243/head
jlukic 10 years ago
parent
074cb71a79
commit
3000178c23
5 changed files with 111 additions and 99 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      src/definitions/collections/grid.less
  2. 115
      src/definitions/modules/sidebar.js
  3. 84
      src/definitions/modules/sidebar.less
  4. 2
      src/themes/default/collections/grid.variables
  5. 2
      src/themes/default/globals/site.variables

7
src/definitions/collections/grid.less
View File

@ -889,13 +889,6 @@
.ui[class*="equal height"].grid { .ui[class*="equal height"].grid {
display: table; display: table;
table-layout: fixed; table-layout: fixed;
width: @tableWidth;
}
.ui[class*="equal height"].relaxed.grid {
width: @relaxedTableWidth;
}
.ui[class*="equal height"][class*="very relaxed"].grid {
width: @veryRelaxedTableWidth;
} }
.ui[class*="equal height"].grid > .row, .ui[class*="equal height"].grid > .row,

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

@ -55,7 +55,7 @@ $.fn.sidebar = function(parameters) {
$context = $(settings.context), $context = $(settings.context),
$style = $('style[title=' + namespace + ']'), $style = $('style[title=' + namespace + ']'),
$sidebars = $context.children(selector.sidebar),
$sidebars = $module.children(selector.sidebar),
$pusher = $context.children(selector.pusher), $pusher = $context.children(selector.pusher),
element = this, element = this,
@ -79,11 +79,11 @@ $.fn.sidebar = function(parameters) {
settings.useLegacy = true; settings.useLegacy = true;
} }
module.setup.context();
module.set.pushable();
module.set.direction(); module.set.direction();
module.set.transition(); module.set.transition();
// avoid locking rendering to change layout if included in onReady
// avoid locking rendering if included in onReady
requestAnimationFrame(module.setup.layout); requestAnimationFrame(module.setup.layout);
module.instantiate(); module.instantiate();
@ -175,10 +175,6 @@ $.fn.sidebar = function(parameters) {
$module.detach().prependTo($context); $module.detach().prependTo($context);
} }
module.refresh(); module.refresh();
},
context: function() {
module.verbose('Adding pusshable class to wrapper');
$context.addClass(className.pushable);
} }
}, },
@ -216,8 +212,12 @@ $.fn.sidebar = function(parameters) {
module.error(error.overlay); module.error(error.overlay);
settings.transition = 'overlay'; settings.transition = 'overlay';
} }
if(settings.transition !== 'overlay') {
module.hideAll();
module.refresh();
if(module.othersVisible() && module.get.transition() != 'overlay') {
module.debug('Other sidebars currently open');
if(settings.exclusive) {
module.hideOthers();
}
} }
animateMethod(function() { animateMethod(function() {
$.proxy(callback, element)(); $.proxy(callback, element)();
@ -252,12 +252,29 @@ $.fn.sidebar = function(parameters) {
} }
}, },
hideAll: function() {
othersVisible: function() {
return ($sidebars.not($module).filter('.' + className.visible).size() > 0);
},
othersActive: function() {
return ($sidebars.not($module).filter('.' + className.active).size() > 0);
},
hideOthers: function(callback) {
var var
$visibleSidebars = $sidebars.find('.' + className.visible)
$otherSidebars = $sidebars.not($module).filter('.' + className.visible),
callback = callback || function(){},
sidebarCount = $otherSidebars.size(),
callbackCount = 0
; ;
$visibleSidebars
.sidebar('hide')
console.log($sidebars);
$otherSidebars
.sidebar('hide', function() {
callbackCount++;
console.log('callback count');
if(callbackCount == sidebarCount) {
callback();
}
})
; ;
}, },
@ -276,7 +293,7 @@ $.fn.sidebar = function(parameters) {
transition = module.get.transition(), transition = module.get.transition(),
$transition = (transition == 'safe') $transition = (transition == 'safe')
? $context ? $context
: (transition == 'overlay')
: (transition == 'overlay' || module.othersActive())
? $module ? $module
: $pusher, : $pusher,
animate, animate,
@ -286,13 +303,15 @@ $.fn.sidebar = function(parameters) {
? callback ? callback
: function(){} : function(){}
; ;
module.remove.outward();
module.set.inward();
animate = function() { animate = function() {
module.set.inward();
module.set.visible();
requestAnimationFrame(function() {
if(!module.othersActive()) {
if(settings.dimPage) {
$pusher.addClass(className.dimmed);
}
module.set.pushed(); module.set.pushed();
});
}
module.set.visible();
}; };
transitionEnd = function(event) { transitionEnd = function(event) {
if( event.target == $transition[0] ) { if( event.target == $transition[0] ) {
@ -304,17 +323,10 @@ $.fn.sidebar = function(parameters) {
} }
}; };
$transition.on(transitionEvent + eventNamespace, transitionEnd); $transition.on(transitionEvent + eventNamespace, transitionEnd);
module.verbose('Adding context push state', $context);
if(transition === 'overlay') {
animate();
}
else {
if(settings.transition == 'scale down' || module.is.mobile()) {
module.scrollToTop();
}
module.remove.allVisible();
animate();
if(settings.transition == 'scale down' || (module.is.mobile() && transition !== 'overlay')) {
module.scrollToTop();
} }
animate();
}, },
pullPage: function(callback) { pullPage: function(callback) {
@ -322,7 +334,7 @@ $.fn.sidebar = function(parameters) {
transition = module.get.transition(), transition = module.get.transition(),
$transition = (transition == 'safe') $transition = (transition == 'safe')
? $context ? $context
: (transition == 'overlay')
: (transition == 'overlay' || module.othersActive())
? $module ? $module
: $pusher, : $pusher,
animate, animate,
@ -333,12 +345,16 @@ $.fn.sidebar = function(parameters) {
: function(){} : function(){}
; ;
module.verbose('Removing context push state', module.get.direction()); module.verbose('Removing context push state', module.get.direction());
animate = function() {
if(!module.othersActive()) {
module.unbind.clickaway(); module.unbind.clickaway();
module.remove.inward();
}
animate = function() {
module.set.outward(); module.set.outward();
module.remove.active(); module.remove.active();
module.remove.pushed();
if(settings.dimPage && !module.othersActive()) {
$pusher.removeClass(className.dimmed);
module.remove.pushed();
}
}; };
transitionEnd = function(event) { transitionEnd = function(event) {
if( event.target == $transition[0] ) { if( event.target == $transition[0] ) {
@ -370,8 +386,10 @@ $.fn.sidebar = function(parameters) {
module.debug('Using javascript to push context', properties); module.debug('Using javascript to push context', properties);
module.set.visible(); module.set.visible();
module.set.transition(); module.set.transition();
module.set.direction();
module.set.inward(); module.set.inward();
if(settings.dimPage) {
$pusher.addClass(className.dimmed);
}
module.set.pushed(); module.set.pushed();
$context $context
.animate(properties, settings.duration, settings.easing, function() { .animate(properties, settings.duration, settings.easing, function() {
@ -398,6 +416,9 @@ $.fn.sidebar = function(parameters) {
module.unbind.clickaway(); module.unbind.clickaway();
module.set.outward(); module.set.outward();
module.remove.active(); module.remove.active();
if(settings.dimPage && !module.othersVisible()) {
$pusher.removeClass(className.dimmed);
}
module.remove.pushed(); module.remove.pushed();
$context $context
.animate(properties, settings.duration, settings.easing, function() { .animate(properties, settings.duration, settings.easing, function() {
@ -423,11 +444,11 @@ $.fn.sidebar = function(parameters) {
set: { set: {
// container // container
pushed: function() { pushed: function() {
if(settings.dimPage) {
$pusher.addClass(className.dimmed);
}
$context.addClass(className.pushed); $context.addClass(className.pushed);
}, },
pushable: function() {
$context.addClass(className.pushable);
},
// sidebar // sidebar
active: function() { active: function() {
@ -449,16 +470,19 @@ $.fn.sidebar = function(parameters) {
}, },
visible: function() { visible: function() {
$module.addClass(className.visible); $module.addClass(className.visible);
},
overlay: function() {
$module.addClass(className.overlay);
} }
}, },
remove: { remove: {
// context // context
pushed: function() { pushed: function() {
if(settings.dimPage) {
$pusher.removeClass(className.dimmed);
}
$context.removeClass(className.pushed); $context.removeClass(className.pushed);
}, },
pushable: function() {
$context.removeClass(className.pushable);
},
// sidebar // sidebar
active: function() { active: function() {
@ -481,11 +505,8 @@ $.fn.sidebar = function(parameters) {
visible: function() { visible: function() {
$module.removeClass(className.visible); $module.removeClass(className.visible);
}, },
allVisible: function() {
if($sidebars.hasClass(className.visible)) {
module.debug('Other sidebars visible, hiding');
$sidebars.removeClass(className.visible);
}
overlay: function() {
$module.removeClass(className.overlay);
} }
}, },
@ -760,7 +781,7 @@ $.fn.sidebar = function(parameters) {
} }
else { else {
if(instance !== undefined) { if(instance !== undefined) {
module.destroy();
module.invoke('destroy');
} }
module.initialize(); module.initialize();
} }
@ -800,7 +821,7 @@ $.fn.sidebar.settings = {
}, },
context : 'body', context : 'body',
exclusive : true,
exclusive : false,
dimPage : true, dimPage : true,
scrollLock : false, scrollLock : false,

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

@ -29,11 +29,10 @@
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
visibility: hidden;
backface-visibility: hidden; backface-visibility: hidden;
transition: none; transition: none;
will-change: transform; will-change: transform;
backface-visibility: hidden;
visibility: hidden;
height: 100% !important; height: 100% !important;
border-radius: 0em !important; border-radius: 0em !important;
@ -55,19 +54,28 @@
overflow-y: visible !important; overflow-y: visible !important;
} }
.ui.left.sidebar {
right: auto;
left: 0px;
transform: translate3d(-100%, 0, 0);
}
.ui.top.sidebar { .ui.top.sidebar {
top: 0px !important; top: 0px !important;
bottom: auto !important; bottom: auto !important;
transform: translate3d(0, -100%, 0);
} }
.ui.right.sidebar { .ui.right.sidebar {
right: 0px !important; right: 0px !important;
left: auto !important; left: auto !important;
transform: translate3d(0, 100%, 0);
} }
.ui.bottom.sidebar { .ui.bottom.sidebar {
top: auto !important; top: auto !important;
bottom: 0px !important; bottom: 0px !important;
transform: translate3d(0, 100%, 0);
} }
@ -116,7 +124,6 @@
.pushable > .pusher:after { .pushable > .pusher:after {
position: fixed; position: fixed;
position: absolute;
top: 0px; top: 0px;
right: 0px; right: 0px;
content: ''; content: '';
@ -145,9 +152,6 @@
Pushed Pushed
---------------*/ ---------------*/
.pushable.pushed {
overflow-x: hidden;
}
.pushable.pushed > .pusher:after { .pushable.pushed > .pusher:after {
z-index: @dimmerLayer; z-index: @dimmerLayer;
@ -224,7 +228,8 @@
transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);
} }
/* Pushed */ /* Pushed */
.pushable.pushed .ui.visible.left.overlay.sidebar {
.pushable.pushed .ui.inward.left.overlay.sidebar,
.pushable.pushed .ui.active.left.overlay.sidebar {
transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0);
} }
@ -235,7 +240,8 @@
transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);
} }
/* Pushed */ /* Pushed */
.pushable.pushed .ui.visible.right.overlay.sidebar {
.pushable.pushed .ui.inward.right.overlay.sidebar,
.pushable.pushed .ui.active.right.overlay.sidebar {
transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0);
} }
@ -246,7 +252,8 @@
transform: translate3d(0%, -100%, 0); transform: translate3d(0%, -100%, 0);
} }
/* Pushed */ /* Pushed */
.pushable.pushed .ui.visible.top.overlay.sidebar {
.pushable.pushed .ui.inward.top.overlay.sidebar,
.pushable.pushed .ui.active.top.overlay.sidebar {
transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0);
} }
@ -257,7 +264,8 @@
transform: translate3d(0%, 100%, 0); transform: translate3d(0%, 100%, 0);
} }
/* Pushed */ /* Pushed */
.pushable.pushed .ui.visible.bottom.overlay.sidebar {
.pushable.pushed .ui.inward.bottom.overlay.sidebar,
.pushable.pushed .ui.active.bottom.overlay.sidebar {
transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0);
} }
@ -265,67 +273,59 @@
Push Push
---------------*/ ---------------*/
/* Set-Up */
/* Initial */
.pushable > .ui.push.sidebar { .pushable > .ui.push.sidebar {
transition: transform @duration @easing; transition: transform @duration @easing;
z-index: @topLayer; z-index: @topLayer;
} }
.pushable > .ui.left.push.sidebar {
transform: translate3d(-100%, 0, 0);
}
.pushable > .ui.right.push.sidebar {
transform: translate3d(100%, 0, 0);
}
/* Animating */
.pushable > .ui.visible.push.sidebar ~ .pusher, .pushable > .ui.visible.push.sidebar ~ .pusher,
.pushable > .ui.visible.push.sidebar ~ .pusher { .pushable > .ui.visible.push.sidebar ~ .pusher {
transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0);
} }
/*--- Left ---*/
/* Set-Up */
.pushable > .ui.left.push.sidebar {
transform: translate3d(-100%, 0, 0);
}
/* Pushed */
.pushable.pushed > .visible.ui.left.push.sidebar {
/* Inward */
.pushable.pushed > .inward.ui.push.sidebar,
.pushable.pushed > .active.ui.push.sidebar {
transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0);
} }
/* Visible */
.pushable.pushed > .visible.ui.left.push.sidebar ~ .fixed, .pushable.pushed > .visible.ui.left.push.sidebar ~ .fixed,
.pushable.pushed > .visible.ui.left.push.sidebar ~ .pusher { .pushable.pushed > .visible.ui.left.push.sidebar ~ .pusher {
transform: translate3d(@sidebarWidth, 0, 0); transform: translate3d(@sidebarWidth, 0, 0);
} }
/*--- Right ---*/
/* Set-Up */
.pushable > .ui.right.push.sidebar {
transform: translate3d(100%, 0, 0);
}
/* Pushed */
.pushable.pushed > .visible.ui.right.push.sidebar {
transform: translate3d(0%, 0, 0);
}
.pushable.pushed > .visible.ui.right.push.sidebar ~ .fixed, .pushable.pushed > .visible.ui.right.push.sidebar ~ .fixed,
.pushable.pushed > .visible.ui.right.push.sidebar ~ .pusher { .pushable.pushed > .visible.ui.right.push.sidebar ~ .pusher {
transform: translate3d(-@sidebarWidth, 0, 0); transform: translate3d(-@sidebarWidth, 0, 0);
} }
/*-------------- /*--------------
Uncover Uncover
---------------*/ ---------------*/
/* Set-Up */
.pushable > .ui.uncover.sidebar {
/* Initial */
.ui.left.uncover.sidebar,
.ui.right.uncover.sidebar,
.ui.top.uncover.sidebar,
.ui.bottom.uncover.sidebar {
transform: translate3d(0, 0, 0);
transition: transform @duration @easing; transition: transform @duration @easing;
transform: translate3d(0px, 0, 0);
z-index: @bottomLayer;
} }
/*--- Left ---*/
/* Pushed */
/* Visible */
.pushable.pushed > .visible.ui.left.uncover.sidebar ~ .fixed, .pushable.pushed > .visible.ui.left.uncover.sidebar ~ .fixed,
.pushable.pushed > .visible.ui.left.uncover.sidebar ~ .pusher { .pushable.pushed > .visible.ui.left.uncover.sidebar ~ .pusher {
transform: translate3d(@sidebarWidth, 0, 0); transform: translate3d(@sidebarWidth, 0, 0);
} }
/*--- Right ---*/
/* Set-Up */
.pushable.pushed > .visible.ui.right.uncover.sidebar ~ .fixed, .pushable.pushed > .visible.ui.right.uncover.sidebar ~ .fixed,
.pushable.pushed > .visible.ui.right.uncover.sidebar ~ .pusher { .pushable.pushed > .visible.ui.right.uncover.sidebar ~ .pusher {
transform: translate3d(-@sidebarWidth, 0, 0); transform: translate3d(-@sidebarWidth, 0, 0);
@ -341,8 +341,8 @@
transition: transform @duration @easing; transition: transform @duration @easing;
z-index: @bottomLayer; z-index: @bottomLayer;
} }
.pushable > .ui.slide.along.sidebar.inward ~ .pusher,
.pushable > .ui.slide.along.sidebar.outward ~ .pusher {
.pushable > .ui.slide.along.sidebar ~ .pusher,
.pushable > .ui.slide.along.sidebar ~ .pusher {
transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0);
} }

2
src/themes/default/collections/grid.variables
View File

@ -20,8 +20,6 @@
@rowSpacing: 2rem; @rowSpacing: 2rem;
@tableWidth: ~"calc(100% + "@gutterWidth~")"; @tableWidth: ~"calc(100% + "@gutterWidth~")";
@relaxedTableWidth: ~"calc(100% + "@relaxedGutterWidth~")";
@veryRelaxedTableWidth: ~"calc(100% + "@veryRelaxedGutterWidth~")";
@columnMaxImageWidth: 100%; @columnMaxImageWidth: 100%;

2
src/themes/default/globals/site.variables
View File

@ -115,7 +115,7 @@
--------------------*/ --------------------*/
@loaderSpeed: 0.6s; @loaderSpeed: 0.6s;
@loaderLineWidth: 0.3em;
@loaderLineWidth: 0.2em;
@loaderFillColor: rgba(0, 0, 0, 0.1); @loaderFillColor: rgba(0, 0, 0, 0.1);
@loaderLineColor: @darkGrey; @loaderLineColor: @darkGrey;
@invertedLoaderFillColor: rgba(255, 255, 255, 0.15); @invertedLoaderFillColor: rgba(255, 255, 255, 0.15);

Write Preview
Loading…
Cancel
Save