// $Id: tree-wizard.js 6282 2007-02-14 08:31:51Z andrew $ /** * The Zapatec DHTML Calendar * * Copyright (c) 2004-2006 by Zapatec, Inc. * http://www.zapatec.com * 1700 MLK Way, Berkeley, California, * 94709, U.S.A. * All rights reserved. * * * Tree Wizard */ var wizard = null; var Utils = Zapatec.Utils; var zpTree = null; function initWizard() { wizard = new Zapatec.Wizard({ tabsID: 'tabs', tabBarID: 'tab-bar' }); wizard.onInit = initPage; wizard.addCustomValidator("initLevel", function(value) { // allow the empty string or a pozitive integer if (/^\+?[0-9]*$/.test(value)){ return true; } return "You can write a positive integer or leave this field blank."; }); wizard.onBeforeTabChange = function(currentTab, newTab) { if (newTab == "pane-contents"){ clearIcons(); } // allow tab to change return true; }; wizard.setupNav(); wizard.init(); }; function initPage() { Zapatec.Tooltip.setupFromDFN(); var dul = document.getElementById("designtree"); var lis = dul.getElementsByTagName("li"); for (var i = lis.length; --i >= 0;) { var li = lis[i]; _designInitLI(li); } var designlabel = document.getElementById("f_design_label"); designlabel.onkeyup = function() { var self = this; setTimeout(function() { var li = _g_design_currentLI; if (li) { while (li.firstChild && !/^[uo]l$/i.test(li.firstChild.tagName)){ li.removeChild(li.firstChild); } var div = document.createElement("div"); div.innerHTML = self.value; var p = li.firstChild; while (div.firstChild){ li.insertBefore(div.firstChild, p); } } }, 25); }; designlabel.onkeypress = function(ev) { ev || (ev = window.event); if (ev.keyCode == 13){ designInsert(true); } }; }; var _g_design_currentLI = null; function _designInitLI(li) { if (!Zapatec.is_ie5){ li.style.cursor = "pointer"; } li.onclick = function(ev) { ev || (ev = window.event); if (_g_design_currentLI){ Utils.removeClass(_g_design_currentLI, "active"); } // var li = ev ? (ev.currentTarget || ev.srcElement) : this; var li = this; if (li) { Utils.addClass(li, "active"); if (ev){ Utils.stopEvent(ev); } _g_design_currentLI = li; var input = document.getElementById("f_design_label"); input.disabled = false; var txt = "", tmp = li.firstChild; while (tmp && tmp.nodeType == 3) { txt += tmp.data; tmp = tmp.nextSibling; } txt = txt.replace(/^\s+/, '').replace(/\s+$/, ''); input.value = txt; input.select(); input.focus(); } return false; }; }; function alertDesignNoSelectedNode() { alert("You need to click a node in the tree first"); }; function designInsert(after) { var li = _g_design_currentLI; if (!li) { alertDesignNoSelectedNode(); return; } var newli = document.createElement("li"); newli.innerHTML = "New Item"; li.parentNode.insertBefore(newli, after ? li.nextSibling : li); _designInitLI(newli); newli.onclick(); return false; }; function designAddSubtree() { var li = _g_design_currentLI; if (!li) { alertDesignNoSelectedNode(); return; } // assume the subtree already exists (it can happen) var newul = li.getElementsByTagName("ul")[0]; if (!newul) { // only if not existent, create one newul = document.createElement("ul"); li.appendChild(newul); } var newli = document.createElement("li"); newul.appendChild(newli); newli.innerHTML = "New Item"; _designInitLI(newli); newli.onclick(); return false; }; function designRemove() { var li = _g_design_currentLI; if (!li) { alertDesignNoSelectedNode(); return; } if (confirm("Remove selected node and any subtrees it might have?")) { var p = li.parentNode, p2 = p; li.parentNode.removeChild(li); if (!/\S/.test(p.innerHTML)) { p2 = p.parentNode; p2.removeChild(p); p = p2; } _g_design_currentLI = null; document.getElementById("f_design_label").disabled = true; } return false; }; function doPreview() { var config = getConfig(); var div = document.getElementById("designpreview"); if(zpTree){ zpTree.destroy(); } config.source = "designtree"; config.parent = "designpreview"; zpTree = new Zapatec.Tree("tree-preview", config); }; function generateCode() { var html = getHeaders(); html += makeIndent(1) + "\n"; html += makeIndent(2) + ('\n'); html += getHTML(2, document.getElementById("designtree")); html += makeIndent(2) + ('\n'); html += makeIndent(2) + '\n'; html += makeIndent(3) + 'new Zapatec.Tree({\n'; html += makeIndent(4) + 'tree: "designtree"'; var config = getConfig(); for (var prop in config) { html += ","; var val = config[prop]; if (typeof val == "string"){ val = '"' + val + '"'; } html += "\n" + makeIndent(4) + prop + ' : ' + val; } html += "\n" + makeIndent(3) + '});\n'; html += makeIndent(2) + "\n"; html += makeIndent(2) + "\n \n"; html += makeIndent(2) + 'This page uses a Javascript Tree ,'; html += makeIndent(2) + 'but your browser does not support Javascript.\n'; html += makeIndent(2) + '\n Either enable Javascript in your Browser or upgrade to a newer version.\n \n'; html += makeIndent(2) + 'Zapatec Javascript Tree\n'; html += makeIndent(1) + "\n"; return html; }; function clearIcons() { var ul = document.getElementById("designtree"); var img; while (img = ul.getElementsByTagName("img")[0]){ img.parentNode.removeChild(img); } }; function makeCode() { var ta = document.getElementById("f_code"); ta.value = generateCode(); }; function propChange(field, value) { switch (field.id) { case "f_theme": if( value == "lightgreen" || value == "purple" || value == "wood" || value == "zapatec" ){ document.getElementById("display-icons_css").style.visibility = "hidden"; } else { document.getElementById("display-icons_css").style.visibility = "visible"; } break; case "f_collapsed": if(document.getElementById("f_compact").checked){ field.checked = true; value = true; } document.getElementById("display-initLevel").style.visibility = value ? "hidden" : "visible"; if (!value) { document.getElementById("f_initLevel").select(); document.getElementById("f_initLevel").focus(); } break; case "f_compact": var cc = document.getElementById("f_collapsed"); document.getElementById("display-collapsed").style.visibility = value ? "hidden" : "visible"; if (value) { cc.checked = true; cc.onclick(); } break; case "f_saveState": document.getElementById("display-saveId").style.visibility = value ? "visible" : "hidden"; if (value) { document.getElementById("f_saveId").select(); document.getElementById("f_saveId").focus(); } else { document.getElementById("f_saveId").blur(); } break; case "f_expandOnSignClick": document.getElementById("display-expandOnSignDblclick").style.visibility = value ? "hidden" : "visible"; if (value) { document.getElementById("display-expandOnSignDblclick").checked = false; } break; case "f_expandOnSignDblclick": document.getElementById("display-expandOnSignClick").style.visibility = value ? "hidden" : "visible"; if (value) { document.getElementById("display-expandOnSignClick").checked = false; } break; case "f_expandOnIconClick": document.getElementById("display-expandOnIconDblclick").style.visibility = value ? "hidden" : "visible"; if (value) { document.getElementById("display-expandOnIconDblclick").checked = false; } break; case "f_expandOnIconDblclick": document.getElementById("display-expandOnIconClick").style.visibility = value ? "hidden" : "visible"; if (value) { document.getElementById("display-expandOnIconClick").checked = false; } break; case "f_expandOnLabelClick": document.getElementById("display-expandOnLabelDblclick").style.visibility = value ? "hidden" : "visible"; if (value) { document.getElementById("display-expandOnLabelDblclick").checked = false; } break; case "f_expandOnLabelDblclick": document.getElementById("display-expandOnLabelClick").style.visibility = value ? "hidden" : "visible"; if (value) { document.getElementById("display-expandOnLabelClick").checked = false; } break; case "f_icons_css": break; } }; function getConfig() { var config = {}; function setConfigParam(param, id, elDefault) { var element = document.getElementById(id); if (element && element.checked != elDefault){ //this works as long as params are boolean checkboxes config[param] = element.checked; } }; setConfigParam("compact", "f_compact", false); setConfigParam("quick", "f_quick", false); setConfigParam("highlightSelectedNode", "f_highlightSelectedNode", true); setConfigParam("expandOnSignClick", "f_expandOnSignClick", true); setConfigParam("expandOnSignDblclick", "f_expandOnSignDblclick", false); setConfigParam("expandOnIconClick", "f_expandOnIconClick", true); setConfigParam("expandOnIconDblclick", "f_expandOnIconDblclick", false); setConfigParam("expandOnLabelClick", "f_expandOnLabelClick", false); setConfigParam("expandOnLabelDblclick", "f_expandOnLabelDblclick", false); var level = document.getElementById("f_initLevel").value; if (document.getElementById("f_collapsed").checked){ config.initLevel = 0; } else if (level != "") { level = parseInt(level); if (!isNaN(level)){ config.initLevel = level; } } var saveId = document.getElementById("f_saveId").value; if (document.getElementById("f_saveState").checked && saveId != ""){ config.saveState = true; config.saveId = saveId; } var themeSel = document.getElementById("f_theme"); config.theme = themeSel.options[themeSel.selectedIndex].value; if( document.getElementById("f_icons_css").value != 'none' || config.theme == "lightgreen" || config.theme == "purple" || config.theme == "wood" || config.theme == "zapatec" ){ config.defaultIcons = "customIcon"; } return config; }; /* functions that return the HTML code */ function makeIndent(indent) { var str = ""; while (indent-- > 0) str += " "; return str; }; function htmlEncode(str) { str = str.replace(/&/ig, "&"); str = str.replace(/ str = str.replace(/\>/ig, ">"); str = str.replace(/\x22/ig, """); return str; }; function checkOutputNode(node) { if (!node.tagName || node.tagName == '!' /* IE anomaly */){ throw "Node has no tag"; } if (node.className) { if (/(^|\s)not-in-output(\s|$)/i.test(node.className)){ throw "class: not-in-output"; } } }; function getHTML(indent, node, compact, noRoot) { var html = ""; if (node.nodeType == 3) { var str = node.data; str = str.replace(/(^\s+|\s+$)/g, ""); if (str) { if (!compact){ html += makeIndent(indent); } html += htmlEncode(str); if (!compact){ html += "\n"; } } return html; } else try { checkOutputNode(node); // throws an exception if node shouldn't be displayed var tag = node.tagName.toLowerCase(); if (!noRoot) { html += makeIndent(indent) + " var a = ["href", "src", "rel", "type", "http-equiv", "content", "alt"]; for (var i = 0; i < a.length; ++i) { var val = node.getAttribute(a[i]); if (val){ html += ' ' + a[i] + '="' + val + '"'; } } if (node.id == "designtree"){ html += ' id="' + node.id + '"'; } var enter = true; if (!node.firstChild && /^(link|meta|img|br|hr)$/i.test(tag)) { html += " />\n"; noRoot = true; enter = false; } else { html += ">"; } if (enter && !compact){ html += "\n"; } } for (var i = node.firstChild; i; i = i.nextSibling){ html += getHTML(indent + 1, i, compact); } if (!noRoot) { if (!compact){ html += makeIndent(indent); } html += ""; html += "\n"; } return html; } catch(e) { return ""; } }; function getHeaders() { var headers = '\n'; headers += "\n"; headers += makeIndent(1) + "\n"; headers += makeIndent(2) + 'Javascript Tree Wizard By Zapatec\n'; headers += makeIndent(2) + ('\n\n'); headers += makeIndent(2) + ('\n'); headers += makeIndent(2) + '\n'; headers += makeIndent(2) + ('\n'); headers += makeIndent(2) + '\n'; var iconsStyle = document.getElementById("f_icons_css").value; if (iconsStyle != 'none') { headers += makeIndent(2) + ('\n'); headers += makeIndent(2) + '\n'; } headers += makeIndent(1) + "\n"; return(headers); } /* * Set the active theme for the */ function setActiveIcons(sel) { var i = 0, o, a = sel.options, theme; // First disable all the themes while (o = a[i++]) { theme = document.getElementById("theme-" + o.value); if (theme){ theme.disabled = true; } } //and now enable the selected one theme = document.getElementById("theme-" + sel.value); if (theme){ theme.disabled = false; } };
