From 01e9a418828ab7685a915069641e9277ed3189e2 Mon Sep 17 00:00:00 2001 From: jlukic Date: Mon, 3 Mar 2014 19:32:09 -0500 Subject: [PATCH] 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 | 34 +++++-- src/definitions/behaviors/state.js | 130 +++++++------------------- src/definitions/collections/form.less | 10 +- src/definitions/elements/header.less | 6 -- 4 files changed, 62 insertions(+), 118 deletions(-) diff --git a/src/definitions/behaviors/api.js b/src/definitions/behaviors/api.js index e4b129a77..1b6baba7c 100644 --- a/src/definitions/behaviors/api.js +++ b/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; }, diff --git a/src/definitions/behaviors/state.js b/src/definitions/behaviors/state.js index 216a05990..6efd5faca 100644 --- a/src/definitions/behaviors/state.js +++ b/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 : { diff --git a/src/definitions/collections/form.less b/src/definitions/collections/form.less index 18e8ed361..ac264735a 100644 --- a/src/definitions/collections/form.less +++ b/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); diff --git a/src/definitions/elements/header.less b/src/definitions/elements/header.less index f3b571599..91a2c3a4d 100644 --- a/src/definitions/elements/header.less +++ b/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; }