From 659ab07764f698aea0c87c318e60190df49cf5b6 Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 26 Sep 2013 03:56:03 -0400 Subject: [PATCH] cleans up docs on accordion settings --- build/less/modules/accordion.js | 24 ++- build/minified/modules/accordion.js | 24 ++- build/uncompressed/modules/accordion.js | 24 ++- node/src/documents/modules/accordion.html.eco | 143 ++++++++++++++---- .../src/files/build/less/modules/accordion.js | 24 ++- .../files/build/minified/modules/accordion.js | 24 ++- .../build/uncompressed/modules/accordion.js | 24 ++- node/src/files/javascript/semantic.js | 3 + node/src/layouts/default.html.eco | 2 + src/modules/accordion.js | 24 ++- 10 files changed, 199 insertions(+), 117 deletions(-) diff --git a/build/less/modules/accordion.js b/build/less/modules/accordion.js index 5c3de368b..06d906ae6 100644 --- a/build/less/modules/accordion.js +++ b/build/less/modules/accordion.js @@ -41,7 +41,6 @@ $.fn.accordion = function(parameters) { var $module = $(this), $title = $module.find(selector.title), - $icon = $module.find(selector.icon), $content = $module.find(selector.content), element = this, @@ -134,9 +133,9 @@ $.fn.accordion = function(parameters) { .children() .animate({ opacity: 0 - }, settings.speed, module.event.resetStyle) + }, settings.duration, module.event.resetStyle) .end() - .slideUp(settings.speed , settings.easing, function() { + .slideUp(settings.duration , settings.easing, function() { $previousContent .removeClass(className.active) .removeAttr('style') @@ -154,7 +153,7 @@ $.fn.accordion = function(parameters) { .children() .removeAttr('style') .end() - .slideDown(settings.speed, settings.easing, function() { + .slideDown(settings.duration, settings.easing, function() { $activeContent .addClass(className.active) .removeAttr('style') @@ -182,9 +181,9 @@ $.fn.accordion = function(parameters) { .children() .animate({ opacity: 0 - }, settings.speed, module.event.resetStyle) + }, settings.duration, module.event.resetStyle) .end() - .slideUp(settings.speed, settings.easing, function(){ + .slideUp(settings.duration, settings.easing, function(){ $activeContent .removeAttr('style') ; @@ -387,6 +386,9 @@ $.fn.accordion.settings = { exclusive : true, collapsible : true, + duration : 300, + easing : 'linear', + onOpen : function(){}, onClose : function(){}, onChange : function(){}, @@ -396,18 +398,14 @@ $.fn.accordion.settings = { }, className : { - active : 'active', - hover : 'hover' + active : 'active' }, selector : { - title : '.title', - icon : '.icon', - content : '.content' + title : '.title', + content : '.content' }, - speed : 500, - easing : 'easeInOutQuint' }; diff --git a/build/minified/modules/accordion.js b/build/minified/modules/accordion.js index 5c3de368b..06d906ae6 100644 --- a/build/minified/modules/accordion.js +++ b/build/minified/modules/accordion.js @@ -41,7 +41,6 @@ $.fn.accordion = function(parameters) { var $module = $(this), $title = $module.find(selector.title), - $icon = $module.find(selector.icon), $content = $module.find(selector.content), element = this, @@ -134,9 +133,9 @@ $.fn.accordion = function(parameters) { .children() .animate({ opacity: 0 - }, settings.speed, module.event.resetStyle) + }, settings.duration, module.event.resetStyle) .end() - .slideUp(settings.speed , settings.easing, function() { + .slideUp(settings.duration , settings.easing, function() { $previousContent .removeClass(className.active) .removeAttr('style') @@ -154,7 +153,7 @@ $.fn.accordion = function(parameters) { .children() .removeAttr('style') .end() - .slideDown(settings.speed, settings.easing, function() { + .slideDown(settings.duration, settings.easing, function() { $activeContent .addClass(className.active) .removeAttr('style') @@ -182,9 +181,9 @@ $.fn.accordion = function(parameters) { .children() .animate({ opacity: 0 - }, settings.speed, module.event.resetStyle) + }, settings.duration, module.event.resetStyle) .end() - .slideUp(settings.speed, settings.easing, function(){ + .slideUp(settings.duration, settings.easing, function(){ $activeContent .removeAttr('style') ; @@ -387,6 +386,9 @@ $.fn.accordion.settings = { exclusive : true, collapsible : true, + duration : 300, + easing : 'linear', + onOpen : function(){}, onClose : function(){}, onChange : function(){}, @@ -396,18 +398,14 @@ $.fn.accordion.settings = { }, className : { - active : 'active', - hover : 'hover' + active : 'active' }, selector : { - title : '.title', - icon : '.icon', - content : '.content' + title : '.title', + content : '.content' }, - speed : 500, - easing : 'easeInOutQuint' }; diff --git a/build/uncompressed/modules/accordion.js b/build/uncompressed/modules/accordion.js index 5c3de368b..06d906ae6 100644 --- a/build/uncompressed/modules/accordion.js +++ b/build/uncompressed/modules/accordion.js @@ -41,7 +41,6 @@ $.fn.accordion = function(parameters) { var $module = $(this), $title = $module.find(selector.title), - $icon = $module.find(selector.icon), $content = $module.find(selector.content), element = this, @@ -134,9 +133,9 @@ $.fn.accordion = function(parameters) { .children() .animate({ opacity: 0 - }, settings.speed, module.event.resetStyle) + }, settings.duration, module.event.resetStyle) .end() - .slideUp(settings.speed , settings.easing, function() { + .slideUp(settings.duration , settings.easing, function() { $previousContent .removeClass(className.active) .removeAttr('style') @@ -154,7 +153,7 @@ $.fn.accordion = function(parameters) { .children() .removeAttr('style') .end() - .slideDown(settings.speed, settings.easing, function() { + .slideDown(settings.duration, settings.easing, function() { $activeContent .addClass(className.active) .removeAttr('style') @@ -182,9 +181,9 @@ $.fn.accordion = function(parameters) { .children() .animate({ opacity: 0 - }, settings.speed, module.event.resetStyle) + }, settings.duration, module.event.resetStyle) .end() - .slideUp(settings.speed, settings.easing, function(){ + .slideUp(settings.duration, settings.easing, function(){ $activeContent .removeAttr('style') ; @@ -387,6 +386,9 @@ $.fn.accordion.settings = { exclusive : true, collapsible : true, + duration : 300, + easing : 'linear', + onOpen : function(){}, onClose : function(){}, onChange : function(){}, @@ -396,18 +398,14 @@ $.fn.accordion.settings = { }, className : { - active : 'active', - hover : 'hover' + active : 'active' }, selector : { - title : '.title', - icon : '.icon', - content : '.content' + title : '.title', + content : '.content' }, - speed : 500, - easing : 'easeInOutQuint' }; diff --git a/node/src/documents/modules/accordion.html.eco b/node/src/documents/modules/accordion.html.eco index 130097bc0..16b655b7b 100755 --- a/node/src/documents/modules/accordion.html.eco +++ b/node/src/documents/modules/accordion.html.eco @@ -6,10 +6,7 @@ title : 'Accordion' description : 'An accordion displays a single piece of content, while allowing the option of displaying other related content' type : 'UI Module' --- - - - <%- @partial('header') %> @@ -21,6 +18,8 @@ type : 'UI Module' Examples Variations Usage + Behavior + Settings @@ -208,11 +207,36 @@ type : 'UI Module' ; +

Behavior

+ + All the following behaviors can be called using the syntax $('.foo').accordion('behavior name', argumentOne, argumentTwo) + + + + + + + + + + + + + + +
open (index)Opens accordion content at index
close (index)Closes accordion content at index
toggle (index)Closes accordion content at index
+ +

Settings

-

Settings

- +

+ Accordion Settings +
Accordion settings modify its behavior
+

+
- + + + @@ -225,39 +249,110 @@ type : 'UI Module' + + + + + + + + + +
Accordion SettingsSettingDefaultDescription
true Set to false to require an accordion to always have a section open
duration500Duration in ms of opening animation
easinglinearEasing equation used for accordion (additional options require jQuery easing)
- +
+ +

+ Callbacks +
Callback settings specify a function to occur after a specific behavior.
+

+ +
- + + + - - + + - - + + - - + + + + +
CallbacksSettingContextDescription
onOpenNoneCallback after a accordion section is opened.active contentCallback on element open
onCloseNoneCallback after a accordion section is closed.active contentCallback on element close
onChangeNoneCallback after a accordion section is changed.active contentCallback on element open or close
+ +
+ +

+ DOM Settings +
DOM settings specify how this module should interface with the DOM
+

+ + + + + + + + + + + + + + + + + + + + +
SettingDefaultDescription
namespaceaccordionEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector +
{ + title : '.title', + content : '.content' + } +
+ 		Object containing selectors used by module.
className +
+ className : { + active : 'active' + }, +
+ 		Class names used to attach style to state
- +
+ +

+ Debug Settings +
Debug settings controls debug output to the console
+

+ +
- + + + - + @@ -268,25 +363,21 @@ type : 'UI Module' - + - + - - - - - diff --git a/node/src/files/build/less/modules/accordion.js b/node/src/files/build/less/modules/accordion.js index 5c3de368b..06d906ae6 100644 --- a/node/src/files/build/less/modules/accordion.js +++ b/node/src/files/build/less/modules/accordion.js @@ -41,7 +41,6 @@ $.fn.accordion = function(parameters) { var $module = $(this), $title = $module.find(selector.title), - $icon = $module.find(selector.icon), $content = $module.find(selector.content), element = this, @@ -134,9 +133,9 @@ $.fn.accordion = function(parameters) { .children() .animate({ opacity: 0 - }, settings.speed, module.event.resetStyle) + }, settings.duration, module.event.resetStyle) .end() - .slideUp(settings.speed , settings.easing, function() { + .slideUp(settings.duration , settings.easing, function() { $previousContent .removeClass(className.active) .removeAttr('style') @@ -154,7 +153,7 @@ $.fn.accordion = function(parameters) { .children() .removeAttr('style') .end() - .slideDown(settings.speed, settings.easing, function() { + .slideDown(settings.duration, settings.easing, function() { $activeContent .addClass(className.active) .removeAttr('style') @@ -182,9 +181,9 @@ $.fn.accordion = function(parameters) { .children() .animate({ opacity: 0 - }, settings.speed, module.event.resetStyle) + }, settings.duration, module.event.resetStyle) .end() - .slideUp(settings.speed, settings.easing, function(){ + .slideUp(settings.duration, settings.easing, function(){ $activeContent .removeAttr('style') ; @@ -387,6 +386,9 @@ $.fn.accordion.settings = { exclusive : true, collapsible : true, + duration : 300, + easing : 'linear', + onOpen : function(){}, onClose : function(){}, onChange : function(){}, @@ -396,18 +398,14 @@ $.fn.accordion.settings = { }, className : { - active : 'active', - hover : 'hover' + active : 'active' }, selector : { - title : '.title', - icon : '.icon', - content : '.content' + title : '.title', + content : '.content' }, - speed : 500, - easing : 'easeInOutQuint' }; diff --git a/node/src/files/build/minified/modules/accordion.js b/node/src/files/build/minified/modules/accordion.js index 5c3de368b..06d906ae6 100644 --- a/node/src/files/build/minified/modules/accordion.js +++ b/node/src/files/build/minified/modules/accordion.js @@ -41,7 +41,6 @@ $.fn.accordion = function(parameters) { var $module = $(this), $title = $module.find(selector.title), - $icon = $module.find(selector.icon), $content = $module.find(selector.content), element = this, @@ -134,9 +133,9 @@ $.fn.accordion = function(parameters) { .children() .animate({ opacity: 0 - }, settings.speed, module.event.resetStyle) + }, settings.duration, module.event.resetStyle) .end() - .slideUp(settings.speed , settings.easing, function() { + .slideUp(settings.duration , settings.easing, function() { $previousContent .removeClass(className.active) .removeAttr('style') @@ -154,7 +153,7 @@ $.fn.accordion = function(parameters) { .children() .removeAttr('style') .end() - .slideDown(settings.speed, settings.easing, function() { + .slideDown(settings.duration, settings.easing, function() { $activeContent .addClass(className.active) .removeAttr('style') @@ -182,9 +181,9 @@ $.fn.accordion = function(parameters) { .children() .animate({ opacity: 0 - }, settings.speed, module.event.resetStyle) + }, settings.duration, module.event.resetStyle) .end() - .slideUp(settings.speed, settings.easing, function(){ + .slideUp(settings.duration, settings.easing, function(){ $activeContent .removeAttr('style') ; @@ -387,6 +386,9 @@ $.fn.accordion.settings = { exclusive : true, collapsible : true, + duration : 300, + easing : 'linear', + onOpen : function(){}, onClose : function(){}, onChange : function(){}, @@ -396,18 +398,14 @@ $.fn.accordion.settings = { }, className : { - active : 'active', - hover : 'hover' + active : 'active' }, selector : { - title : '.title', - icon : '.icon', - content : '.content' + title : '.title', + content : '.content' }, - speed : 500, - easing : 'easeInOutQuint' }; diff --git a/node/src/files/build/uncompressed/modules/accordion.js b/node/src/files/build/uncompressed/modules/accordion.js index 5c3de368b..06d906ae6 100644 --- a/node/src/files/build/uncompressed/modules/accordion.js +++ b/node/src/files/build/uncompressed/modules/accordion.js @@ -41,7 +41,6 @@ $.fn.accordion = function(parameters) { var $module = $(this), $title = $module.find(selector.title), - $icon = $module.find(selector.icon), $content = $module.find(selector.content), element = this, @@ -134,9 +133,9 @@ $.fn.accordion = function(parameters) { .children() .animate({ opacity: 0 - }, settings.speed, module.event.resetStyle) + }, settings.duration, module.event.resetStyle) .end() - .slideUp(settings.speed , settings.easing, function() { + .slideUp(settings.duration , settings.easing, function() { $previousContent .removeClass(className.active) .removeAttr('style') @@ -154,7 +153,7 @@ $.fn.accordion = function(parameters) { .children() .removeAttr('style') .end() - .slideDown(settings.speed, settings.easing, function() { + .slideDown(settings.duration, settings.easing, function() { $activeContent .addClass(className.active) .removeAttr('style') @@ -182,9 +181,9 @@ $.fn.accordion = function(parameters) { .children() .animate({ opacity: 0 - }, settings.speed, module.event.resetStyle) + }, settings.duration, module.event.resetStyle) .end() - .slideUp(settings.speed, settings.easing, function(){ + .slideUp(settings.duration, settings.easing, function(){ $activeContent .removeAttr('style') ; @@ -387,6 +386,9 @@ $.fn.accordion.settings = { exclusive : true, collapsible : true, + duration : 300, + easing : 'linear', + onOpen : function(){}, onClose : function(){}, onChange : function(){}, @@ -396,18 +398,14 @@ $.fn.accordion.settings = { }, className : { - active : 'active', - hover : 'hover' + active : 'active' }, selector : { - title : '.title', - icon : '.icon', - content : '.content' + title : '.title', + content : '.content' }, - speed : 500, - easing : 'easeInOutQuint' }; diff --git a/node/src/files/javascript/semantic.js b/node/src/files/javascript/semantic.js index 6949b8834..89796b53e 100755 --- a/node/src/files/javascript/semantic.js +++ b/node/src/files/javascript/semantic.js @@ -62,6 +62,9 @@ semantic.ready = function() { handler ; + $.fn.accordion.settings.duration = 500; + $.fn.accordion.settings.easing = 'easeInOutQuint'; + // event handlers handler = { diff --git a/node/src/layouts/default.html.eco b/node/src/layouts/default.html.eco index 7706503c0..bfb5faaa1 100755 --- a/node/src/layouts/default.html.eco +++ b/node/src/layouts/default.html.eco @@ -53,6 +53,7 @@ + @@ -78,6 +79,7 @@ + diff --git a/src/modules/accordion.js b/src/modules/accordion.js index 5c3de368b..06d906ae6 100755 --- a/src/modules/accordion.js +++ b/src/modules/accordion.js @@ -41,7 +41,6 @@ $.fn.accordion = function(parameters) { var $module = $(this), $title = $module.find(selector.title), - $icon = $module.find(selector.icon), $content = $module.find(selector.content), element = this, @@ -134,9 +133,9 @@ $.fn.accordion = function(parameters) { .children() .animate({ opacity: 0 - }, settings.speed, module.event.resetStyle) + }, settings.duration, module.event.resetStyle) .end() - .slideUp(settings.speed , settings.easing, function() { + .slideUp(settings.duration , settings.easing, function() { $previousContent .removeClass(className.active) .removeAttr('style') @@ -154,7 +153,7 @@ $.fn.accordion = function(parameters) { .children() .removeAttr('style') .end() - .slideDown(settings.speed, settings.easing, function() { + .slideDown(settings.duration, settings.easing, function() { $activeContent .addClass(className.active) .removeAttr('style') @@ -182,9 +181,9 @@ $.fn.accordion = function(parameters) { .children() .animate({ opacity: 0 - }, settings.speed, module.event.resetStyle) + }, settings.duration, module.event.resetStyle) .end() - .slideUp(settings.speed, settings.easing, function(){ + .slideUp(settings.duration, settings.easing, function(){ $activeContent .removeAttr('style') ; @@ -387,6 +386,9 @@ $.fn.accordion.settings = { exclusive : true, collapsible : true, + duration : 300, + easing : 'linear', + onOpen : function(){}, onClose : function(){}, onChange : function(){}, @@ -396,18 +398,14 @@ $.fn.accordion.settings = { }, className : { - active : 'active', - hover : 'hover' + active : 'active' }, selector : { - title : '.title', - icon : '.icon', - content : '.content' + title : '.title', + content : '.content' }, - speed : 500, - easing : 'easeInOutQuint' };
UI Module SettingsSettingDefaultDescription
moduleNamename Accordion Name used in debug logs
performanceFalseTrue Provides standard debug output to console
verboseFalseTrue Provides ancillary debug output to console
namespaceaccordionEvent namespace. Makes sure module teardown does not effect other events attached to an element.
errors
- errors : { - method : 'The method you called is not defined.' + error : { + method : 'The method you called is not defined.', + notFound : 'There were no elements that matched the specified selector' }