#

API Docs for: v2.11.1
Show: Inherited Protected Private Deprecated

# File: packages/ember-views/lib/mixins/text_support.js

    /**
    @module ember
    @submodule ember-views
    */

    import {
      get,
      set,
      Mixin
    } from 'ember-metal';
    import { TargetActionSupport } from 'ember-runtime';

    const KEY_EVENTS = {
      13: 'insertNewline',
      27: 'cancel'
    };

    /**
      `TextSupport` is a shared mixin used by both `Ember.TextField` and
      `Ember.TextArea`. `TextSupport` adds a number of methods that allow you to
      specify a controller action to invoke when a certain event is fired on your
      text field or textarea. The specifed controller action would get the current
      value of the field passed in as the only argument unless the value of
      the field is empty. In that case, the instance of the field itself is passed
      in as the only argument.

      Let's use the pressing of the escape key as an example. If you wanted to
      invoke a controller action when a user presses the escape key while on your
      field, you would use the `escape-press` attribute on your field like so:

      ```handlebars
        {{! application.hbs}}

        {{input escape-press='alertUser'}}
      ```

      ```javascript
          App = Ember.Application.create();

          App.ApplicationController = Ember.Controller.extend({
            actions: {
              alertUser: function ( currentValue ) {
                alert( 'escape pressed, current value: ' + currentValue );
              }
            }
          });
      ```

      The following chart is a visual representation of what takes place when the
      escape key is pressed in this scenario:

      ```
      The Template
      +---------------------------+
      |                           |
      | escape-press='alertUser'  |
      |                           |          TextSupport Mixin
      +----+----------------------+          +-------------------------------+
           |                                 | cancel method                 |
           |      escape button pressed      |                               |
           +-------------------------------> | checks for the `escape-press` |
                                             | attribute and pulls out the   |
           +-------------------------------+ | `alertUser` value             |
           |     action name 'alertUser'     +-------------------------------+
           |     sent to controller
           v
      Controller
      +------------------------------------------ +
      |                                           |
      |  actions: {                               |
      |     alertUser: function( currentValue ){  |
      |       alert( 'the esc key was pressed!' ) |
      |     }                                     |
      |  }                                        |
      |                                           |
      +-------------------------------------------+
      ```

      Here are the events that we currently support along with the name of the
      attribute you would need to use on your field. To reiterate, you would use the
      attribute name like so:

      ```handlebars
        {{input attribute-name='controllerAction'}}
      ```

      ```
      +--------------------+----------------+
      |                    |                |
      | event              | attribute name |
      +--------------------+----------------+
      | new line inserted  | insert-newline |
      |                    |                |
      | enter key pressed  | insert-newline |
      |                    |                |
      | cancel key pressed | escape-press   |
      |                    |                |
      | focusin            | focus-in       |
      |                    |                |
      | focusout           | focus-out      |
      |                    |                |
      | keypress           | key-press      |
      |                    |                |
      | keyup              | key-up         |
      |                    |                |
      | keydown            | key-down       |
      +--------------------+----------------+
      ```

      @class TextSupport
      @namespace Ember
      @uses Ember.TargetActionSupport
      @extends Ember.Mixin
      @private
    */
    export default Mixin.create(TargetActionSupport, {
      value: '',

      attributeBindings: [
        'autocapitalize',
        'autocorrect',
        'autofocus',
        'disabled',
        'form',
        'maxlength',
        'placeholder',
        'readonly',
        'required',
        'selectionDirection',
        'spellcheck',
        'tabindex',
        'title'
      ],
      placeholder: null,
      disabled: false,
      maxlength: null,

      init() {
        this._super(...arguments);
        this.on('paste', this, this._elementValueDidChange);
        this.on('cut', this, this._elementValueDidChange);
        this.on('input', this, this._elementValueDidChange);
      },

      /**
        The action to be sent when the user presses the return key.

        This is similar to the `{{action}}` helper, but is fired when
        the user presses the return key when editing a text field, and sends
        the value of the field as the context.

        @property action
        @type String
        @default null
        @private
      */
      action: null,

      /**
        The event that should send the action.

        Options are:

        * `enter`: the user pressed enter
        * `keyPress`: the user pressed a key

        @property onEvent
        @type String
        @default enter
        @private
      */
      onEvent: 'enter',

      /**
        Whether the `keyUp` event that triggers an `action` to be sent continues
        propagating to other views.

        By default, when the user presses the return key on their keyboard and
        the text field has an `action` set, the action will be sent to the view's
        controller and the key event will stop propagating.

        If you would like parent views to receive the `keyUp` event even after an
        action has been dispatched, set `bubbles` to true.

        @property bubbles
        @type Boolean
        @default false
        @private
      */
      bubbles: false,

      interpretKeyEvents(event) {
        let map = KEY_EVENTS;
        let method = map[event.keyCode];

        this._elementValueDidChange();
        if (method) { return this[method](event); }
      },

      _elementValueDidChange() {
        set(this, 'value', this.element.value);
      },

      change(event) {
        this._elementValueDidChange(event);
      },

      /**
        Allows you to specify a controller action to invoke when either the `enter`
        key is pressed or, in the case of the field being a textarea, when a newline
        is inserted. To use this method, give your field an `insert-newline`
        attribute. The value of that attribute should be the name of the action
        in your controller that you wish to invoke.

        For an example on how to use the `insert-newline` attribute, please
        reference the example near the top of this file.

        @method insertNewline
        @param {Event} event
        @private
      */
      insertNewline(event) {
        sendAction('enter', this, event);
        sendAction('insert-newline', this, event);
      },

      /**
        Allows you to specify a controller action to invoke when the escape button
        is pressed. To use this method, give your field an `escape-press`
        attribute. The value of that attribute should be the name of the action
        in your controller that you wish to invoke.

        For an example on how to use the `escape-press` attribute, please reference
        the example near the top of this file.

        @method cancel
        @param {Event} event
        @private
      */
      cancel(event) {
        sendAction('escape-press', this, event);
      },

      /**
        Allows you to specify a controller action to invoke when a field receives
        focus. To use this method, give your field a `focus-in` attribute. The value
        of that attribute should be the name of the action in your controller
        that you wish to invoke.

        For an example on how to use the `focus-in` attribute, please reference the
        example near the top of this file.

        @method focusIn
        @param {Event} event
        @private
      */
      focusIn(event) {
        sendAction('focus-in', this, event);
      },

      /**
        Allows you to specify a controller action to invoke when a field loses
        focus. To use this method, give your field a `focus-out` attribute. The value
        of that attribute should be the name of the action in your controller
        that you wish to invoke.

        For an example on how to use the `focus-out` attribute, please reference the
        example near the top of this file.

        @method focusOut
        @param {Event} event
        @private
      */
      focusOut(event) {
        this._elementValueDidChange(event);
        sendAction('focus-out', this, event);
      },

      /**
        Allows you to specify a controller action to invoke when a key is pressed.
        To use this method, give your field a `key-press` attribute. The value of
        that attribute should be the name of the action in your controller you
        that wish to invoke.

        For an example on how to use the `key-press` attribute, please reference the
        example near the top of this file.

        @method keyPress
        @param {Event} event
        @private
      */
      keyPress(event) {
        sendAction('key-press', this, event);
      },

      /**
        Allows you to specify a controller action to invoke when a key-up event is
        fired. To use this method, give your field a `key-up` attribute. The value
        of that attribute should be the name of the action in your controller
        that you wish to invoke.

        For an example on how to use the `key-up` attribute, please reference the
        example near the top of this file.

        @method keyUp
        @param {Event} event
        @private
      */
      keyUp(event) {
        this.interpretKeyEvents(event);

        this.sendAction('key-up', get(this, 'value'), event);
      },

      /**
        Allows you to specify a controller action to invoke when a key-down event is
        fired. To use this method, give your field a `key-down` attribute. The value
        of that attribute should be the name of the action in your controller that
        you wish to invoke.

        For an example on how to use the `key-down` attribute, please reference the
        example near the top of this file.

        @method keyDown
        @param {Event} event
        @private
      */
      keyDown(event) {
        this.sendAction('key-down', get(this, 'value'), event);
      }
    });

    // In principle, this shouldn't be necessary, but the legacy
    // sendAction semantics for TextField are different from
    // the component semantics so this method normalizes them.
    function sendAction(eventName, view, event) {
      let action = get(view, 'attrs.' + eventName) || get(view, eventName);
      let on = get(view, 'onEvent');
      let value = get(view, 'value');

      // back-compat support for keyPress as an event name even though
      // it's also a method name that consumes the event (and therefore
      // incompatible with sendAction semantics).
      if (on === eventName || (on === 'keyPress' && eventName === 'key-press')) {
        view.sendAction('action', value);
      }

      view.sendAction(eventName, value);

      if (action || on === eventName) {
        if (!get(view, 'bubbles')) {
          event.stopPropagation();
        }
      }
    }