diff --git a/RELEASE NOTES.md b/RELEASE NOTES.md index 8faff936c..41e9235bf 100755 --- a/RELEASE NOTES.md +++ b/RELEASE NOTES.md @@ -4,11 +4,15 @@ ### Version 0.7.0 - Oct 17, 2013 **New** +- Added responsive style to ui tables +- Adds sortable tables to docs +- Adds new tabbed doc style for modules - Popups can now have a different target than itself - Adds onTabInit for local tabs on first load +- Adds documentation for module format **Fixes** -- Fixes border radius on tabular menu +- Fixes border radius on tabular menu, fixes one pixel jump on active state - Removes vertical label width line missing units - Fixes pointing dropdown to appear correctly in menu - Fixes issue with borders on selection dropdown @@ -17,8 +21,13 @@ - Popup .toggle() now always hides/shows popup correctly - Dropdown cannot display inside item image - Dropdown links were being prevented by event.preventDefault used for touch devices +- Fixes some code samples not being properly indented **Updates** +- Increased padding on attached labels +- Leading on bulleted and ordered list slightly increased +- Horizontal padding on icon list slightly increased +- Increase opacity of icons on icon messages - Ribbon labels now have a shadow color - Popups are no longer inline by default - Optimizes dimmer init on modal to occur on modal init and not modal show diff --git a/server/documents/module.html.eco b/server/documents/module.html.eco index c230a3971..0dfecd229 100755 --- a/server/documents/module.html.eco +++ b/server/documents/module.html.eco @@ -13,17 +13,14 @@ type : 'Semantic'
- Design Pattern + Overview + Initializing Behaviors Settings
-

Design Pattern

+

Overview

All official javascript modules in Semantic are designed using a singular design pattern. This pattern allows several useful features common to all javascript components

- - - View Commented Example -
@@ -61,21 +58,66 @@ type : 'Semantic'
+ + + View Commented Example + + +

Initializing

+

UI Modules are not automatically initialized on page load. You must attach event handlers to trigger the behavior you require for each element

+

Its okay to initialize an element multiple times, the element will automatically destroy the previous instance and re-initiale with the settings provided.

+
+ $(document) + .ready(function() { + // just initializing + $('.help.icon') + .popup() + ; + // initializing with settings + $('.ui.image') + .popup({ + position: 'top right' + }) + ; + }) + ; +
+
+ + +
+

Behaviors

Behaviors are an elements API. These can be invoke functionality or return aspects of the current state for an element

Triggering a Behavior

Behaviors are triggered in Semantic using a familiar syntax. API behaviors can be called using spaced words, camelcase or dot notation. The preferred method however is spaced words. Method lookup is done internally.

-
- // generically - $('.ui.element') - .module('method', valueOne, valueTwo) - ; +
// Sets a popup to top left position with an offset of negative five - $('.ui.popup') + $('.popup.icon') .popup('set position', 'top left', -5) ;
+
+ // returns boolean value instead of jQuery chain + $('.popup.icon').popup('is visible'); +
+
+ // if selector size > 1 returns array of values [boolean, boolean...] + $('.many.popup').popup('is visible'); +
+ +

Overriding Internals

+

Internal methods can be overwritten at run-time for individual instances of a module as well. For example:

+
+ // this instance will popup an alert for each log + $('.popup.icon') + .popup('internal', 'debug', function() { + window.alert(arguments[0]); + }) + ; +
+

Common Behaviors

All modules have a set of core behaviors which allow you to configure the component

@@ -106,7 +148,7 @@ type : 'Semantic' Internal method used for translating sentence case method into an internal method - log(comment, values) + debug(comment, values) Displays a log if a user has logging enabled @@ -186,13 +228,13 @@ type : 'Semantic'
Setting module defaults
Default settings for the module can be overridden by modifying $.fn.module.settings. -
$.fn.popup.settings.moduleName = 'Godzilla';
+
$.fn.popup.settings.moduleName = 'Godzilla';
At initialization
A settings object can be passed in when initializing the plugin
-
+
$('.foo') .popup({ moduleName : 'Godzilla', @@ -205,7 +247,7 @@ type : 'Semantic'
After initialization
Settings can be changed after a module is initialized by calling the 'settings' method on the module with either a settings object or a name, value pair.
-
+
$('.foo') // lets initialize that! .popup() @@ -222,8 +264,8 @@ type : 'Semantic'

Reading Settings

Settings can also be read programmatically: -

- // outputs godzilla +
+ // outputs 'godzilla' (1) or ['godzilla', 'godzilla'...] (2 or more) $('.foo').popup('setting', 'moduleName');
diff --git a/server/documents/modules/accordion.html.eco b/server/documents/modules/accordion.html.eco index e17c9b397..a2e9d4770 100755 --- a/server/documents/modules/accordion.html.eco +++ b/server/documents/modules/accordion.html.eco @@ -111,9 +111,12 @@ type : 'UI Module'
-

Behavior

+

Behaviors

- All the following behaviors can be called using the syntax $('.foo').accordion('behavior name', argumentOne, argumentTwo) +

Behaviors are accessible with javascript using the syntax:

+

+ $('.ui.accordion').accordion('behavior', argumentOne, argumentTwo...); +
@@ -126,7 +129,7 @@ type : 'UI Module' - +
toggle (index)Closes accordion content at indexToggles accordion content at index
@@ -135,33 +138,36 @@ type : 'UI Module'
-

Form

+

Form

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

-
-
-
- - +
+
+
+
+ + +
+
+ + +
-
- - +
+ + Optional Details
-
-
- - Optional Details -
-
-
- - +
+
+ + +
+
Sign Up
-

Menu

+

Menu

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

@@ -250,7 +256,8 @@ type : 'UI Module'

Initializing an accordion

-
+

After including accordion html in a page you can attach behaviors with javascript

+
$('.ui.accordion') .accordion() ; @@ -342,10 +349,11 @@ type : 'UI Module' selector -
{ - title : '.title', - content : '.content' - } +
+ { + title : '.title', + content : '.content' + }
Object containing selectors used by module. @@ -354,9 +362,9 @@ type : 'UI Module' className
- className : { - active : 'active' - }, + className : { + active : 'active' + }
Class names used to attach style to state @@ -400,10 +408,10 @@ type : 'UI Module' errors
- error : { - method : 'The method you called is not defined.', - notFound : 'There were no elements that matched the specified selector' - } + error : { + method : 'The method you called is not defined.', + notFound : 'There were no elements that matched the specified selector' + }
diff --git a/server/documents/modules/checkbox.html.eco b/server/documents/modules/checkbox.html.eco index 5f660c44c..b2f2fdad9 100755 --- a/server/documents/modules/checkbox.html.eco +++ b/server/documents/modules/checkbox.html.eco @@ -8,316 +8,326 @@ type : 'UI Module' --- -<%- @partial('header') %> +<%- @partial('header', { tabs: 'module' }) %>
-
-
- Usage - Types - Variations - Behavior - Examples -
-
- -

Usage

- -
-

Check Box

-

A standard checkbox

+
-
Javascript
-
- $('.ui.checkbox') - .checkbox() - ; -
-
HTML
-
-
- - -
-
- -
-

Static Check Box

-

A checkbox can also be used without using javascript by creating the check box as a label with a for tag matching the id attribute of the input field.

-
HTML Only
-
-
- - -
+
+
+ Types + Variations + Behavior
-
- +

Types

-

Types

+
+

Checkbox

+

A standard checkbox

+
+ + +
+
-
-

Slider

-

A checkbox can be formatted to show user selection as a slider

-
- - +
+

Slider

+

A checkbox can be formatted to show user selection as a slider

+
+ + +
-
-
-

Toggle

-

A checkbox can be formatted to show user selection as a toggle

-
- - +
+

Toggle

+

A checkbox can be formatted to show user selection as a toggle

+
+ + +
-
-
-

Radio Box

-

A checkbox can be formatted as a radio element. This means it is an exclusive option.

-
-
-
-
- - +
+

Radio Box

+

A checkbox can be formatted as a radio element. This means it is an exclusive option.

+
+
+
+
+ + +
-
-
-
- - +
+
+ + +
-
-
-
- - +
+
+ + +
-
-
-
- - +
+
+ + +
-
-

Variations

+

Variations

-
-

Size

-

A checkbox can be a different size.

-
- - +
+

Size

+

A checkbox can be a different size.

+
+ + +
-
-
-
- - +
+
+ + +
-
-

Behavior

+

Behavior

+ + + + + + + + + + + + + + +
enableA checkbox can change to show a user has selected it
disableA checkbox can change to show a user has deselected it
toggleA checkbox can toggle its current selection state
-
-

A checkbox can change to show a user has selected it

-
- $('.ui.checkbox') - .checkbox('enable') - ; -
-
-
-

A checkbox can change to show a user has not selected it

-
- $('.ui.checkbox') - .checkbox('disable') - ; -
-
-

A checkbox can toggle between states

-
- $('.ui.checkbox') - .checkbox('toggle') - ; + +
+ +

Usage

+ +
+

Check Box

+

A checkbox can be initialized with javascript

+ +
Javascript
+
+ $('.ui.checkbox') + .checkbox() + ; +
+
HTML
+
+
+ + +
+
+ +
+

Check Box 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

+
HTML Only
+
+
+ + +
+
+
+
+
-

Examples

- -
-

Example of using checkbox states to alter multiple checkboxes

-
- $('.enable.button') - .on('click', function() { - $(this) - .parent() - .nextAll('.checkbox') - .checkbox('enable') - ; - }) - ; - $('.disable.button') - .on('click', function() { - $(this) - .parent() - .nextAll('.checkbox') - .checkbox('disable') - ; - }) - ; - $('.toggle.button') - .on('click', function() { - $(this) - .parent() - .nextAll('.checkbox') - .checkbox('toggle') - ; - }) - ; -
-
-
Enable
-
Disable
-
Toggle
-
-

-
- -
-
-
- -
-
-
- -
-
-
- -
-
-
- -
-
-
- -
-
-
- -
-
-
- -
-
-
- -
-
-
- -
+
+ +

Examples

+ +
+

Example of using checkbox states to alter multiple checkboxes

+
+ $('.enable.button') + .on('click', function() { + $(this) + .parent() + .nextAll('.checkbox') + .checkbox('enable') + ; + }) + ; + $('.disable.button') + .on('click', function() { + $(this) + .parent() + .nextAll('.checkbox') + .checkbox('disable') + ; + }) + ; + $('.toggle.button') + .on('click', function() { + $(this) + .parent() + .nextAll('.checkbox') + .checkbox('toggle') + ; + }) + ; +
+
+
Enable
+
Disable
+
Toggle
+
+

+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
-

Settings

- - - - - - - - - - - - - - - - -
Checkbox Settings
requiredautoSetting to true/false will determine whether an input will allow no selection. Auto will set disallow this behavior only for radio boxes
contextfalseA selector or jQuery object to use as a delegated event context
- - - - - - - - - - - - - - - - - - - - - - -
Callbacks
onChangeNoneCallback after a checkbox is either disabled or enabled.
onEnableNoneCallback after a checkbox is enabled.
onDisableNoneCallback after a checkbox is disabled.
- -

DOM Settings

-

DOM settings specify how this module should interface with the DOM

- - - - - - - - - - - - - - - - - - - - - -
SettingDefaultDescription
namespacecheckboxEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector -
- selector : { - input : 'input', - label : 'label' - } -
-
className -
+
- className : { - radio : 'radio' - } +

Settings

+ + + + + + + + + + + + + + + + +
Checkbox Settings
requiredautoSetting to true/false will determine whether an input will allow no selection. Auto will set disallow this behavior only for radio boxes
contextfalseA selector or jQuery object to use as a delegated event context
-
-
+ + + + + + + + + + + + + + + + + + + + + +
Callbacks
onChangeNoneCallback after a checkbox is either disabled or enabled.
onEnableNoneCallback after a checkbox is enabled.
onDisableNoneCallback after a checkbox is disabled.
+ +

DOM Settings

+

DOM settings specify how this module should interface with the DOM

+ + + + + + + + + + + + + + + + + + + + + +
SettingDefaultDescription
namespacecheckboxEvent namespace. Makes sure module teardown does not effect other events attached to an element.
selector +
+ selector : { + input : 'input', + label : 'label' + } +
+
className +
+ + className : { + radio : 'radio' + } + +
+
+
diff --git a/server/draft/chat.html b/server/draft/chat.html index 700028059..231525a8e 100755 --- a/server/draft/chat.html +++ b/server/draft/chat.html @@ -1,6 +1,7 @@ --- layout : 'default' css : 'chatroom' +ignored : true title : 'Chatroom' description : 'A chatroom allows users to communicate with each other in real time.' diff --git a/server/draft/tab.html.eco b/server/draft/tab.html.eco index e1b56c43d..a255177a4 100755 --- a/server/draft/tab.html.eco +++ b/server/draft/tab.html.eco @@ -43,6 +43,7 @@ type : 'UI Module' }) ;
+
First diff --git a/server/files/javascript/semantic.js b/server/files/javascript/semantic.js index 8bff70415..ed8eea916 100755 --- a/server/files/javascript/semantic.js +++ b/server/files/javascript/semantic.js @@ -42,7 +42,7 @@ semantic.ready = function() { $menuPopup = $('.ui.main.menu .popup.item'), $menuDropdown = $('.ui.main.menu .dropdown'), - $pageTabs = $('.tab.segment .menu .item'), + $pageTabs = $('body > .tab.segment .menu .item'), $downloadDropdown = $('.download.buttons .dropdown'), @@ -236,6 +236,33 @@ semantic.ready = function() { ; }, + getIndent: function(text) { + var + lines = text.split("\n"), + firstLine = (lines[0] === '') + ? lines[1] + : lines[0], + spacesPerIndent = 2, + leadingSpaces = firstLine.length - firstLine.replace(/^\s*/g, '').length, + indent + ; + if(leadingSpaces !== 0) { + indent = leadingSpaces; + } + else { + // string has already been trimmed, get first indented line and subtract 2 + $.each(lines, function(index, line) { + leadingSpaces = line.length - line.replace(/^\s*/g, '').length; + if(leadingSpaces !== 0) { + indent = leadingSpaces - spacesPerIndent; + console.log('returning' + indent); + return false; + } + }); + } + return indent || 4; + }, + generateCode: function() { var $example = $(this).closest('.example'), @@ -243,7 +270,6 @@ semantic.ready = function() { $code = $annotation.find('.code'), $header = $example.children('.ui.header:first-of-type').eq(0).add('p:first-of-type'), $demo = $example.children().not($header).not('i.code:first-child, .code, .instructive, .language.label, .annotation, br, .ignore, .ignored'), - whiteSpace = new RegExp('\\n\\s{4}', 'g'), code = '' ; if( $code.size() === 0) { @@ -370,16 +396,18 @@ semantic.ready = function() { text : 'Command Line', sh : 'Command Line' }, - whiteSpace = new RegExp('\\n\\s{4}', 'g'), + indent = handler.getIndent(code) || 4, + padding = 20, + whiteSpace, $label, - padding = 20, editor, editorSession, codeHeight ; // trim whitespace - code = $.trim(code.replace(whiteSpace, '\n')); + whiteSpace = new RegExp('\\n\\s{' + indent + '}', 'g'); + code = $.trim(code).replace(whiteSpace, '\n'); if(contentType == 'html') { $code.text(code); @@ -618,8 +646,11 @@ semantic.ready = function() { if( $pageTabs.size() > 0 ) { $pageTabs .tab({ - history: false, - onTabInit: handler.makeCode + onTabInit : handler.makeCode, + onTabLoad : function() { + $.waypoints('refresh'); + $peekItem.removeClass('active').first().addClass('active'); + } }) ; } diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css index 7047b1124..40743eed4 100755 --- a/server/files/stylesheets/semantic.css +++ b/server/files/stylesheets/semantic.css @@ -856,7 +856,7 @@ body.guide .main.container > * { background-color: transparent; } #example .label + div.code { - margin-top: 1em; + margin-top: 1.5em; } #example div.code .ace_gutter { background-color: #FAFAFA; diff --git a/server/partials/header.html.eco b/server/partials/header.html.eco index f51645271..8aa874c5e 100755 --- a/server/partials/header.html.eco +++ b/server/partials/header.html.eco @@ -10,12 +10,18 @@

<%=@document.description %>

- <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection' or @document.type is 'UI Module': %> + <% if @document.type is 'UI Element' or @document.type is 'UI View' or @document.type is 'UI Collection': %>
- Overview + Definition Mode
<% end %> + <% if @document.type is 'UI Module': %> + + How to Use + + + <% end %>