form.js

嵌入式无线路由系统openwrt的web配置工具

    else {
      FlashSYS.closeWindow(this.options.module);
    }

    return false;    
  },
  /*

  Function: addSubmit
    Adds submit button to the bottom of the form

  */
  addSubmit: function() {
    var container = new Element('div', {
      'class': this.options.classPrefix + 'SubmitWrap'
    }).inject(this.options.submitEl);

    var cancelButton = new Element('div', {
      'id': this.formId + '_cancel',
      'class': this.options.classPrefix + 'Cancel',
      'text': FlashSYS.translate('form_cancel'),
      'events': {
        'click': FlashSYS.closeWindow.bind(FlashSYS, this.options.module)
      }
    }).inject(container);

    this.submitButton = new Element('div', {
      'id': this.formId + '_submit',
      'class': this.options.classPrefix + 'Submit',
      'text': FlashSYS.translate('form_submit'),
      'events': {
        'click': this.formSubmit.bind(this)
      }
    }).inject(container);
  },
  /*

  Function: _text
    Creates basic text input

  Arguments:
    inputOptions - (object) element options

  Options:
    name - (string) element's name (used in id generation also)
    limit - (integer or string) maximum length of text input
    cls - (string) custom css class
    def - (string) default value that is set on input focus if it's blank
    prefix - (string) text to prepend before input element
    postfix - (string) text to append after input element

  */
  _text: function(inputOptions) {
    var container = this.elemWrap(inputOptions);

    var textElem = new Element('input', {
      'type': 'text',
      'name': inputOptions.name,
      'id': this.formId + '_elem_' + inputOptions.name,
      'class': this.options.classPrefix + 'TextElem'
    }).inject(container);

    // set limit + class
    if (inputOptions.limit) {
      textElem.set('maxlength', inputOptions.limit.toString());
    }
    if (inputOptions.cls) {
      textElem.addClass(inputOptions.cls);
    }
    // default value on focus if current value is empty
    if (inputOptions.def) {
      textElem.addEvent('focus', this.textDefValue.bind(this,[textElem, inputOptions.def]));
    }
    // prefix text
    if (inputOptions.prefix) {
      new Element('span', {
        'class': this.options.classPrefix + 'Prefix',
        'text': inputOptions.prefix
      }).inject(container, 'top');
    }
    if (inputOptions.postfix) {
      new Element('span', {
        'class': this.options.classPrefix + 'Postfix',
        'text': inputOptions.postfix
      }).inject(container, 'bottom');
    }  

    this.cacheElement(inputOptions.name, textElem);
  },
  /*

  Function: _password
    Creates masked password input

  Arguments:
    inputOptions - (object) element options

  Options:
    name - (string) element's name (used in id generation also)
    limit - (integer or string) maximum length of text input
    cls - (string) custom css class

  */
  _password: function(inputOptions) {
    var container = this.elemWrap(inputOptions);

    var textElem = new Element('input', {
      'type': 'password',
      'name': inputOptions.name,
      'id': this.formId + '_elem_' + inputOptions.name,
      'class': this.options.classPrefix + 'TextElem'
    }).inject(container);

    // set limit + class
    if (inputOptions.limit) {
      textElem.set('maxlength', inputOptions.limit.toString());
    }
    if (inputOptions.cls) {
      textElem.addClass(inputOptions.cls);
    }

    this.cacheElement(inputOptions.name, textElem);
  },
  /*

  Function: _checkbox
    Creates checkbox button

  Arguments:
    inputOptions - (object) element options

  Options:
    name - (string) element's name (used in id generation also)
    checked - (boolean) element default behaviour (checked or not)
    falseValue - (mixed) value to post when checkbox is not selected (empty string by default)

  */
  _checkbox: function(inputOptions) {
    var container = this.elemWrap(inputOptions),
        falseValue = inputOptions.falseValue !== undefined ? inputOptions.falseValue : ''; 

    var checkBoxElem = new Element('input', {
      'type': 'checkbox',
      'name': inputOptions.name,
      'id': this.formId + '_elem_' + inputOptions.name,
      'value': (inputOptions.value || '1')
    }).inject(container).store('falseValue', falseValue);

    // check for default checked value
    checkBoxElem.checked = !!inputOptions.checked;

    if (inputOptions.callback) {
      checkBoxElem.addEvent('click', inputOptions.callback.bind(this, checkBoxElem));
    }

    this.cacheElement(inputOptions.name, checkBoxElem);
  },
  /*

  Function: _radio
    Creates radio button array

  Arguments:
    inputOptions - (object) element options

  Options:
    name - (string) element's name (used in id generation also)
    values - (array) contains two element arrays (value / label text)

  */
  _radio: function(inputOptions) {
    var container = this.elemWrap(inputOptions);
    var elemCache = [];

    inputOptions.values.each(function(value, index){
      var elemId = this.formId + '_elem_' + inputOptions.name + index.toString();

      // create radio button
      var radioElem = new Element('input', {
        'type': 'radio',
        'name': inputOptions.name,
        'class': this.options.classPrefix + 'Radio',
        'value': value[0].toString(),
        'id': elemId
      }).inject(container);

      // create label for radio button
      var radioLabel = new Element('label', {
        'for': elemId,
        'class': this.options.classPrefix + 'RadioLabel',
        'text': FlashSYS.translate(this.options.trPrefix + inputOptions.name + '_' + value[1])
      }).inject(container);

      // mark first element as checked by default
      if (index === 0) {
        radioElem.checked = true;
      }

      elemCache.push(radioElem);
    }, this);

    this.cacheElement(inputOptions.name, elemCache);
  },
  /*

  Function: _select
    Creates select element

  Arguments:
    inputOptions - (object) element options

  Options:
    name - (string) element's name (used in id generation also)
    values - (array or string) string: both option value and text, array: separate option value and text
    blocks - (object) key: current value, value: object with block name as key, boolean show / hide as value

  */
  _select: function(inputOptions) {
    var container = this.elemWrap(inputOptions);

    var selectElem = new Element('select', {
      'name': inputOptions.name,
      'id': this.formId + '_elem_' + inputOptions.name,
      'class': this.options.classPrefix + 'SelectElem'
    }).inject(container);

    // add select options
    inputOptions.values.each(function(value, index){
      // different value/content
      if ($type(value) == 'array') {
        selectElem.options[index] = new Option(value[1], value[0].toString());
      }
      // same value/content
      else {
        value = [value, value];
      }

      // translate content if required
      if (inputOptions.translate) {
        value[1] = FlashSYS.translate(this.options.trPrefix + inputOptions.name + '_' + value[1]);
      }
      selectElem.options[index] = new Option(value[1], value[0].toString());
    }, this);

    if (inputOptions.callback || inputOptions.blocks) {
      this.callbacks[ inputOptions.name ] = inputOptions.callback;
      this.selectBlocks[ inputOptions.name ] = inputOptions.blocks;

      selectElem.addEvent('change', this.selectChange.bind(this, inputOptions.name));
    }
    if (inputOptions.cls) {
      selectElem.addClass(inputOptions.cls);
    }

    this.cacheElement(inputOptions.name, selectElem);
  },
  /*

  Function: _textarea
    Creates textarea element

  Arguments:
    inputOptions - (object) element options

  Options:
    name - (string) element's name (used in id generation also)
    rows - (integer or string) textarea row count
    cols - (integer or string) textarea column count
    cls - (string) custom css class

  */
  _textarea: function(inputOptions) {
    var container = this.elemWrap(inputOptions);

    var textElem = new Element('textarea', {
      'name': inputOptions.name,
      'id': this.formId + '_elem_' + inputOptions.name,
      'class': this.options.classPrefix + 'TextArea'
    }).inject(container);

    // add rows, cols, class if specified
    if (inputOptions.rows) {
      textElem.set('rows', inputOptions.rows);
    }
    if (inputOptions.cols) {
      textElem.set('cols', inputOptions.cols);
    }
    if (inputOptions.cls) {
      textElem.addClass(inputOptions.cls);
    }

    this.cacheElement(inputOptions.name, textElem);
  },
  /*

  Function: _plain
    Creates plain text field

  Arguments:
    inputOptions - (object) element options

  Options:
    name - (string) element's name (used in id generation also)
    cls - (string) custom css class

  */
  _plain: function(inputOptions) {
    var container = this.elemWrap(inputOptions);

    var plainElem = new Element('span', {
      'name': inputOptions.name,
      'id': this.formId + '_elem_' + inputOptions.name,
      'class': this.options.classPrefix + 'Plain'
    }).inject(container);

    if (inputOptions.cls) {
      plainElem.addClass(inputOptions.cls);
    }
    if (inputOptions.text) {
      plainElem.set('text', inputOptions.text);
    }

    this.cacheElement(inputOptions.name, plainElem);
  },
  /*

  Function: _file
    Creates file upload input

  Arguments:
    inputOptions - (object) element options

  Options:
    name - (string) element's name (used in id generation also)
    cls - (string) custom css class

  */
  _file: function(inputOptions) {
    var container = this.elemWrap(inputOptions);

    var fileElem = new Element('input', {
      'type': 'file',
      'name': inputOptions.name,
      'id': this.formId + '_elem_' + inputOptions.name,
      'class': this.options.classPrefix + 'FileElem'
    }).inject(container);

    if (inputOptions.cls) {
      fileElem.addClass(inputOptions.cls);
    }
  },
  /*

  Function: _blockStart
    Creates block element and makes it an active container for new elements

  Arguments:
    blockOptions - (object) block options

  Options:
    name - (string) block name (used in id generation also)
    cls - (string) custom css class

  */
  _blockStart: function(blockOptions) {
    // close previous block if open
    if (this.block !== null) {
      this._blockEnd();
    }

    // add block div elem
    var block = new Element('div', {
      'id': this.formId + '_block_' + blockOptions.name,
      'class': this.options.classPrefix + 'Block'
    }).inject(this.injectTo);

    // add custom class if required
    if (blockOptions.cls) {
      block.addClass(blockOptions.cls);
    }
    this.block = block;

    // cache it and set it to active container
    this.blocks[ blockOptions.name ] = block;
    this.injectTo = block;
  },
  /*

  Function: _blockEnd
    Stops elements being added to the current block

  */
  _blockEnd: function() {
    this.block = null;
    this.injectTo = this.tab || this.form;
  },
  /*

  Function: _tab
    Switches to next tab for output

  */
  _tab: function() {
    if (this.options.tabs) {
      this.tab = this.tabs.getPanelByIndex(++this.activeTab);
      this.injectTo = this.tab;
    }
  },
  /*

  Function: _customElem
    Creates element from custom function

  Arguments:
    elemOptions -

  Options:
    name - (string) custom element's name (used in id generation also)

  */
  _customElem: function(elemOptions) {
    var container = this.elemWrap(elemOptions);

    // get custom element
    elemOptions.id = this.formId + '_elem_' + elemOptions.name;
    var customElem = elemOptions.fn.bind(this,[container, elemOptions])();
  },
  /*

  Function: _customFn
    Calls custom function with options bound

  Arguments:
    options - extra function parameters

  */
  _customFn: function(options) {
    options.fn.run(options, this);
  },
  /*

  Function: textDefValue
    Set default value for text type input if it's blank

  Arguments:
    textElem - (element) text input
    defValue - (string) default value

  */
  textDefValue: function(textElem, defValue) {
    if ( !textElem.get('value').trim() ) {
      textElem.set('value', defValue);
    }
  }
});