Rewrites state to remove hover/focus other useless methods, fixes integration with API, removes auto margins on first and last child of some elements

src/definitions/behaviors/api.js

@@ -103,6 +103,10 @@ $.api = $.fn.api = function(parameters) {
 
         query: function() {
 
+          if(module.is.disabled()) {
+            module.debug('Element is disabled API request aborted');
+            return;
+          }
           // determine if an api event already occurred
           if(module.is.loading() && !settings.allowMultiple) {
             module.debug('Request cancelled previous request is still pending');
@@ -169,6 +173,9 @@ $.api = $.fn.api = function(parameters) {
 
 
         is: {
+          disabled: function() {
+            return ($module.filter(settings.filter).size() > 0);
+          },
           loading: function() {
             return (module.request && module.request.state() == 'pending');
           }
@@ -204,7 +211,9 @@ $.api = $.fn.api = function(parameters) {
                       ? urlData[term]
                       : ($module.data(term) !== undefined)
                         ? $module.data(term)
-                        : urlData[term]
+                        : ($context.data(term) !== undefined)
+                          ? $context.data(term)
+                          : urlData[term]
                   ;
                   module.verbose('Looking for variable', term);
                   // remove optional value
@@ -377,10 +386,10 @@ $.api = $.fn.api = function(parameters) {
 
         get: {
           request: function() {
-            return module.request;
+            return module.request || false;
           },
           xhr: function() {
-            return module.xhr;
+            return module.xhr || false;
           },
           settings: function() {
             return $.proxy(settings.beforeSend, $module)(settings);
@@ -425,13 +434,18 @@ $.api = $.fn.api = function(parameters) {
             var
               formData
             ;
-            if( $(this).toJSON() === undefined ) {
-              module.error(error.missingSerialize);
-              return;
+            if(settings.serializeForm == 'json') {
+              if($(this).toJSON === undefined ) {
+                module.error(error.missingSerialize);
+                return;
+              }
+              formData = $form.toJSON();
+            }
+            else {
+              formData = $form.serialize();
             }
-            formData = $form.toJSON();
             module.debug('Retrieving form data', formData);
-            return $form.toJSON();
+            return formData;
           },
           templateURL: function(action) {
             var
@@ -663,14 +677,14 @@ $.api.settings = {
   allowMultiple   : false,
 
   // state
-  loadingDuration : 1000,
+  loadingDuration : 500,
   errorDuration   : 2000,
 
   // jQ ajax
   method          : 'get',
   data            : {},
   dataType        : 'json',
-  cache         : true,
+  cache           : true,
 
   // callbacks
   beforeSend   : function(settings) { return settings; },

src/definitions/behaviors/state.js

@@ -61,24 +61,6 @@ $.fn.state = function(parameters) {
 
           // bind events with delegated events
           if(settings.context && moduleSelector !== '') {
-            if( module.allows('hover') ) {
-              $(element, settings.context)
-                .on(moduleSelector, 'mouseenter' + eventNamespace, module.enable.hover)
-                .on(moduleSelector, 'mouseleave' + eventNamespace, module.disable.hover)
-              ;
-            }
-            if( module.allows('down') ) {
-              $(element, settings.context)
-                .on(moduleSelector, 'mousedown' + eventNamespace, module.enable.down)
-                .on(moduleSelector, 'mouseup'   + eventNamespace, module.disable.down)
-              ;
-            }
-            if( module.allows('focus') ) {
-              $(element, settings.context)
-                .on(moduleSelector, 'focus' + eventNamespace, module.enable.focus)
-                .on(moduleSelector, 'blur'  + eventNamespace, module.disable.focus)
-              ;
-            }
             $(settings.context)
               .on(moduleSelector, 'mouseenter' + eventNamespace, module.change.text)
               .on(moduleSelector, 'mouseleave' + eventNamespace, module.reset.text)
@@ -86,24 +68,6 @@ $.fn.state = function(parameters) {
             ;
           }
           else {
-            if( module.allows('hover') ) {
-              $module
-                .on('mouseenter' + eventNamespace, module.enable.hover)
-                .on('mouseleave' + eventNamespace, module.disable.hover)
-              ;
-            }
-            if( module.allows('down') ) {
-              $module
-                .on('mousedown' + eventNamespace, module.enable.down)
-                .on('mouseup'   + eventNamespace, module.disable.down)
-              ;
-            }
-            if( module.allows('focus') ) {
-              $module
-                .on('focus' + eventNamespace, module.enable.focus)
-                .on('blur'  + eventNamespace, module.disable.focus)
-              ;
-            }
             $module
               .on('mouseenter' + eventNamespace, module.change.text)
               .on('mouseleave' + eventNamespace, module.reset.text)
@@ -194,55 +158,41 @@ $.fn.state = function(parameters) {
           return states[state] || false;
         },
 
-        enable: {
-          state: function(state) {
-            if(module.allows(state)) {
-              $module.addClass( className[state] );
-            }
-          },
-          // convenience
-          focus: function() {
-            $module.addClass(className.focus);
-          },
-          hover: function() {
-            $module.addClass(className.hover);
-          },
-          down: function() {
-            $module.addClass(className.down);
-          },
+        enable: function() {
+          $module.removeClass(className.disabled);
         },
 
-        disable: {
-          state: function(state) {
-            if(module.allows(state)) {
-              $module.removeClass( className[state] );
-            }
-          },
-          // convenience
-          focus: function() {
-            $module.removeClass(className.focus);
-          },
-          hover: function() {
-            $module.removeClass(className.hover);
-          },
-          down: function() {
-            $module.removeClass(className.down);
-          },
+        disable: function() {
+          $module.addClass(className.disabled);
+        },
+
+        enableState: function(state) {
+          if(module.allows(state)) {
+            $module.addClass( className[state] );
+          }
+        },
+
+        disableState: function(state) {
+          if(module.allows(state)) {
+            $module.removeClass( className[state] );
+          }
         },
 
         toggle: {
           state: function() {
             var
-              apiRequest = $module.data(metadata.promise)
+              apiRequest
             ;
             if( module.allows('active') && module.is.enabled() ) {
               module.refresh();
-              if(apiRequest !== undefined) {
-                module.listenTo(apiRequest);
-              }
-              else {
-                module.change.state();
+              if($.fn.api !== undefined) {
+                apiRequest = $module.api('get request');
+                if(apiRequest) {
+                  module.listenTo(apiRequest);
+                  return;
+                }
               }
+              module.change.state();
             }
           }
         },
@@ -672,11 +622,9 @@ $.fn.state.settings = {
 
   // change class on state
   className: {
-    focus   : 'focus',
-    hover   : 'hover',
-    down    : 'down',
-    active  : 'active',
-    loading : 'loading'
+    active   : 'active',
+    disabled : 'disabled',
+    loading  : 'loading'
   },
 
   selector: {
@@ -686,27 +634,21 @@ $.fn.state.settings = {
 
   defaults : {
     input: {
-      hover   : true,
-      focus   : true,
-      down    : true,
-      loading : false,
-      active  : false
+      disabled : true,
+      loading  : true,
+      active   : true
     },
     button: {
-      hover   : true,
-      focus   : false,
-      down    : true,
-      active  : true,
-      loading : true
+      disabled : true,
+      loading  : true,
+      active   : true
     }
   },
 
   states     : {
-    hover   : true,
-    focus   : true,
-    down    : true,
-    loading : false,
-    active  : false
+    disabled: true,
+    loading : true,
+    active  : true
   },
 
   text     : {

src/definitions/collections/form.less

@@ -22,12 +22,6 @@
   position: relative;
   max-width: 100%;
 }
-.ui.form :first-child {
-  margin-top: 0em;
-}
-.ui.form :last-child {
-  margin-bottom: 0em;
-}
 
 /*--------------------
         Content
@@ -85,8 +79,8 @@
 .ui.form input[type="tel"] {
 
   margin: 0em;
-  padding: 0.85em 1.2em;
-  font-size: 0.875em;
+  padding: 0.5em 1em;
+  font-size: 1em;
 
   background-color: #FFFFFF;
   border: 1px solid rgba(0, 0, 0, 0.15);

src/definitions/elements/header.less

@@ -70,12 +70,6 @@
 }
 
 /* Positioning */
-.ui.header:first-child {
-  margin-top: 0em;
-}
-.ui.header:last-child {
-  margin-bottom: 0em;
-}
 .ui.header + p {
   margin-top: @precedingParagraphMargin;
 }