diff --git a/server/documents/modules/api.html.eco b/server/documents/modules/api.html.eco index 620f65eea..40e3caaf6 100644 --- a/server/documents/modules/api.html.eco +++ b/server/documents/modules/api.html.eco @@ -15,7 +15,7 @@ type : 'UI Behavior'
-
+
@@ -90,6 +90,7 @@ type : 'UI Behavior' $.fn.api.settings.api = { 'get followers' : '/followers/{id}?results={count}', 'create user' : '/create', + 'add user' : '/add/{id}', 'follow user' : '/follow/{id}', 'search' : '/search/?query={value}' }; @@ -181,7 +182,7 @@ type : 'UI Behavior'
-

Setting URL Variables

+

Setting-up Requests

URL Variables

@@ -232,25 +233,30 @@ type : 'UI Behavior'
-

Data Attributes

-

You can include url values as metadata inside the DOM. -

This is often easiest to include unique url data for each triggering element. For example, many follow buttons will trigger the same endpoint, but each will have its own user id.

+

Request Information in Data Attributes

+

You can include url values as html5 metadata attributes

+

This is often easiest to include unique url data for each triggering element, for example, many follow buttons will trigger the same endpoint, but each will have its own user id.

+

As a convenience, you can also specify your API action in metadata, to allow you to instantiate multiple types of api actions in one statement.

Only variables specified in your API's URL will be searched for in metadata.
- @@ -277,7 +283,7 @@ type : 'UI Behavior'
-

Modifying Data and Settings Just Before Sending

+

Adjusting Request in Before Send

All run settings, not just url data, can be adjusted in a special callback beforeSend which occurs before the API request is sent.

An additional callback beforeXHR lets you modify the XHR object before sending. This is different than beforeSend. @@ -320,10 +326,10 @@ type : 'UI Behavior'
-

Including Server Data

+

Sending Data

-

Automatically Routed

+

Automatically Routed Data

Calling API on any element inside of a form, will automatically include serialized form content in your request when using a special setting serializeForm, or using a form as the stateContext.

Using serializeForm requires including the serialize-object dependency. diff --git a/server/documents/modules/dimmer.html.eco b/server/documents/modules/dimmer.html.eco index b154f3cd1..c024066ad 100755 --- a/server/documents/modules/dimmer.html.eco +++ b/server/documents/modules/dimmer.html.eco @@ -39,17 +39,17 @@ themes : ['Default']

A dimmer can display content

Content must be included inside .content .center to display centered correctly in the modal.
-

- Dog Photos -

- - +

+ Overlayable Section +

+ +

- - Your poodle photo uploaded successfully! + + Dimmed Message!

@@ -94,6 +94,8 @@ themes : ['Default']

An active dimmer will dim its parent container

+ +
@@ -102,6 +104,8 @@ themes : ['Default']

A disabled dimmer cannot be activated

+ +
@@ -114,8 +118,8 @@ themes : ['Default']
Having any parent element receive the class ui dimmable dimmed will trigger the dimmer to display.
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+ +
@@ -124,8 +128,8 @@ themes : ['Default']

A dimmer can be formatted to have its colors inverted

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+ +
@@ -149,24 +153,24 @@ themes : ['Default']
-

Puppy

-
Vote
- View +

Title

+
Add
+
View
- +
-
Vote
- View +
Add
+
View
- +
@@ -177,8 +181,8 @@ themes : ['Default']
Loading
-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

-

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

+ +
@@ -192,37 +196,49 @@ themes : ['Default']

Usage

-

Display

-

You can display a dimmer by either invoking .dimmer('show') on a section or a dimmer itself. If you choose to dim a dimmable section, a dimmer will automatically be created.

-
- // these two are the same - $('.ui.dimmable) - .dimmer('show') - ; - $('.ui.dimmable .dimmer') - .dimmer('show') - ; +
+

Display

+

You can display a dimmer by either invoking .dimmer('show') on a section or a dimmer itself. If you choose to dim a dimmable section, a dimmer will automatically be created.

+
+ // these two are the same + $('.ui.dimmable) + .dimmer('show') + ; + $('.ui.dimmable .dimmer') + .dimmer('show') + ; +
-

Creating Dimmers

-

If a dimmer does not exist inside the element it will be created on first use.

-
- $('h3') - .dimmer('toggle') - ; +
+

Creating Dimmers

+

If a dimmer does not exist inside the element it will be created on first use.

+
+ $('h4') + .dimmer('toggle') + ; +
-

Showing a specific dimmer

-

If a dimmer is already inside an element, you can call behavior on the dimmable section or the dimmer itself.

-
- // If a dimmer exists on a page, you can make it appear by calling it directly - $('.page.dimmer:first') - .dimmer('toggle') - ; + +
+

Showing a Specific Dimmer

+

If a dimmer is already inside an element, you can call behavior on the dimmable section or the dimmer itself.

+
+ // If a dimmer exists on a page, you can make it appear by calling it directly + $('.page.dimmer:first') + .dimmer('toggle') + ; +

Behavior

All the following behaviors can be called using the syntax:

+ +
+ Behaviors must be called on the same content which you originally initialize the dimmer, whether it is the dimmable context, or the ui dimmer +
+
$('.your.element') .dimmer('behavior name', argumentOne, argumentTwo) @@ -251,6 +267,10 @@ themes : ['Default'] toggle Toggles current dimmer visibility + + create + Creates a new dimmer in dimmable context + get duration Returns current duration for show or hide event depending on current visibility @@ -263,14 +283,6 @@ themes : ['Default'] has dimmer Returns whether current dimmable has a dimmer - - is dimmer - Whether current element is a dimmer - - - is dimmable - Whether current element is a dimmable section - is active Whether section's dimmer is active @@ -280,17 +292,25 @@ themes : ['Default'] Whether dimmer is animating - is page - Whether dimmable section is body + is dimmer + Whether current element is a dimmer - is enabled - Whether dimmer is not disabled + is dimmable + Whether current element is a dimmable section is disabled Whether dimmer is disabled + + is enabled + Whether dimmer is not disabled + + + is page + Whether dimmable section is body + is page dimmer Whether dimmer is a page dimmer @@ -320,15 +340,17 @@ themes : ['Default']
-
+
+

+ Dimmer +

-

- Dimmer Settings -
Dimmer settings modify its behavior
-

- +

+ Behavior +

+
- + @@ -347,10 +369,10 @@ themes : ['Default'] @@ -363,18 +385,16 @@ themes : ['Default'] -
Setting Default Description
duration
- duration : { - show : 500, - hide : 500 - } + duration : { + show : 500, + hide : 500 + }
Animation duration of dimming. If an integer is used, that value will apply to both show and hide animations.Named transition to use when animating menu in and out. Fade and slide down are available without including ui transitions
-

+

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

+ - +
- - + + @@ -396,40 +416,19 @@ themes : ['Default']
SettingContextContext Description
-

- Templates -
Templates are used to generate DOM elements
-

+

+ Module +

- - - - - - - - - - - -
GeneratesDefault
dimmer -
- function() { - return $('
').attr('class', 'ui dimmer'); - } -
-
+

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

-

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

- +
- + + @@ -441,7 +440,7 @@ themes : ['Default'] + + + + + - -
Setting Default Description
namespace
selector: { - dimmable : '.ui.dimmable', + dimmable : '.dimmable', dimmer : '.ui.dimmer', content : '.ui.dimmer > .content, .ui.dimmer > .content > .center' } @@ -449,13 +448,26 @@ themes : ['Default']
Object containing selectors used by module.
template +
+ template : { + dimmer: function() { + return $('
').attr('class', 'ui dimmer'); + } + } +
+
Templates used to generate dimmer content
className
className : { active : 'active', - dimmable : 'ui dimmable', + dimmable : 'dimmable', dimmed : 'dimmed', disabled : 'disabled', pageDimmer : 'page', @@ -467,21 +479,6 @@ themes : ['Default']
Class names used to attach style to state
- -

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

- - - - - - - - @@ -489,7 +486,7 @@ themes : ['Default'] - + @@ -514,7 +511,6 @@ themes : ['Default']
SettingDefaultDescription
name Dimmer
debugTrueFalse Provides standard debug output to console
-
diff --git a/server/documents/modules/dropdown.html.eco b/server/documents/modules/dropdown.html.eco index a94746fa2..d493ee2a4 100755 --- a/server/documents/modules/dropdown.html.eco +++ b/server/documents/modules/dropdown.html.eco @@ -996,6 +996,243 @@ themes : ['Default']
+ +
+ +
+

Changing Transitions

+

A dropdown can specify a different transitions.

+ +
+ $('.dropdown') + .dropdown({ + // you can use any ui transition + transition: 'drop' + }) + ; +
+ +
+
Toggle
+
+ +
+
Drop
+
Horizontal Flip
+
Fade Up
+
Scale
+
+
+
+
+ +
+

Multiple Levels

+

A dropdown menu can also contain sub menus inside of it

+ My favorite animal breed is
+ +
Shiba Inu
+ +
+
+ + Dogs +
+
Shiba Inu
+
Poodle
+
Labrador
+
+
+
+ + Cats +
+
Aegean
+
Balinese
+
Persian
+
+
+
+
+
+ + +
+

Preserving User Selections

+

This example uses a preset text value to preserve the menu item on page navigation

+
+ +
+

A dropdown will automatically select on page load any menu item that includes the currently value of text or your dropdown's hidden input value.

+

This is used to preserve a user's selection on page navigation and will automatically remove and default text placeholder formatting.

+
+
+ + + Current action:
+
Hide
+ +
+
Edit
+
Remove
+
Hide
+
+
+ +
+ +
+

Button Group

+

A button group can be formatted to show additional content as a dropdown

+
+
+ +
+
Edit User
+
Remove User
+
Make Invisible
+
+
+
+ +
+
Edit Group
+
Remove Group
+
Hide from Group
+
+
+
+ +
+
Edit
+
Remove
+
Hide
+
+
+
+
+ +
+

Menu

+

A menu element can contain a dropdown

+
+
+ + Home + + + Messages +
+
+ + Categories +
+
Unread
+
Promotions
+
Updates
+
+
+
Archive
+
+ + + Browse + +
+
+ Activity Feed + Profile + Events +
+
+
+ +
+

Form

+

A dropdown can be formatted to allow selection inside a form

+
+

Let's go ahead and get you signed up.

+
+
+ + +
+
+ + +
+
+
+ +
+ +
...
+ +
+
Male
+
Female
+
+
+
+
+
+ +

Using Different Dropdown Actions

+ +
+

Combo Dropdowns

+
+

A button can be formatted with a dropdown.

+

You can change the default action that occurs on selection to different presets built into ui dropdown.

+

For example, using the combo preset will change the preceding element to the selected value.

+
+
+ $('.combo.dropdown') + .dropdown({ + action: 'combo' + }) + ; +
+ +
+
Save
+
+ +
+
Edit
+
Delete
+
Hide
+
+
+
+
+ +
+

Link Dropdowns

+
+

If each option in your dropdown links out to another page, you might just want to make your menu hide without changing any value.

+
+ $('.link.example .dropdown') + .dropdown({ + action: 'hide' + }) + ; +
+
+ +
+
Go to
+ +
+ Home + Browse + Search +
+
+
+ +
+

Initializing

@@ -1206,8 +1443,8 @@ themes : ['Default'] - - + + @@ -1325,248 +1562,15 @@ themes : ['Default']
BehaviorDescriptionBehaviorDescription
-
- -
-

Changing Transitions

-

A dropdown can specify a different transitions.

- -
- $('.dropdown') - .dropdown({ - // you can use any ui transition - transition: 'drop' - }) - ; -
- -
-
Toggle
-
- -
-
Drop
-
Horizontal Flip
-
Fade Up
-
Scale
-
-
-
-
- -
-

Multiple Levels

-

A dropdown menu can also contain sub menus inside of it

- My favorite animal breed is
- -
Shiba Inu
- -
-
- - Dogs -
-
Shiba Inu
-
Poodle
-
Labrador
-
-
-
- - Cats -
-
Aegean
-
Balinese
-
Persian
-
-
-
-
-
- - -
-

Preserving User Selections

-

This example uses a preset text value to preserve the menu item on page navigation

-
- -
-

A dropdown will automatically select on page load any menu item that includes the currently value of text or your dropdown's hidden input value.

-

This is used to preserve a user's selection on page navigation and will automatically remove and default text placeholder formatting.

-
-
- - - Current action:
-
Hide
- -
-
Edit
-
Remove
-
Hide
-
-
- -
- -
-

Button Group

-

A button group can be formatted to show additional content as a dropdown

-
-
- -
-
Edit User
-
Remove User
-
Make Invisible
-
-
-
- -
-
Edit Group
-
Remove Group
-
Hide from Group
-
-
-
- -
-
Edit
-
Remove
-
Hide
-
-
-
-
- -
-

Menu

-

A menu element can contain a dropdown

-
-
- - Home - - - Messages -
-
- - Categories -
-
Unread
-
Promotions
-
Updates
-
-
-
Archive
-
- - - Browse - -
-
- Activity Feed - Profile - Events -
-
-
- -
-

Form

-

A dropdown can be formatted to allow selection inside a form

-
-

Let's go ahead and get you signed up.

-
-
- - -
-
- - -
-
-
- -
- -
...
- -
-
Male
-
Female
-
-
-
-
-
- -

Using Different Dropdown Actions

- -
-

Combo Dropdowns

-
-

A button can be formatted with a dropdown.

-

You can change the default action that occurs on selection to different presets built into ui dropdown.

-

For example, using the combo preset will change the preceding buttons text value to the current selected alue

-
-
- $('.combo.dropdown') - .dropdown({ - action: 'combo' - }) - ; -
- -
-
Save
-
- -
-
Edit
-
Delete
-
Hide
-
-
-
-
- -
-

Link Dropdowns

-
-

If each option in your dropdown links out to another page, you might just want to make your menu hide without changing any value.

-
- $('.link.example .dropdown') - .dropdown({ - action: 'hide' - }) - ; -
-
- -
-
Go to
- -
- Home - Browse - Search -
-
-
- -
-
-

- Dropdown Settings -
Dropdown settings modify the dropdown's behavior
-

+

+ Dropdown +

+ +

+ Behavior +

@@ -1576,22 +1580,43 @@ themes : ['Default'] + + + + + - + + + + + + + + + + + + + + + + - + @@ -1613,16 +1638,16 @@ themes : ['Default']
typefalseType of dropdown (Either
on clickEvent used to trigger dropdown (Hover, Click)Event used to trigger dropdown (Hover, Click, Custom Event)
allowTabtrueWhether to allow a tabindex to be created for this element
fullTextSearchtrueWhether search selections should look for string match anywhere in string
preserveHTMLtrueWhether html included in dropdown values should be preserved. (Allows icons to show up in selected value)
delay
- delay: { - show: 50, - hide: 300 - } + delay: { + show : 200, + hide : 300, + touch : 50 + },
Time in milliseconds to debounce show or hide behavior when on: hover is used.Time in milliseconds to debounce show or hide behavior when on: hover is used, or when touch is used.
transitionSets a default action to occur.
-
activate
-
Most likely action will be determined by type of dropdown, for example a selection dropdown will automatically use updateForm
+
activate (default)
+
Updates dropdown text with selected value, sets element state to active, updates any hidden fields if available
-
combo
-
changes text of previous element matching text selector
+
select
+
activates menu and updates input fields, but does not change current text
-
select
-
activates menu item but does not change text
+
combo
+
changes text of previous sibling element
nothing
@@ -1633,26 +1658,24 @@ themes : ['Default']
Dropdown menu is hidden
-
function(){}
-
custom function is executed
+
function(text, value){}
+
custom function is executed with values specified in callback
-
-

+

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

+ - - - + + + @@ -1674,6 +1697,10 @@ themes : ['Default']
SettingContextDescriptionContextDescription
+

+ Module Settings +

+

DOM Settings
DOM settings specify how this module should interface with the DOM
@@ -1681,9 +1708,9 @@ themes : ['Default'] - - - + + + @@ -1696,12 +1723,14 @@ themes : ['Default'] @@ -1709,10 +1738,12 @@ themes : ['Default'] @@ -1720,31 +1751,21 @@ themes : ['Default'] - -
SettingDefaultDescriptionDefaultDescription
selector
- selector : { - input : '> input[type="hidden"]', - item : '.menu > .item', - menu : '.menu', - text : '> .text' - } + selector : { + dropdown : '.ui.dropdown', + text : '> .text:not(.icon)', + input : '> input[type="hidden"], > select', + search : '> .search, .menu > .search > input, .menu > input.search', + menu : '.menu', + item : '.item' + }
metadata
- metadata: { - text : 'text', - value : 'value' - } + metadata: { + defaultText : 'defaultText', + defaultValue : 'defaultValue', + text : 'text', + value : 'value' + }
className
- className : { - active : 'active', - disabled : 'disabled', - placeholder : 'default', - visible : 'visible' - } + className : { + active : 'active', + disabled : 'disabled', + dropdown : 'ui dropdown', + filtered : 'filtered', + menu : 'menu', + placeholder : 'default', + search : 'search', + selected : 'selected', + selection : 'selection', + visible : 'visible' + }
- -

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

- - - - - - - - - @@ -1752,7 +1773,7 @@ themes : ['Default'] - + @@ -1769,11 +1790,11 @@ themes : ['Default'] diff --git a/server/documents/modules/modal.html.eco b/server/documents/modules/modal.html.eco index a4863b7cd..48eecf7ce 100755 --- a/server/documents/modules/modal.html.eco +++ b/server/documents/modules/modal.html.eco @@ -623,7 +623,7 @@ themes : ['Default', 'Fixed-width'] - + diff --git a/server/documents/modules/popup.html.eco b/server/documents/modules/popup.html.eco index 3b9954736..a91733517 100755 --- a/server/documents/modules/popup.html.eco +++ b/server/documents/modules/popup.html.eco @@ -726,7 +726,7 @@ themes : ['Default'] - + diff --git a/server/documents/modules/rating.html.eco b/server/documents/modules/rating.html.eco index 867a17aef..2e4041ea7 100755 --- a/server/documents/modules/rating.html.eco +++ b/server/documents/modules/rating.html.eco @@ -326,7 +326,7 @@ themes : ['Default'] - + diff --git a/server/documents/modules/shape.html.eco b/server/documents/modules/shape.html.eco index 744b2b51e..f95e3c221 100755 --- a/server/documents/modules/shape.html.eco +++ b/server/documents/modules/shape.html.eco @@ -545,7 +545,7 @@ themes : ['default'] - + diff --git a/server/documents/modules/sidebar.html.eco b/server/documents/modules/sidebar.html.eco index d7678f552..76cb167e7 100755 --- a/server/documents/modules/sidebar.html.eco +++ b/server/documents/modules/sidebar.html.eco @@ -439,7 +439,7 @@ themes : ['Default'] - + diff --git a/server/documents/modules/tab.html.eco b/server/documents/modules/tab.html.eco index 7f2d83213..dddac4a36 100755 --- a/server/documents/modules/tab.html.eco +++ b/server/documents/modules/tab.html.eco @@ -365,7 +365,7 @@ themes : ['Default'] - + diff --git a/server/documents/modules/transition.html.eco b/server/documents/modules/transition.html.eco index 763b14b56..6565d5aa7 100755 --- a/server/documents/modules/transition.html.eco +++ b/server/documents/modules/transition.html.eco @@ -512,7 +512,7 @@ type : 'UI Module' - + diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css index 3a30ad60e..db547209b 100755 --- a/server/files/stylesheets/semantic.css +++ b/server/files/stylesheets/semantic.css @@ -569,6 +569,7 @@ body#example.hide { margin: 0em; padding: 0em; max-height: 610px; + font-weight: normal; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace; }
SettingDefaultDescription
name Dropdown
debugTrueFalse Provides standard debug output to console
error
- error : { - action : 'You called a dropdown action that was not defined', - method : 'The method you called is not defined.', - transition : 'The requested transition was not found' - } + error : { + action : 'You called a dropdown action that was not defined', + method : 'The method you called is not defined.', + transition : 'The requested transition was not found' + }
debugTrueFalse Provides standard debug output to console
debugTrueFalse Provides standard debug output to console
debugTrueFalse Provides standard debug output to console
debugTrueFalse Provides standard debug output to console
debugTrueFalse Provides standard debug output to console
debugTrueFalse Provides standard debug output to console
debugTrueFalse Provides standard debug output to console