Javascript: Create a Form widget

form.js

//= require component/base
//= require component/placeholder
//= require component/form_helper

/**
 * Form Component.
 * @class
 * @extends FW.Component
 */
FW.Form = Class.create(FW.Component,
(function() {
  /**
   * initialize Form.
   * @constructor
   * @methodOf FW.Form.prototype
   */
  function initialize($super, options) {
    $super(options);
    var $dom = $("<form><table><tbody></tbody></table></form>").addClass("c-form");
    // should skip enter in textarea
    $dom.keypress(function(event) {
      if (!$.nodeName(event.target, 'textarea') && event.which == $.ui.keyCode.ENTER) {
        event.preventDefault();
      }
    });
    this.$body = $dom.find("tbody");
    this._setDom($dom);
  }

  /**
   * bind data to form.
   * @methodOf FW.Form.prototype
   * @param data [Object]
   */
  function setData(data) {
    this.setFormData(this.dom(), data);
  }

  /**
   * Get form data.
   * @methodOf FW.Form.prototype
   * @return [Object]
   */
  function getData() {
    return this.extractFormData(this.dom());
  }

  function _add($element) {
    var $tr = $("<tr><td colspan=2></td></tr>").appendTo(this.$body);
    $tr.find("td").append($element);
  }

  function _appendInput(self, $label, $input) {
    var $tr = $("<tr><td></td><td></td></tr>").appendTo(self.$body);
    $tr.find("td:first").append($label);
    $tr.find("td:last").append($input);
  }

  function hiddenField(name, value){
    var $hidden = $("<input type='hidden' />").attr("name", name).attr("value", value);
    return $hidden.appendTo(this.$body);
  }

  function _buildLabel(self, name, options) {
    var text = options.label || self.t(name) || name;
    return $("<label>").text(text);
  }

  function _inputField(self, $input, name, options) {
    options = options || {};
    var $label = _buildLabel(self, name, options);

    $input.attr("name", name);
    if (options.attr) {
      $input.attr(options.attr, true);
    }
    if (options.css) {
      $input.addClass(options.css);
    }
    if (options.style) {
      $input.attr("style", options.style);
    }
    _appendInput(self, $label, $input);
    if (options.hint) {
      $input.fwHint(options);
    }
    if (options.required) {
      $input.data('required', true);
    }
    return $input;
  }

  /**
   * create a text field.
   * @methodOf FW.Form.prototype
   * @param name [String] field name
   * @param options [Object] optional
   *   label: label of field
   */
  function textField(name, options) {
    var $input = $("<input>").addClass("c-input-value");
    return _inputField(this, $input, name, options);
  }

  /**
   * create a textarea field.
   * @methodOf FW.Form.prototype
   * @param name [String] field name
   * @param options [Object] optional
   *   label: label of field
   */
  function textareaField(name, options) {
    var $input = $("<textarea>").addClass("c-input-value");
    return _inputField(this, $input, name, options);
  }

  /**
   * create a date field.
   * @methodOf FW.Form.prototype
   * @param name [String] field name
   * @param options [Object] optional
   *   label: label of field
   *   dateFormat: set datepicker's date format, e.g. yy-mm-dd
   */
  function dateField(name, options) {
    var result = this.textField(name, options);
    var datepickerOptions = Object.extend({
      showOn: "button",
      buttonImage: FW.Resource.imagePath("calendar.gif"),
      buttonImageOnly: true
    }, options);
    this.$dom.find("input[name='" + name + "']").datepicker(datepickerOptions);
    this.$body.find("tr:last img").css("vertical-align", "middle").css("margin-left", "5px");
    return result;
  }

  /**
   * create a datetime field.
   * @methodOf FW.Form.prototype
   * @param name [String] field name
   * @param options [Object] optional
   *   label: label of field
   */
  function dateTimeField(name, options) {
    console.log("dataTimeField");
    var result = this.textField(name, options);
    var datetimepickerOptions = Object.extend({
      timeFormat: "hh:mm TT",
      ampm: true,
      showOn: "button",
      changeMonth: true,
      changeYear: true,
      buttonImage: FW.Resource.imagePath("calendar.gif"),
      buttonImageOnly: true
    }, options);
    this.$dom.find("input[name='" + name + "']").datetimepicker(datetimepickerOptions);
    this.$body.find("tr:last img").css("vertical-align", "middle").css("margin-left", "5px");
    return result;
  }

  /**
   * create a select field.
   * @methodOf FW.Form.prototype
   * @param name [String] field name
   * @param options [Object] optional
   *   label: label of field
   */
  function selectField(name, options) {
    var $select = $("<select>");
    if(!Object.isBlank(options.allowBlank)){
      $("<option>").appendTo($select).attr("value", options.allowBlank['value']).text(options.allowBlank['text'] || I18n.t("widget.global.please_select"));
    }
    $A(options.collection).each(function(kv) {
      $("<option>").appendTo($select).attr("value", kv[0]).text(kv[1]).attr('selected', kv[2]);
    });
    return _inputField(this, $select, name, options);
  }

  return {
    initialize    : initialize,
    _add          : _add,
    setData       : setData,
    getData       : getData,
    textField     : textField,
    textareaField : textareaField,
    dateField     : dateField,
    dateTimeField : dateTimeField,
    selectField   : selectField,
    hiddenField   : hiddenField
  };
}()));

Object.extend(FW.Form.prototype, FW.FormHelper);