From c0af08d3441f637afa39a229dfbd707a14757c6b Mon Sep 17 00:00:00 2001 From: "rgoodger%ihug.co.nz" Date: Thu, 2 Dec 1999 10:22:31 +0000 Subject: [PATCH] Upgraded Editor Advanced Edit XUL/JS. r=cmanske --- .../ui/dialogs/content/EdAECSSAttributes.js | 100 +++--- .../ui/dialogs/content/EdAEHTMLAttributes.js | 131 ++++---- .../ui/dialogs/content/EdAEJSEAttributes.js | 133 ++++---- editor/ui/dialogs/content/EdAdvancedEdit.js | 292 ++++++++++++++---- editor/ui/dialogs/content/EdAdvancedEdit.xul | 239 +++++++------- 5 files changed, 529 insertions(+), 366 deletions(-) diff --git a/editor/ui/dialogs/content/EdAECSSAttributes.js b/editor/ui/dialogs/content/EdAECSSAttributes.js index 7fb4881007a..18915dea4ed 100644 --- a/editor/ui/dialogs/content/EdAECSSAttributes.js +++ b/editor/ui/dialogs/content/EdAECSSAttributes.js @@ -14,9 +14,8 @@ function BuildCSSAttributeTable() if(style.indexOf(":") != -1) { name = TrimString(nvpairs.split(":")[0]); value = TrimString(nvpairs.split(":")[1]); - if(!AddCSSAttribute(name,value)) { + if ( !AddTreeItem( name, value, "CSSATree", CSSAttrs ) ) dump("Failed to add CSS attribute: " + i + "\n"); - } } else return false; } @@ -26,57 +25,30 @@ function BuildCSSAttributeTable() if(nvpairs[i].indexOf(":") != -1) { name = TrimString(nvpairs[i].split(":")[0]); value = TrimString(nvpairs[i].split(":")[1]); - if(!AddCSSAttribute(name,value)) { + if( !AddTreeItem( name, value, "CSSATree", CSSAttrs ) ) dump("Failed to add CSS attribute: " + i + "\n"); - } } } } -function AddCSSAttribute(name,value) -{ - var treekids = document.getElementById("CSSAList"); - if(!CheckAttributeNameSimilarity(name, CSSAttrs)) { - dump("repeated CSS attribute, ignoring\n"); - return false; - } - CSSAttrs[CSSAttrs.length] = name; - - var treeitem = document.createElement("treeitem"); - var treerow = document.createElement("treerow"); - var attrcell = document.createElement("treecell"); - var attrcontent = document.createTextNode(name.toLowerCase()); - attrcell.appendChild(attrcontent); - treerow.appendChild(attrcell); - var valcell = document.createElement("treecell"); - valcell.setAttribute("class","value"); - var valField = document.createElement("html:input"); - var attrValue = value; - valField.setAttribute("type","text"); - valField.setAttribute("id",name.toLowerCase()); - valField.setAttribute("value",attrValue); - valField.setAttribute("flex","100%"); - valField.setAttribute("class","AttributesCell"); - valcell.appendChild(valField); - treerow.appendChild(valcell); - treeitem.appendChild(treerow); - treekids.appendChild(treeitem); - return true; -} - // add an attribute to the tree widget -function onAddCSSAttribute() +function onAddCSSAttribute( which ) { + if( !which ) + return; + if( which.getAttribute ( "disabled" ) ) + return; + var name = dialog.AddCSSAttributeNameInput.value; var value = TrimString(dialog.AddCSSAttributeValueInput.value); if(name == "") return; - // WHAT'S GOING ON? NAME ALWAYS HAS A VALUE OF accented "a"??? - dump(name+"= New Attribute Name - SHOULD BE EMPTY\n"); + if ( !CheckAttributeNameSimilarity( name, CSSAttrs ) ) + return false; - if(AddCSSAttribute(name,value)) { + if ( AddTreeItem ( name, value, "CSSAList", CSSAttrs ) ) { dialog.AddCSSAttributeNameInput.value = ""; dialog.AddCSSAttributeValueInput.value = ""; } @@ -84,12 +56,48 @@ function onAddCSSAttribute() } // does enabling based on any user input. -function doCSSEnabling() +function doCSSEnabling( keycode ) { - var name = TrimString(dialog.AddCSSAttributeNameInput.value).toLowerCase(); - if( name == "" || !CheckAttributeNameSimilarity(name,CSSAttrs)) { - dialog.AddCSSAttribute.setAttribute("disabled","true"); - } else { - dialog.AddCSSAttribute.removeAttribute("disabled"); - } + if(keycode == 13) { + onAddCSSAttribute( document.getElementById ( "AddCSSAttribute" ) ); + return; + } + var name = TrimString(dialog.AddCSSAttributeNameInput.value).toLowerCase(); + if( name == "" || !CheckAttributeNameSimilarity(name,CSSAttrs)) + dialog.AddCSSAttribute.setAttribute("disabled","true"); + else + dialog.AddCSSAttribute.removeAttribute("disabled"); } + +function UpdateCSSAttributes() +{ + dump("===============[ Setting and Updating STYLE ]===============\n"); + var CSSAList = document.getElementById("CSSAList"); + var styleString = ""; + for(var i = 0; i < CSSAList.childNodes.length; i++) + { + var item = CSSAList.childNodes[i]; + var name = TrimString(item.firstChild.firstChild.getAttribute("value")); + var value = TrimString(item.firstChild.lastChild.firstChild.value); + // this code allows users to be sloppy in typing in values, and enter + // things like "foo: " and "bar;". This will trim off everything after the + // respective character. + if(name.indexOf(":") != -1) + name = name.substring(0,name.lastIndexOf(":")); + if(value.indexOf(";") != -1) + value = value.substring(0,value.lastIndexOf(";")); + if(i == (CSSAList.childNodes.length - 1)) + styleString += name + ": " + value + ";"; // last property + else + styleString += name + ": " + value + "; "; + } + dump("stylestring: ||" + styleString + "||\n"); + if(styleString.length > 0) { + element.removeAttribute("style"); + element.setAttribute("style",styleString); // NOTE BUG 18894!!! + } else { + if(element.getAttribute("style")) + element.removeAttribute("style"); + } +} + diff --git a/editor/ui/dialogs/content/EdAEHTMLAttributes.js b/editor/ui/dialogs/content/EdAEHTMLAttributes.js index c81e739c2bf..5c3e8b6ab02 100644 --- a/editor/ui/dialogs/content/EdAEHTMLAttributes.js +++ b/editor/ui/dialogs/content/EdAEHTMLAttributes.js @@ -1,82 +1,44 @@ +/** EdAEHTMLAttributes.js + * - this file applies to the Editor Advanced Edit dialog box. + * - contains functions for creating the HTML Attributes list + **/ // build attribute list in tree form from element attributes function BuildHTMLAttributeTable() { - dump("NODENAME: " + element.nodeName + "\n"); var nodeMap = element.attributes; - var nodeMapCount = nodeMap.length; - var treekids = document.getElementById("HTMLAList"); - - if(nodeMapCount > 0) { - for(i = 0; i < nodeMapCount; i++) - { - if(!CheckAttributeNameSimilarity(nodeMap[i].nodeName, JSEAttrs) || - IsEventHandler(nodeMap[i].nodeName) || - TrimString(nodeMap[i].nodeName.toLowerCase()) == "style") { - dump("repeated property, JS event handler or style property!\n"); - continue; // repeated attribute, ignore this one and go to next - } - HTMLAttrs[i] = nodeMap[i].nodeName; - var treeitem = document.createElement("treeitem"); - var treerow = document.createElement("treerow"); - var attrcell = document.createElement("treecell"); - var attrcontent = document.createTextNode(nodeMap[i].nodeName.toUpperCase()); - attrcell.appendChild(attrcontent); - treerow.appendChild(attrcell); - var valcell = document.createElement("treecell"); - valcell.setAttribute("class","value"); - var valField = document.createElement("html:input"); - var attrValue = element.getAttribute(nodeMap[i].nodeName); - valField.setAttribute("type","text"); - valField.setAttribute("id",nodeMap[i].nodeName.toLowerCase()); - valField.setAttribute("value",attrValue); - valField.setAttribute("flex","100%"); - valField.setAttribute("class","AttributesCell"); - valcell.appendChild(valField); - treerow.appendChild(valcell); - treeitem.appendChild(treerow); - treekids.appendChild(treeitem); + if(nodeMap.length > 0) { + for(i = 0; i < nodeMap.length; i++) + { + if ( !CheckAttributeNameSimilarity( nodeMap[i].nodeName, JSEAttrs ) || + IsEventHandler( nodeMap[i].nodeName ) || + TrimString( nodeMap[i].nodeName.toLowerCase() ) == "style" ) { + continue; // repeated or non-HTML attribute, ignore this one and go to next } + var name = nodeMap[i].nodeName.toLowerCase(); + var value = element.getAttribute ( nodeMap[i].nodeName ); + AddTreeItem ( name, value, "HTMLAList", HTMLAttrs ); + } } } -function AddHTMLAttribute(name,value) -{ - HTMLAttrs[HTMLAttrs.length] = name; - var treekids = document.getElementById("HTMLAList"); - var treeitem = document.createElement("treeitem"); - var treerow = document.createElement("treerow"); - var attrcell = document.createElement("treecell"); - var attrcontent = document.createTextNode(name.toUpperCase()); - attrcell.appendChild(attrcontent); - treerow.appendChild(attrcell); - var valcell = document.createElement("treecell"); - valcell.setAttribute("class","value"); - var valField = document.createElement("html:input"); - valField.setAttribute("type","text"); - valField.setAttribute("id",name); - valField.setAttribute("value",value); - valField.setAttribute("flex","100%"); - valField.setAttribute("class","AttributesCell"); - valcell.appendChild(valField); - treerow.appendChild(valcell); - treeitem.appendChild(treerow); - treekids.appendChild(treeitem); - return true; -} - // add an attribute to the tree widget -function onAddHTMLAttribute() +function onAddHTMLAttribute(which) { - var name = dialog.AddHTMLAttributeNameInput.value; + if(!which) + return; + if( which.getAttribute ( "disabled" ) ) + return; + + var name = dialog.AddHTMLAttributeNameInput.value; var value = TrimString(dialog.AddHTMLAttributeValueInput.value); if(name == "") return; - // WHAT'S GOING ON? NAME ALWAYS HAS A VALUE OF accented "a"??? - dump(name+"= New Attribute Name - SHOULD BE EMPTY\n"); - - if(AddHTMLAttribute(name,value)) { + if ( !CheckAttributeNameSimilarity( name, CSSAttrs ) ) + return false; + + if ( AddTreeItem ( name, value, "HTMLAList", HTMLAttrs ) ) { dialog.AddHTMLAttributeNameInput.value = ""; dialog.AddHTMLAttributeValueInput.value = ""; } @@ -84,12 +46,39 @@ function onAddHTMLAttribute() } // does enabling based on any user input. -function doHTMLEnabling() +function doHTMLEnabling( keycode ) { - var name = TrimString(dialog.AddHTMLAttributeNameInput.value).toLowerCase(); - if( name == "" || !CheckAttributeNameSimilarity(name,HTMLAttrs)) { - dialog.AddHTMLAttribute.setAttribute("disabled","true"); - } else { - dialog.AddHTMLAttribute.removeAttribute("disabled"); - } + if(keycode == 13) { + onAddHTMLAttribute(document.getElementById("AddHTMLAttribute")); + return; + } + var name = TrimString(dialog.AddHTMLAttributeNameInput.value).toLowerCase(); + if( name == "" || !CheckAttributeNameSimilarity(name,HTMLAttrs)) { + dialog.AddHTMLAttribute.setAttribute("disabled","true"); + } else { + dialog.AddHTMLAttribute.removeAttribute("disabled"); + } } + +// update the object with added and removed attributes +function UpdateHTMLAttributes() +{ + dump("===============[ Setting and Updating HTML ]===============\n"); + var HTMLAList = document.getElementById("HTMLAList"); + for(var i = 0; i < HTMLAList.childNodes.length; i++) + { + var item = HTMLAList.childNodes[i]; + var name = TrimString(item.firstChild.firstChild.getAttribute("value")); + var value = TrimString(item.firstChild.lastChild.firstChild.value); + // set the attribute + element.setAttribute(name,value); + } + // remove removed attributes + for( var i = 0; i < HTMLRAttrs.length; i++ ) + { + var name = HTMLRAttrs[i]; + if(element.getAttribute(name)) + element.removeAttribute(name); + else continue; // doesn't exist, so don't bother removing it. + } +} \ No newline at end of file diff --git a/editor/ui/dialogs/content/EdAEJSEAttributes.js b/editor/ui/dialogs/content/EdAEJSEAttributes.js index 8cb062a3b4f..8d50630577e 100644 --- a/editor/ui/dialogs/content/EdAEJSEAttributes.js +++ b/editor/ui/dialogs/content/EdAEJSEAttributes.js @@ -1,48 +1,24 @@ + // build attribute list in tree form from element attributes function BuildJSEAttributeTable() { - dump("Loading event handlers list...\n"); var nodeMap = element.attributes; - var nodeMapCount = nodeMap.length; - var treekids = document.getElementById("JSEAList"); - - dump("nmc: " + nodeMapCount + "\n"); - if(nodeMapCount > 0) { - for(var i = 0; i < nodeMapCount; i++) - { - if(!CheckAttributeNameSimilarity(nodeMap[i].nodeName, JSEAttrs)) { - dump("repeated JS handler!\n"); - continue; // repeated attribute, ignore this one and go to next - } - if(!IsEventHandler(nodeMap[i].nodeName)) { - dump("not an event handler\n"); - continue; // attribute isn't an event handler. - } - JSEAttrs[i] = nodeMap[i].nodeName; - var treeitem = document.createElement("treeitem"); - var treerow = document.createElement("treerow"); - var attrcell = document.createElement("treecell"); - var attrcontent = document.createTextNode(nodeMap[i].nodeName.toLowerCase()); - attrcell.appendChild(attrcontent); - treerow.appendChild(attrcell); - var valcell = document.createElement("treecell"); - valcell.setAttribute("class","value"); - var valField = document.createElement("html:input"); - var attrValue = element.getAttribute(nodeMap[i].nodeName); - valField.setAttribute("type","text"); - valField.setAttribute("id",nodeMap[i].nodeName.toLowerCase()); - valField.setAttribute("value",attrValue); - valField.setAttribute("flex","100%"); - valField.setAttribute("class","AttributesCell"); - valcell.appendChild(valField); - treerow.appendChild(valcell); - treeitem.appendChild(treerow); - treekids.appendChild(treeitem); - } + if(nodeMap.length > 0) { + for(var i = 0; i < nodeMap.length; i++) + { + if( !CheckAttributeNameSimilarity( nodeMap[i].nodeName, JSEAttrs ) ) + continue; // repeated or non-JS handler, ignore this one and go to next + if( !IsEventHandler( nodeMap[i].nodeName ) ) + continue; // attribute isn't an event handler. + var name = nodeMap[i].nodeName.toLowerCase(); + var value = element.getAttribute(nodeMap[i].nodeName); + AddTreeItem( name, value, "JSEATree", JSEAttrs ); // add item to tree + } } } -function IsEventHandler(which) +// check to see if given string is an event handler. +function IsEventHandler( which ) { var handlerName = which.toLowerCase(); var firstTwo = handlerName.substring(0,2); @@ -52,40 +28,22 @@ function IsEventHandler(which) return false; } -function AddJSEAttribute(name,value) -{ - JSEAttrs[JSEAttrs.length] = name; - var treekids = document.getElementById("JSEAList"); - var treeitem = document.createElement("treeitem"); - var treerow = document.createElement("treerow"); - var attrcell = document.createElement("treecell"); - var attrcontent = document.createTextNode(name.toLowerCase()); - attrcell.appendChild(attrcontent); - treerow.appendChild(attrcell); - var valcell = document.createElement("treecell"); - valcell.setAttribute("class","value"); - var valField = document.createElement("html:input"); - valField.setAttribute("type","text"); - valField.setAttribute("id",name); - valField.setAttribute("value",value); - valField.setAttribute("flex","100%"); - valField.setAttribute("class","AttributesCell"); - valcell.appendChild(valField); - treerow.appendChild(valcell); - treeitem.appendChild(treerow); - treekids.appendChild(treeitem); -} - // add an attribute to the tree widget -function onAddJSEAttribute() +function onAddJSEAttribute( which ) { + if( !which ) + return; + if( which.getAttribute ( "disabled" ) ) + return; + var name = dialog.AddJSEAttributeNameInput.value; var value = TrimString(dialog.AddJSEAttributeValueInput.value); if(name == "") return; - // WHAT'S GOING ON? NAME ALWAYS HAS A VALUE OF accented "a"??? - dump(name+"= New Attribute Name - SHOULD BE EMPTY\n"); - if(AddJSEAttribute(name,value)) { + if ( name.substring(0,2).toLowerCase() != "on" ) + name = "on" + name; // user has entered event without "on" prefix, add it + + if ( AddTreeItem( name, value, "JSEAList", JSEAttrs ) ) { dialog.AddJSEAttributeNameInput.value = ""; dialog.AddJSEAttributeValueInput.value = ""; } @@ -93,12 +51,41 @@ function onAddJSEAttribute() } // does enabling based on any user input. -function doJSEEnabling() +function doJSEEnabling( keycode ) { - var name = TrimString(dialog.AddJSEAttributeNameInput.value).toLowerCase(); - if( name == "" || !CheckAttributeNameSimilarity(name,JSEAttrs)) { - dialog.AddJSEAttribute.setAttribute("disabled","true"); - } else { - dialog.AddJSEAttribute.removeAttribute("disabled"); - } + if(keycode == 13) { + onAddJSEAttribute( document.getElementById ( "AddJSEAttribute" ) ); + return; + } + var name = TrimString(dialog.AddJSEAttributeNameInput.value).toLowerCase(); + + if ( name.substring(0,2) != "on" ) + name = "on" + name; // user has entered event without "on" prefix, add it + + if( name == "" || !CheckAttributeNameSimilarity(name, JSEAttrs)) + dialog.AddJSEAttribute.setAttribute("disabled","true"); + else + dialog.AddJSEAttribute.removeAttribute("disabled"); } + +function UpdateJSEAttributes() +{ + dump("===============[ Setting and Updating JSE ]===============\n"); + var JSEAList = document.getElementById("JSEAList"); + for(var i = 0; i < JSEAList.childNodes.length; i++) + { + var item = JSEAList.childNodes[i]; + name = TrimString(item.firstChild.firstChild.getAttribute("value")); + value = TrimString(item.firstChild.lastChild.firstChild.value); + // set the event handler + element.setAttribute(name,value); + } + // remove removed attributes + for( var i = 0; i < JSERAttrs.length; i++ ) + { + var name = JSERAttrs[i]; + if(element.getAttribute(name)) + element.removeAttribute(name); + else continue; // doesn't exist, so don't bother removing it. + } +} \ No newline at end of file diff --git a/editor/ui/dialogs/content/EdAdvancedEdit.js b/editor/ui/dialogs/content/EdAdvancedEdit.js index b585765217d..4bc31ed07d4 100644 --- a/editor/ui/dialogs/content/EdAdvancedEdit.js +++ b/editor/ui/dialogs/content/EdAdvancedEdit.js @@ -18,30 +18,49 @@ * Rights Reserved. * * Contributor(s): - * Ben Goodger + * Ben "Count XULula" Goodger */ +/************** FOR NOW **************/ +var TEXT_WIDGETS_DONT_SUCK = false; +var PERFORMANCE_BOOSTS = false; + /************** GLOBALS **************/ -var tagname = null; -var element = null; + +var tagname = null; // element.nodeName; +var element = null; // handle for the actual element var HTMLAttrs = []; // html attributes var CSSAttrs = []; // css attributes var JSEAttrs = []; // js events +var HTMLRAttrs = []; // removed html attributes +var CSSRAttrs = []; // removed css attributes +var JSERAttrs = []; // removed js events + /************** INITIALISATION && SETUP **************/ + +/** + * function : void Startup(); + * parameters : none + * returns : none + * desc. : startup and initialisation, prepares dialog. + **/ function Startup() { - dump("Welcome to EdAdvancedEdit '99 \n"); // This is the return value for the parent, - // who only needs to know if OK was clicked + // who only needs to know if OK was clicked window.opener.AdvancedEditOK = false; if (!InitEditorShell()) return; + // initialise the ok and cancel buttons doSetOKCancel(onOK, null); + // load string bundle + bundle = srGetStrBundle("chrome://editor/locale/editor.properties"); + // Element to edit is passed in element = window.arguments[1]; if (!element || element == "undefined") { @@ -50,36 +69,41 @@ function Startup() } dump("*** Element passed into Advanced Edit: "+element+" ***\n"); + // place the tag name in the header var tagLabel = document.getElementById("tagLabel"); if(tagLabel.hasChildNodes()) { tagLabel.removeChild(tagLabel.firstChild); } - var textLabel = document.createTextNode("<" + element.nodeName + ">"); tagLabel.appendChild(textLabel); // Create dialog object to store controls for easy access - dialog = new Object; - dialog.AddHTMLAttributeNameInput = document.getElementById("AddHTMLAttributeNameInput"); + dialog = new Object; + dialog.AddHTMLAttributeNameInput = document.getElementById("AddHTMLAttributeNameInput"); dialog.AddHTMLAttributeValueInput = document.getElementById("AddHTMLAttributeValueInput"); - dialog.AddHTMLAttribute = document.getElementById("AddHTMLAttribute"); - dialog.AddCSSAttributeNameInput = document.getElementById("AddCSSAttributeNameInput"); - dialog.AddCSSAttributeValueInput = document.getElementById("AddCSSAttributeValueInput"); - dialog.AddCSSAttribute = document.getElementById("AddCSSAttribute"); - dialog.AddJSEAttributeNameInput = document.getElementById("AddJSEAttributeNameInput"); - dialog.AddJSEAttributeValueInput = document.getElementById("AddJSEAttributeValueInput"); - dialog.AddJSEAttribute = document.getElementById("AddJSEAttribute"); + dialog.AddHTMLAttribute = document.getElementById("AddHTMLAttribute"); + dialog.AddCSSAttributeNameInput = document.getElementById("AddCSSAttributeNameInput"); + dialog.AddCSSAttributeValueInput = document.getElementById("AddCSSAttributeValueInput"); + dialog.AddCSSAttribute = document.getElementById("AddCSSAttribute"); + dialog.AddJSEAttributeNameInput = document.getElementById("AddJSEAttributeNameInput"); + dialog.AddJSEAttributeValueInput = document.getElementById("AddJSEAttributeValueInput"); + dialog.AddJSEAttribute = document.getElementById("AddJSEAttribute"); // build the attribute trees BuildHTMLAttributeTable(); BuildCSSAttributeTable(); BuildJSEAttributeTable(); + + // size the dialog properly window.sizeToContent(); } -// for..in loop, typeof, /^on/ match - - +/** + * function : bool onOK ( void ); + * parameters : none + * returns : boolean true to close the window + * desc. : event handler for ok button + **/ function onOK() { dump("in onOK\n") @@ -89,63 +113,201 @@ function onOK() return true; // do close the window } -// function EdAvancedEdit.js:: -// Updates the copy of the page object with the data set in this dialog. +/** + * function : void UpdateObject ( void ); + * parameters : none + * returns : none + * desc. : Updates the copy of the page object with the data set in this dialog. + **/ function UpdateObject() { - dump("in UpdateObject\n"); - var HTMLAList = document.getElementById("HTMLAList"); - var CSSAList = document.getElementById("CSSAList"); - var JSEAList = document.getElementById("JSEAList"); + UpdateHTMLAttributes(); + UpdateCSSAttributes(); + UpdateJSEAttributes(); +} + +/** + * function : bool CheckAttributeNameSimilarity ( string attName, array attArray ); + * parameters : attribute to look for, array of current attributes + * returns : false if attribute already exists, true if it does not + * desc. : checks to see if any other attributes by the same name as the arg supplied + * already exist. + **/ +function CheckAttributeNameSimilarity(attName, attArray) +{ + for(var i = 0; i < attArray.length; i++) + { + if(attName == attArray[i]) + return false; + } + return true; +} + +/** + * function : bool CheckAttributeNotRemoved ( string attName, array attArray ); + * parameters : attribute to look for, array of deleted attributes + * returns : false if attribute already exists, true if it does not + * desc. : check to see if the attribute is in the array marked for removal + * before updating the final object + **/ +function CheckAttributeNotRemoved( attName, attArray ) +{ + dump("IN CAAAAAAAA\n"); + dump("CAAAA: " + attArray + "\n"); + for( var i = 0; i < attArray.length; i++ ) + { + if( attName == attArray[i] ) + return false; + } + return true; +} + +/** + * function : void doRemoveAttribute( DOMElement which); + * parameters : DOMElement that was context-clicked. + * returns : nothing + * desc. : removes an attribute or attributes from the tree + **/ +// Note: now changing this to remove all selected ITEMS. this makes it easier. +function doRemoveAttribute( which ) +{ + if(which.nodeName != "tree") { + var tree = which.parentNode; + while ( tree.nodeName != "tree" ) + { + tree = tree.parentNode; // climb up the tree one notch + } // now we are pointing at the tree element + } else + tree = which; - // HTML ATTRIBUTES - for(var i = 0; i < HTMLAList.childNodes.length; i++) + var kids = tree.lastChild; // treechildren element of tree + var selArray = []; + for ( var i = 0; i < tree.selectedItems.length; i++ ) { - var item = HTMLAList.childNodes[i]; - var name = TrimString(item.firstChild.firstChild.firstChild.nodeValue); - var value = TrimString(item.firstChild.lastChild.firstChild.value); - dump("HTML Attrs: n: " + name + "; v: " + value + "\n"); - element.setAttribute(name,value); + var item = tree.selectedItems[i]; + // add to array of removed items for the particular panel that is displayed + var name = item.firstChild.firstChild; + switch ( tree.id ) { + case "HTMLATree": + HTMLRAttrs[HTMLRAttrs.length] = TrimString(name.getAttribute("value")); + dump("HTMLRAttrs[" + (HTMLRAttrs.length - 1) + "]: " + HTMLRAttrs[HTMLRAttrs.length-1] + "\n"); + break; + case "CSSATree": + CSSRAttrs[CSSRAttrs.length] = TrimString(name.getAttribute("value")); + break; + case "JSEATree": + JSERAttrs[JSERAttrs.length] = TrimString(name.getAttribute("value")); + break; + default: break; + } + selArray[i] = item; } - // CSS ATTRIBUTES - var styleString = ""; - for(var i = 0; i < CSSAList.childNodes.length; i++) + // need to do this in a separate loop because selectedItems is NOT STATIC and + // this causes problems. + for ( var i = 0; i < selArray.length; i++ ) { - var item = CSSAList.childNodes[i]; - var name = TrimString(item.firstChild.firstChild.firstChild.nodeValue); - var value = TrimString(item.firstChild.lastChild.firstChild.value); - if(name.lastIndexOf(":") == (name.length - 1) && name.length > 0) - name = name.substring(0,name.length-1); - if(value.lastIndexOf(";") == (value.length - 1) && value.length > 0) - value = name.substring(0,value.length-1); - if(i == (CSSAList.childNodes.length - 1)) - styleString += name + ": " + value + ";"; // last property - else - styleString += name + ": " + value + "; "; - } - dump("stylestring: ||" + styleString + "||\n"); - var name = "width"; - if(styleString.length > 0) { - element.setAttribute(name,styleString); - } - // JS EVENT HANDLERS - for(var i = 0; i < JSEAList.childNodes.length; i++) - { - var item = JSEAList.childNodes[i]; - name = TrimString(item.firstChild.firstChild.firstChild.nodeValue); - value = TrimString(item.firstChild.lastChild.firstChild.value); - element.setAttribute(name,value); + // remove the item + kids.removeChild ( selArray[i] ); + } +} + +/** + * function : void doAddAttribute( DOMElement which ); + * parameters : DOMElement referring to element context-clicked + * returns : nothing + * desc. : focusses the add attribute "name" field in the current pane. + **/ +function doAddAttribute(which) +{ + if(which.nodeName != "tree") { + var tree = which.parentNode; + while ( tree.nodeName != "tree" ) + { + tree = tree.parentNode; // climb up the tree one notch + } // now we are pointing at the tree element + } else + tree = which; + + switch(tree.id) { + case "HTMLATree": + document.getElementById("AddHTMLAttributeNameInput").focus(); + break; + case "CSSATree": + document.getElementById("AddCSSAttributeNameInput").focus(); + break; + case "JSEATree": + document.getElementById("AddJSEAttributeNameInput").focus(); + break; + default: + break; } } -// checks to see if any other attributes by the same name as the arg supplied -// already exist. -function CheckAttributeNameSimilarity(attName, attArray) +function doSelect(e) { - for(var i = 0; i < attArray.length; i++) + if ( TEXT_WIDGETS_DONT_SUCK && PERFORMANCE_BOOSTS ) { + var cell = e.target.parentNode.lastChild; + var input = cell.firstChild; + + var selitems = document.getElementsByAttribute("class","FocusSelected"); + for ( var i = 0; i < selitems.length; i++ ) { - if(attName == attArray[i]) - return false; + if ( selitems[i].nodeName == "input" ) { + selitems[i].removeAttribute("class","FocusSelected"); + selitems[i].setAttribute("class","AttributesCell"); + } else if ( selitems[i].nodeName == "treecell" ) + selitems[i].removeAttribute("class","FocusSelected"); } - return true; + + cell.setAttribute("class","FocusSelected"); + input.setAttribute("class","FocusSelected"); + input.focus(); + } } + +// adds a generalised treeitem. +function AddTreeItem ( name, value, treekids, attArray, valueCaseFunc ) +{ + attArray[attArray.length] = name; + var treekids = document.getElementById ( treekids ); + var treeitem = document.createElement ( "treeitem" ); + var treerow = document.createElement ( "treerow" ); + var attrcell = document.createElement ( "treecell" ); + attrcell.setAttribute( "value", name.toLowerCase() ); + treerow.appendChild ( attrcell ); + + if ( !valueCaseFunc ) { + // no handling function provided, create default cell. + var valcell = CreateCellWithField ( name, value); + treerow.appendChild ( valcell ); + } else + valueCaseFunc(); // run user specified function for adding content + + treeitem.appendChild ( treerow ); + treekids.appendChild ( treeitem ); + return treeitem; +} + +// creates a generic treecell with field inside. +// optional parameters for initial values. +function CreateCellWithField( name, value ) +{ + var valcell = document.createElement ( "treecell" ); + valcell.setAttribute ( "class", "value" ); + valcell.setAttribute ( "treeallowevents", "true" ); + var valField = document.createElement ( "html:input" ); + valField.setAttribute ( "type", "text" ); + if ( name ) valField.setAttribute ( "id", name ); + if ( value ) valField.setAttribute ( "value", value ); + valField.setAttribute ( "flex", "100%" ); + valField.setAttribute ( "class", "AttributesCell" ); + valcell.appendChild ( valField ); + return valcell; +} + +// todo: implement attribute parsing, e.g. colorpicker appending, etc. +function AttributeParser( name, value ) +{ + +} + diff --git a/editor/ui/dialogs/content/EdAdvancedEdit.xul b/editor/ui/dialogs/content/EdAdvancedEdit.xul index 12d52fa6b18..8804388d1f6 100644 --- a/editor/ui/dialogs/content/EdAdvancedEdit.xul +++ b/editor/ui/dialogs/content/EdAdvancedEdit.xul @@ -19,7 +19,7 @@ - Rights Reserved. - - Contributor(s): - - Ben Goodger + - Ben "Count XULula" Goodger --> @@ -36,139 +36,156 @@ onload = "Startup()" align="vertical"> - - - - - - - - + + + + + + + + - + + - + + + + + + + + - - ¤tattributesfor.label; - - - - - - &tabHTML.label; - &tabCSS.label; - &tabJSE.label; - - - - + + ¤tattributesfor.label; + + + + + + &tabHTML.label; + &tabCSS.label; + &tabJSE.label; + + + + + + - - - + + + - &tree.attributeHeader.label; - &tree.valueHeader.label; + + - - - &AddHTMLAttributeLabel.label; - - &AttName.label; - - - - - &AttValue.label; - - - - - + + + &AddHTMLAttributeLabel.label; + + &AttName.label; + + + + + &AttValue.label; + + + + - + + - + + + - - - + + + - &tree.attributeHeader.label; - &tree.valueHeader.label; - - - - - - - - &AddJSEAttributeLabel.label; - - &AttName.label; - - - - - &AttValue.label; - - - - - - - - - - - - - - - - - &tree.attributeHeader.label; - &tree.valueHeader.label; + + - - - &AddCSSAttributeLabel.label; - - &AttName.label; - - - - - &AttValue.label; - - - - - - - + + + &AddCSSAttributeLabel.label; + + &AttName.label; + + + + + &AttValue.label; + + + + + + + + + + + + + + + + + + + + + + + + + + &AddJSEAttributeLabel.label; + + &AttName.label; + + + + + &AttValue.label; + + + + + + + + + + + + - - - - - - - - - + + + + + +