diff --git a/build/minified/modules/sidebar.js b/build/minified/modules/sidebar.js new file mode 100644 index 000000000..31a7af8dd --- /dev/null +++ b/build/minified/modules/sidebar.js @@ -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 ); \ No newline at end of file diff --git a/build/packaged/modules/sidebar.js b/build/packaged/modules/sidebar.js new file mode 100644 index 000000000..31a7af8dd --- /dev/null +++ b/build/packaged/modules/sidebar.js @@ -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 ); \ No newline at end of file diff --git a/build/uncompressed/modules/sidebar.css b/build/uncompressed/modules/sidebar.css new file mode 100644 index 000000000..c3608541c --- /dev/null +++ b/build/uncompressed/modules/sidebar.css @@ -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); +} diff --git a/build/uncompressed/modules/sidebar.js b/build/uncompressed/modules/sidebar.js new file mode 100644 index 000000000..31a7af8dd --- /dev/null +++ b/build/uncompressed/modules/sidebar.js @@ -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 ); \ No newline at end of file diff --git a/node/src/documents/modules/sidebar.html b/node/src/documents/modules/sidebar.html new file mode 100755 index 000000000..6e4ea1244 --- /dev/null +++ b/node/src/documents/modules/sidebar.html @@ -0,0 +1,204 @@ +--- +layout : 'default' +css : 'sidebar' + +title : 'Sidebar' +type : 'UI Module' +--- + + + +
+
+

Sidebar

+

A sidebar is a menu hidden beside page content

+
+
+
+ +
+ +
+
+
+ +

Initializing

+

Sidebars are initialized by calling sidebar on an element with class ui sidebar

+
+ $('.ui.sidebar') + .sidebar() + ; +
+ +

Controlling a sidebar

+

It may also be useful to set a dedicated button as controlling a sidebar. You can do this by calling a separate method

+
+ $('.sidebar') + .sidebar('attach events', '.toggle.button') + ; +
+ +

Altering a sidebar width

+ +

Altering the size of sidebar can be done by modifying sidebar.css

+

Usage

+ + +

If a sidebar is called without any arguments all default settings will be used.

+ + +

Visibility

+

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.

+
+ $('.dog.image') + .sidebar('scale') + ; +
+ +

Static Animations

+

Animations that do not have an in or out animation defined, will maintain their current visibility after running

+
+ $('.dog.image') + .sidebar('pulse') + ; +
+ +

Sidebar Direction

+ +

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".

+ +
+ $('.dog.image') + // fade up out is used if available + .sidebar('fade up') + // this is now fade up in + .sidebar('fade up') + ; +
+
+ $('.dog.image') + // if a direction if specified it will be obeyed + .sidebar('horizontal flip in') + .sidebar('vertical flip in') + ; +
+ +

Passing in settings

+

Sidebars use similar argument shorthand as animate. 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.

+ +

Queuing animations

+ +

Animations called in sequence will be queued. Any queued animation will automatically determine the sidebar direction if none is specified.

+
+ $('.dog.image') + .sidebar('horizontal flip', '500ms') + .sidebar('horizontal flip', 500, function() { + alert('done!'); + }) + ; +
+ +

Types

+ +

Emphasis

+
+

Flash

+

An element can flash to draw attention to itself

+
+ $('.dog.image') + .sidebar('flash') + ; +
+
+
+

Shake

+

An element can shake to draw attention to its position

+
+ $('.dog.image') + .sidebar('shake') + ; +
+
+
+

Tada

+

An element can give user positive feedback for an action

+
+ $('.dog.image') + .sidebar('tada') + ; +
+
+
+

Bounce

+

An element can bounce to politely remind you of itself

+
+ $('.dog.image') + .sidebar('bounce') + ; +
+
+ +

Appearance

+
+

Flip

+

An element can flip into or out of view vertically or horizontally

+
+ $('.dog.image') + .sidebar('horizontal flip') + .sidebar('vertical flip') + ; +
+
+
+

Fade

+

An element can fade into or out of view descending and ascending

+
+ $('.dog.image') + .sidebar('fade') + .sidebar('fade up') + .sidebar('fade down') + ; +
+
+
+

Scale

+

An element can scale into or out of view

+
+ $('.dog.image') + .sidebar('scale') + ; +
+
+ +
+

Slide

+
+ $('.dog.image') + .sidebar('slide up') + .sidebar('slide down') + ; +
+
+ +

Behavior

+ + + + +

Settings

+
+
+ +
+
+ +
+ + + \ No newline at end of file diff --git a/node/src/files/components/semantic/modules/sidebar.css b/node/src/files/components/semantic/modules/sidebar.css new file mode 100644 index 000000000..c3608541c --- /dev/null +++ b/node/src/files/components/semantic/modules/sidebar.css @@ -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); +} diff --git a/node/src/files/components/semantic/modules/sidebar.js b/node/src/files/components/semantic/modules/sidebar.js new file mode 100644 index 000000000..31a7af8dd --- /dev/null +++ b/node/src/files/components/semantic/modules/sidebar.js @@ -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 ); \ No newline at end of file diff --git a/src/modules/sidebar.js b/src/modules/sidebar.js new file mode 100755 index 000000000..31a7af8dd --- /dev/null +++ b/src/modules/sidebar.js @@ -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 ); \ No newline at end of file diff --git a/src/modules/sidebar.less b/src/modules/sidebar.less new file mode 100755 index 000000000..5217a1e4a --- /dev/null +++ b/src/modules/sidebar.less @@ -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); +}