menu-wizard.js

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

/**
 * $Id: menu-wizard.js 5895 2007-01-08 18:15:48Z ken $
 * The Zapatec DHTML Menu Wizard
 *
 * Copyright (c) 2004-2006 by Zapatec, Inc.
 * http://www.zapatec.com
 * 1700 MLK Way, Berkeley, California,
 * 94709, U.S.A.
 * All rights reserved.
 *
 * $Id: menu-wizard.js 5895 2007-01-08 18:15:48Z ken $
 *
 * Menu Wizard
 */

function _el(id) {
  return document.getElementById(id);
};

var customClasses = null;
var iconWind = null;
var wizard = null;
var zpDesignCurrentLi = null; // global variable to hold the current node in design mode
var zpDesignCurrentDiv = null;
var contentsMenu = null;
var strCurrentThemeName = 'office_blue';

function initWizard() {
  customClasses = new CustomClasses();
  iconWind = new IconWind();
  wizard = new Zapatec.Wizard({
      tabsID      : 'tabs',
      tabBarID    : 'tab-bar'
    });
  wizard.onInit = initPage;
  wizard.onBeforeTabChange = function(currentTab, newTab) {
    if (newTab != "Introduction") {
      paneContents();
    }
    // allow tab to change
    return true;
  };
  wizard.setupNav();
  wizard.init();
  //Finished Loading Make the wizard visible
  _el("tabs").style.visibility = 'visible';
  _el('loading').style.display = 'none';
  _el('content').style.display = 'block';

//  alert(((new Date).getTime() - tick) / 1000); // this will show loading time in seconds
};

function initPage() {
  Zapatec.Tooltip.setupFromDFN(); //setup the tooltips
  var designlabel = _el("f_design_label");
  designlabel.onkeyup = function() {
    var self = this;
    setTimeout(function(){designChangeCurrentLabel(self.value)}, 25);
  };
  designlabel.onkeypress = function(ev) {
    ev || (ev = window.event);
    if (ev.keyCode == 13) {
      designInsert(true);
    }
  };
  var designlink = _el("f_design_link");
  designlink.onkeyup = function() {
    var self = this;
    setTimeout(function(){designChangeCurrentLink(self.value)}, 25);
  };
  var designtarget = _el("f_design_target");
  designtarget.onkeyup = function() {
    var self = this;
    setTimeout(function(){designChangeCurrentTarget(self.value)}, 25);
  };
};

/**
 * Contents pane
 */

function designChangeCurrentLabel(text) {
  if (zpDesignCurrentLi && zpDesignCurrentDiv && zpDesignCurrentDiv.__zp_label) {
    // remove current text and get href
    var href = _el("f_design_link").value, target = _el("f_design_target").value;
    for (var i = 0; i < zpDesignCurrentLi.childNodes.length; i++) {
      var child = zpDesignCurrentLi.childNodes[i];
      if (child.nodeType == 1) { // ELEMENT_NODE
        if (child.tagName.toLowerCase() == 'a') {
          href = child.getAttribute('href');
          target = child.getAttribute('target');
          zpDesignCurrentLi.removeChild(child);
        }
      } else if (child.nodeType == 3) { // TEXT_NODE
        zpDesignCurrentLi.removeChild(child);
      }
    }
    while (zpDesignCurrentDiv.__zp_label.firstChild) {
      zpDesignCurrentDiv.__zp_label.removeChild(zpDesignCurrentDiv.__zp_label.firstChild);
    }
    // insert new text
    text = text.replace(/^\s+/, '').replace(/\s+$/, '');
    designChangeCurrentLi(text, href, target);
    // Redraw submenu because item width and height may be changed
    contentsMenu.refreshSubMenu();
    ContentsMenu.setActiveItem(zpDesignCurrentDiv); // Resize active item border
  }
};

function designChangeCurrentLink(href) {
  if (zpDesignCurrentLi && zpDesignCurrentDiv && zpDesignCurrentDiv.__zp_label) {
    // remove current href and get text
    var text = '', target = _el("f_design_target").value;
    for (var i = 0; i < zpDesignCurrentLi.childNodes.length; i++) {
      var child = zpDesignCurrentLi.childNodes[i];
      if (child.nodeType == 1) { // ELEMENT_NODE
        if (child.tagName.toLowerCase() == 'a') {
          target = child.getAttribute('target');
          for (var j = 0; j < child.childNodes.length; j++) {
            var c = child.childNodes[j];
            if (c.nodeType == 3 && c.data) {
              text = c.data;
              break;
            }
          }
          zpDesignCurrentLi.removeChild(child);
        }
      } else if (child.nodeType == 3) { // TEXT_NODE
        if (child.data) {
          text = child.data;
        }
        zpDesignCurrentLi.removeChild(child);
      }
    }
    while (zpDesignCurrentDiv.__zp_label.firstChild) {
      zpDesignCurrentDiv.__zp_label.removeChild(zpDesignCurrentDiv.__zp_label.firstChild);
    }
    // insert new href
    designChangeCurrentLi(text, href, target);
  }
};

function designChangeCurrentTarget(target) {
  if (zpDesignCurrentLi && zpDesignCurrentDiv && zpDesignCurrentDiv.__zp_label) {
    // remove current href and get text
    var text = '', href = _el("f_design_link").value;
    for (var i = 0; i < zpDesignCurrentLi.childNodes.length; i++) {
      var child = zpDesignCurrentLi.childNodes[i];
      if (child.nodeType == 1) { // ELEMENT_NODE
        if (child.tagName.toLowerCase() == 'a') {
          href = child.getAttribute('href');
          for (var j = 0; j < child.childNodes.length; j++) {
            var c = child.childNodes[j];
            if (c.nodeType == 3 && c.data) {
              text = c.data;
              break;
            }
          }
          zpDesignCurrentLi.removeChild(child);
        }
      } else if (child.nodeType == 3) { // TEXT_NODE
        if (child.data) {
          text = child.data;
        }
        zpDesignCurrentLi.removeChild(child);
      }
    }
    while (zpDesignCurrentDiv.__zp_label.firstChild) {
      zpDesignCurrentDiv.__zp_label.removeChild(zpDesignCurrentDiv.__zp_label.firstChild);
    }
    // insert new href
    designChangeCurrentLi(text, href, target);
  }
};

function designChangeCurrentLi(text, href, target) {
  if (href != null && href != '' && href != 'none') {
    _el("f_design_target").disabled = false;
    var a = document.createElement('a');
    a.setAttribute('href', href);
    if (target != null && target != '') {
      a.setAttribute('target', target);
    }
    a.appendChild(document.createTextNode(text));
    var nextNode = zpDesignCurrentLi.firstChild;
    if (nextNode && nextNode.tagName.toLowerCase() == 'img') {
      nextNode = nextNode.nextSibling;
    }
    zpDesignCurrentLi.insertBefore(a, nextNode);
    zpDesignCurrentDiv.__zp_label.appendChild(a.cloneNode(true));
  } else {
    _el("f_design_target").disabled = true;
    var nextNode = zpDesignCurrentLi.firstChild;
    if (nextNode && nextNode.tagName.toLowerCase() == 'img') {
      nextNode = nextNode.nextSibling;
    }
    zpDesignCurrentLi.insertBefore(document.createTextNode(text), nextNode);
    var span = document.createElement('span');
    span.appendChild(document.createTextNode(text));
    zpDesignCurrentDiv.__zp_label.appendChild(span);
  }
};

function designInitLi(li) {
  if (li.style.cursor) {
    li.style.cursor = "pointer";
  }
  li.onclick = function(ev, testElm) {
    if (!testElm) {
      ev || (ev = window.event);
      if (!ev) {
        return false;
      }
      testElm = ev.currentTarget || ev.srcElement;
    }

    if (zpDesignCurrentLi) {
      Zapatec.Utils.removeClass(zpDesignCurrentLi, "active");
    }
    zpDesignCurrentLi = li;
    Zapatec.Utils.addClass(zpDesignCurrentLi, "active");

    var input = _el("f_design_label");
    var input_link = _el("f_design_link");
    var input_target = _el("f_design_target");
    input.disabled = false;
    input_link.disabled = false;
    input_target.disabled = true;
    var text = '', href = 'none', target = '', icon = false;
    for (var i = 0; i < li.childNodes.length; i++) {
      var child = li.childNodes[i];
      if (child.nodeType == 1) { // ELEMENT_NODE
        var tag = child.tagName.toLowerCase();
        if (tag == 'img') {
          icon = true;
        } else if (tag == 'a') {
          href = child.getAttribute('href');
          target = child.getAttribute('target');
          for (var j = 0; j < child.childNodes.length; j++) {
            var c = child.childNodes[j];
            if (c.nodeType == 3 && c.data) {
              var t = c.data;
              t = t.replace(/^\s+/, '').replace(/\s+$/, '');
              if (t != '') {
                text = t;
                break;
              }
            }
          }
          if (text != '') {
            break;
          }
        }
      } else if (child.nodeType == 3 && child.data) { // TEXT_NODE
        var t = child.data;
        t = t.replace(/^\s+/, '').replace(/\s+$/, '');
        if (t != '') {
          text = t;
          break;
        }
      }
    }
    input.value = text;
    input_link.value = href;
    input_target.value = target;
    if (href != '' && href != 'none') {
      input_target.disabled = false;
    }

    if (_el("pane-contents").style.display != 'none') { // We're on Contents pane
      input.select();
      input.focus();
    }

    if (icon) {
      _el("designAddIcon").style.display = 'none';
      _el("designRemoveIcon").style.display = 'block';
    } else {
      _el("designRemoveIcon").style.display = 'none';
      _el("designAddIcon").style.display = 'block';
    }

    while (testElm && !testElm.__zp_item) {
      testElm = testElm.parentNode;
    }
    if (testElm) {
      ContentsMenu.setActiveItem(testElm);
    }
    customClasses.propertiesWind.hide();

    return false;
  };
};

function alertDesignNoSelectedNode() {
  alert('You need to click an item in the menu first');
};

function designInsert(after) {
  if (!zpDesignCurrentLi || !zpDesignCurrentDiv) {
    alertDesignNoSelectedNode();
    return false;
  }
  var newli = document.createElement('li');
  newli.innerHTML = 'New Item';
  customClasses.addClass(-1, newli, '', '', '', '', false);
  zpDesignCurrentLi.parentNode.insertBefore(newli, after ? zpDesignCurrentLi.nextSibling : zpDesignCurrentLi);
  designInitLi(newli);
  newli.onclick(null, newli);
  doContents();
  return false;
};

function designAddSubtree() {
  if (!zpDesignCurrentLi || !zpDesignCurrentDiv) {
    alertDesignNoSelectedNode();
    return false;
  }
  // assume the subtree already exists (it can happen)
  var newul = zpDesignCurrentLi.getElementsByTagName("ul")[0];
  if (!newul) {
    // only if not existent, create one
    newul = document.createElement("ul");
    customClasses.addClass(-1, newul, '', '', '', '', true);
    zpDesignCurrentLi.appendChild(newul);
  }
  var newli = document.createElement("li");
  customClasses.addClass(-1, newli, '', '', '', '', false);
  newul.appendChild(newli);
  newli.innerHTML = "New Item";
  designInitLi(newli);
  newli.onclick(null, newli);
  doContents();
  return false;
};

function designRemove() {
  if (!zpDesignCurrentLi || !zpDesignCurrentDiv) {
    alertDesignNoSelectedNode();
    return false;
  }
  var p = zpDesignCurrentLi.parentNode, p2 = p;
  if (p.id == 'designMenu' && p.childNodes.length == 1) {
    alert("Sorry, you can't remove all menu items because menu must have at least one item to be operational.");
  } else if (confirm("Remove selected item and any submenus it might have?")) {
    p.removeChild(zpDesignCurrentLi);
    if (!/\S/.test(p.innerHTML)) {
      p2 = p.parentNode;
      p2.removeChild(p);
      p = p2;
    }
    zpDesignCurrentLi = null;
    _el("f_design_label").disabled = true;
    _el("f_design_link").disabled = true;
    _el("f_design_target").disabled = true;
    doContents();
  }
  return false;
};

function designAddIcon() {
  if (!zpDesignCurrentLi || !zpDesignCurrentDiv) {
    alertDesignNoSelectedNode();
    return false;
  }
  iconWind.show(
    function(src) {
      if (src) {
        var icon = document.createElement('img');
        icon.setAttribute('src', src);
        // Store relative path, DOM will setAttribute to absolute path
        icon.setAttribute('zpPathRelative', 
          src.replace(/^.*\/themes\/icon\//, "zpmenu/themes/icon/"))
        zpDesignCurrentLi.insertBefore(icon, zpDesignCurrentLi.firstChild);
        _el("designAddIcon").style.display = 'none';
        _el("designRemoveIcon").style.display = 'block';
        doContents();
      }
    }
  );
  return false;
}

function designRemoveIcon() {
  if (!zpDesignCurrentLi || !zpDesignCurrentDiv) {
    alertDesignNoSelectedNode();
    return false;
  }
  for (var i = 0; i < zpDesignCurrentLi.childNodes.length; i++) {
    var child = zpDesignCurrentLi.childNodes[i];
    if (child.nodeType == 1 && child.tagName.toLowerCase() == 'img') {
      zpDesignCurrentLi.removeChild(child);
    }
  }
  _el("designRemoveIcon").style.display = 'none';
  _el("designAddIcon").style.display = 'block';
  doContents();
  return false;
}

/**
 * ContentsMenu class derived from Zapatec.Menu class. It modifies createItem method of the class.
 * Here we are using inheritence method described at http://www.kevlindev.com/tutorials/javascript/inheritance/
 */

ContentsMenu.prototype = new Zapatec.Menu();
ContentsMenu.SUPERclass = Zapatec.Menu.prototype;

function ContentsMenu(el) {
  if (arguments.length > 0) {
    this.init(el);
  }
};

ContentsMenu.prototype.init = function(el) {
  ContentsMenu.SUPERclass.init.call(this, {
    theme: strCurrentThemeName,
    source: el,
    vertical: getConfigParam("f_vertical", false),
    hideDelay: 86400000
  });
  if (zpDesignCurrentDiv) {
    this.sync(zpDesignCurrentDiv.__zp_item);
  }
};

ContentsMenu.prototype.createItem = function(li, parent, next_li, level, intItem) {