From f97ef3c7f4efcffb403cd21948a4386bd4368f82 Mon Sep 17 00:00:00 2001 From: jlukic Date: Wed, 23 Oct 2013 17:30:10 -0400 Subject: [PATCH] Adds new sidebar types, variations, and proper animation queuing --- src/modules/sidebar.js | 67 ++++++++++++----- src/modules/sidebar.less | 157 ++++++++++++++++++++++++++++++++------- 2 files changed, 176 insertions(+), 48 deletions(-) diff --git a/src/modules/sidebar.js b/src/modules/sidebar.js index 7885070a6..d7f65da79 100755 --- a/src/modules/sidebar.js +++ b/src/modules/sidebar.js @@ -13,15 +13,18 @@ $.fn.sidebar = function(parameters) { var - $allModules = $(this), - moduleSelector = $allModules.selector || '', + $allModules = $(this), + $body = $('body'), + $head = $('head'), - time = new Date().getTime(), - performance = [], + moduleSelector = $allModules.selector || '', - query = arguments[0], - methodInvoked = (typeof query == 'string'), - queryArguments = [].slice.call(arguments, 1), + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), returnedValue ; @@ -40,14 +43,11 @@ $.fn.sidebar = function(parameters) { eventNamespace = '.' + namespace, moduleNamespace = 'module-' + namespace, - $module = $(this), - - $body = $('body'), - $head = $('head'), - $style = $('style[title=' + namespace + ']'), + $module = $(this), + $style = $('style[title=' + namespace + ']'), - element = this, - instance = $module.data(moduleNamespace), + element = this, + instance = $module.data(moduleNamespace), module ; @@ -99,30 +99,54 @@ $.fn.sidebar = function(parameters) { } }, - - show: function() { - module.debug('Showing sidebar'); + show: function(callback) { + callback = $.isFunction(callback) + ? callback + : function(){} + ; + module.debug('Showing sidebar', callback); if(module.is.closed()) { if(!settings.overlay) { + if(settings.exclusive) { + module.hideAll(); + } module.pushPage(); } module.set.active(); + callback(); + $.proxy(settings.onChange, element)(); + $.proxy(settings.onShow, element)(); } else { module.debug('Sidebar is already visible'); } }, - hide: function() { + hide: function(callback) { + callback = $.isFunction(callback) + ? callback + : function(){} + ; + module.debug('Hiding sidebar', callback); if(module.is.open()) { if(!settings.overlay) { module.pullPage(); module.remove.pushed(); } module.remove.active(); + callback(); + $.proxy(settings.onChange, element)(); + $.proxy(settings.onHide, element)(); } }, + hideAll: function() { + $(selector.sidebar) + .filter(':visible') + .sidebar('hide') + ; + }, + toggle: function() { if(module.is.closed()) { module.show(); @@ -458,11 +482,10 @@ $.fn.sidebar.settings = { performance : true, useCSS : true, + exclusive : true, overlay : false, duration : 300, - side : 'left', - onChange : function(){}, onShow : function(){}, onHide : function(){}, @@ -476,6 +499,10 @@ $.fn.sidebar.settings = { bottom : 'bottom' }, + selector: { + sidebar: '.ui.sidebar' + }, + error : { method : 'The method you called is not defined.', notFound : 'There were no elements that matched the specified selector' diff --git a/src/modules/sidebar.less b/src/modules/sidebar.less index 189d8e987..957869f5b 100755 --- a/src/modules/sidebar.less +++ b/src/modules/sidebar.less @@ -40,13 +40,17 @@ body { margin: 0 !important; - width: 275px !important; height: 100% !important; -webkit-border-radius: 0px !important; -moz-border-radius: 0px !important; border-radius: 0px !important; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + -ms-overflow-y: auto; overflow-y: auto; top: 0px; @@ -77,12 +81,13 @@ body { /******************************* - Types + Types *******************************/ -.ui.sidebar { - margin-left: -275px !important; -} +/*------------------- + Direction +--------------------*/ + .ui.right.sidebar { left: 100%; @@ -90,14 +95,11 @@ body { } .ui.top.sidebar { - margin: -40px 0px 0px 0px !important; width: 100% !important; - height: 40px !important; } .ui.bottom.sidebar { width: 100% !important; - height: 40px !important; top: 100%; margin: 0px !important; } @@ -110,41 +112,140 @@ body { .ui.active.sidebar { margin-left: 0px !important; } -.ui.active.right.sidebar { - margin-left: -275px !important; -} - -.ui.active.top.sidebar { - margin-top: 0px !important; -} +.ui.active.top.sidebar, .ui.active.bottom.sidebar { - margin-top: -40px !important; + margin-top: 0px !important; } + /******************************* Variations *******************************/ +/*------------------- + Formatted +--------------------*/ + +.ui.styled.sidebar { + padding: 1em 1.5em; + background-color: #FFFFFF; + box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1); +} +.ui.styled.very.thin.sidebar { + padding: 0.5em; +} +.ui.styled.thin.sidebar { + padding: 1em; +} + + +/*------------------- + Floating +--------------------*/ + .ui.floating.sidebar { - -webkit-box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2); - -moz-box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2); - box-shadow: 3px 0px 3px rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.2); + box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.2); } .ui.right.floating.sidebar { - -webkit-box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2); - -moz-box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2); - box-shadow: -3px 0px 3px rgba(0, 0, 0, 0.2); + -webkit-box-shadow: -2px 0px 2px rgba(0, 0, 0, 0.2); + -moz-box-shadow: -2px 0px 2px rgba(0, 0, 0, 0.2); + box-shadow: -2px 0px 2px rgba(0, 0, 0, 0.2); } .ui.top.floating.sidebar { - -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); - -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); - box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2); + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2); } .ui.bottom.floating.sidebar { - -webkit-box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2); - -moz-box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2); - box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.2); + -webkit-box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.2); + box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.2); +} + + +/*------------------- + Width +--------------------*/ + +/* Very Thin */ +.ui.very.thin.sidebar { + width: 60px !important; + margin-left: -60px !important; +} +.ui.active.very.thin.sidebar { + margin-left: 0px !important; +} +.ui.active.right.very.thin.sidebar { + margin-left: -60px !important; +} + +/* Thin */ +.ui.thin.sidebar { + width: 200px !important; + margin-left: -200px !important; +} +.ui.active.thin.sidebar { + margin-left: 0px !important; +} +.ui.active.right.thin.sidebar { + margin-left: -200px !important; +} + +/* Standard */ +.ui.sidebar { + width: 275px !important; + margin-left: -275px !important; +} +.ui.active.sidebar { + margin-left: 0px !important; +} +.ui.active.right.sidebar { + margin-left: -275px !important; +} + +/* Wide */ +.ui.wide.sidebar { + width: 350px !important; + margin-left: -350px !important; +} +.ui.active.wide.sidebar { + margin-left: 0px !important; +} +.ui.active.right.wide.sidebar { + margin-left: -350px !important; } + +/* Very Wide */ +.ui.very.wide.sidebar { + width: 475px !important; + margin-left: -475px !important; +} +.ui.active.very.wide.sidebar { + margin-left: 0px !important; +} +.ui.active.right.very.wide.sidebar { + margin-left: -475px !important; +} + + + +/*------------------- + Height +--------------------*/ + +/* Standard */ +.ui.top.sidebar { + margin: -40px 0px 0px 0px !important; +} +.ui.top.sidebar, +.ui.bottom.sidebar { + height: 40px !important; +} +.ui.active.bottom.sidebar { + margin-top: -40px !important; +} \ No newline at end of file