form-operations.js

来自「Hippo CMS是一个以信息为中心的开源内容管理系统。Hippo CMS目标是」· JavaScript 代码 · 共 754 行 · 第 1/2 页

  /*--------------------------------------:noTabs=true:tabSize=2:indentSize=2:--
    --  FormOperations Plugin
    --
    --  $HeadURL: http://[e-mail]/trunk/htmlarea.js $
    --  $LastChangedDate: 2005-05-25 09:30:03 +1200 (Wed, 25 May 2005) $
    --  $LastChangedRevision: 193 $
    --  $LastChangedBy: gogo $
    --------------------------------------------------------------------------*/

HTMLArea.Config.prototype.FormOperations =
{
  // format for fields where multiple values may be selected
  //    'php'          => FieldName[]
  //    'unmodified'   => FieldName
  'multiple_field_format': 'php',
  'allow_edit_form'      : false,
  'default_form_action'  : _editor_url + 'plugins/FormOperations/formmail.php',
  'default_form_html'    : HTMLArea._geturlcontent(_editor_url + 'plugins/FormOperations/default_form.html')
};

FormOperations._pluginInfo =
{
  name     : "FormOperations",
  version  : "1.0",
  developer: "James Sleeman",
  developer_url: "http://www.gogo.co.nz/",
  c_owner      : "Gogo Internet Services",
  license      : "htmlArea",
  sponsor      : "Gogo Internet Services",
  sponsor_url  : "http://www.gogo.co.nz/"
};

function FormOperations(editor)
{
  this.editor = editor;
  this.panel  = false;
  this.html   = false;
  this.ready  = false;
  this.activeElement = null;
  this._preparePanel();


  editor.config.pageStyleSheets.push(_editor_url + 'plugins/FormOperations/iframe.css');

  var toolbar =
  [
    'separator',
    'insert_form',
    'insert_text_field',
    'insert_textarea_field',
    'insert_select_field',
    'insert_cb_field',
    'insert_rb_field',
    'insert_button'
  ];

  this.editor.config.toolbar.push(toolbar);

  function pasteAndSelect(htmlTag)
  {
    var id = HTMLArea.uniq('fo');
    htmlTag = htmlTag.replace(/^<([^ \/>]+)/i, '<$1 id="'+id+'"');
    editor.insertHTML(htmlTag);
    var el = editor._doc.getElementById(id);
    el.setAttribute('id', '');
    editor.selectNodeContents(el);
    editor.updateToolbar();
    return el;
  }

  var buttonsImage = editor.imgURL('buttons.gif', 'FormOperations');

  FormOperations.prototype._lc = function(string) {
    return HTMLArea._lc(string, 'FormOperations');
  };

  this.editor.config.btnList.insert_form =
  [ this._lc("Insert a Form."),
    [buttonsImage, 0, 0],
    false,
    function()
    {
      var form = null;
      if(editor.config.FormOperations.default_form_html)
      {
        form = pasteAndSelect(editor.config.FormOperations.default_form_html);
      }
      else
      {
        form = pasteAndSelect('<form>&nbsp;</form>');
      }

      if(editor.config.FormOperations.default_form_action && !form.action)
      {
        form.action = editor.config.FormOperations.default_form_action;
      }
    }
  ];

  this.editor.config.btnList.insert_text_field =
  [ this._lc("Insert a text, password or hidden field."),
    [buttonsImage, 1, 0],
    false,
    function()
    {
      pasteAndSelect('<input type="text" />');
    },
    'form'
  ];

  this.editor.config.btnList.insert_textarea_field =
  [ this._lc("Insert a multi-line text field."),
    [buttonsImage, 2, 0],
    false,
    function()
    {
      pasteAndSelect('<textarea> </textarea>');
    },
    'form'
  ];

  this.editor.config.btnList.insert_select_field =
  [ this._lc("Insert a select field."),
    [buttonsImage, 3, 0],
    false,
    function()
    {
      pasteAndSelect('<select> <option value="">Please Select...</option> </select>');
    },
    'form'
  ];

  this.editor.config.btnList.insert_cb_field =
  [ this._lc("Insert a check box."),
    [buttonsImage, 4, 0],
    false,
    function()
    {
      pasteAndSelect('<input type="checkbox" />');
    },
    'form'
  ];

  this.editor.config.btnList.insert_rb_field =
  [ this._lc("Insert a radio button."),
    [buttonsImage, 5, 0],
    false,
    function()
    {
      pasteAndSelect('<input type="radio" />');
    },
    'form'
  ];

  this.editor.config.btnList.insert_button =
  [ this._lc("Insert a submit/reset button."),
    [buttonsImage, 6, 0],
    false,
    function()
    {
      pasteAndSelect('<input type="submit" value="Send" />');
    },
    'form'
  ];
}

FormOperations.prototype.onGenerate = function()
{
  // Gecko does not register click events on select lists inside the iframe
  // so the only way of detecting that is to do an event on mouse move.
  if( HTMLArea.is_gecko)
  {
    var editor = this.editor;
    var doc    = this.editor._doc;
    HTMLArea._addEvents
    (doc, ["mousemove"],
     function (event) {
       return editor._editorEvent(event);
     });
  }
};

FormOperations.prototype._preparePanel = function ()
{
  var fo = this;
  if(this.html == false)
  {

    HTMLArea._getback(_editor_url + 'plugins/FormOperations/panel.html',
      function(txt)
      {
        fo.html = txt;
        fo._preparePanel();
      }
    );
    return false;
  }

  if(typeof HTMLArea.Dialog == 'undefined')
  {
    HTMLArea._loadback
      (_editor_url + 'inline-dialog.js', function() { fo._preparePanel(); } );
      return false;
  }

  if(typeof HTMLArea.PanelDialog == 'undefined')
  {
    HTMLArea._loadback
      (_editor_url + 'panel-dialog.js', function() { fo._preparePanel(); } );
      return false;
  }



  this.panel = new HTMLArea.PanelDialog(this.editor,'bottom',this.html,'FormOperations');
  this.panel.hide();
  this.ready = true;
};

FormOperations.prototype.onUpdateToolbar = function()
{
  if(!this.ready) return true;
  var activeElement = this.editor._activeElement(this.editor._getSelection());
  if(activeElement != null)
  {
    if(activeElement == this.activeElement) return true;

    var tag = activeElement.tagName.toLowerCase();
    this.panel.show();

    this.hideAll();
    if(tag === 'form')
    {
      if(this.editor.config.FormOperations.allow_edit_form)
      {
        this.showForm(activeElement);
      }
      else
      {
        this.panel.hide();
        this.activeElement = null;
        this.panel.hide();
        return true;
      }
    }
    else
    {

      if(this.editor.config.FormOperations.allow_edit_form && typeof activeElement.form != 'undefined' && activeElement.form)
      {
        this.showForm(activeElement.form);
      }

      switch(tag)
      {
        case 'form':
        {
          this.showForm(activeElement);
        }
        break;

        case 'input':
        {
          switch(activeElement.getAttribute('type').toLowerCase())
          {
            case 'text'    :
            case 'password':
            case 'hidden'  :
            {
              this.showText(activeElement);
            }
            break;

            case 'radio'   :
            case 'checkbox':
            {
              this.showCbRd(activeElement);
            }
            break;

            case 'submit'  :
            case 'reset'   :
            case 'button'  :
            {
              this.showButton(activeElement);
            }
            break;
          }
        }
        break;

        case 'textarea':
        {
          this.showTextarea(activeElement);
        }
        break;

        case 'select':
        {
          this.showSelect(activeElement);
        }
        break;

        default:
        {
          this.activeElement = null;
          this.panel.hide();
          return true;
        }
      }
    }
    //this.editor.scrollToElement(activeElement);
    this.activeElement = activeElement;
    return true;
  }
  else
  {
    this.activeElement = null;
    this.panel.hide();
    return true;
  }
};


FormOperations.prototype.hideAll = function()
{
  this.panel.getElementById('fs_form').style.display = 'none';
  this.panel.getElementById('fs_text').style.display = 'none';
  this.panel.getElementById('fs_textarea').style.display = 'none';
  this.panel.getElementById('fs_select').style.display = 'none';
  this.panel.getElementById('fs_cbrd').style.display = 'none';
  this.panel.getElementById('fs_button').style.display = 'none';
};

FormOperations.prototype.showForm = function(form)
{
  this.panel.getElementById('fs_form').style.display = '';
  var vals =
  {
    'action' : form.action,
    'method' : form.method.toUpperCase()
  }
  this.panel.setValues(vals);
  var f = form;
  this.panel.getElementById('action').onkeyup = function () { f.action = this.value; };
  this.panel.getElementById('method').onchange   = function () { f.method = this.options[this.selectedIndex].value; };
};

FormOperations.prototype.showText = function (input)
{
  this.panel.getElementById('fs_text').style.display = '';

  var vals =
  {
    'text_name'  : this.deformatName(input, input.name),
    'text_value' : input.value,
    'text_type'  : input.type.toLowerCase(),
    'text_width' : input.style.width ? parseFloat(input.style.width.replace(/[^0-9.]/, '')) : '',
    'text_width_units': input.style.width ? input.style.width.replace(/[0-9.]/, '').toLowerCase() : 'ex',
    'text_maxlength'  : input.maxlength   ? input.maxlength : ''
  }
  this.panel.setValues(vals);

  var i = input;
  var fo = this;

  this.panel.getElementById('text_name').onkeyup   = function () { i.name = fo.formatName(i, this.value); }
  this.panel.getElementById('text_value').onkeyup  = function () { i.value = this.value; }
  this.panel.getElementById('text_type').onchange   = function ()
    {
      if(!HTMLArea.is_ie)
      {
        i.type = this.options[this.selectedIndex].value;
      }
      else
      {