From 1efb58c31fca7bc012f6acfc404899420b19ab63 Mon Sep 17 00:00:00 2001 From: jlukic Date: Mon, 30 Sep 2013 15:40:26 -0400 Subject: [PATCH] Tab: begin tab documentation Former-commit-id: 54ce44aaa3e2fa1eee3bac996f0e53701246f5df Former-commit-id: 6d1355372c7329b73fe0d7856f5de30c627f9903 --- RELEASE NOTES.md | 2 +- build/less/modules/tab.js | 23 +- build/minified/modules/tab.js | 23 +- build/uncompressed/modules/tab.js | 23 +- .../introduction/getting-started.html.eco | 2 +- node/src/documents/modules/tab.html.eco | 265 ++++++++++++++++++ node/src/files/build/less/modules/tab.js | 23 +- node/src/files/build/minified/modules/tab.js | 23 +- .../files/build/uncompressed/modules/tab.js | 23 +- node/src/files/javascript/tab.js | 30 ++ src/modules/tab.js | 23 +- 11 files changed, 388 insertions(+), 72 deletions(-) create mode 100755 node/src/documents/modules/tab.html.eco create mode 100755 node/src/files/javascript/tab.js diff --git a/RELEASE NOTES.md b/RELEASE NOTES.md index 2a96f2ac0..7e346b60a 100755 --- a/RELEASE NOTES.md +++ b/RELEASE NOTES.md @@ -1,6 +1,6 @@ ## RELEASE NOTES -### Version 0.2.5- Sep 28, 2013 +### Version 0.2.5- Sep 30, 2013 **Fixes** - Fixes checkbox selector issue with multiple inputs inside a checkbox diff --git a/build/less/modules/tab.js b/build/less/modules/tab.js index 65eea80ca..1cd832a0e 100644 --- a/build/less/modules/tab.js +++ b/build/less/modules/tab.js @@ -80,6 +80,7 @@ } // attach events if navigation wasn't set to window if( !$.isWindow( element ) ) { + module.debug('Attaching events to tab activator', $module); $module .on('click' + eventNamespace, module.event.click) ; @@ -172,9 +173,9 @@ // only get default path if not remote content pathArray = (remoteContent && !shouldIgnoreLoad) ? module.utilities.pathToArray(tabPath) - : module.get.defaultPathArray(tabPath), - tabPath = module.utilities.arrayToPath(pathArray) + : module.get.defaultPathArray(tabPath) ; + tabPath = module.utilities.arrayToPath(pathArray); module.deactivate.all(); $.each(pathArray, function(index, tab) { var @@ -241,8 +242,6 @@ fetch: function(tabPath, fullTabPath) { var $tab = module.get.tabElement(tabPath), - fullTabPath = fullTabPath || tabPath, - cachedContent = module.cache.read(fullTabPath), apiSettings = { dataType : 'html', stateContext : $tab, @@ -262,8 +261,13 @@ urlData: { tab: fullTabPath } }, request = $tab.data(metadata.promise) || false, - existingRequest = ( request && request.state() === 'pending' ) + existingRequest = ( request && request.state() === 'pending' ), + cachedContent ; + + fullTabPath = fullTabPath || tabPath; + cachedContent = module.cache.read(fullTabPath); + if(settings.cache && cachedContent) { module.debug('Showing existing content', fullTabPath); module.content.update(tabPath, cachedContent); @@ -630,7 +634,6 @@ // uses pjax style endpoints fetching content from same url with remote-content headers auto : false, - history : false, path : false, @@ -649,12 +652,12 @@ error: { api : 'You attempted to load content without API module', - noContent : 'The tab you specified is missing a content url.', method : 'The method you called is not defined', - state : 'The state library has not been initialized', missingTab : 'Tab cannot be found', + noContent : 'The tab you specified is missing a content url.', path : 'History enabled, but no path was specified', - recursion : 'Max recursive depth reached' + recursion : 'Max recursive depth reached', + state : 'The state library has not been initialized' }, metadata : { @@ -669,7 +672,7 @@ }, selector : { - tabs : '.tab' + tabs : '.ui.tab' } }; diff --git a/build/minified/modules/tab.js b/build/minified/modules/tab.js index 65eea80ca..1cd832a0e 100644 --- a/build/minified/modules/tab.js +++ b/build/minified/modules/tab.js @@ -80,6 +80,7 @@ } // attach events if navigation wasn't set to window if( !$.isWindow( element ) ) { + module.debug('Attaching events to tab activator', $module); $module .on('click' + eventNamespace, module.event.click) ; @@ -172,9 +173,9 @@ // only get default path if not remote content pathArray = (remoteContent && !shouldIgnoreLoad) ? module.utilities.pathToArray(tabPath) - : module.get.defaultPathArray(tabPath), - tabPath = module.utilities.arrayToPath(pathArray) + : module.get.defaultPathArray(tabPath) ; + tabPath = module.utilities.arrayToPath(pathArray); module.deactivate.all(); $.each(pathArray, function(index, tab) { var @@ -241,8 +242,6 @@ fetch: function(tabPath, fullTabPath) { var $tab = module.get.tabElement(tabPath), - fullTabPath = fullTabPath || tabPath, - cachedContent = module.cache.read(fullTabPath), apiSettings = { dataType : 'html', stateContext : $tab, @@ -262,8 +261,13 @@ urlData: { tab: fullTabPath } }, request = $tab.data(metadata.promise) || false, - existingRequest = ( request && request.state() === 'pending' ) + existingRequest = ( request && request.state() === 'pending' ), + cachedContent ; + + fullTabPath = fullTabPath || tabPath; + cachedContent = module.cache.read(fullTabPath); + if(settings.cache && cachedContent) { module.debug('Showing existing content', fullTabPath); module.content.update(tabPath, cachedContent); @@ -630,7 +634,6 @@ // uses pjax style endpoints fetching content from same url with remote-content headers auto : false, - history : false, path : false, @@ -649,12 +652,12 @@ error: { api : 'You attempted to load content without API module', - noContent : 'The tab you specified is missing a content url.', method : 'The method you called is not defined', - state : 'The state library has not been initialized', missingTab : 'Tab cannot be found', + noContent : 'The tab you specified is missing a content url.', path : 'History enabled, but no path was specified', - recursion : 'Max recursive depth reached' + recursion : 'Max recursive depth reached', + state : 'The state library has not been initialized' }, metadata : { @@ -669,7 +672,7 @@ }, selector : { - tabs : '.tab' + tabs : '.ui.tab' } }; diff --git a/build/uncompressed/modules/tab.js b/build/uncompressed/modules/tab.js index 65eea80ca..1cd832a0e 100644 --- a/build/uncompressed/modules/tab.js +++ b/build/uncompressed/modules/tab.js @@ -80,6 +80,7 @@ } // attach events if navigation wasn't set to window if( !$.isWindow( element ) ) { + module.debug('Attaching events to tab activator', $module); $module .on('click' + eventNamespace, module.event.click) ; @@ -172,9 +173,9 @@ // only get default path if not remote content pathArray = (remoteContent && !shouldIgnoreLoad) ? module.utilities.pathToArray(tabPath) - : module.get.defaultPathArray(tabPath), - tabPath = module.utilities.arrayToPath(pathArray) + : module.get.defaultPathArray(tabPath) ; + tabPath = module.utilities.arrayToPath(pathArray); module.deactivate.all(); $.each(pathArray, function(index, tab) { var @@ -241,8 +242,6 @@ fetch: function(tabPath, fullTabPath) { var $tab = module.get.tabElement(tabPath), - fullTabPath = fullTabPath || tabPath, - cachedContent = module.cache.read(fullTabPath), apiSettings = { dataType : 'html', stateContext : $tab, @@ -262,8 +261,13 @@ urlData: { tab: fullTabPath } }, request = $tab.data(metadata.promise) || false, - existingRequest = ( request && request.state() === 'pending' ) + existingRequest = ( request && request.state() === 'pending' ), + cachedContent ; + + fullTabPath = fullTabPath || tabPath; + cachedContent = module.cache.read(fullTabPath); + if(settings.cache && cachedContent) { module.debug('Showing existing content', fullTabPath); module.content.update(tabPath, cachedContent); @@ -630,7 +634,6 @@ // uses pjax style endpoints fetching content from same url with remote-content headers auto : false, - history : false, path : false, @@ -649,12 +652,12 @@ error: { api : 'You attempted to load content without API module', - noContent : 'The tab you specified is missing a content url.', method : 'The method you called is not defined', - state : 'The state library has not been initialized', missingTab : 'Tab cannot be found', + noContent : 'The tab you specified is missing a content url.', path : 'History enabled, but no path was specified', - recursion : 'Max recursive depth reached' + recursion : 'Max recursive depth reached', + state : 'The state library has not been initialized' }, metadata : { @@ -669,7 +672,7 @@ }, selector : { - tabs : '.tab' + tabs : '.ui.tab' } }; diff --git a/node/src/documents/introduction/getting-started.html.eco b/node/src/documents/introduction/getting-started.html.eco index 612c53ffe..6c64e17a7 100755 --- a/node/src/documents/introduction/getting-started.html.eco +++ b/node/src/documents/introduction/getting-started.html.eco @@ -67,7 +67,7 @@ $(document)
First
Second
Third
- +

Opening a new tab with a behavior

Modules have simple behaviors for triggering common actions

diff --git a/node/src/documents/modules/tab.html.eco b/node/src/documents/modules/tab.html.eco new file mode 100755 index 000000000..c2516c99c --- /dev/null +++ b/node/src/documents/modules/tab.html.eco @@ -0,0 +1,265 @@ +--- +layout : 'default' +css : 'side' + +title : 'Tab' +description : 'A tab is a section of content tied to a navigation menu' +type : 'UI Module' +--- + + + +<%- @partial('header') %> + +
+ +
+
+ Usage + Examples + Behavior + Settings +
+
+ +

Usage

+ +

Opening tabs with menus

+

Tabs are usually used in concert with an element that activates the tab.

+

When using tabs, unlike other UI components, the menu or activating element is initialized instead of the tab.

+ +
+ Tabs are connected to their activators with a metadata attribute data-tab. This should be added to both the activating element and the tab itself. +
+
+ $('.demo.menu .item') + .tab() + ; +
+
+
+ First + Second + Third +
+
+ First Tab +
+
+ Second Tab +
+
+ Third Tab +
+
+ +

Managing Back/Forward Buttons with Tabs

+

Tabs can attach to a history change event to allow for tabs to maintain history events. Tabs use Asual's Address library to provide cross-browser push state support. This makes sure in browser that don't support push state, hashchange is used with in page anchors to provide history functionality.

+
+
Use proper path
+ Make sure when you use history to specify the proper path. This is required for determining the stem url from the part of the url maintaining in page history. Using the incorrect path will cause the module to work incorrectly, producing unexpected results. +
+
+
Route your URLs
+ Be sure to set up routes on your server for any url used with history. If you use history to change the url to a location that does not exist, it will 404 on the next refresh. For example this documentation will 404 on refresh because Github Pages are only set up to server static site content. +
+
+ $('.history.menu .item') + .tab({ + history : true, + path : '/modules/tab.html' + }) + ; +
+
+
+ First + Second + Third +
+
+ First Tab +
+
+ Second Tab +
+
+ Third Tab +
+
+ +

Examples

+ + +

Behavior

+ + All the following behaviors can be called using the syntax $('.foo').tab('behavior name', argumentOne, argumentTwo) + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
attach events(selector, event)Attaches tab action to given selector. Default event if none specified is toggle
showShows tab
hideHides tab
toggleToggles visibility of tab
is openReturns whether tab is open
is closedReturns whether tab is closed
push pagePushes page content to be visible alongside tab
get directionReturns direction of current tab
pull pageReturns page content to original position
add body cssAdds stylesheet to page head to trigger tab animations
remove body cssRemoves any inline stylesheets for tab animation
get transition eventReturns vendor prefixed transition end event
+ +

Settings

+ +

+ Transition Settings +
Form settings modify the transition behavior
+

+ + + + + + + + + + + + + + + + + + + + + + + +
SettingDefaultDescription
overlayfalseWhether tab should overlay page instead of pushing page to the side
useCSStrueWhether to use css animations or fallback javascript animations
duration300Duration of side bar animation
+ +

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

+ + + + + + + + + + + + + + + + + + +
SettingDefaultDescription
namespacetabEvent namespace. Makes sure module teardown does not effect other events attached to an element.
className +
+ className: { + active : 'active', + pushed : 'pushed', + top : 'top', + left : 'left', + right : 'right', + bottom : 'bottom' + } +
+ 		Class names used to attach style to state
+ +
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SettingDefaultDescription
nameTabName used in debug logs
debugTrueProvides standard debug output to console
performanceTrueProvides standard debug output to console
verboseTrueProvides ancillary debug output to console
errors +
+ error : { + method : 'The method you called is not defined.', + notFound : 'There were no elements that matched the specified selector' + } +
+
+ +
+ + \ No newline at end of file diff --git a/node/src/files/build/less/modules/tab.js b/node/src/files/build/less/modules/tab.js index 65eea80ca..1cd832a0e 100644 --- a/node/src/files/build/less/modules/tab.js +++ b/node/src/files/build/less/modules/tab.js @@ -80,6 +80,7 @@ } // attach events if navigation wasn't set to window if( !$.isWindow( element ) ) { + module.debug('Attaching events to tab activator', $module); $module .on('click' + eventNamespace, module.event.click) ; @@ -172,9 +173,9 @@ // only get default path if not remote content pathArray = (remoteContent && !shouldIgnoreLoad) ? module.utilities.pathToArray(tabPath) - : module.get.defaultPathArray(tabPath), - tabPath = module.utilities.arrayToPath(pathArray) + : module.get.defaultPathArray(tabPath) ; + tabPath = module.utilities.arrayToPath(pathArray); module.deactivate.all(); $.each(pathArray, function(index, tab) { var @@ -241,8 +242,6 @@ fetch: function(tabPath, fullTabPath) { var $tab = module.get.tabElement(tabPath), - fullTabPath = fullTabPath || tabPath, - cachedContent = module.cache.read(fullTabPath), apiSettings = { dataType : 'html', stateContext : $tab, @@ -262,8 +261,13 @@ urlData: { tab: fullTabPath } }, request = $tab.data(metadata.promise) || false, - existingRequest = ( request && request.state() === 'pending' ) + existingRequest = ( request && request.state() === 'pending' ), + cachedContent ; + + fullTabPath = fullTabPath || tabPath; + cachedContent = module.cache.read(fullTabPath); + if(settings.cache && cachedContent) { module.debug('Showing existing content', fullTabPath); module.content.update(tabPath, cachedContent); @@ -630,7 +634,6 @@ // uses pjax style endpoints fetching content from same url with remote-content headers auto : false, - history : false, path : false, @@ -649,12 +652,12 @@ error: { api : 'You attempted to load content without API module', - noContent : 'The tab you specified is missing a content url.', method : 'The method you called is not defined', - state : 'The state library has not been initialized', missingTab : 'Tab cannot be found', + noContent : 'The tab you specified is missing a content url.', path : 'History enabled, but no path was specified', - recursion : 'Max recursive depth reached' + recursion : 'Max recursive depth reached', + state : 'The state library has not been initialized' }, metadata : { @@ -669,7 +672,7 @@ }, selector : { - tabs : '.tab' + tabs : '.ui.tab' } }; diff --git a/node/src/files/build/minified/modules/tab.js b/node/src/files/build/minified/modules/tab.js index 65eea80ca..1cd832a0e 100644 --- a/node/src/files/build/minified/modules/tab.js +++ b/node/src/files/build/minified/modules/tab.js @@ -80,6 +80,7 @@ } // attach events if navigation wasn't set to window if( !$.isWindow( element ) ) { + module.debug('Attaching events to tab activator', $module); $module .on('click' + eventNamespace, module.event.click) ; @@ -172,9 +173,9 @@ // only get default path if not remote content pathArray = (remoteContent && !shouldIgnoreLoad) ? module.utilities.pathToArray(tabPath) - : module.get.defaultPathArray(tabPath), - tabPath = module.utilities.arrayToPath(pathArray) + : module.get.defaultPathArray(tabPath) ; + tabPath = module.utilities.arrayToPath(pathArray); module.deactivate.all(); $.each(pathArray, function(index, tab) { var @@ -241,8 +242,6 @@ fetch: function(tabPath, fullTabPath) { var $tab = module.get.tabElement(tabPath), - fullTabPath = fullTabPath || tabPath, - cachedContent = module.cache.read(fullTabPath), apiSettings = { dataType : 'html', stateContext : $tab, @@ -262,8 +261,13 @@ urlData: { tab: fullTabPath } }, request = $tab.data(metadata.promise) || false, - existingRequest = ( request && request.state() === 'pending' ) + existingRequest = ( request && request.state() === 'pending' ), + cachedContent ; + + fullTabPath = fullTabPath || tabPath; + cachedContent = module.cache.read(fullTabPath); + if(settings.cache && cachedContent) { module.debug('Showing existing content', fullTabPath); module.content.update(tabPath, cachedContent); @@ -630,7 +634,6 @@ // uses pjax style endpoints fetching content from same url with remote-content headers auto : false, - history : false, path : false, @@ -649,12 +652,12 @@ error: { api : 'You attempted to load content without API module', - noContent : 'The tab you specified is missing a content url.', method : 'The method you called is not defined', - state : 'The state library has not been initialized', missingTab : 'Tab cannot be found', + noContent : 'The tab you specified is missing a content url.', path : 'History enabled, but no path was specified', - recursion : 'Max recursive depth reached' + recursion : 'Max recursive depth reached', + state : 'The state library has not been initialized' }, metadata : { @@ -669,7 +672,7 @@ }, selector : { - tabs : '.tab' + tabs : '.ui.tab' } }; diff --git a/node/src/files/build/uncompressed/modules/tab.js b/node/src/files/build/uncompressed/modules/tab.js index 65eea80ca..1cd832a0e 100644 --- a/node/src/files/build/uncompressed/modules/tab.js +++ b/node/src/files/build/uncompressed/modules/tab.js @@ -80,6 +80,7 @@ } // attach events if navigation wasn't set to window if( !$.isWindow( element ) ) { + module.debug('Attaching events to tab activator', $module); $module .on('click' + eventNamespace, module.event.click) ; @@ -172,9 +173,9 @@ // only get default path if not remote content pathArray = (remoteContent && !shouldIgnoreLoad) ? module.utilities.pathToArray(tabPath) - : module.get.defaultPathArray(tabPath), - tabPath = module.utilities.arrayToPath(pathArray) + : module.get.defaultPathArray(tabPath) ; + tabPath = module.utilities.arrayToPath(pathArray); module.deactivate.all(); $.each(pathArray, function(index, tab) { var @@ -241,8 +242,6 @@ fetch: function(tabPath, fullTabPath) { var $tab = module.get.tabElement(tabPath), - fullTabPath = fullTabPath || tabPath, - cachedContent = module.cache.read(fullTabPath), apiSettings = { dataType : 'html', stateContext : $tab, @@ -262,8 +261,13 @@ urlData: { tab: fullTabPath } }, request = $tab.data(metadata.promise) || false, - existingRequest = ( request && request.state() === 'pending' ) + existingRequest = ( request && request.state() === 'pending' ), + cachedContent ; + + fullTabPath = fullTabPath || tabPath; + cachedContent = module.cache.read(fullTabPath); + if(settings.cache && cachedContent) { module.debug('Showing existing content', fullTabPath); module.content.update(tabPath, cachedContent); @@ -630,7 +634,6 @@ // uses pjax style endpoints fetching content from same url with remote-content headers auto : false, - history : false, path : false, @@ -649,12 +652,12 @@ error: { api : 'You attempted to load content without API module', - noContent : 'The tab you specified is missing a content url.', method : 'The method you called is not defined', - state : 'The state library has not been initialized', missingTab : 'Tab cannot be found', + noContent : 'The tab you specified is missing a content url.', path : 'History enabled, but no path was specified', - recursion : 'Max recursive depth reached' + recursion : 'Max recursive depth reached', + state : 'The state library has not been initialized' }, metadata : { @@ -669,7 +672,7 @@ }, selector : { - tabs : '.tab' + tabs : '.ui.tab' } }; diff --git a/node/src/files/javascript/tab.js b/node/src/files/javascript/tab.js new file mode 100755 index 000000000..1ebf16ec1 --- /dev/null +++ b/node/src/files/javascript/tab.js @@ -0,0 +1,30 @@ +semantic.dropdown = {}; + +// ready event +semantic.dropdown.ready = function() { + + // selector cache + var + $examples = $('.example'), + // alias + handler + ; + + // event handlers + handler = { + + }; + + $('.demo.menu') + .first() + .find('.item') + .tab() + ; + +}; + + +// attach ready event +$(document) + .ready(semantic.dropdown.ready) +; \ No newline at end of file diff --git a/src/modules/tab.js b/src/modules/tab.js index 65eea80ca..1cd832a0e 100755 --- a/src/modules/tab.js +++ b/src/modules/tab.js @@ -80,6 +80,7 @@ } // attach events if navigation wasn't set to window if( !$.isWindow( element ) ) { + module.debug('Attaching events to tab activator', $module); $module .on('click' + eventNamespace, module.event.click) ; @@ -172,9 +173,9 @@ // only get default path if not remote content pathArray = (remoteContent && !shouldIgnoreLoad) ? module.utilities.pathToArray(tabPath) - : module.get.defaultPathArray(tabPath), - tabPath = module.utilities.arrayToPath(pathArray) + : module.get.defaultPathArray(tabPath) ; + tabPath = module.utilities.arrayToPath(pathArray); module.deactivate.all(); $.each(pathArray, function(index, tab) { var @@ -241,8 +242,6 @@ fetch: function(tabPath, fullTabPath) { var $tab = module.get.tabElement(tabPath), - fullTabPath = fullTabPath || tabPath, - cachedContent = module.cache.read(fullTabPath), apiSettings = { dataType : 'html', stateContext : $tab, @@ -262,8 +261,13 @@ urlData: { tab: fullTabPath } }, request = $tab.data(metadata.promise) || false, - existingRequest = ( request && request.state() === 'pending' ) + existingRequest = ( request && request.state() === 'pending' ), + cachedContent ; + + fullTabPath = fullTabPath || tabPath; + cachedContent = module.cache.read(fullTabPath); + if(settings.cache && cachedContent) { module.debug('Showing existing content', fullTabPath); module.content.update(tabPath, cachedContent); @@ -630,7 +634,6 @@ // uses pjax style endpoints fetching content from same url with remote-content headers auto : false, - history : false, path : false, @@ -649,12 +652,12 @@ error: { api : 'You attempted to load content without API module', - noContent : 'The tab you specified is missing a content url.', method : 'The method you called is not defined', - state : 'The state library has not been initialized', missingTab : 'Tab cannot be found', + noContent : 'The tab you specified is missing a content url.', path : 'History enabled, but no path was specified', - recursion : 'Max recursive depth reached' + recursion : 'Max recursive depth reached', + state : 'The state library has not been initialized' }, metadata : { @@ -669,7 +672,7 @@ }, selector : { - tabs : '.tab' + tabs : '.ui.tab' } };