submit-button.js

'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'));
  }
});

template.hbs

{{#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}}