Skip to content

Instantly share code, notes, and snippets.

@bakura10 bakura10/submit-button.js
Last active Aug 29, 2015

Embed
What would you like to do?
'use strict';
/**
* This component allows to have a three-state button, that is useful when saving. Basically,
* when the state "isSaving" changed to true, the class "is-saving" is added. When the isSaving goes
* back to false, a class "saved" is added during 2 seconds to give feedback to the user
*/
module.exports = App.SubmitButtonComponent = Ember.Component.extend({
/**
* We completely disable tagname as we don't want it to be wrap
*
* @type {string}
*/
tagName: 'button',
/**
* Additional classes that are added depending the state of the button
*
* @type {Array}
*/
classNameBindings: ['isSubmitting:submitting', 'isError:error', 'isSaved:saved'],
/**
* @type {Array}
*/
attributeBindings: ['disabled'],
/**
* Bound property to toggle the submitting state
*
* @type {boolean|Object}
*/
submitState: null,
/**
* Property that remember if the button is submitting
*
* @type {boolean}
*/
isSubmitting: Ember.computed.bool('submitState').readOnly(),
/**
* Bound property to toggle the error state
*
* @type {boolean|String|Object}
*/
errorState: null,
/**
* One way property (so that we can change it without impacting the original property)
*
* @type {boolean}
*/
isError: Ember.computed.oneWay('errorState'),
/**
* Status that appears on successfully saved (during x-seconds)
*
* @type {boolean}
*/
isSaved: false,
/**
* Allow to disable a submit input when it is saving
*
* @type {boolean}
*/
disabled: Ember.computed.bool('isSubmitting'),
/**
* Text to show inside the button when no action is done
*
* @type {string}
*/
text: 'Save',
/**
* Whenever the submit button leaves the isSubmitting state and no error, we set a timer of
* 2 seconds to go back to initial state
*
* @returns {void}
*/
initSavedTimer: function() {
// If still submitting... let's wait a bit more!
if (this.get('isSubmitting')) {
return;
}
var self = this;
if (this.get('errorState')) {
this.set('isError', true);
Ember.run.later(function() {
if (!self.get('isDestroyed')) {
self.set('isError', false);
}
}, 2000);
} else {
this.set('isSaved', true);
Ember.run.later(function() {
if (!self.get('isDestroyed')) {
self.set('isSaved', false);
}
}, 2000);
}
}.observes('isSubmitting'),
/**
* Trigger the primary action, with an optional param
*
* @returns {void}
*/
click: function() {
this.sendAction('action', this.get('param'));
}
});
{{#if isSubmitting}}
<i class="icon-submitting"></i>
{{else}}
{{#if isError}}
<i class="icon-rejected"></i>
{{else}}
{{#if isSaved}}
<i class="icon-checkmark"></i>
{{else}}
{{text}}
{{/if}}
{{/if}}
{{/if}}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.