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

Adds new sidebar types, variations, and proper animation queuing

pull/2229/head
jlukic 11 years ago
parent
fe3eb9c994
commit
f97ef3c7f4
2 changed files with 176 additions and 48 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 67
      src/modules/sidebar.js
  2. 157
      src/modules/sidebar.less

67
src/modules/sidebar.js
View File

@ -13,15 +13,18 @@
$.fn.sidebar = function(parameters) {
var
$allModules = $(this),
moduleSelector = $allModules.selector || '',
$allModules = $(this),
$body = $('body'),
$head = $('head'),
time = new Date().getTime(),
performance = [],
moduleSelector = $allModules.selector || '',
query = arguments[0],
methodInvoked = (typeof query == 'string'),
queryArguments = [].slice.call(arguments, 1),
time = new Date().getTime(),
performance = [],
query = arguments[0],
methodInvoked = (typeof query == 'string'),
queryArguments = [].slice.call(arguments, 1),
returnedValue
;
@ -40,14 +43,11 @@ $.fn.sidebar = function(parameters) {
eventNamespace = '.' + namespace,
moduleNamespace = 'module-' + namespace,
$module = $(this),
$body = $('body'),
$head = $('head'),
$style = $('style[title=' + namespace + ']'),
$module = $(this),
$style = $('style[title=' + namespace + ']'),
element = this,
instance = $module.data(moduleNamespace),
element = this,
instance = $module.data(moduleNamespace),
module
;
@ -99,30 +99,54 @@ $.fn.sidebar = function(parameters) {
}
},
show: function() {
module.debug('Showing sidebar');
show: function(callback) {
callback = $.isFunction(callback)
? callback
: function(){}
;
module.debug('Showing sidebar', callback);
if(module.is.closed()) {
if(!settings.overlay) {
if(settings.exclusive) {
module.hideAll();
}
module.pushPage();
}
module.set.active();
callback();
$.proxy(settings.onChange, element)();
$.proxy(settings.onShow, element)();
}
else {
module.debug('Sidebar is already visible');
}
},
hide: function() {
hide: function(callback) {
callback = $.isFunction(callback)
? callback
: function(){}
;
module.debug('Hiding sidebar', callback);
if(module.is.open()) {
if(!settings.overlay) {
module.pullPage();
module.remove.pushed();
}
module.remove.active();
callback();
$.proxy(settings.onChange, element)();
$.proxy(settings.onHide, element)();
}
},
hideAll: function() {
$(selector.sidebar)
.filter(':visible')
.sidebar('hide')
;
},
toggle: function() {
if(module.is.closed()) {
module.show();
@ -458,11 +482,10 @@ $.fn.sidebar.settings = {
performance : true,
useCSS : true,
exclusive : true,
overlay : false,
duration : 300,
side : 'left',
onChange : function(){},
onShow : function(){},
onHide : function(){},
@ -476,6 +499,10 @@ $.fn.sidebar.settings = {
bottom : 'bottom'
},
selector: {
sidebar: '.ui.sidebar'
},
error : {
method : 'The method you called is not defined.',
notFound : 'There were no elements that matched the specified selector'

157
src/modules/sidebar.less
View File

@ -40,13 +40,17 @@ body {
margin: 0 !important;
width: 275px !important;
height: 100% !important;
-webkit-border-radius: 0px !important;
-moz-border-radius: 0px !important;
border-radius: 0px !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-ms-overflow-y: auto;
overflow-y: auto;
top: 0px;
@ -77,12 +81,13 @@ body {
/*******************************
Types
Types
*******************************/
.ui.sidebar {
margin-left: -275px !important;
}
/*-------------------
Direction
--------------------*/
.ui.right.sidebar {
left: 100%;
@ -90,14 +95,11 @@ body {
}
.ui.top.sidebar {
margin: -40px 0px 0px 0px !important;
width: 100% !important;
height: 40px !important;
}
.ui.bottom.sidebar {
width: 100% !important;
height: 40px !important;
top: 100%;
margin: 0px !important;
}
@ -110,41 +112,140 @@ body {
.ui.active.sidebar {
margin-left: 0px !important;
}
.ui.active.right.sidebar {
margin-left: -275px !important;
}
.ui.active.top.sidebar {
margin-top: 0px !important;
}
.ui.active.top.sidebar,
.ui.active.bottom.sidebar {
margin-top: -40px !important;
margin-top: 0px !important;
}
/*******************************
Variations
*******************************/
/*-------------------
Formatted
--------------------*/
.ui.styled.sidebar {
padding: 1em 1.5em;
background-color: #FFFFFF;
box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1);
}
.ui.styled.very.thin.sidebar {
padding: 0.5em;
}
.ui.styled.thin.sidebar {
padding: 1em;
}
/*-------------------
Floating
--------------------*/
.ui.floating.sidebar {
-webkit-box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2);
box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.2);
box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.2);
}
.ui.right.floating.sidebar {
-webkit-box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2);
box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: -2px 0px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -2px 0px 2px rgba(0, 0, 0, 0.2);
box-shadow: -2px 0px 2px rgba(0, 0, 0, 0.2);
}
.ui.top.floating.sidebar {
-webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
}
.ui.bottom.floating.sidebar {
-webkit-box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.2);
}
/*-------------------
Width
--------------------*/
/* Very Thin */
.ui.very.thin.sidebar {
width: 60px !important;
margin-left: -60px !important;
}
.ui.active.very.thin.sidebar {
margin-left: 0px !important;
}
.ui.active.right.very.thin.sidebar {
margin-left: -60px !important;
}
/* Thin */
.ui.thin.sidebar {
width: 200px !important;
margin-left: -200px !important;
}
.ui.active.thin.sidebar {
margin-left: 0px !important;
}
.ui.active.right.thin.sidebar {
margin-left: -200px !important;
}
/* Standard */
.ui.sidebar {
width: 275px !important;
margin-left: -275px !important;
}
.ui.active.sidebar {
margin-left: 0px !important;
}
.ui.active.right.sidebar {
margin-left: -275px !important;
}
/* Wide */
.ui.wide.sidebar {
width: 350px !important;
margin-left: -350px !important;
}
.ui.active.wide.sidebar {
margin-left: 0px !important;
}
.ui.active.right.wide.sidebar {
margin-left: -350px !important;
}
/* Very Wide */
.ui.very.wide.sidebar {
width: 475px !important;
margin-left: -475px !important;
}
.ui.active.very.wide.sidebar {
margin-left: 0px !important;
}
.ui.active.right.very.wide.sidebar {
margin-left: -475px !important;
}
/*-------------------
Height
--------------------*/
/* Standard */
.ui.top.sidebar {
margin: -40px 0px 0px 0px !important;
}
.ui.top.sidebar,
.ui.bottom.sidebar {
height: 40px !important;
}
.ui.active.bottom.sidebar {
margin-top: -40px !important;
}
Write Preview
Loading…
Cancel
Save