Semantic's page grid, by default, uses percentage values for page gutters. This means your page container will constantly adjust as the browser width changes, giving you the largest possible space for each breakpoint.
Grids, rows, and columns can receive responsive classes to make them appear only on a particular device.
-| Name | diff --git a/server/documents/modules/api.html.eco b/server/documents/modules/api.html.eco index 9f8bdae3a..6eb3fa758 100644 --- a/server/documents/modules/api.html.eco +++ b/server/documents/modules/api.html.eco @@ -3,8 +3,8 @@ layout : 'default' css : 'api' title : 'API' -description : 'API allows UI elements to send events to the server' -type : 'UI Behavior' +description : 'API allows elements to trigger actions on a server' +type : 'Draft' --- @@ -17,7 +17,7 @@ type : 'UI Behavior'
|---|
| Variable | +Description | +Available for | +
|---|---|---|
| text | +current text value of element | +All DOM elements | +
| value | +current input value of element | +All input elements | +
If many elements trigger a similar function, it is often easiest to include unique url data in each triggering element. For example, many follow buttons will trigger the same endpoint, but each will have its own user id.
URL variables can be specified at run-time in the javascript object
+URL variables can be specified at run-time in the javascript object
In addition all parameters can be adjusted in a special callback beforeSend which occurs, quite intuitively, before the API request is sent.
You can also use this callback to adjust other settings before each API call
Many elements like button, input, and form have loading, disabled, and active states defined.
- - -API will automatically attach a Loading state when an API request is triggered, additional states can be attached using state behaviors, an optional component that couples well with API behaviors.
+API will automatically attach a loading state when an API request is triggered, but makes no other assumptions about states.
+If state is initialized, it will automatically apply the class active on API success, and update any text nodes with new values specified.
If state() is invoked after an API event is attached to an element, it will automatically toggle an active state on the element after a successful API request.
Basic included states
+ +| State | +Description | +API event | +
|---|---|---|
| loading | +Indicates a user needs to wait | +XHR has initialized | +
| error | +Indicates an error has occurred | +Request returns error (does not trigger onAbort caused by page change) | +
State also includes other states:
+Invoking state also includes additional states which can adjust text values:
+| State | +Description | +Occurs on | +
|---|---|---|
| inactive | +User has not selected | +|
| active | +User has selected | +Toggled on succesful API request | +
| activate | +Text explaining activating action | +On hover if inactive | +
| deactivate | +default state | +|
| hover | +Text-only state explaining interaction | +On hover if inactive or active | +
| disabled | +Indicates element is disabled | +Only triggered programatically | +
| Flash | +Text-only state used to display a temporary message | +Only triggered programatically | +
| Disabled | +Cannot receive user interaction | +
flashDuration
@@ -209,34 +365,15 @@ type : 'UI Behavior'
$('.follow.button')
.state({
text: {
- inactive : 'Adopt',
- active : 'Adopted',
- deactivate : 'Undo',
- flash : 'Success'
+ inactive : 'Follow',
+ active : 'Followed',
+ deactivate : 'Unfollow',
+ flash : 'Updated!'
}
})
;
When an API action occurs, templated url data is replaced with data you specify to be sent to the server.
-Alternatively you can modify the data before sending to server
-
diff --git a/src/definitions/behaviors/api.js b/src/definitions/behaviors/api.js
index 1df01884f..a957a09d0 100755
--- a/src/definitions/behaviors/api.js
+++ b/src/definitions/behaviors/api.js
@@ -116,10 +116,12 @@ $.api = $.fn.api = function(parameters) {
module.debug('Request cancelled previous request is still pending');
return;
}
+
// pass element metadata to url (value, text)
if(settings.defaultData) {
$.extend(true, settings.urlData, module.get.defaultData());
}
+ console.log(settings.urlData);
// Add form content
if(settings.serializeForm !== false || $module.is('form')) {
@@ -379,7 +381,7 @@ $.api = $.fn.api = function(parameters) {
errorMessage = response.error;
}
}
- catch(er) {
+ catch(e) {
module.error(error.JSONParse);
}
}
@@ -742,14 +744,13 @@ $.api.settings = {
// event binding
on : 'auto',
- filter : '.disabled, .loading',
+ filter : '.disabled',
context : false,
stateContext : false,
// templating
action : false,
-
- base : false,
+ url : false,
regExp : {
required: /\{\$*[A-z0-9]+\}/g,
@@ -757,12 +758,12 @@ $.api.settings = {
},
// data
- url : false,
- urlData : false,
- serializeForm : false,
+ urlData : {},
+
// ui
defaultData : true,
+ serializeForm : false,
throttle : 100,
allowMultiple : false,
@@ -785,7 +786,7 @@ $.api.settings = {
onFailure : function(errorMessage, $module) {},
onAbort : function(errorMessage, $module) {},
- successText : function(response) { return true; },
+ successTest : function(response) { return true; },
// errors
error : {
diff --git a/src/definitions/behaviors/state.js b/src/definitions/behaviors/state.js
index f8022fe24..2d5272795 100755
--- a/src/definitions/behaviors/state.js
+++ b/src/definitions/behaviors/state.js
@@ -14,7 +14,6 @@
$.fn.state = function(parameters) {
var
$allModules = $(this),
- settings = $.extend(true, {}, $.fn.state.settings, parameters),
moduleSelector = $allModules.selector || '',
@@ -26,27 +25,29 @@ $.fn.state = function(parameters) {
methodInvoked = (typeof query == 'string'),
queryArguments = [].slice.call(arguments, 1),
- // shortcuts
- error = settings.error,
- metadata = settings.metadata,
- className = settings.className,
- namespace = settings.namespace,
- states = settings.states,
- text = settings.text,
-
- eventNamespace = '.' + namespace,
- moduleNamespace = namespace + '-module',
-
-
returnedValue
;
$allModules
.each(function() {
var
- $module = $(this),
+ settings = ( $.isPlainObject(parameters) )
+ ? $.extend(true, {}, $.fn.state.settings, parameters)
+ : $.extend({}, $.fn.state.settings),
+
+ error = settings.error,
+ metadata = settings.metadata,
+ className = settings.className,
+ namespace = settings.namespace,
+ states = settings.states,
+ text = settings.text,
+
+ eventNamespace = '.' + namespace,
+ moduleNamespace = namespace + '-module',
- element = this,
- instance = $module.data(moduleNamespace),
+ $module = $(this),
+
+ element = this,
+ instance = $module.data(moduleNamespace),
module
;
@@ -197,6 +198,7 @@ $.fn.state = function(parameters) {
module.refresh();
if($.fn.api !== undefined) {
apiRequest = $module.api('get request');
+ console.log(apiRequest, $module);
if(apiRequest) {
module.listenTo(apiRequest);
return;
@@ -265,19 +267,19 @@ $.fn.state = function(parameters) {
module.verbose('Changing text to hover text', text.hover);
module.update.text(text.hover);
}
- else if(text.disable) {
- module.verbose('Changing text to disable text', text.disable);
- module.update.text(text.disable);
+ else if(text.deactivate) {
+ module.verbose('Changing text to deactivating text', text.deactivate);
+ module.update.text(text.deactivate);
}
}
else {
if(text.hover) {
- module.verbose('Changing text to hover text', text.disable);
+ module.verbose('Changing text to hover text', text.hover);
module.update.text(text.hover);
}
- else if(text.enable){
- module.verbose('Changing text to enable text', text.enable);
- module.update.text(text.enable);
+ else if(text.activate){
+ module.verbose('Changing text to activating text', text.activate);
+ module.update.text(text.activate);
}
}
}
@@ -400,27 +402,22 @@ $.fn.state = function(parameters) {
setting: function(name, value) {
module.debug('Changing setting', name, value);
- if(value !== undefined) {
- if( $.isPlainObject(name) ) {
- $.extend(true, settings, name);
- }
- else {
- settings[name] = value;
- }
+ if( $.isPlainObject(name) ) {
+ $.extend(true, settings, name);
+ }
+ else if(value !== undefined) {
+ settings[name] = value;
}
else {
return settings[name];
}
},
internal: function(name, value) {
- module.debug('Changing internal', name, value);
- if(value !== undefined) {
- if( $.isPlainObject(name) ) {
- $.extend(true, module, name);
- }
- else {
- module[name] = value;
- }
+ if( $.isPlainObject(name) ) {
+ $.extend(true, module, name);
+ }
+ else if(value !== undefined) {
+ module[name] = value;
}
else {
return module[name];
@@ -488,9 +485,6 @@ $.fn.state = function(parameters) {
if(moduleSelector) {
title += ' \'' + moduleSelector + '\'';
}
- if($allModules.size() > 1) {
- title += ' ' + '(' + $allModules.size() + ')';
- }
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
console.groupCollapsed(title);
if(console.table) {
@@ -538,6 +532,7 @@ $.fn.state = function(parameters) {
return false;
}
else {
+ module.error(error.method, query);
return false;
}
});
@@ -560,6 +555,7 @@ $.fn.state = function(parameters) {
return found;
}
};
+
if(methodInvoked) {
if(instance === undefined) {
module.initialize();
@@ -572,7 +568,6 @@ $.fn.state = function(parameters) {
}
module.initialize();
}
-
})
;
@@ -680,13 +675,13 @@ $.fn.state.settings = {
},
text : {
- disabled : false,
- flash : false,
- hover : false,
- active : false,
- inactive : false,
- enable : false,
- disable : false
+ disabled : false,
+ flash : false,
+ hover : false,
+ active : false,
+ inactive : false,
+ activate : false,
+ deactivate : false
}
};