Browse Source

cleans up docs on accordion settings

pull/80/merge
jlukic 11 years ago
parent
commit
659ab07764
10 changed files with 199 additions and 117 deletions
  1. 24
      build/less/modules/accordion.js
  2. 24
      build/minified/modules/accordion.js
  3. 24
      build/uncompressed/modules/accordion.js
  4. 143
      node/src/documents/modules/accordion.html.eco
  5. 24
      node/src/files/build/less/modules/accordion.js
  6. 24
      node/src/files/build/minified/modules/accordion.js
  7. 24
      node/src/files/build/uncompressed/modules/accordion.js
  8. 3
      node/src/files/javascript/semantic.js
  9. 2
      node/src/layouts/default.html.eco
  10. 24
      src/modules/accordion.js

24
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'
};

24
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'
};

24
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'
};

143
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'
---
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/accordion.css">
<script src="/javascript/accordion.js"></script>
<script src="/build/uncompressed/modules/accordion.js"></script>
<%- @partial('header') %>
@ -21,6 +18,8 @@ type : 'UI Module'
<a class="item">Examples</a>
<a class="item">Variations</a>
<a class="item">Usage</a>
<a class="item">Behavior</a>
<a class="item">Settings</a>
</div>
</div>
@ -208,11 +207,36 @@ type : 'UI Module'
;
</div>
<h2 class="ui dividing header">Behavior</h2>
All the following behaviors can be called using the syntax <code>$('.foo').accordion('behavior name', argumentOne, argumentTwo)</code>
<table class="ui definition celled table segment">
<tr>
<td>open (index)</td>
<td>Opens accordion content at index</td>
</tr>
<tr>
<td>close (index)</td>
<td>Closes accordion content at index</td>
</tr>
<tr>
<td>toggle (index)</td>
<td>Closes accordion content at index</td>
</tr>
</table>
<h2 class="ui dividing header">Settings</h3>
<h3 class="ui header">Settings</h3>
<table class="ui red table segment">
<h3 class="ui header">
Accordion Settings
<div class="sub header">Accordion settings modify its behavior</div>
</h3>
<table class="ui red celled definition table segment">
<thead>
<th colspan="3">Accordion Settings</th>
<th>Setting</th>
<th class="four wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
@ -225,39 +249,110 @@ type : 'UI Module'
<td>true</td>
<td>Set to false to require an accordion to always have a section open</td>
</tr>
<tr>
<td>duration</td>
<td>500</td>
<td>Duration in ms of opening animation</td>
</tr>
<tr>
<td>easing</td>
<td>linear</td>
<td>Easing equation used for accordion (additional options require <a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery easing</a>)</td>
</tr>
</tbody>
</table>
<table class="ui teal table segment">
<div class="ui horizontal divider"><i class="icon setting"></i></div>
<h3 class="ui header">
Callbacks
<div class="sub header">Callback settings specify a function to occur after a specific behavior.</div>
</h3>
<table class="ui celled green definition table segment">
<thead>
<th colspan="3">Callbacks</th>
<th class="four wide">Setting</th>
<th>Context</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>onOpen</td>
<td>None</td>
<td>Callback after a accordion section is opened.</td>
<td>active content</td>
<td>Callback on element open</td>
</tr>
<tr>
<td>onClose</td>
<td>None</td>
<td>Callback after a accordion section is closed.</td>
<td>active content</td>
<td>Callback on element close</td>
</tr>
<tr>
<td>onChange</td>
<td>None</td>
<td>Callback after a accordion section is changed.</td>
<td>active content</td>
<td>Callback on element open or close</td>
</tr>
</tbody>
</table>
<div class="ui horizontal divider"><i class="icon setting"></i></div>
<h3 class="ui header">
DOM Settings
<div class="sub header">DOM settings specify how this module should interface with the DOM</div>
</h3>
<table class="ui celled purple definition table segment">
<thead>
<th>Setting</th>
<th class="six wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>namespace</td>
<td>accordion</td>
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
</tr>
<tr>
<td>selector</td>
<td>
<div class="code" data-type="css">{
title : '.title',
content : '.content'
}
</div>
</td>
<td>Object containing selectors used by module.</td>
</tr>
<tr>
<td>className</td>
<td>
<div class="code">
className : {
active : 'active'
},
</div>
</td>
<td>Class names used to attach style to state</td>
</tr>
</tbody>
</table>
<table class="ui blue table segment">
<div class="ui horizontal divider"><i class="icon setting"></i></div>
<h3 class="ui header">
Debug Settings
<div class="sub header">Debug settings controls debug output to the console</div>
</h3>
<table class="ui blue celled definition table segment">
<thead>
<th colspan="3">UI Module Settings</th>
<th>Setting</th>
<th class="four wide">Default</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>moduleName</td>
<td>name</td>
<td>Accordion</td>
<td>Name used in debug logs</td>
</tr>
@ -268,25 +363,21 @@ type : 'UI Module'
</tr>
<tr>
<td>performance</td>
<td>False</td>
<td>True</td>
<td>Provides standard debug output to console</td>
</tr>
<tr>
<td>verbose</td>
<td>False</td>
<td>True</td>
<td>Provides ancillary debug output to console</td>
</tr>
<tr>
<td>namespace</td>
<td>accordion</td>
<td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
</tr>
<tr>
<td>errors</td>
<td colspan="2">
<div class="code">
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'
}
</div>
</td>

24
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'
};

24
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'
};

24
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'
};

3
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 = {

2
node/src/layouts/default.html.eco

@ -53,6 +53,7 @@
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/views/statistic.css">
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/modal.css">
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/accordion.css">
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/dropdown.css">
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/popup.css">
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/reveal.css">
@ -78,6 +79,7 @@
<script src="/build/uncompressed/modules/behavior/api.js"></script>
<script src="/build/uncompressed/modules/behavior/state.js"></script>
<script src="/build/uncompressed/modules/accordion.js"></script>
<script src="/build/uncompressed/modules/checkbox.js"></script>
<script src="/build/uncompressed/modules/dimmer.js"></script>
<script src="/build/uncompressed/modules/dropdown.js"></script>

24
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'
};

Loading…
Cancel
Save