menu-wizard.js

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

  var item = ContentsMenu.SUPERclass.createItem.call(this, li, parent, next_li, level, intItem);
  if (item) {
    var node = item;
    while (node = node.lastChild) {
      var tag = node.tagName.toLowerCase();
      if (tag == 'a' || tag == 'span') {
        item.__zp_label = node.parentNode;
        break;
      }
    }
    if (item.className.indexOf('active') >= 0) {
      zpDesignCurrentDiv = item;
      setTimeout(function(){ContentsMenu.setActiveItem(item)}, 1);
    }
    var cn = customClasses.getClassNumber(item);
    if (cn >= 0 && customClasses.classes[cn]) {
      item.onclick = customClasses.classes[cn].node.onclick;
    } else {
      item.onclick = function(e) {
        return false;
      };
    }
    var self = this;
    item.onmouseover = function() {
      self.itemMouseHandler(item.__zp_item, Zapatec.Menu.MOUSEOVER);
    };
  }
  return item;
};

ContentsMenu.prototype.sync = function(item_id) {
  if (!this.items) {
    return;
  }
  var item = this.items[item_id];
  if (!item) {
    return;
  }
  this.collapseAll();
  this.selectedItem = item;
  var a = [];
  while (item.__zp_parent) {
    a[a.length] = item;
    var pt = this._getTree(item.__zp_parent);
    if (pt.__zp_item)
      item = this.items[pt.__zp_item];
    else
      break;
  }
  for (var i = a.length; --i >= 0;) {
    a[i].onmouseover();
  }
  Zapatec.Utils.addClass(this.selectedItem, "zpMenu-item-selected");
};

ContentsMenu.prototype.refreshSubMenu = function() {
  if (!zpDesignCurrentDiv) return;
  var subMenu = zpDesignCurrentDiv.parentNode;
  var isTopMenu = (subMenu == this.top_parent.__zp_menu);
  var subMenuWidth = 0;
  var subMenuHeight = 0;
  var item = subMenu.firstChild;
  if (!item) return;
  var itemMarginLeft = item.offsetLeft;
  var itemMarginTop = item.offsetTop;
  while (item) {
    var itemWidth = item.offsetWidth + itemMarginLeft;
    var itemHeight = item.offsetHeight + itemMarginTop;
    if (!isTopMenu || this.config.vertical) {
      if (itemWidth > subMenuWidth) {
        subMenuWidth = itemWidth;
      }
      subMenuHeight += itemHeight;
    } else {
      subMenuWidth += itemWidth;
      if (itemHeight > subMenuHeight) {
        subMenuHeight = itemHeight;
      }
    }
    item = item.nextSibling;
  }
  if (subMenuWidth > 0 && subMenuHeight > 0) {
    if (!isTopMenu) {
      // + item right and bottom margin
      subMenuWidth += itemMarginLeft;
      subMenuHeight += itemMarginTop;
      if (typeof subMenu.clientLeft != 'undefined') { // IE & Opera
        // + submenu margin
        subMenuWidth += subMenu.offsetLeft * 2;
        subMenuHeight += subMenu.offsetTop * 2;
      }
      subMenu = subMenu.parentNode;
    }
    if (subMenu.clientLeft) { // IE & Opera
      // + submenu border
      subMenuWidth += subMenu.clientLeft * 2;
      subMenuHeight += subMenu.clientTop * 2;
    }
    if (isTopMenu || subMenu.clientWidth < subMenuWidth) {
      subMenu.style.width = subMenuWidth + 'px';
    }
    if (!isTopMenu) {
      subMenu.style.height = subMenuHeight + 'px';
    }
  }
};

ContentsMenu.setActiveItem = function(item) {
  if (zpDesignCurrentDiv && zpDesignCurrentDiv.__zp_border) {
    // Unselect current item
    zpDesignCurrentDiv.removeChild(zpDesignCurrentDiv.__zp_border);
    zpDesignCurrentDiv.__zp_border = null;
  }
  zpDesignCurrentDiv = item;
  var border = zpDesignCurrentDiv.__zp_border = Zapatec.Utils.createElement('div');
  border.style.position = 'absolute';
  border.style.border = '1px solid #f00';
  border.style.left = zpDesignCurrentDiv.offsetLeft + 'px';
  border.style.top = zpDesignCurrentDiv.offsetTop + 'px';
  var width = zpDesignCurrentDiv.clientWidth;
  if (zpDesignCurrentDiv.clientLeft) {
    // IE & Opera
    width += zpDesignCurrentDiv.clientLeft * 2; // + border
  }
  border.style.width = width + 'px';
  var height = zpDesignCurrentDiv.clientHeight;
  if (zpDesignCurrentDiv.clientTop) {
    // IE & Opera
    height += zpDesignCurrentDiv.clientTop * 2; // + border
  }
  border.style.height = height + 'px';
  zpDesignCurrentDiv.insertBefore(border, zpDesignCurrentDiv.firstChild);
};

function doContents() {
  customClasses.apply(); // Apply custom properties
  var ul = _el('designMenu');
  var div = _el('designcontents');
  var clone = ul.cloneNode(true);
  clone.id = 'tree-contents';
  while (div.firstChild) {
    div.removeChild(div.firstChild);
  }
  div.appendChild(clone);
  contentsMenu = new ContentsMenu('tree-contents');
  customClasses.apply(); // Apply custom properties
};

/**
 * Look and Feel pane
 */

function designItemProperties() {
  if (!zpDesignCurrentLi) {
    alertDesignNoSelectedNode();
  } else {
    customClasses.propertiesDialogLi(zpDesignCurrentLi);
  }
  return false;
};

function designSubmenuProperties() {
  if (!zpDesignCurrentLi) {
    alertDesignNoSelectedNode();
  } else {
    customClasses.propertiesDialogUl(zpDesignCurrentLi.parentNode);
  }
  return false;
};

function designCustomize() {
  customClasses.propertiesDialogMenu();
  return false;
};

function doLook() {
  customClasses.apply(); // Apply custom properties
  var ul = _el('designMenu');
  var div = _el('designlook');
  while (div.firstChild) {
    div.removeChild(div.firstChild);
  }
  var clone = ul.cloneNode(true);
  clone.id = 'tree-look';
  div.appendChild(clone);
  contentsMenu = new ContentsMenu('tree-look');
  customClasses.apply(); // Apply custom properties
};

/*
 * Effects pane. Show the menu with the options that the user
 * selected.
 */

function targetBlank(node) {
  for (var i=0; i<node.childNodes.length; i++) {
    var child = node.childNodes[i];
    if (child.nodeType == 1) { // ELEMENT_NODE
      var tag = child.tagName.toLowerCase();
      if (tag == 'a') {
        var href = child.getAttribute('href');
        if (href != null && href != '') {
          child.setAttribute('href', 'javascript:(function(){window.open("'+href+'","linkPreview")})()');
          child.removeAttribute('target');
        }
      } else if (tag == 'ul' || tag == 'li') {
        targetBlank(child);
      }
    }
  }
};

/*
 * Reference to preview menu object.
 */
var oPreviewMenu;

function doPreview() {
  customClasses.apply(); // Apply custom properties
  var config = getConfig();
  var ul = _el('designMenu');
  var div = _el('designpreview');
  while (div.firstChild) {
    div.removeChild(div.firstChild);
  }
  var clone = ul.cloneNode(true);
  clone.id = 'tree-preview';
  targetBlank(clone);
  div.appendChild(clone);
  config.theme = strCurrentThemeName;
  config.source = 'tree-preview';
  // Free memory
  if (oPreviewMenu) {
    oPreviewMenu.discard();
  }
  // Reinitialize menu
  oPreviewMenu = new Zapatec.Menu(config);
  if (getConfigParam('f_glide', false))
    oPreviewMenu.addAnimation('glide');
  if (getConfigParam('f_fade', false))
    oPreviewMenu.addAnimation('fade');
  if (getConfigParam('f_slide', false))
    oPreviewMenu.addAnimation('slide');
  if (getConfigParam('f_wipe', false))
    oPreviewMenu.addAnimation('wipe');
  if (getConfigParam('f_unfurl', false))
    oPreviewMenu.addAnimation('unfurl');
  customClasses.apply(); // Apply custom properties
};

/*
 * Get Your Code pane.
 */

function generateCode() {
  var indent1 = makeIndent(1);
  var indent2 = makeIndent(2);
  var indent3 = makeIndent(3);
  var indent4 = makeIndent(4);
  var html = getHeaders();
  html += indent1 + '<body>\n';
  html += indent2 + ('<!-- The HTML for the menu-->\n');
  html += getHTML(2, _el('designMenu'));
  html += indent2 + ('<!-- The Javascript code to initiate the menu -->\n');
  html += indent2 + '<script type="text/javascript">\n';
  html += indent3 + 'var myMenu = new Zapatec.Menu({\n';
  html += indent4 + 'theme: "' + _el('theme').value + '",\n';
  html += indent4 + 'source: "designMenu"';
  var strParms="";
  var config = getConfig();
  for (var prop in config) {
    var val = config[prop];
    // Skip default values
    if (typeof val == 'boolean' && !val) continue;
    else if (prop == 'showDelay' && val == 0) continue;
    else if (prop == 'hideDelay' && val == 500) continue;
    else if (prop == 'animSpeed' && val == 10) continue;
    if (typeof val == 'string') val = '"' + val + '"';
    strParms += (strParms ? ',' : '') + '\n' + indent4 + prop + ': ' + val;
  }
  if (getConfigParam('f_glide', false)) {
    strParms += (strParms ? ',' : '') + '\n' + indent4 + 'glide: true';
  }
  if (getConfigParam('f_fade', false)) {
    strParms += (strParms ? ',' : '') + '\n' + indent4 + 'fade: true';
  }
  if (getConfigParam('f_slide', false)) {
    strParms += (strParms ? ',' : '') + '\n' + indent4 + 'slide: true';
  }
  if (getConfigParam('f_wipe', false)) {
    strParms += (strParms ? ',' : '') + '\n' + indent4 + 'wipe: true';
  }
  if (getConfigParam('f_unfurl', false)) {
    strParms += (strParms ? ',' : '') + '\n' + indent4 + 'unfurl: true';
  }
  if (getConfigParam('f_trigger', false)) {
    var triggerEvent = getConfigParam('f_triggerevent', 1);
    if (triggerEvent == 4) {
      var triggerKey = getConfigParam('f_triggerkey', '');
      triggerKey = triggerKey.replace(/[^\d]/g, '');
      if (triggerKey != '') {
        strParms += (strParms ? ',' : '') + '\n' + indent4;
        strParms += 'triggerEvent: "keydown"';
        strParms += (strParms ? ',' : '') + '\n' + indent4;
        strParms += 'triggerKey: ' + triggerKey;
        var triggerObject = getConfigParam('f_triggerobject', '');
        if (triggerObject != '') {
          strParms += (strParms ? ',' : '') + '\n' + indent4;
          strParms += 'triggerObject: "' + triggerObject + '"';
        }
      }
    } else {
      strParms += (strParms ? ',' : '') + '\n' + indent4;
      strParms += 'triggerEvent: "mouseup"';
      if (triggerEvent == 2) {
        strParms += (strParms ? ',' : '') + '\n' + indent4;
        strParms += 'triggerKey: "left"';
      } else if (triggerEvent == 3) {
        strParms += (strParms ? ',' : '') + '\n' + indent4;
        strParms += 'triggerKey: "both"';
      }
      var triggerObject = getConfigParam('f_triggerobject', '');
      if (triggerObject != '') {
        strParms += (strParms ? ',' : '') + '\n' + indent4;
        strParms += 'triggerObject: "' + triggerObject + '"';
      }
    }
  }
  if (getConfigParam('f_keeptrack', false)) {
    strParms += (strParms ? ',' : '') + '\n' + indent4;
    if (getConfigParam('f_keeptrackexpand', false)) {
      strParms += 'rememberPath: "expand"';
    } else {
      strParms += 'rememberPath: true';
    }
    var pathCookie = getConfigParam('f_keeptrackcookie', '');
    if (pathCookie != '') {
      strParms += (strParms ? ',' : '') + '\n' + indent4;
      strParms += 'pathCookie: "' + pathCookie + '"';
    }
  }
  if (strParms != '') {
    html += ',' + strParms + '\n' + makeIndent(3);
  }
  html += '});\n';
  html += indent2 + '</script>\n';
  html += indent2 + '<noscript>\n'
  html += indent3 + '<br/>\n';
  html += indent3 + 'This page uses a <a href="http://www.zapatec.com/website/main/products/menu/"> Javascript Menu</a>,\n';
  html += indent3 + 'but your browser does not support Javascript.\n';
  html += indent3 + '<br/>\n';
  html += indent3 + 'Either enable Javascript in your Browser or upgrade to a newer version.\n';
  html += indent2 + '</noscript>\n';
  html += indent2 + '<br/>\n';
  html += indent2 + '<a href="http://www.zapatec.com/website/main/products/menu/">Zapatec Javascript Menu</a>\n';
  html += indent1 + '</body>\n</html>';
  return html;
};

var initialSubMenus = initialMenuItems = 0; //has the menu been created yet?

function paneContents() {
  customClasses.unApply(); // Remove custom properties

  // The UL underneath which everything else is set up
  var mainUl = _el("designMenu"); 
  var numSubMenus = _el("f_subMenus").value; 
  var itemsInSubMenus = _el("f_itemsInSubMenus").value; 
  var img;

  if (initialMenuItems != 0) {//if it's zero -- first round don't need to check anything.
    if ((initialSubMenus == numSubMenus) && (initialMenuItems == itemsInSubMenus)) {
      return; //no change don't need to create
    }

    //change, confirm that they want it
    if (!confirm("You changed the number of menus or submenus.\nYou will loose any work you have done. Are you sure?")) {
      return;
    } else {
      customClasses = new CustomClasses();
      customClasses.addClass(-1, mainUl, '', '', '', '', true);
      while (mainUl.hasChildNodes())
        mainUl.removeChild(mainUl.lastChild);
    }
  } else {
    customClasses.addClass(-1, mainUl, '', '', '', '', true);
  }

  for (ii = 0; ii < numSubMenus; ii++) {
    //Create a <li> under the main <UL>
    var newLi = document.createElement("li");
    newLi.innerHTML='Menu ' + (ii + 1);
    newLi.className = 'wizardUl';
    customClasses.addClass(-1, newLi, '', '', '', '', false);
    mainUl.appendChild(newLi);
    designInitLi(newLi);

    //Create a <ul> under the <li> we just created
    var newUl = document.createElement("ul");
    customClasses.addClass(-1, newUl, '', '', '', '', true);
    newLi.appendChild(newUl)
      for (jj = 0; jj < itemsInSubMenus; jj++) {
        var subLi = document.createElement("li");
        subLi.innerHTML='Item ' + (jj + 1);
        customClasses.addClass(-1, subLi, '', '', '', '', false);
        newUl.appendChild(subLi);
        designInitLi(subLi);
      }
  }

  initialSubMenus = numSubMenus;
  initialMenuItems = itemsInSubMenus;
};

function makeCode() {
  var ta = _el("f_code");
  ta.value = generateCode();
};

function getConfig() {
  var config = {};
  config.onClick = getConfigParam("f_onclick", false);
  config.vertical = getConfigParam("f_vertical", false);
  config.drag = getConfigParam("f_drag", false);
  config.scrollWithWindow = getConfigParam("f_scroll", false);
  if (getConfigParam("f_dropshadow", false))
    config.dropShadow = 25;