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 first draft of sidebar (blind coded) 

Former-commit-id: f9f48785a3
Former-commit-id: ebfbeeba46
pull/258/head
Jack Lukic 11 years ago
parent
8b26d36d9f
commit
242f6617dd
9 changed files with 2237 additions and 0 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 341
      build/minified/modules/sidebar.js
  2. 341
      build/packaged/modules/sidebar.js
  3. 102
      build/uncompressed/modules/sidebar.css
  4. 341
      build/uncompressed/modules/sidebar.js
  5. 204
      node/src/documents/modules/sidebar.html
  6. 102
      node/src/files/components/semantic/modules/sidebar.css
  7. 341
      node/src/files/components/semantic/modules/sidebar.js
  8. 341
      src/modules/sidebar.js
  9. 124
      src/modules/sidebar.less

341
build/minified/modules/sidebar.js
View File

@ -0,0 +1,341 @@
/* ******************************
Semantic Module: Dropdown
Author: Jack Lukic
Notes: First Commit May 25, 2013
****************************** */
;(function ( $, window, document, undefined ) {
$.fn.sidebar = function(parameters) {
var
$allModules = $(this),
settings = ( $.isPlainObject(parameters) )
? $.extend(true, {}, $.fn.sidebar.settings, parameters)
: $.fn.sidebar.settings,
className = settings.className,
namespace = settings.namespace,
error = settings.error,
eventNamespace = '.' + namespace,
moduleNamespace = 'module-' + namespace,
moduleSelector = $allModules.selector || '',
time = new Date().getTime(),
performance = [],
query = arguments[0],
methodInvoked = (typeof query == 'string'),
queryArguments = [].slice.call(arguments, 1),
invokedResponse
;
$allModules
.each(function() {
var
$body = $('body'),
$module = $(this),
element = this,
instance = $module.data(moduleNamespace),
module
;
module = {
initialize: function() {
module.debug('Initializing sidebar', $module);
module.instantiate();
},
instantiate: function() {
module.verbose('Storing instance of module', module);
$module
.data(moduleNamespace, module)
;
},
destroy: function() {
module.verbose('Destroying previous module for', $module);
$module
.off(namespace)
.removeData(moduleNamespace)
;
},
attach: {
events: function(selector, event) {
var
$toggle = $(selector)
;
event = $.isFunction(module[event])
? module[event]
: module.toggle
;
if($toggle.size() > 0) {
module.debug('Attaching sidebar events to element', selector, event);
$toggle
.on('click' + eventNamespace, event)
;
}
else {
module.error(error.notFound);
}
}
},
show: function() {
if(module.is.closed()) {
module.debug('Showing sidebar');
$body
.animate(module.get.bodyCSS(), settings.duration, settings.onShow)
;
$module
.addClass(className.open)
;
}
},
hide: function() {
if(module.is.open()) {
$module
.removeClass(className.open)
;
}
},
toggle: function() {
if(module.is.open()) {
module.close();
}
else {
module.open();
}
},
get: {
bodyCSS: function() {
}
},
is: {
open: function() {
return $module.is(':visible');
},
closed: function() {
return $module.is(':not(:visible)');
}
},
setting: function(name, value) {
if(value !== undefined) {
if( $.isPlainObject(name) ) {
$.extend(true, settings, name);
}
else {
settings[name] = value;
}
}
else {
return settings[name];
}
},
internal: function(name, value) {
if(value !== undefined) {
if( $.isPlainObject(name) ) {
$.extend(true, module, name);
}
else {
module[name] = value;
}
}
else {
return module[name];
}
},
debug: function() {
if(settings.debug) {
if(settings.performance) {
module.performance.log(arguments);
}
else {
module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
module.debug.apply(console, arguments);
}
}
},
verbose: function() {
if(settings.verbose && settings.debug) {
if(settings.performance) {
module.performance.log(arguments);
}
else {
module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
module.verbose.apply(console, arguments);
}
}
},
error: function() {
module.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':');
module.error.apply(console, arguments);
},
performance: {
log: function(message) {
var
currentTime,
executionTime,
previousTime
;
if(settings.performance) {
currentTime = new Date().getTime();
previousTime = time || currentTime;
executionTime = currentTime - previousTime;
time = currentTime;
performance.push({
'Element' : element,
'Name' : message[0],
'Arguments' : [].slice.call(message, 1) || '',
'Execution Time' : executionTime
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
},
display: function() {
var
title = settings.moduleName + ':',
totalTime = 0
;
time = false;
clearTimeout(module.performance.timer);
$.each(performance, function(index, data) {
totalTime += data['Execution Time'];
});
title += ' ' + totalTime + 'ms';
if(moduleSelector) {
title += ' \'' + moduleSelector + '\'';
}
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
console.groupCollapsed(title);
if(console.table) {
console.table(performance);
}
else {
$.each(performance, function(index, data) {
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
});
}
console.groupEnd();
}
performance = [];
}
},
invoke: function(query, passedArguments, context) {
var
maxDepth,
found,
response
;
passedArguments = passedArguments || queryArguments;
context = element || context;
if(typeof query == 'string' && instance !== undefined) {
query = query.split(/[\. ]/);
maxDepth = query.length - 1;
$.each(query, function(depth, value) {
var camelCaseValue = (depth != maxDepth)
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
: query
;
if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) {
instance = instance[value];
}
else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) {
instance = instance[camelCaseValue];
}
else if( instance[value] !== undefined ) {
found = instance[value];
return false;
}
else if( instance[camelCaseValue] !== undefined ) {
found = instance[camelCaseValue];
return false;
}
else {
module.error(error.method);
return false;
}
});
}
if ( $.isFunction( found ) ) {
response = found.apply(context, passedArguments);
}
else if(found !== undefined) {
response = found;
}
if($.isArray(invokedResponse)) {
invokedResponse.push(response);
}
else if(typeof invokedResponse == 'string') {
invokedResponse = [invokedResponse, response];
}
else if(response !== undefined) {
invokedResponse = response;
}
return found;
}
};
if(methodInvoked) {
if(instance === undefined) {
module.initialize();
}
module.invoke(query);
}
else {
if(instance !== undefined) {
module.destroy();
}
module.initialize();
}
})
;
return (invokedResponse !== undefined)
? invokedResponse
: this
;
};
$.fn.sidebar.settings = {
moduleName : 'Sidebar',
namespace : 'sidebar',
verbose : true,
debug : true,
performance : true,
side : 'left',
duration : 500,
onChange : function(){},
onShow : function(){},
onHide : function(){},
className: {
open: 'active'
},
error : {
method : 'The method you called is not defined.',
notFound : 'There were no elements that matched the specified selector'
}
};
})( jQuery, window , document );

341
build/packaged/modules/sidebar.js
View File

@ -0,0 +1,341 @@
/* ******************************
Semantic Module: Dropdown
Author: Jack Lukic
Notes: First Commit May 25, 2013
****************************** */
;(function ( $, window, document, undefined ) {
$.fn.sidebar = function(parameters) {
var
$allModules = $(this),
settings = ( $.isPlainObject(parameters) )
? $.extend(true, {}, $.fn.sidebar.settings, parameters)
: $.fn.sidebar.settings,
className = settings.className,
namespace = settings.namespace,
error = settings.error,
eventNamespace = '.' + namespace,
moduleNamespace = 'module-' + namespace,
moduleSelector = $allModules.selector || '',
time = new Date().getTime(),
performance = [],
query = arguments[0],
methodInvoked = (typeof query == 'string'),
queryArguments = [].slice.call(arguments, 1),
invokedResponse
;
$allModules
.each(function() {
var
$body = $('body'),
$module = $(this),
element = this,
instance = $module.data(moduleNamespace),
module
;
module = {
initialize: function() {
module.debug('Initializing sidebar', $module);
module.instantiate();
},
instantiate: function() {
module.verbose('Storing instance of module', module);
$module
.data(moduleNamespace, module)
;
},
destroy: function() {
module.verbose('Destroying previous module for', $module);
$module
.off(namespace)
.removeData(moduleNamespace)
;
},
attach: {
events: function(selector, event) {
var
$toggle = $(selector)
;
event = $.isFunction(module[event])
? module[event]
: module.toggle
;
if($toggle.size() > 0) {
module.debug('Attaching sidebar events to element', selector, event);
$toggle
.on('click' + eventNamespace, event)
;
}
else {
module.error(error.notFound);
}
}
},
show: function() {
if(module.is.closed()) {
module.debug('Showing sidebar');
$body
.animate(module.get.bodyCSS(), settings.duration, settings.onShow)
;
$module
.addClass(className.open)
;
}
},
hide: function() {
if(module.is.open()) {
$module
.removeClass(className.open)
;
}
},
toggle: function() {
if(module.is.open()) {
module.close();
}
else {
module.open();
}
},
get: {
bodyCSS: function() {
}
},
is: {
open: function() {
return $module.is(':visible');
},
closed: function() {
return $module.is(':not(:visible)');
}
},
setting: function(name, value) {
if(value !== undefined) {
if( $.isPlainObject(name) ) {
$.extend(true, settings, name);
}
else {
settings[name] = value;
}
}
else {
return settings[name];
}
},
internal: function(name, value) {
if(value !== undefined) {
if( $.isPlainObject(name) ) {
$.extend(true, module, name);
}
else {
module[name] = value;
}
}
else {
return module[name];
}
},
debug: function() {
if(settings.debug) {
if(settings.performance) {
module.performance.log(arguments);
}
else {
module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
module.debug.apply(console, arguments);
}
}
},
verbose: function() {
if(settings.verbose && settings.debug) {
if(settings.performance) {
module.performance.log(arguments);
}
else {
module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
module.verbose.apply(console, arguments);
}
}
},
error: function() {
module.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':');
module.error.apply(console, arguments);
},
performance: {
log: function(message) {
var
currentTime,
executionTime,
previousTime
;
if(settings.performance) {
currentTime = new Date().getTime();
previousTime = time || currentTime;
executionTime = currentTime - previousTime;
time = currentTime;
performance.push({
'Element' : element,
'Name' : message[0],
'Arguments' : [].slice.call(message, 1) || '',
'Execution Time' : executionTime
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
},
display: function() {
var
title = settings.moduleName + ':',
totalTime = 0
;
time = false;
clearTimeout(module.performance.timer);
$.each(performance, function(index, data) {
totalTime += data['Execution Time'];
});
title += ' ' + totalTime + 'ms';
if(moduleSelector) {
title += ' \'' + moduleSelector + '\'';
}
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
console.groupCollapsed(title);
if(console.table) {
console.table(performance);
}
else {
$.each(performance, function(index, data) {
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
});
}
console.groupEnd();
}
performance = [];
}
},
invoke: function(query, passedArguments, context) {
var
maxDepth,
found,
response
;
passedArguments = passedArguments || queryArguments;
context = element || context;
if(typeof query == 'string' && instance !== undefined) {
query = query.split(/[\. ]/);
maxDepth = query.length - 1;
$.each(query, function(depth, value) {
var camelCaseValue = (depth != maxDepth)
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
: query
;
if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) {
instance = instance[value];
}
else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) {
instance = instance[camelCaseValue];
}
else if( instance[value] !== undefined ) {
found = instance[value];
return false;
}
else if( instance[camelCaseValue] !== undefined ) {
found = instance[camelCaseValue];
return false;
}
else {
module.error(error.method);
return false;
}
});
}
if ( $.isFunction( found ) ) {
response = found.apply(context, passedArguments);
}
else if(found !== undefined) {
response = found;
}
if($.isArray(invokedResponse)) {
invokedResponse.push(response);
}
else if(typeof invokedResponse == 'string') {
invokedResponse = [invokedResponse, response];
}
else if(response !== undefined) {
invokedResponse = response;
}
return found;
}
};
if(methodInvoked) {
if(instance === undefined) {
module.initialize();
}
module.invoke(query);
}
else {
if(instance !== undefined) {
module.destroy();
}
module.initialize();
}
})
;
return (invokedResponse !== undefined)
? invokedResponse
: this
;
};
$.fn.sidebar.settings = {
moduleName : 'Sidebar',
namespace : 'sidebar',
verbose : true,
debug : true,
performance : true,
side : 'left',
duration : 500,
onChange : function(){},
onShow : function(){},
onHide : function(){},
className: {
open: 'active'
},
error : {
method : 'The method you called is not defined.',
notFound : 'There were no elements that matched the specified selector'
}
};
})( jQuery, window , document );

102
build/uncompressed/modules/sidebar.css
View File

@ -0,0 +1,102 @@
/*******************************
Semantic Module: Sidebar
Author: Jack Lukic
Notes: First Commit March 25, 2013
Sidebar Menu System
*******************************/
/*******************************
Sidebar
*******************************/
.ui.sidebar {
position: fixed;
-webkit-transform: translateX(-275px);
-moz-transform: translateX(-275px);
-o-transform: translateX(-275px);
-ms-transform: translateX(-275px);
transform: translateX(-275px);
width: 275px;
height: 100%;
-ms-overflow-y: auto;
overflow-y: auto;
top: 0px;
left: 0px;
z-index: 900;
-webkit-transition: -webkit-transform 0.5s ease;
-moz-transition: -moz-transform 0.5s ease;
transition: transform 0.5s ease;
}
/*******************************
Types
*******************************/
.ui.right.sidebar {
left: auto;
right: 0px;
-webkit-transform: translateX(275px);
-moz-transform: translateX(275px);
-o-transform: translateX(275px);
-ms-transform: translateX(275px);
transform: translateX(275px);
}
.ui.top.sidebar {
width: 100%;
height: 40px;
overflow: hidden;
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-o-transform: translateY(-40px);
-ms-transform: translateY(-40px);
transform: translateY(-40px);
}
.ui.bottom.sidebar {
width: 100%;
height: 40px;
overflow: hidden;
top: auto;
bottom: 0px;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-o-transform: translateY(40px);
-ms-transform: translateY(40px);
transform: translateY(40px);
}
/*******************************
States
*******************************/
.ui.active.sidebar {
-webkit-transform: translateX(0deg);
-moz-transform: translateX(0deg);
-o-transform: translateX(0deg);
-ms-transform: translateX(0deg);
transform: translateX(0deg);
}
.ui.active.top.sidebar,
.ui.active.bottom.sidebar {
-webkit-transform: translateY(0deg);
-moz-transform: translateY(0deg);
-o-transform: translateY(0deg);
-ms-transform: translateY(0deg);
transform: translateY(0deg);
}
/*******************************
Variations
*******************************/
.ui.floating.sidebar {
-webkit-box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.2);
box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.2);
}
.ui.right.floating.sidebar {
-webkit-box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.2);
box-shadow: -5px 0px 5px 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);
}
.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);
}

341
build/uncompressed/modules/sidebar.js
View File

@ -0,0 +1,341 @@
/* ******************************
Semantic Module: Dropdown
Author: Jack Lukic
Notes: First Commit May 25, 2013
****************************** */
;(function ( $, window, document, undefined ) {
$.fn.sidebar = function(parameters) {
var
$allModules = $(this),
settings = ( $.isPlainObject(parameters) )
? $.extend(true, {}, $.fn.sidebar.settings, parameters)
: $.fn.sidebar.settings,
className = settings.className,
namespace = settings.namespace,
error = settings.error,
eventNamespace = '.' + namespace,
moduleNamespace = 'module-' + namespace,
moduleSelector = $allModules.selector || '',
time = new Date().getTime(),
performance = [],
query = arguments[0],
methodInvoked = (typeof query == 'string'),
queryArguments = [].slice.call(arguments, 1),
invokedResponse
;
$allModules
.each(function() {
var
$body = $('body'),
$module = $(this),
element = this,
instance = $module.data(moduleNamespace),
module
;
module = {
initialize: function() {
module.debug('Initializing sidebar', $module);
module.instantiate();
},
instantiate: function() {
module.verbose('Storing instance of module', module);
$module
.data(moduleNamespace, module)
;
},
destroy: function() {
module.verbose('Destroying previous module for', $module);
$module
.off(namespace)
.removeData(moduleNamespace)
;
},
attach: {
events: function(selector, event) {
var
$toggle = $(selector)
;
event = $.isFunction(module[event])
? module[event]
: module.toggle
;
if($toggle.size() > 0) {
module.debug('Attaching sidebar events to element', selector, event);
$toggle
.on('click' + eventNamespace, event)
;
}
else {
module.error(error.notFound);
}
}
},
show: function() {
if(module.is.closed()) {
module.debug('Showing sidebar');
$body
.animate(module.get.bodyCSS(), settings.duration, settings.onShow)
;
$module
.addClass(className.open)
;
}
},
hide: function() {
if(module.is.open()) {
$module
.removeClass(className.open)
;
}
},
toggle: function() {
if(module.is.open()) {
module.close();
}
else {
module.open();
}
},
get: {
bodyCSS: function() {
}
},
is: {
open: function() {
return $module.is(':visible');
},
closed: function() {
return $module.is(':not(:visible)');
}
},
setting: function(name, value) {
if(value !== undefined) {
if( $.isPlainObject(name) ) {
$.extend(true, settings, name);
}
else {
settings[name] = value;
}
}
else {
return settings[name];
}
},
internal: function(name, value) {
if(value !== undefined) {
if( $.isPlainObject(name) ) {
$.extend(true, module, name);
}
else {
module[name] = value;
}
}
else {
return module[name];
}
},
debug: function() {
if(settings.debug) {
if(settings.performance) {
module.performance.log(arguments);
}
else {
module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
module.debug.apply(console, arguments);
}
}
},
verbose: function() {
if(settings.verbose && settings.debug) {
if(settings.performance) {
module.performance.log(arguments);
}
else {
module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
module.verbose.apply(console, arguments);
}
}
},
error: function() {
module.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':');
module.error.apply(console, arguments);
},
performance: {
log: function(message) {
var
currentTime,
executionTime,
previousTime
;
if(settings.performance) {
currentTime = new Date().getTime();
previousTime = time || currentTime;
executionTime = currentTime - previousTime;
time = currentTime;
performance.push({
'Element' : element,
'Name' : message[0],
'Arguments' : [].slice.call(message, 1) || '',
'Execution Time' : executionTime
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
},
display: function() {
var
title = settings.moduleName + ':',
totalTime = 0
;
time = false;
clearTimeout(module.performance.timer);
$.each(performance, function(index, data) {
totalTime += data['Execution Time'];
});
title += ' ' + totalTime + 'ms';
if(moduleSelector) {
title += ' \'' + moduleSelector + '\'';
}
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
console.groupCollapsed(title);
if(console.table) {
console.table(performance);
}
else {
$.each(performance, function(index, data) {
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
});
}
console.groupEnd();
}
performance = [];
}
},
invoke: function(query, passedArguments, context) {
var
maxDepth,
found,
response
;
passedArguments = passedArguments || queryArguments;
context = element || context;
if(typeof query == 'string' && instance !== undefined) {
query = query.split(/[\. ]/);
maxDepth = query.length - 1;
$.each(query, function(depth, value) {
var camelCaseValue = (depth != maxDepth)
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
: query
;
if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) {
instance = instance[value];
}
else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) {
instance = instance[camelCaseValue];
}
else if( instance[value] !== undefined ) {
found = instance[value];
return false;
}
else if( instance[camelCaseValue] !== undefined ) {
found = instance[camelCaseValue];
return false;
}
else {
module.error(error.method);
return false;
}
});
}
if ( $.isFunction( found ) ) {
response = found.apply(context, passedArguments);
}
else if(found !== undefined) {
response = found;
}
if($.isArray(invokedResponse)) {
invokedResponse.push(response);
}
else if(typeof invokedResponse == 'string') {
invokedResponse = [invokedResponse, response];
}
else if(response !== undefined) {
invokedResponse = response;
}
return found;
}
};
if(methodInvoked) {
if(instance === undefined) {
module.initialize();
}
module.invoke(query);
}
else {
if(instance !== undefined) {
module.destroy();
}
module.initialize();
}
})
;
return (invokedResponse !== undefined)
? invokedResponse
: this
;
};
$.fn.sidebar.settings = {
moduleName : 'Sidebar',
namespace : 'sidebar',
verbose : true,
debug : true,
performance : true,
side : 'left',
duration : 500,
onChange : function(){},
onShow : function(){},
onHide : function(){},
className: {
open: 'active'
},
error : {
method : 'The method you called is not defined.',
notFound : 'There were no elements that matched the specified selector'
}
};
})( jQuery, window , document );

204
node/src/documents/modules/sidebar.html
View File

@ -0,0 +1,204 @@
---
layout : 'default'
css : 'sidebar'
title : 'Sidebar'
type : 'UI Module'
---
<script src="/components/semantic/modules/sidebar.js"></script>
<div class="segment">
<div class="container">
<h1 class="ui dividing header">Sidebar</h1>
<p>A sidebar is a menu hidden beside page content</p>
</div>
</div>
<div class="main container">
<div class="peek">
<div class="ui vertical pointing secondary menu">
<a class="active item">Initializing</a>
<a class="item">Usage</a>
<a class="item">Types</a>
<a class="item">Behavior</a>
<a class="item">Settings</a>
</div>
</div>
<div class="ui grid">
<div class="ten wide column">
<h2 class="ui header">Initializing</h2>
<p>Sidebars are initialized by calling sidebar on an element with class ui sidebar</p>
<div class="code" data-demo="true" data-title="Initializing a sidebar">
$('.ui.sidebar')
.sidebar()
;
</div>
<h3>Controlling a sidebar</h3>
<p>It may also be useful to set a dedicated button as controlling a sidebar. You can do this by calling a separate method</p>
<div class="code" data-demo="true" data-title="Initializing a sidebar">
$('.sidebar')
.sidebar('attach events', '.toggle.button')
;
</div>
<h3>Altering a sidebar width</h3>
<p>Altering the size of sidebar can be done by modifying sidebar.css</p>
<h2 class="ui dividing header">Usage</h2>
<p>If a sidebar is called without any arguments all default settings will be used.</p>
<h3 class="ui header">Visibility</h3>
<p>After the animation queue finishes for an element, its final visibility state is determined. If an animation is an outward sidebar, the final visibility status will be hidden. If an animation is inward the element will be visible after the animatino finishes.</p>
<div class="code" data-demo="true" data-title="Disapearing element">
$('.dog.image')
.sidebar('scale')
;
</div>
<h3 class="ui header">Static Animations</h3>
<p>Animations that do not have an in or out animation defined, will maintain their current visibility after running</p>
<div class="code" data-demo="true" data-title="Looping">
$('.dog.image')
.sidebar('pulse')
;
</div>
<h3 class="ui header">Sidebar Direction</h3>
<p>If an animation direction is not specified it will automatically be determined based on the elements current visibility. For example, if the element is visible the animation "fade out" will be called, if the animation is not visible "fade in".</p>
<div class="code" data-demo="true" data-title="Automatically choosing direction">
$('.dog.image')
// fade up out is used if available
.sidebar('fade up')
// this is now fade up in
.sidebar('fade up')
;
</div>
<div class="code" data-demo="true" data-title="Specifying a direction">
$('.dog.image')
// if a direction if specified it will be obeyed
.sidebar('horizontal flip in')
.sidebar('vertical flip in')
;
</div>
<h3 class="ui header">Passing in settings</h3>
<p>Sidebars use similar argument shorthand as <a href="http://api.jquery.com/animate/">animate</a>. You can specify callback functions, animation duration, and other settings using the same arguments. Durations can be specified as strings with css shorthand, or with numbers.</p>
<h3 class="ui header">Queuing animations</h3>
<p>Animations called in sequence will be queued. Any queued animation will automatically determine the sidebar direction if none is specified.</p>
<div class="code" data-demo="true" data-title="Queueing animations">
$('.dog.image')
.sidebar('horizontal flip', '500ms')
.sidebar('horizontal flip', 500, function() {
alert('done!');
})
;
</div>
<h2 class="ui dividing header">Types</h2>
<h3>Emphasis</h3>
<div class="example">
<h4 class="ui header">Flash</h4>
<p>An element can flash to draw attention to itself</p>
<div class="code" data-demo="true">
$('.dog.image')
.sidebar('flash')
;
</div>
</div>
<div class="example">
<h4 class="ui header">Shake</h4>
<p>An element can shake to draw attention to its position</p>
<div class="code" data-demo="true">
$('.dog.image')
.sidebar('shake')
;
</div>
</div>
<div class="example">
<h4 class="ui header">Tada</h4>
<p>An element can give user positive feedback for an action</p>
<div class="code" data-demo="true">
$('.dog.image')
.sidebar('tada')
;
</div>
</div>
<div class="example">
<h4 class="ui header">Bounce</h4>
<p>An element can bounce to politely remind you of itself</p>
<div class="code" data-demo="true">
$('.dog.image')
.sidebar('bounce')
;
</div>
</div>
<h3>Appearance</h3>
<div class="example">
<h4 class="ui header">Flip</h4>
<p>An element can flip into or out of view vertically or horizontally</p>
<div class="code" data-demo="true">
$('.dog.image')
.sidebar('horizontal flip')
.sidebar('vertical flip')
;
</div>
</div>
<div class="example">
<h4 class="ui header">Fade</h4>
<p>An element can fade into or out of view descending and ascending</p>
<div class="code" data-demo="true">
$('.dog.image')
.sidebar('fade')
.sidebar('fade up')
.sidebar('fade down')
;
</div>
</div>
<div class="example">
<h4 class="ui header">Scale</h4>
<p>An element can scale into or out of view</p>
<div class="code" data-demo="true">
$('.dog.image')
.sidebar('scale')
;
</div>
</div>
<div class="example">
<h4 class="ui header">Slide</h4>
<div class="code" data-demo="true">
$('.dog.image')
.sidebar('slide up')
.sidebar('slide down')
;
</div>
</div>
<h2 class="ui dividing header">Behavior</h2>
<h2 class="ui dividing header">Settings</h2>
</div>
<div class="five wide right floated fixed column">
<img src="/images/demo/vector.png" class="ui dog image">
</div>
</div>
</div>
</body>
</html>

102
node/src/files/components/semantic/modules/sidebar.css
View File

@ -0,0 +1,102 @@
/*******************************
Semantic Module: Sidebar
Author: Jack Lukic
Notes: First Commit March 25, 2013
Sidebar Menu System
*******************************/
/*******************************
Sidebar
*******************************/
.ui.sidebar {
position: fixed;
-webkit-transform: translateX(-275px);
-moz-transform: translateX(-275px);
-o-transform: translateX(-275px);
-ms-transform: translateX(-275px);
transform: translateX(-275px);
width: 275px;
height: 100%;
-ms-overflow-y: auto;
overflow-y: auto;
top: 0px;
left: 0px;
z-index: 900;
-webkit-transition: -webkit-transform 0.5s ease;
-moz-transition: -moz-transform 0.5s ease;
transition: transform 0.5s ease;
}
/*******************************
Types
*******************************/
.ui.right.sidebar {
left: auto;
right: 0px;
-webkit-transform: translateX(275px);
-moz-transform: translateX(275px);
-o-transform: translateX(275px);
-ms-transform: translateX(275px);
transform: translateX(275px);
}
.ui.top.sidebar {
width: 100%;
height: 40px;
overflow: hidden;
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-o-transform: translateY(-40px);
-ms-transform: translateY(-40px);
transform: translateY(-40px);
}
.ui.bottom.sidebar {
width: 100%;
height: 40px;
overflow: hidden;
top: auto;
bottom: 0px;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-o-transform: translateY(40px);
-ms-transform: translateY(40px);
transform: translateY(40px);
}
/*******************************
States
*******************************/
.ui.active.sidebar {
-webkit-transform: translateX(0deg);
-moz-transform: translateX(0deg);
-o-transform: translateX(0deg);
-ms-transform: translateX(0deg);
transform: translateX(0deg);
}
.ui.active.top.sidebar,
.ui.active.bottom.sidebar {
-webkit-transform: translateY(0deg);
-moz-transform: translateY(0deg);
-o-transform: translateY(0deg);
-ms-transform: translateY(0deg);
transform: translateY(0deg);
}
/*******************************
Variations
*******************************/
.ui.floating.sidebar {
-webkit-box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.2);
box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.2);
}
.ui.right.floating.sidebar {
-webkit-box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.2);
box-shadow: -5px 0px 5px 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);
}
.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);
}

341
node/src/files/components/semantic/modules/sidebar.js
View File

@ -0,0 +1,341 @@
/* ******************************
Semantic Module: Dropdown
Author: Jack Lukic
Notes: First Commit May 25, 2013
****************************** */
;(function ( $, window, document, undefined ) {
$.fn.sidebar = function(parameters) {
var
$allModules = $(this),
settings = ( $.isPlainObject(parameters) )
? $.extend(true, {}, $.fn.sidebar.settings, parameters)
: $.fn.sidebar.settings,
className = settings.className,
namespace = settings.namespace,
error = settings.error,
eventNamespace = '.' + namespace,
moduleNamespace = 'module-' + namespace,
moduleSelector = $allModules.selector || '',
time = new Date().getTime(),
performance = [],
query = arguments[0],
methodInvoked = (typeof query == 'string'),
queryArguments = [].slice.call(arguments, 1),
invokedResponse
;
$allModules
.each(function() {
var
$body = $('body'),
$module = $(this),
element = this,
instance = $module.data(moduleNamespace),
module
;
module = {
initialize: function() {
module.debug('Initializing sidebar', $module);
module.instantiate();
},
instantiate: function() {
module.verbose('Storing instance of module', module);
$module
.data(moduleNamespace, module)
;
},
destroy: function() {
module.verbose('Destroying previous module for', $module);
$module
.off(namespace)
.removeData(moduleNamespace)
;
},
attach: {
events: function(selector, event) {
var
$toggle = $(selector)
;
event = $.isFunction(module[event])
? module[event]
: module.toggle
;
if($toggle.size() > 0) {
module.debug('Attaching sidebar events to element', selector, event);
$toggle
.on('click' + eventNamespace, event)
;
}
else {
module.error(error.notFound);
}
}
},
show: function() {
if(module.is.closed()) {
module.debug('Showing sidebar');
$body
.animate(module.get.bodyCSS(), settings.duration, settings.onShow)
;
$module
.addClass(className.open)
;
}
},
hide: function() {
if(module.is.open()) {
$module
.removeClass(className.open)
;
}
},
toggle: function() {
if(module.is.open()) {
module.close();
}
else {
module.open();
}
},
get: {
bodyCSS: function() {
}
},
is: {
open: function() {
return $module.is(':visible');
},
closed: function() {
return $module.is(':not(:visible)');
}
},
setting: function(name, value) {
if(value !== undefined) {
if( $.isPlainObject(name) ) {
$.extend(true, settings, name);
}
else {
settings[name] = value;
}
}
else {
return settings[name];
}
},
internal: function(name, value) {
if(value !== undefined) {
if( $.isPlainObject(name) ) {
$.extend(true, module, name);
}
else {
module[name] = value;
}
}
else {
return module[name];
}
},
debug: function() {
if(settings.debug) {
if(settings.performance) {
module.performance.log(arguments);
}
else {
module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
module.debug.apply(console, arguments);
}
}
},
verbose: function() {
if(settings.verbose && settings.debug) {
if(settings.performance) {
module.performance.log(arguments);
}
else {
module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
module.verbose.apply(console, arguments);
}
}
},
error: function() {
module.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':');
module.error.apply(console, arguments);
},
performance: {
log: function(message) {
var
currentTime,
executionTime,
previousTime
;
if(settings.performance) {
currentTime = new Date().getTime();
previousTime = time || currentTime;
executionTime = currentTime - previousTime;
time = currentTime;
performance.push({
'Element' : element,
'Name' : message[0],
'Arguments' : [].slice.call(message, 1) || '',
'Execution Time' : executionTime
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
},
display: function() {
var
title = settings.moduleName + ':',
totalTime = 0
;
time = false;
clearTimeout(module.performance.timer);
$.each(performance, function(index, data) {
totalTime += data['Execution Time'];
});
title += ' ' + totalTime + 'ms';
if(moduleSelector) {
title += ' \'' + moduleSelector + '\'';
}
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
console.groupCollapsed(title);
if(console.table) {
console.table(performance);
}
else {
$.each(performance, function(index, data) {
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
});
}
console.groupEnd();
}
performance = [];
}
},
invoke: function(query, passedArguments, context) {
var
maxDepth,
found,
response
;
passedArguments = passedArguments || queryArguments;
context = element || context;
if(typeof query == 'string' && instance !== undefined) {
query = query.split(/[\. ]/);
maxDepth = query.length - 1;
$.each(query, function(depth, value) {
var camelCaseValue = (depth != maxDepth)
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
: query
;
if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) {
instance = instance[value];
}
else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) {
instance = instance[camelCaseValue];
}
else if( instance[value] !== undefined ) {
found = instance[value];
return false;
}
else if( instance[camelCaseValue] !== undefined ) {
found = instance[camelCaseValue];
return false;
}
else {
module.error(error.method);
return false;
}
});
}
if ( $.isFunction( found ) ) {
response = found.apply(context, passedArguments);
}
else if(found !== undefined) {
response = found;
}
if($.isArray(invokedResponse)) {
invokedResponse.push(response);
}
else if(typeof invokedResponse == 'string') {
invokedResponse = [invokedResponse, response];
}
else if(response !== undefined) {
invokedResponse = response;
}
return found;
}
};
if(methodInvoked) {
if(instance === undefined) {
module.initialize();
}
module.invoke(query);
}
else {
if(instance !== undefined) {
module.destroy();
}
module.initialize();
}
})
;
return (invokedResponse !== undefined)
? invokedResponse
: this
;
};
$.fn.sidebar.settings = {
moduleName : 'Sidebar',
namespace : 'sidebar',
verbose : true,
debug : true,
performance : true,
side : 'left',
duration : 500,
onChange : function(){},
onShow : function(){},
onHide : function(){},
className: {
open: 'active'
},
error : {
method : 'The method you called is not defined.',
notFound : 'There were no elements that matched the specified selector'
}
};
})( jQuery, window , document );

341
src/modules/sidebar.js
View File

@ -0,0 +1,341 @@
/* ******************************
Semantic Module: Dropdown
Author: Jack Lukic
Notes: First Commit May 25, 2013
****************************** */
;(function ( $, window, document, undefined ) {
$.fn.sidebar = function(parameters) {
var
$allModules = $(this),
settings = ( $.isPlainObject(parameters) )
? $.extend(true, {}, $.fn.sidebar.settings, parameters)
: $.fn.sidebar.settings,
className = settings.className,
namespace = settings.namespace,
error = settings.error,
eventNamespace = '.' + namespace,
moduleNamespace = 'module-' + namespace,
moduleSelector = $allModules.selector || '',
time = new Date().getTime(),
performance = [],
query = arguments[0],
methodInvoked = (typeof query == 'string'),
queryArguments = [].slice.call(arguments, 1),
invokedResponse
;
$allModules
.each(function() {
var
$body = $('body'),
$module = $(this),
element = this,
instance = $module.data(moduleNamespace),
module
;
module = {
initialize: function() {
module.debug('Initializing sidebar', $module);
module.instantiate();
},
instantiate: function() {
module.verbose('Storing instance of module', module);
$module
.data(moduleNamespace, module)
;
},
destroy: function() {
module.verbose('Destroying previous module for', $module);
$module
.off(namespace)
.removeData(moduleNamespace)
;
},
attach: {
events: function(selector, event) {
var
$toggle = $(selector)
;
event = $.isFunction(module[event])
? module[event]
: module.toggle
;
if($toggle.size() > 0) {
module.debug('Attaching sidebar events to element', selector, event);
$toggle
.on('click' + eventNamespace, event)
;
}
else {
module.error(error.notFound);
}
}
},
show: function() {
if(module.is.closed()) {
module.debug('Showing sidebar');
$body
.animate(module.get.bodyCSS(), settings.duration, settings.onShow)
;
$module
.addClass(className.open)
;
}
},
hide: function() {
if(module.is.open()) {
$module
.removeClass(className.open)
;
}
},
toggle: function() {
if(module.is.open()) {
module.close();
}
else {
module.open();
}
},
get: {
bodyCSS: function() {
}
},
is: {
open: function() {
return $module.is(':visible');
},
closed: function() {
return $module.is(':not(:visible)');
}
},
setting: function(name, value) {
if(value !== undefined) {
if( $.isPlainObject(name) ) {
$.extend(true, settings, name);
}
else {
settings[name] = value;
}
}
else {
return settings[name];
}
},
internal: function(name, value) {
if(value !== undefined) {
if( $.isPlainObject(name) ) {
$.extend(true, module, name);
}
else {
module[name] = value;
}
}
else {
return module[name];
}
},
debug: function() {
if(settings.debug) {
if(settings.performance) {
module.performance.log(arguments);
}
else {
module.debug = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
module.debug.apply(console, arguments);
}
}
},
verbose: function() {
if(settings.verbose && settings.debug) {
if(settings.performance) {
module.performance.log(arguments);
}
else {
module.verbose = Function.prototype.bind.call(console.info, console, settings.moduleName + ':');
module.verbose.apply(console, arguments);
}
}
},
error: function() {
module.error = Function.prototype.bind.call(console.error, console, settings.moduleName + ':');
module.error.apply(console, arguments);
},
performance: {
log: function(message) {
var
currentTime,
executionTime,
previousTime
;
if(settings.performance) {
currentTime = new Date().getTime();
previousTime = time || currentTime;
executionTime = currentTime - previousTime;
time = currentTime;
performance.push({
'Element' : element,
'Name' : message[0],
'Arguments' : [].slice.call(message, 1) || '',
'Execution Time' : executionTime
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
},
display: function() {
var
title = settings.moduleName + ':',
totalTime = 0
;
time = false;
clearTimeout(module.performance.timer);
$.each(performance, function(index, data) {
totalTime += data['Execution Time'];
});
title += ' ' + totalTime + 'ms';
if(moduleSelector) {
title += ' \'' + moduleSelector + '\'';
}
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
console.groupCollapsed(title);
if(console.table) {
console.table(performance);
}
else {
$.each(performance, function(index, data) {
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
});
}
console.groupEnd();
}
performance = [];
}
},
invoke: function(query, passedArguments, context) {
var
maxDepth,
found,
response
;
passedArguments = passedArguments || queryArguments;
context = element || context;
if(typeof query == 'string' && instance !== undefined) {
query = query.split(/[\. ]/);
maxDepth = query.length - 1;
$.each(query, function(depth, value) {
var camelCaseValue = (depth != maxDepth)
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
: query
;
if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) {
instance = instance[value];
}
else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) {
instance = instance[camelCaseValue];
}
else if( instance[value] !== undefined ) {
found = instance[value];
return false;
}
else if( instance[camelCaseValue] !== undefined ) {
found = instance[camelCaseValue];
return false;
}
else {
module.error(error.method);
return false;
}
});
}
if ( $.isFunction( found ) ) {
response = found.apply(context, passedArguments);
}
else if(found !== undefined) {
response = found;
}
if($.isArray(invokedResponse)) {
invokedResponse.push(response);
}
else if(typeof invokedResponse == 'string') {
invokedResponse = [invokedResponse, response];
}
else if(response !== undefined) {
invokedResponse = response;
}
return found;
}
};
if(methodInvoked) {
if(instance === undefined) {
module.initialize();
}
module.invoke(query);
}
else {
if(instance !== undefined) {
module.destroy();
}
module.initialize();
}
})
;
return (invokedResponse !== undefined)
? invokedResponse
: this
;
};
$.fn.sidebar.settings = {
moduleName : 'Sidebar',
namespace : 'sidebar',
verbose : true,
debug : true,
performance : true,
side : 'left',
duration : 500,
onChange : function(){},
onShow : function(){},
onHide : function(){},
className: {
open: 'active'
},
error : {
method : 'The method you called is not defined.',
notFound : 'There were no elements that matched the specified selector'
}
};
})( jQuery, window , document );

124
src/modules/sidebar.less
View File

@ -0,0 +1,124 @@
/*******************************
Semantic Module: Sidebar
Author: Jack Lukic
Notes: First Commit March 25, 2013
Sidebar Menu System
*******************************/
/*******************************
Sidebar
*******************************/
.ui.sidebar {
position: fixed;
-webkit-transform: translateX(-275px);
-moz-transform: translateX(-275px);
-o-transform: translateX(-275px);
-ms-transform: translateX(-275px);
transform: translateX(-275px);
width: 275px;
height: 100%;
-ms-overflow-y: auto;
overflow-y: auto;
top: 0px;
left: 0px;
z-index: 900;
-webkit-transition: -webkit-transform 0.5s ease;
-moz-transition: -moz-transform 0.5s ease;
transition: transform 0.5s ease;
}
/*******************************
Types
*******************************/
.ui.right.sidebar {
left: auto;
right: 0px;
-webkit-transform: translateX(275px);
-moz-transform: translateX(275px);
-o-transform: translateX(275px);
-ms-transform: translateX(275px);
transform: translateX(275px);
}
.ui.top.sidebar {
width: 100%;
height: 40px;
overflow: hidden;
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-o-transform: translateY(-40px);
-ms-transform: translateY(-40px);
transform: translateY(-40px);
}
.ui.bottom.sidebar {
width: 100%;
height: 40px;
overflow: hidden;
top: auto;
bottom: 0px;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-o-transform: translateY(40px);
-ms-transform: translateY(40px);
transform: translateY(40px);
}
/*******************************
States
*******************************/
.ui.active.sidebar {
-webkit-transform: translateX(0deg);
-moz-transform: translateX(0deg);
-o-transform: translateX(0deg);
-ms-transform: translateX(0deg);
transform: translateX(0deg);
}
.ui.active.top.sidebar,
.ui.active.bottom.sidebar {
-webkit-transform: translateY(0deg);
-moz-transform: translateY(0deg);
-o-transform: translateY(0deg);
-ms-transform: translateY(0deg);
transform: translateY(0deg);
}
/*******************************
Variations
*******************************/
.ui.floating.sidebar {
-webkit-box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.2);
box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.2);
}
.ui.right.floating.sidebar {
-webkit-box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.2);
box-shadow: -5px 0px 5px 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);
}
.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);
}
Write Preview
Loading…
Cancel
Save