form-operations.js

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

        // IE does not permit modifications of the type of a form field once it is set
        // We therefor have to destroy and recreate it.  I swear, if I ever
        // meet any of the Internet Explorer development team I'm gonna
        // kick them in the nuts!
        var tmpContainer = fo.editor._doc.createElement('div');
        if(!/type=/.test(i.outerHTML))
        {
          tmpContainer.innerHTML = i.outerHTML.replace(/<INPUT/i, '<input type="'+ this.options[this.selectedIndex].value + '"');
        }
        else
        {
          tmpContainer.innerHTML = i.outerHTML.replace(/type="?[a-z]+"?/i, 'type="' + this.options[this.selectedIndex].value + '"');
        }
        var newElement = HTMLArea.removeFromParent(tmpContainer.childNodes[0]);
        i.parentNode.insertBefore(newElement, i);
        HTMLArea.removeFromParent(i);
        input = i = newElement;
      }
    }

  var w  = this.panel.getElementById('text_width');
  var wu = this.panel.getElementById('text_width_units');

  this.panel.getElementById('text_width').onkeyup     =
  this.panel.getElementById('text_width_units').onchange =
    function ()
    {
      if(!w.value || isNaN(parseFloat(w.value)))
      {
        i.style.width = '';
      }
      i.style.width = parseFloat(w.value) + wu.options[wu.selectedIndex].value;
    }

  this.panel.getElementById('text_maxlength').onkeyup = function () { i.maxlength = this.value; }
};

FormOperations.prototype.showCbRd = function (input)
{
  this.panel.getElementById('fs_cbrd').style.display = '';
  var vals =
  {
    'cbrd_name'    : this.deformatName(input, input.name),
    'cbrd_value'   : input.value,
    'cbrd_checked' : input.checked ? 1 : 0,
    'cbrd_type'    : input.type.toLowerCase()
  };
  this.panel.setValues(vals);

  var i = input;
  var fo = this;
  this.panel.getElementById('cbrd_name').onkeyup   = function () { i.name = fo.formatName(i, this.value); }
  this.panel.getElementById('cbrd_value').onkeyup  = function () { i.value = this.value; }
  this.panel.getElementById('cbrd_type').onchange   = function ()
    {
      if(!HTMLArea.is_ie)
      {
        i.type = this.options[this.selectedIndex].value;
      }
      else
      {
        // IE does not permit modifications of the type of a form field once it is set
        // We therefor have to destroy and recreate it.  I swear, if I ever
        // meet any of the Internet Explorer development team I'm gonna
        // kick them in the nuts!
        var tmpContainer = fo.editor._doc.createElement('div');
        if(!/type=/.test(i.outerHTML))
        {
          tmpContainer.innerHTML = i.outerHTML.replace(/<INPUT/i, '<input type="'+ this.options[this.selectedIndex].value + '"');
        }
        else
        {
          tmpContainer.innerHTML = i.outerHTML.replace(/type="?[a-z]+"?/i, 'type="' + this.options[this.selectedIndex].value + '"');
        }
        var newElement = HTMLArea.removeFromParent(tmpContainer.childNodes[0]);
        i.parentNode.insertBefore(newElement, i);
        HTMLArea.removeFromParent(i);
        input = i = newElement;
      }
    }
  this.panel.getElementById('cbrd_checked').onclick   = function () { i.checked = this.checked; }
};

FormOperations.prototype.showButton = function (input)
{
  this.panel.getElementById('fs_button').style.display = '';
  var vals =
  {
    'button_name'    : this.deformatName(input, input.name),
    'button_value'   : input.value,
    'button_type'    : input.type.toLowerCase()
  };
  this.panel.setValues(vals);

  var i = input;
  var fo = this;
  this.panel.getElementById('button_name').onkeyup   = function () { i.name = fo.formatName(i, this.value); };
  this.panel.getElementById('button_value').onkeyup  = function () { i.value = this.value; };
  this.panel.getElementById('button_type').onchange   = function ()
    {
      if(!HTMLArea.is_ie)
      {
        i.type = this.options[this.selectedIndex].value;
      }
      else
      {
        // IE does not permit modifications of the type of a form field once it is set
        // We therefor have to destroy and recreate it.  I swear, if I ever
        // meet any of the Internet Explorer development team I'm gonna
        // kick them in the nuts!
        var tmpContainer = fo.editor._doc.createElement('div');
        if(!/type=/.test(i.outerHTML))
        {
          tmpContainer.innerHTML = i.outerHTML.replace(/<INPUT/i, '<input type="'+ this.options[this.selectedIndex].value + '"');
        }
        else
        {
          tmpContainer.innerHTML = i.outerHTML.replace(/type="?[a-z]+"?/i, 'type="' + this.options[this.selectedIndex].value + '"');
        }
        var newElement = HTMLArea.removeFromParent(tmpContainer.childNodes[0]);
        i.parentNode.insertBefore(newElement, i);
        HTMLArea.removeFromParent(i);
        input = i = newElement;
      }
    };
};

FormOperations.prototype.showTextarea = function (input)
{
  this.panel.getElementById('fs_textarea').style.display = '';
  var vals =
  {
    'textarea_name'  : this.deformatName(input, input.name),
    'textarea_value' : input.value,
    'textarea_width' : input.style.width ? parseFloat(input.style.width.replace(/[^0-9.]/, '')) : '',
    'textarea_width_units' : input.style.width ? input.style.width.replace(/[0-9.]/, '').toLowerCase() : 'ex',
    'textarea_height'      : input.style.height ? parseFloat(input.style.height.replace(/[^0-9.]/, '')) : '',
    'textarea_height_units': input.style.height ? input.style.height.replace(/[0-9.]/, '').toLowerCase() : 'ex'
  };

  this.panel.setValues(vals);

  var i = input;
  var fo = this;
  this.panel.getElementById('textarea_name').onkeyup   = function () { i.name = fo.formatName(i, this.value); };
  this.panel.getElementById('textarea_value').onkeyup  = function () { i.value = i.innerHTML = this.value; };

  var w  = this.panel.getElementById('textarea_width');
  var wu = this.panel.getElementById('textarea_width_units');

  this.panel.getElementById('textarea_width').onkeyup     =
  this.panel.getElementById('textarea_width_units').onchange =
    function ()
    {
      if(!w.value || isNaN(parseFloat(w.value)))
      {
        i.style.width = '';
      }
      i.style.width = parseFloat(w.value) + wu.options[wu.selectedIndex].value;
    };

  var h  = this.panel.getElementById('textarea_height');
  var hu = this.panel.getElementById('textarea_height_units');

  this.panel.getElementById('textarea_height').onkeyup     =
  this.panel.getElementById('textarea_height_units').onchange =
    function ()
    {
      if(!h.value || isNaN(parseFloat(h.value)))
      {
        i.style.height = '';
      }
      i.style.height = parseFloat(h.value) + hu.options[hu.selectedIndex].value;
    };

};

FormOperations.prototype.showSelect = function (input)
{
  this.panel.getElementById('fs_select').style.display = '';
  var vals =
  {
    'select_name'  : this.deformatName(input, input.name),
    'select_multiple' : input.multiple ? 1 : 0,
    'select_width' : input.style.width ? parseFloat(input.style.width.replace(/[^0-9.]/, '')) : '',
    'select_width_units' : input.style.width ? input.style.width.replace(/[0-9.]/, '').toLowerCase() : 'ex',
      'select_height'      : input.style.height ? parseFloat(input.style.height.replace(/[^0-9.]/, '')) : (input.size && input.size > 0 ? input.size : 1),
    'select_height_units': input.style.height ? input.style.height.replace(/[0-9.]/, '').toLowerCase() : 'items'
  };

  this.panel.setValues(vals);

  var i = input;
  var fo = this;
  this.panel.getElementById('select_name').onkeyup   = function () { i.name = fo.formatName(i, this.value); };
  this.panel.getElementById('select_multiple').onclick   = function () { i.multiple = this.checked; };

  var w  = this.panel.getElementById('select_width');
  var wu = this.panel.getElementById('select_width_units');

  this.panel.getElementById('select_width').onkeyup     =
  this.panel.getElementById('select_width_units').onchange =
    function ()
    {
      if(!w.value || isNaN(parseFloat(w.value)))
      {
        i.style.width = '';
      }
      i.style.width = parseFloat(w.value) + wu.options[wu.selectedIndex].value;
    };

  var h  = this.panel.getElementById('select_height');
  var hu = this.panel.getElementById('select_height_units');

  this.panel.getElementById('select_height').onkeyup     =
  this.panel.getElementById('select_height_units').onchange =
    function ()
    {
      if(!h.value || isNaN(parseFloat(h.value)))
      {
        i.style.height = '';
        return;
      }

      if(hu.selectedIndex == 0)
      {
        i.style.height = '';
        i.size = parseInt(h.value);
      }
      else
      {
        i.style.height = parseFloat(h.value) + hu.options[hu.selectedIndex].value;
      }
    };


  var fo_sel = this.panel.getElementById('select_options');
  this.arrayToOpts(this.optsToArray(input.options), fo_sel.options);

  this.panel.getElementById('add_option').onclick =
    function()
    {
      var txt = prompt("Enter the name for new option.");
      if(txt == null) return;
      var newOpt = new Option(txt);
      var opts   = fo.optsToArray(fo_sel.options);
      if(fo_sel.selectedIndex >= 0)
      {
        opts.splice(fo_sel.selectedIndex, 0, newOpt);
      }
      else
      {
        opts.push(newOpt);
      }
      fo.arrayToOpts(opts, input.options);
      fo.arrayToOpts(opts, fo_sel.options);
    };

  this.panel.getElementById('del_option').onclick =
    function()
    {
      var opts    = fo.optsToArray(fo_sel.options);
      var newOpts = [ ];
      for(var i = 0; i < opts.length; i++)
      {
        if(opts[i].selected) continue;
        newOpts.push(opts[i]);
      }
      fo.arrayToOpts(newOpts, input.options);
      fo.arrayToOpts(newOpts, fo_sel.options);
    };

  this.panel.getElementById('up_option').onclick =
    function()
    {
      if(!(fo_sel.selectedIndex > 0)) return;
      var opts    = fo.optsToArray(fo_sel.options);
      var move    = opts.splice(fo_sel.selectedIndex, 1).pop();
      opts.splice(fo_sel.selectedIndex - 1, 0, move);
      fo.arrayToOpts(opts, input.options);
      fo.arrayToOpts(opts, fo_sel.options);
    };

  this.panel.getElementById('down_option').onclick =
    function()
    {
      if(fo_sel.selectedIndex == fo_sel.options.length - 1) return;
      var opts    = fo.optsToArray(fo_sel.options);
      var move    = opts.splice(fo_sel.selectedIndex, 1).pop();
      opts.splice(fo_sel.selectedIndex+1, 0, move);
      fo.arrayToOpts(opts, input.options);
      fo.arrayToOpts(opts, fo_sel.options);
    };

  this.panel.getElementById('select_options').onchange =
    function()
    {
      fo.arrayToOpts(fo.optsToArray(fo_sel.options), input.options);
    };
};

FormOperations.prototype.optsToArray = function(o)
{
  var a = [ ];
  for(var i = 0; i < o.length; i++)
  {
    a.push(
      {
        'text'            : o[i].text,
        'value'           : o[i].value,
        'defaultSelected' : o[i].defaultSelected,
        'selected'        : o[i].selected
      }
    );
  }
  return a;
};

FormOperations.prototype.arrayToOpts = function(a, o)
{
  for(var i = o.length -1; i >= 0; i--)
  {
    o[i] = null;
  }

  for(var i = 0; i < a.length; i++)
  {
    o[i] = new Option(a[i].text, a[i].value, a[i].defaultSelected, a[i].selected);
  }
};

FormOperations.prototype.formatName = function(input, name)
{

  // Multiple name
  var mname = name;
  switch(this.editor.config.FormOperations.multiple_field_format)
  {
    case 'php':
    {
      mname += '[]';
    }
    break;

    case 'unmodified':
    {
      // Leave as is.
    }
    break;

    default:
    {
      throw("Unknown multiple field format " + this.editor.config.FormOperations.multiple_field_format);
    }
  }

  if
  (
       (input.tagName.toLowerCase() == 'select' && input.multiple)
    || (input.tagName.toLowerCase() == 'input'  && input.type.toLowerCase() == 'checkbox')
  )
  {
    name = mname;
  }

  return name;
};

FormOperations.prototype.deformatName = function(input, name)
{
  if(this.editor.config.FormOperations.multiple_field_format == 'php')
  {
    name = name.replace(/\[\]$/, '');
  }

  return name;
};