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

Nearingly done

pull/1243/head
jlukic 10 years ago
parent
7fec295c61
commit
28051f212a
3 changed files with 150 additions and 85 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 87
      src/definitions/modules/sidebar.js
  2. 146
      src/definitions/modules/sidebar.less
  3. 2
      src/themes/default/modules/sidebar.variables

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

@ -53,10 +53,10 @@ $.fn.sidebar = function(parameters) {
$module = $(this),
$context = $(settings.context),
$style = $('style[title=' + namespace + ']'),
$sidebars = $module.children(selector.sidebar),
$pusher = $context.children(selector.pusher),
$style,
element = this,
instance = $module.data(moduleNamespace),
@ -125,12 +125,13 @@ $.fn.sidebar = function(parameters) {
}
$(window)
.on('touchmove' + eventNamespace, module.event.scroll)
.on('scroll' + eventNamespace, module.event)
;
$context
.on('click' + eventNamespace, module.event.clickaway)
.on('touchend' + eventNamespace, module.event.clickaway)
;
if(settings.closable) {
$context
.on('click' + eventNamespace, module.event.clickaway)
.on('touchend' + eventNamespace, module.event.clickaway)
;
}
}
},
unbind: {
@ -145,10 +146,41 @@ $.fn.sidebar = function(parameters) {
}
},
add: {
bodyCSS: function(direction, distance) {
var
width = $module.outerWidth(),
height = $module.outerHeight(),
style = ''
+ '<style title="' + namespace + '">'
+ ' .ui.visible.left.sidebar ~ .fixed,'
+ ' .ui.visible.left.sidebar ~ .pusher {'
+ ' transform: translate3d('+ width + 'px, 0, 0);'
+ ' }'
+ ' .ui.visible.right.sidebar ~ .fixed,'
+ ' .ui.visible.right.sidebar ~ .pusher {'
+ ' transform: translate3d(-'+ width + 'px, 0, 0);'
+ ' }'
+ ' .ui.visible.top.sidebar ~ .fixed,'
+ ' .ui.visible.top.sidebar ~ .pusher {'
+ ' transform: translate3d(0, ' + height + 'px, 0);'
+ ' }'
+ ' .ui.visible.bottom.sidebar ~ .fixed,'
+ ' .ui.visible.bottom.sidebar ~ .pusher {'
+ ' transform: translate3d(0, -' + height + 'px, 0);'
+ ' }'
+ '</style>'
;
$head.append(style);
$style = $('style[title=' + namespace + ']');
console.log(style);
module.debug('Adding sizing css to head', $style);
}
},
refresh: function() {
module.verbose('Refreshing selector cache');
$context = $(settings.context);
$style = $('style[title=' + namespace + ']');
$sidebars = $context.children(selector.sidebar);
$pusher = $context.children(selector.pusher);
},
@ -157,6 +189,7 @@ $.fn.sidebar = function(parameters) {
module.verbose('Forcing repaint event');
element.style.display='none';
element.offsetHeight;
element.scrollTop = element.scrollTop;
element.style.display='';
},
@ -212,7 +245,7 @@ $.fn.sidebar = function(parameters) {
? callback
: function(){}
;
if(module.is.closed() || module.is.animating()) {
if(module.is.closed()) {
if(settings.overlay) {
module.error(error.overlay);
settings.transition = 'overlay';
@ -283,7 +316,7 @@ $.fn.sidebar = function(parameters) {
toggle: function() {
module.verbose('Determining toggled direction');
if(module.is.closed() || module.is.outward()) {
if(module.is.closed()) {
module.show();
}
else {
@ -307,18 +340,21 @@ $.fn.sidebar = function(parameters) {
: function(){}
;
if(settings.transition == 'scale down' || (module.is.mobile() && transition !== 'overlay')) {
//module.scrollToTop();
module.scrollToTop();
}
module.set.animating();
module.add.bodyCSS();
module.set.transition();
//module.repaint();
module.repaint();
animate = function() {
module.set.visible();
if(!module.othersActive()) {
if(settings.dimPage) {
$pusher.addClass(className.dimmed);
module.set.animating();
requestAnimationFrame(function() {
module.set.visible();
if(!module.othersActive()) {
if(settings.dimPage) {
$pusher.addClass(className.dimmed);
}
}
}
});
};
transitionEnd = function(event) {
if( event.target == $transition[0] ) {
@ -365,9 +401,9 @@ $.fn.sidebar = function(parameters) {
$transition.off(transitionEvent + eventNamespace, transitionEnd);
module.remove.animating();
module.remove.transition();
module.repaint();
module.remove.bodyCSS();
if(transition == 'scale down' || (settings.returnScroll && transition !== 'overlay' && module.is.mobile()) ) {
//module.scrollBack();
module.scrollBack();
}
$.proxy(callback, element)();
}
@ -454,6 +490,9 @@ $.fn.sidebar = function(parameters) {
},
// sidebar
active: function() {
$module.addClass(className.active);
},
animating: function() {
$module.addClass(className.animating);
},
@ -473,6 +512,15 @@ $.fn.sidebar = function(parameters) {
}
},
remove: {
bodyCSS: function() {
console.log($style);
module.debug('Removing body css styles', $style);
if($style.size() > 0) {
$style.remove();
}
},
// context
pushed: function() {
$context.removeClass(className.pushed);
@ -811,6 +859,7 @@ $.fn.sidebar.settings = {
context : 'body',
exclusive : false,
closable : true,
dimPage : true,
scrollLock : false,
returnScroll : true,

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

@ -33,15 +33,13 @@
backface-visibility: hidden;
transition: none;
will-change: transform;
transform: translate3d(0, 0, 0);
visibility: hidden;
height: 100% !important;
border-radius: 0em !important;
margin: 0em !important;
overflow-y: auto !important;
background: @sidebarBackground;
width: @sidebarWidth !important;
z-index: @topLayer;
}
@ -86,7 +84,7 @@
---------------*/
.pushable {
height: 100% !important;
height: 100%;
overflow-x: hidden;
background: @canvasBackground !important;
}
@ -200,6 +198,33 @@
}
/*--------------
Sizes
---------------*/
.ui.sidebar {
width: @sidebarWidth !important;
}
/* Sizes */
.ui.visible.left.sidebar ~ .fixed,
.ui.visible.left.sidebar ~ .pusher {
transform: translate3d(@sidebarWidth, 0, 0);
}
.ui.visible.right.sidebar ~ .fixed,
.ui.visible.right.sidebar ~ .pusher {
transform: translate3d(-@sidebarWidth, 0, 0);
}
.ui.visible.top.sidebar ~ .fixed,
.ui.visible.top.sidebar ~ .pusher {
transform: translate3d(0, @sidebarHeight, 0);
}
.ui.visible.bottom.sidebar ~ .pusher {
transform: translate3d(0, -@sidebarHeight, 0);
}
/*******************************
Animations
*******************************/
@ -210,23 +235,23 @@
/* Set-up */
.ui.overlay.sidebar {
transition: transform @duration @easing;
z-index: @topLayer;
}
/* Animation */
.animating.ui.overlay.sidebar,
.ui.visible.overlay.sidebar {
z-index: @topLayer;
transition: transform @duration @easing;
}
/*--- Left ---*/
/* Set-up */
.ui.left.overlay.sidebar {
transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0%, 0);
}
.ui.right.overlay.sidebar {
transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0%, 0);
}
.ui.top.overlay.sidebar {
transform: translate3d(0%, -100%, 0);
@ -237,10 +262,10 @@
/* End */
.ui.visible.left.overlay.sidebar {
transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0%, 0);
}
.ui.visible.right.overlay.sidebar {
transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0%, 0);
}
.ui.visible.top.overlay.sidebar {
transform: translate3d(0%, 0%, 0);
@ -249,6 +274,12 @@
transform: translate3d(0%, 0%, 0);
}
.ui.visible.overlay.sidebar ~ .fixed,
.ui.visible.overlay.sidebar ~ .pusher {
transform: translate3d(0, 0, 0) !important;
}
/*--------------
Push
@ -259,29 +290,24 @@
transition: transform @duration @easing;
z-index: @topLayer;
}
.ui.left.push.sidebar {
transform: translate3d(-100%, 0, 0);
}
.ui.right.push.sidebar {
transform: translate3d(100%, 0, 0);
}
.ui.visible.push.sidebar ~ .fixed,
.ui.visible.push.sidebar ~ .pusher {
transform: translate3d(0px, 0, 0);
.ui.top.push.sidebar {
transform: translate3d(0%, -100%, 0);
}
.ui.bottom.push.sidebar {
transform: translate3d(0%, 100%, 0);
}
/* End */
.ui.visible.push.sidebar {
transform: translate3d(0%, 0, 0);
}
.ui.visible.left.push.sidebar ~ .fixed,
.ui.visible.left.push.sidebar ~ .pusher {
transform: translate3d(@sidebarWidth, 0, 0);
}
.ui.visible.right.push.sidebar ~ .fixed,
.ui.visible.right.push.sidebar ~ .pusher {
transform: translate3d(-@sidebarWidth, 0, 0);
}
/*--------------
@ -295,19 +321,10 @@
}
/* End */
.ui.visible.uncover.sidebar,
.ui.visible.uncover.sidebar {
transform: translate3d(0, 0, 0);
transition: transform @duration @easing;
}
.ui.visible.left.uncover.sidebar ~ .fixed,
.ui.visible.left.uncover.sidebar ~ .pusher {
transform: translate3d(@sidebarWidth, 0, 0);
}
.ui.visible.right.uncover.sidebar ~ .fixed,
.ui.visible.right.uncover.sidebar ~ .pusher {
transform: translate3d(-@sidebarWidth, 0, 0);
}
/*--------------
@ -325,24 +342,17 @@
.ui.right.slide.along.sidebar {
transform: translate3d(50%, 0, 0);
}
.ui.top.slide.along.sidebar {
transform: translate3d(0, -50%, 0);
}
.ui.bottom.slide.along.sidebar {
transform: translate3d(0%, 50%, 0);
}
/* End */
.ui.visible.slide.along.sidebar {
transform: translate3d(0%, 0, 0);
}
.ui.visible.slide.along.sidebar ~ .pusher,
.ui.visible.slide.along.sidebar ~ .pusher {
transform: translate3d(0px, 0, 0);
}
.ui.visible.left.slide.along.sidebar ~ .fixed,
.ui.visible.left.slide.along.sidebar ~ .pusher {
transform: translate3d(@sidebarWidth, 0, 0);
}
.ui.visible.right.slide.along.sidebar ~ .fixed,
.ui.visible.right.slide.along.sidebar ~ .pusher {
transform: translate3d(-@sidebarWidth, 0, 0);
}
/*--------------
@ -351,45 +361,55 @@
/* Initial */
.ui.slide.out.sidebar {
transition: transform @duration @easing;
z-index: @bottomLayer;
}
.ui.left.slide.out.sidebar {
transform: translate3d(100%, 0, 0);
transform: translate3d(50%, 0, 0);
}
.ui.right.slide.out.sidebar {
transform: translate3d(-50%, 0, 0);
}
.ui.top.slide.out.sidebar {
transform: translate3d(0%, 50%, 0);
}
.ui.bottom.slide.out.sidebar {
transform: translate3d(0%, -50%, 0);
}
/* Animation */
.ui.animating.slide.out.sidebar {
transition: transform @duration @easing;
}
/* End */
.ui.visible.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);
}
.ui.visible.right.slide.out.sidebar ~ .fixed,
.ui.visible.right.slide.out.sidebar ~ .pusher {
transform: translate3d(-@sidebarWidth, 0, 0);
}
/*--------------
Scale Down
---------------*/
/* Initial */
/* 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%;
width: 100%;
height: 100%;
overflow: hidden;
}
.ui.scale.down.left.sidebar ~ .pusher,
.ui.scale.down.right.sidebar ~ .pusher {
transform-origin: 75% 50%;
}
.ui.scale.down.top.sidebar ~ .pusher,
.ui.scale.down.bottom.sidebar ~ .pusher {
transform-origin: 50% 50%;
}
/* Animation */
.pushable.scale.down.animating > .visible.ui.sidebar {
transition: transform @duration @easing;
}
/* Pushed */
.ui.visible.scale.down.sidebar {
@ -397,8 +417,4 @@
}
.ui.visible.scale.down.sidebar ~ .pusher {
transform: scale(0.75);
}
.ui.visible.scale.down.sidebar ~ .fixed {
transform: translate3d(@sidebarWidth, 0, 0);
}
}

2
src/themes/default/modules/sidebar.variables
View File

@ -3,7 +3,7 @@
*******************************/
@sidebarWidth: 260px;
@sidebarBackground: @black;
@sidebarHeight: 50px;
@dimmerColor: rgba(0, 0, 0, 0.4);

Write Preview
Loading…
Cancel
Save