HuasoFoundries / backgrid_es6

import _ from 'underscore';

import {

  Backgrid

} from '../core.js';

import {

  CellEditor

} from './cell.js';

import {

  Command

} from '../command.js';

/**

   InputCellEditor the cell editor type used by most core cell types. This cell

   editor renders a text input box as its editor. The input will render a

   placeholder if the value is empty on supported browsers.

   @class Backgrid.InputCellEditor

   @extends Backgrid.CellEditor

*/

var InputCellEditor = CellEditor.extend({

  /** @property */

  tagName: "input",

  /** @property */

  attributes: {

    type: "text"

  },

  /** @property */

  events: {

    "blur": "saveOrCancel",

    "keydown": "saveOrCancel"

  },

  /**

     Initializer. Removes this `el` from the DOM when a `done` event is

     triggered.

     @param {Object} options

     @param {Backgrid.CellFormatter} options.formatter

     @param {Backgrid.Column} options.column

     @param {Backbone.Model} options.model

     @param {string} [options.placeholder]

  */

  initialize: function (options) {

    InputCellEditor.__super__.initialize.apply(this, arguments);

    if (options.placeholder) {

      this.$el.attr("placeholder", options.placeholder);

    }

  },

  /**

     Renders a text input with the cell value formatted for display, if it

     exists.

  */

  render: function () {

    var model = this.model;

    this.$el.val(this.formatter.fromRaw(model.get(this.column.get("name")), model));

    return this;

  },

  /**

     If the key pressed is `enter`, `tab`, `up`, or `down`, converts the value

     in the editor to a raw value for saving into the model using the formatter.

     If the key pressed is `esc` the changes are undone.

     If the editor goes out of focus (`blur`) but the value is invalid, the

     event is intercepted and cancelled so the cell remains in focus pending for

     further action. The changes are saved otherwise.

     Triggers a Backbone `backgrid:edited` event from the model when successful,

     and `backgrid:error` if the value cannot be converted. Classes listening to

     the `error` event, usually the Cell classes, should respond appropriately,

     usually by rendering some kind of error feedback.

     @param {Event} e

  */

  saveOrCancel: function (e) {

    var formatter = this.formatter;

    var model = this.model;

    var column = this.column;

    var command = new Command(e);

    var blurred = e.type === "blur";

    if (command.moveUp() || command.moveDown() || command.moveLeft() || command.moveRight() ||

      command.save() || blurred) {

      e.preventDefault();

      e.stopPropagation();

      var val = this.$el.val();

      var newValue = formatter.toRaw(val, model);

      if (_.isUndefined(newValue)) {

        model.trigger("backgrid:error", model, column, val);

      } else {

        model.set(column.get("name"), newValue);

        model.trigger("backgrid:edited", model, column, command);

      }

    }

    // esc

      // undo

      e.stopPropagation();

      model.trigger("backgrid:edited", model, column, command);

    }

  },

  postRender: function (model, column) {

      // move the cursor to the end on firefox if text is right aligned

      if (this.$el.css("text-align") === "right") {

        var val = this.$el.val();

        this.$el.focus().val(null).val(val);

    }

    return this;

  }

});

export {

  InputCellEditor

};