From 983169980fc86dc00fa99230bd540c0241084f89 Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 2 Oct 2014 14:11:39 -0400 Subject: [PATCH] Solidfying format of usage/settings tabs of module. Beginning verification all settings objects and behavior lists are up to date --- server/documents/collections/table.html.eco | 49 +++--- server/documents/modules/accordion.html.eco | 182 ++++++++++++-------- server/documents/modules/checkbox.html.eco | 4 +- server/documents/modules/modal.html.eco | 3 +- server/files/stylesheets/semantic.css | 40 +++-- src/definitions/modules/modal.js | 2 - 6 files changed, 165 insertions(+), 115 deletions(-) diff --git a/server/documents/collections/table.html.eco b/server/documents/collections/table.html.eco index 30674fa8b..78d42ab2c 100755 --- a/server/documents/collections/table.html.eco +++ b/server/documents/collections/table.html.eco @@ -9,7 +9,7 @@ title : 'Table' description : 'A table displays a collections of data grouped into rows' type : 'UI Collection' -themes : ['Default'] +themes : ['Default', 'Classic'] --- @@ -71,6 +71,30 @@ themes : ['Default'] +
+

Definition

+

A table may be formatted to emphasize a first column that defines a rows content

+ + + + + + + + + + + + + + + + + +
ArgumentsDescription
reset ratingNoneResets rating to default value
set ratingrating (integer)Sets the current star rating to specified value
+
+ +

States

@@ -604,29 +628,6 @@ themes : ['Default']
-
-

Definition

-

A table may be formatted specifically to provide definitions

- - - - - - - - - - - - - - - - - -
BehaviorArgumentsDescription
reset ratingNoneResets rating to default value
set ratingrating (integer)Sets the current star rating to specified value
-
-

Sortable

A table may allow a user to sort contents by clicking on a table header.

diff --git a/server/documents/modules/accordion.html.eco b/server/documents/modules/accordion.html.eco index cea01179d..3fbbbf47e 100755 --- a/server/documents/modules/accordion.html.eco +++ b/server/documents/modules/accordion.html.eco @@ -115,7 +115,7 @@ themes : ['Default', 'Chubby']

Examples

-

Nested

+

Nested

An accordion can have multiple levels of nested content. This content can either be in a nested accordion or simply another level of title and content

@@ -123,7 +123,7 @@ themes : ['Default', 'Chubby'] Level 1
- Welcome to level 1 where sub content formatted as its own accordion. + Welcome to level 1
@@ -169,48 +169,52 @@ themes : ['Default', 'Chubby'] Level 2
-

Welcome to level 2 where content is formatted without nested accordions

-
- - Level 2A -
-
-

Level 2A Contents

+

Welcome to level 2

+
+
+ + Level 2A +
+
+

Level 2A Contents

+
+
+ + Level 2A-A +
+
+ Level 2A-A Contents +
+
+ + Level 2A-B +
+
+ Level 2A-B Contents +
+
+
- Level 2A-A + Level 2B
- Level 2A-A Contents + Level 2B Contents
- Level 2A-B + Level 2C
- Level 2A-B Contents + Level 2C Contents
-
- - Level 2B -
-
- Level 2B Contents -
-
- - Level 2C -
-
- Level 2C Contents -
-

Form

+

Form

An accordion can be used anywhere where content can be shown or hidden. For example, to show optional form fields.

@@ -239,7 +243,7 @@ themes : ['Default', 'Chubby']
-

Menu

+

Menu

An accordion can be used to create content drawers inside a menu

@@ -320,11 +324,25 @@ themes : ['Default', 'Chubby']

Initializing

-

Initializing an accordion

-
- $('.ui.accordion') - .accordion() - ; + +
+

Initializing an accordion

+

Accordion is initialized on pre-existing markup

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

AJAX Content

+

Accordions use DOM Mutation Observers and delegated events to allow for easy compataibility with AJAX content, or content added after initialization.

+

If the DOM tree changes the module will automatically call module.refresh and update the selector cache. Because events are bound on the parent module using delegated events, events will automatically fire on content added after initialization.

+

If you change other attributes of the module without DOM insertion and need to update the cache you can do so by calling this module's refresh behavior. +

+ $('.ui.accordion').accordion('refresh'); +

Behaviors

@@ -334,11 +352,15 @@ themes : ['Default', 'Chubby'] $('.ui.accordion').accordion('behavior', argumentOne, argumentTwo...);
- +
+ + + + @@ -352,27 +374,34 @@ themes : ['Default', 'Chubby']
+

+ Accordion +

-

- Accordion Settings -
Accordion settings modify its behavior
-

-
open (index) Opens accordion content at index
close othersCloses accordion content that are not active
close (index) Closes accordion content at index
+

+ Behavior +

+
- - + + - + + + + + + - + @@ -382,20 +411,19 @@ themes : ['Default', 'Chubby'] - +
SettingDefaultSettingDefault Description
exclusive trueSet to false to allow multiple sections to be open at the same timeOnly allow one section open at a time
close nestedtrueAllow active sections to collapse
collapsible trueSet to false to require an accordion to always have a section openAllow active sections to collapse
duration
easing easeInOutQuintEaseInOutQuint is included with accordion, for additional options consider jQuery easing)Easing of opening animation. EaseInOutQuint is included with accordion, for additional options you must include easing equations.
-

+

Callbacks -
Callbacks specify a function to occur after a specific behavior.
-

+ - +
- - + + @@ -417,11 +445,16 @@ themes : ['Default', 'Chubby']
SettingContextSettingContext Description
-

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

- +

+ Module +

+ +

These settings are native to all modules, and define how the component ties content to DOM attributes, and debugging settings for the module.

+ +

+ DOM +

+
@@ -437,13 +470,14 @@ themes : ['Default', 'Chubby'] - + @@ -454,17 +488,16 @@ themes : ['Default', 'Chubby'] } - +
Setting Defaultselector
- { - title : '.title', - content : '.content' + selector : { + accordion : '.accordion', + title : '.title', + content : '.content' }
Object containing selectors used by module.Selectors used to find parts of a module
className Class names used to attach style to stateClass names used to determine element state
-

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

+

+ Debug +

- +
@@ -474,30 +507,29 @@ themes : ['Default', 'Chubby'] - + - - + + - - + + - - + + diff --git a/server/documents/modules/checkbox.html.eco b/server/documents/modules/checkbox.html.eco index 337f2c8a9..4fe02dce7 100755 --- a/server/documents/modules/checkbox.html.eco +++ b/server/documents/modules/checkbox.html.eco @@ -89,7 +89,7 @@ themes : ['Default']
-

Check Box

+

Checkbox

A checkbox can be initialized with javascript for increase programmatic control

@@ -104,7 +104,7 @@ themes : ['Default']
-

Check Box without Javascript

+

Checkbox without Javascript

A checkbox can also be used without using javascript by matching the id attribute of the input field to the for attribute of the accompanying label

diff --git a/server/documents/modules/modal.html.eco b/server/documents/modules/modal.html.eco index 460787d99..a4863b7cd 100755 --- a/server/documents/modules/modal.html.eco +++ b/server/documents/modules/modal.html.eco @@ -303,9 +303,10 @@ themes : ['Default', 'Fixed-width']
- $('.selection') + $('.selection.dropdown') .dropdown({ onChange: function(value) { + alert($('.standard.test.modal').size()); $('.standard.test.modal') .modal('setting', 'transition', value) .modal('show') diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css index d38c05521..6512f6790 100755 --- a/server/files/stylesheets/semantic.css +++ b/server/files/stylesheets/semantic.css @@ -94,6 +94,9 @@ h1 { #example .example .anchor + p { margin: 0px 0px 1em; } +#example .no.example .anchor + p { + margin: 0.5em 0px 1em; +} /*rtl:ignore*/ pre.console { background-color: transparent; @@ -105,17 +108,19 @@ pre.console { } code { background-color: rgba(0, 0, 0, 0.02); - border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 0.2em; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); + color: #333333; + font-weight: bold; display: inline-block; - font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace; + font-family: "Monaco","Menlo","Ubuntu Mono","Consolas","source-code-pro",monospace; font-size: 14px; - margin: 0 0.25em; - padding: 0.125em 0.5em; + margin: 0; + padding: 0.1em 0.2em; vertical-align: baseline; } .ui.message code { background-color: rgba(255, 255, 255, 0.6); - border: 1px solid rgba(0, 0, 0, 0.1); } pre code { @@ -138,10 +143,14 @@ p:last-child { margin-bottom: 0em; } /* links */ +code a, +a code, a { color: #009FDA; text-decoration: none; } +code a:hover, +a:hover code, a:hover { color: #00BAFF; } @@ -210,7 +219,7 @@ a:hover { } #example .tab.header.segment .tabular.menu { clear: both; - margin: 2rem -1px 0em; + margin: 2rem 0px 0em; border-bottom: none; } #example .tab.header.segment .tabular.menu .active.item { @@ -564,7 +573,6 @@ body#example.hide { border: 0px; box-shadow: none; padding: 0em; - margin: -0.4em -0.7em; } #example .ui.label + .instructive.segment { @@ -592,7 +600,7 @@ body#example.hide { #example .example { margin: 1em 0em; - border-top: 1px solid rgba(0, 0, 0, 0.1); + /*border-top: 1px solid rgba(0, 0, 0, 0.1);*/ padding: 1em 0em; position: relative; -webkit-tap-highlight-color: transparent; @@ -617,6 +625,7 @@ body#example.hide { #example .main.container > h2, #example .main.container > .tab > h2{ position: relative; + margin-bottom: 1em; } #example .main.container > h2:first-child { margin-top: 0em; @@ -1091,6 +1100,13 @@ body.progress.animated .ui.progress .bar { color: #333333; } +.hljs.xml { + color: #555555; +} +.hljs.xml:hover { + color: #333333; +} + /* Class Name */ .hljs-string, .hljs-tag .hljs-value, @@ -1134,7 +1150,7 @@ body.progress.animated .ui.progress .bar { /* HTML Tag */ .hljs-tag .hljs-title { - color: #884E75; + color: #7E7079; font-weight: normal; } .code:hover .hljs-tag .hljs-title { @@ -1271,8 +1287,10 @@ body.progress.animated .ui.progress .bar { #example .main.container { background-color: #FFFFFF; margin: 0em auto; - box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.1); - padding: 2em 2em 2em; + box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05); + border-left: 1px solid #DDDDDD; + border-right: 1px solid #DDDDDD; + padding: 2em 3em 2em; z-index: 1; } #example .main.container .right.rail .sticky { diff --git a/src/definitions/modules/modal.js b/src/definitions/modules/modal.js index f339d281e..5edd13198 100755 --- a/src/definitions/modules/modal.js +++ b/src/definitions/modules/modal.js @@ -38,7 +38,6 @@ $.fn.modal = function(parameters) { returnedValue ; - $allModules .each(function() { var @@ -68,7 +67,6 @@ $.fn.modal = function(parameters) { instance = $module.data(moduleNamespace), module ; - module = { initialize: function() {
Setting Default
name AccordionName used in debug logsName used in log statements
debugTrueProvides standard debug output to consoletrueDebug output to console
performanceTrueProvides standard debug output to consoletrueShow console.table output with performance metrics
verboseTrueProvides ancillary debug output to consoletrueDebug output includes all internal behaviors
errors
error : { - method : 'The method you called is not defined.', - notFound : 'There were no elements that matched the specified selector' + method : 'The method you called is not defined.' }