menu-wizard.js

zapatec suite 最新版 20070204,非常棒的ajax widgets 工具包

    function(ev) { return self.dragEnd(ev, self) });
  // WCH for IE only
  this.wch = Zapatec.Utils.createWCH(this.div);
  if (this.wch) {
    this.wch.style.zIndex = -1;
  }
};

Wind.prototype.show = function() {
  if (this.div) {
    this.div.style.display = 'block';
    // WCH for IE only
    if (this.wch && typeof this.div.clientLeft != 'undefined') {
      var iBorderLeft = this.div.clientLeft;
      var iBorderTop = this.div.clientTop;
      Zapatec.Utils.setupWCH(this.wch, -iBorderLeft, -iBorderTop,
       this.div.offsetWidth + iBorderLeft * 2,
       this.div.offsetHeight + iBorderTop * 2);
    }
  }
};

Wind.prototype.hide = function() {
  if (this.div) {
    this.div.style.display = 'none';
  }
};

Wind.prototype.dragStart = function(ev, self) {
  ev || (ev = window.event);
  if (self.dragging) {
    return true;
  }
  var div = self.titleDiv || self.div;
  if (!div) {
    return true;
  }
  var testElm = ev.srcElement || ev.target;
  while (1) {
    if (testElm == div) break;
    else testElm = testElm.parentNode;
    if (!testElm) return true;
  }
  self.dragging = true;
  var posX = ev.pageX || ev.clientX + window.document.body.scrollLeft || 0;
  var posY = ev.pageY || ev.clientY + window.document.body.scrollTop || 0;
  var L = parseInt(this.div.style.left) || 0;
  var T = parseInt(this.div.style.top) || 0;
  self.xOffs = (posX - L);
  self.yOffs = (posY - T);
};

Wind.prototype.dragMove = function(ev, self) {
  ev || (ev = window.event);
  if (!(self && self.dragging)) {
    return false;
  }
  var posX = ev.pageX || ev.clientX + window.document.body.scrollLeft || 0;
  var posY = ev.pageY || ev.clientY + window.document.body.scrollTop || 0;
  var st = this.div.style, L = posX - self.xOffs, T = posY - self.yOffs;
  st.left = L + "px";
  st.top = T + "px";
  return Zapatec.Utils.stopEvent(ev);
};

Wind.prototype.dragEnd = function(ev, self) {
  if (!self) {
    return false;
  }
  self.dragging = false;
};

/*
 * PropertiesWind class
 */

function unpx(s) {
  var p = s.indexOf('px');
  if (p > 0) s = s.substring(0, p);
  if (isNaN(s)) return '';
  return s*1;
};

function unurl(s) {
  var p = s.indexOf(')');
  if (p > 0) s = s.substring(4, p);
  return s;
};

function first(s) {
  var p = s.indexOf(' ');
  if (p > 0) s = s.substring(0, p);
  return s;
};

function firstRgb(s) {
  var p = s.indexOf(' rgb(');
  if (p > 0) s = s.substring(0, p);
  return s;
};

function initColorChooser(field, id, val) {
  val = firstRgb(val);
  field.value = val;
  _el(id+'Chooser').style.backgroundColor = val;
};

function initSelectBox(field, val) {
  val = first(val);
  for (var i = 0; i < field.options.length; i++) {
    if (field.options[i].value == val) {
      field.selectedIndex = i;
      return;
    }
  }
};

function initCheckBox(field, val) {
  if (val) {
    field.checked = true;
  } else {
    field.checked = false;
  }
};

function initNumberInput(field, val) {
  val = unpx(val);
  if (val > 0) {
    field.value = val;
  } else {
    field.value = '';
  }
};

function initImageInput(field, val) {
  val = unurl(val);
  if (val != '') {
    field.value = val;
  } else {
    field.value = 'none';
  }
};

PropertiesWind.prototype = new Wind();
PropertiesWind.SUPERclass = Wind.prototype;

function PropertiesWind(cssStyle, cssFont, cssStyleHi, cssFontHi, title, showHighlighted, callback) {
  if (arguments.length > 0) {
    this.init(cssStyle, cssFont, cssStyleHi, cssFontHi, title, showHighlighted, callback);
  }
};

PropertiesWind.prototype.init = function(cssStyle, cssFont, cssStyleHi, cssFontHi, title, showHighlighted, callback) {
  PropertiesWind.SUPERclass.init.call(this, 'propertiesBox', title);
  this.callback = callback;
  var hi = _el('propertiesHighlighted').style;
  if (showHighlighted) {
    hi.display = 'block';
  } else {
    hi.display = 'none';
  }
  this.setup(cssStyle, cssFont, cssStyleHi, cssFontHi);
  var self = this;
  _el('propertiesButtonApply').onclick = function() {
    self.apply();
    return false;
  };
  _el('propertiesButtonReset').onclick = function() {
    self.setup('', '', '', '');
    self.callback('', '', '', '');
    self.callback('', '', '', '');
    self.callback('', '', '', ''); // For unknown reason this doesn't work from the first
    return false;
  };
  _el('propertiesButtonOk').onclick = function() {
    self.apply();
    self.hide();
    return false;
  };
  _el('propertiesButtonCancel').onclick = function() {
    self.hide();
    return false;
  };
};

PropertiesWind.prototype.setup = function(cssStyle, cssFont, cssStyleHi, cssFontHi) {
  var st = _el('propertiesExample').style;
  var fo = _el('propertiesExampleLabel').style;
  var sth = _el('propertiesExampleHi').style;
  var foh = _el('propertiesExampleLabelHi').style;

  st.cssText = cssStyle;
  fo.cssText = cssFont;
  sth.cssText = cssStyleHi;
  foh.cssText = cssFontHi;

  var f = document.propertiesForm;

  initNumberInput(f.p_width, st.width);
  initNumberInput(f.p_height, st.height);

  initColorChooser(f.p_backgroundColor, 'p_backgroundColor', st.backgroundColor);
  initImageInput(f.p_backgroundImage, st.backgroundImage);
  initColorChooser(f.p_color, 'p_color', fo.color);

  initColorChooser(f.p_backgroundColorHi, 'p_backgroundColorHi', sth.backgroundColor);
  initImageInput(f.p_backgroundImageHi, sth.backgroundImage);
  initColorChooser(f.p_colorHi, 'p_colorHi', foh.color);

  initNumberInput(f.p_borderWidth, st.borderWidth);
  initColorChooser(f.p_borderColor, 'p_borderColor', st.borderColor);
  initSelectBox(f.p_borderStyle, st.borderStyle);

  initSelectBox(f.p_fontFamily, fo.fontFamily);
  initCheckBox(f.p_fontBold, fo.fontWeight.indexOf('bold') >= 0);
  initCheckBox(f.p_fontItalic, fo.fontStyle.indexOf('italic') >= 0);
  initNumberInput(f.p_fontSize, fo.fontSize);

  initSelectBox(f.p_textAlign,fo.textAlign);
  initSelectBox(f.p_verticalAlign,fo.verticalAlign);
};

PropertiesWind.prototype.show = function(cssStyle, cssFont, cssStyleHi, cssFontHi, title, showHighlighted, callback) {
  if (arguments.length > 0) {
    this.init(cssStyle, cssFont, cssStyleHi, cssFontHi, title, showHighlighted, callback);
  }
  PropertiesWind.SUPERclass.show.call(this);
};

PropertiesWind.prototype.apply = function() {
  var st='';
  var fo='';
  var sth='';
  var foh='';
  var f = document.propertiesForm;

  if (f.p_width.value > 0) {
    st += 'width:' + f.p_width.value + 'px;';
  }
  if (f.p_height.value > 0) {
    st += 'height:' + f.p_height.value + 'px;';
  }

  if (f.p_borderColor.value) {
    st += 'border-color:' + f.p_borderColor.value + ';';
  }
  if (f.p_borderStyle.value) {
    st += 'border-style:' + f.p_borderStyle.value + ';';
  }
  if (f.p_borderWidth.value > 0) {
    st += 'border-width:' + f.p_borderWidth.value + 'px;';
  }

  if (f.p_backgroundColor.value) {
    st += 'background-color:' + f.p_backgroundColor.value + ';';
  }
  if (f.p_backgroundImage.value && f.p_backgroundImage.value != 'none') {
    st += 'background-image:url("' + f.p_backgroundImage.value + '");';
  }
  if (f.p_color.value) {
    fo += 'color:' + f.p_color.value + ';';
  }

  if (f.p_backgroundColorHi.value) {
    sth += 'background-color:' + f.p_backgroundColorHi.value + ';';
  }
  if (f.p_backgroundImageHi.value && f.p_backgroundImageHi.value != 'none') {
    sth += 'background-image:url("' + f.p_backgroundImageHi.value + '");';
  }
  if (f.p_colorHi.value) {
    foh += 'color:' + f.p_colorHi.value + ';';
  }

  if (f.p_fontFamily.value) {
    fo += 'font-family:' + f.p_fontFamily.value + ';';
  }
  if (f.p_fontBold.checked) {
    fo += 'font-weight:bold;';
  }
  if (f.p_fontItalic.checked) {
    fo += 'font-style:italic;';
  }
  if (f.p_fontSize.value > 0) {
    fo += 'font-size:' + f.p_fontSize.value + 'px;';
  }

  if (f.p_textAlign.value) {
    fo += 'text-align:' + f.p_textAlign.value + ';';
  }
  if (f.p_verticalAlign.value) {
    fo += 'vertical-align:' + f.p_verticalAlign.value + ';';
  }

  this.callback(st, fo, sth, foh);
};

/*
 * Color Chooser functions
 */

function chooseColor(id) {
  var f = _el(id);
  var span = _el(id+'Chooser');
  Dialog('../wizard/popups/select_color.html', 'colorDialog', 240, 182, function(color) {
    if (color) {
      span.style.backgroundColor = "#" + color;
      f.value = "#" + color;
      if (id == 'p_color') {
        _el('propertiesExampleLabel').style.color="#" + color;
      } else if (id == 'p_backgroundColor') {
        _el('propertiesExample').style.backgroundColor="#" + color;
      } else if (id == 'p_borderColor') {
        _el('propertiesExample').style.borderColor="#" + color;
      }
    }
  }, f.value);
};

function unsetColor(id) {
  var field=_el(id);
  var span=_el(id+'Chooser');
  field.value = "";
  span.style.backgroundColor = "";
  if (id == 'p_color') {
    _el('propertiesExampleLabel').style.color='';
  } else if (id == 'p_backgroundColor') {
    _el('propertiesExample').style.backgroundColor='';
  } else if (id == 'p_borderColor') {
    _el('propertiesExample').style.borderColor='';
  }
};

/*
 * IconTree class
 */

IconTree.prototype = new Zapatec.BasicTree();
IconTree.SUPERclass = Zapatec.BasicTree.prototype;

function IconTree(el, config) {
  if (arguments.length > 0) {
    this.init(el, config);
  }
  this.src = null;
};

IconTree.prototype.init = function(el, config) {
  IconTree.SUPERclass.init.call(this, el, config);
};

IconTree.prototype.onItemSelect = function() {
  var item = this.selectedItem;
  if (!/tree-item-more/i.test(item.className)) {
    var node = item;
    while (node.childNodes.length > 0) {
      node = node.childNodes[0];
      if (node.nodeName.toLowerCase() == 'img') {
        this.src = node.src;
        document.iconForm.i_url.value = '';
        break;
      }
    }
  } else {
    this.src = null;
  }
};

/*
 * IconWind class
 */

IconWind.prototype = new Wind();
IconWind.SUPERclass = Wind.prototype;

function IconWind(callback) {
  this.iconTree = null;
  var el = _el('iconTree');
  if (el) {
    var config = {
      hiliteSelectedNode : true,
      compact            : false,
      dynamic            : false,
      initLevel          : false,
      defaultIcons       : null
    };
    this.iconTree = new IconTree(el, config);
  }
  if (arguments.length > 0) {
    this.init(callback);
  }
};

IconWind.prototype.init = function(callback) {
  IconWind.SUPERclass.init.call(this, 'iconBox', 'Choose an Icon');
  this.callback = callback;
  var self = this;
  document.iconForm.onsubmit = function() {
    var url = document.iconForm.i_url.value || self.iconTree.src;
    if (url) {
      self.apply(url);
      self.hide();
    } else {
      alert('Please choose an icon or enter icon URL. To close Icon Gallery press Cancel.');
    }
    return false;
  };
  _el('iconButtonCancel').onclick = function() {
    self.hide();
    return false;
  };
};

IconWind.prototype.show = function(callback) {
  if (arguments.length > 0) {
    this.init(callback);
  }
  document.iconForm.i_url.value = '';
  IconWind.SUPERclass.show.call(this);
};

IconWind.prototype.apply = function(url) {
  this.callback(url);
};