Adding Advanced Property Editing dialog work by Ben Goodger (rgoodger@ihug.co.nz)

This commit is contained in:
cmanske%netscape.com 1999-09-07 23:49:46 +00:00
Родитель 66807b758d
Коммит fb204e8246
9 изменённых файлов: 334 добавлений и 95 удалений

Просмотреть файл

@ -18,6 +18,7 @@
* Rights Reserved.
*
* Contributor(s):
* Ben Goodger
*/
@ -25,10 +26,12 @@
// Note: This dialog
var tagname;
var element;
var elAttrs = new Array();
// dialog initialization code
function Startup()
{
dump("START DLG\n");
// This is the return value for the parent,
// who only needs to know if OK was clicked
window.opener.AdvancedEditOK = false;
@ -46,53 +49,173 @@ function Startup()
}
dump("*** Element passed into Advanced Edit: "+element+" ***\n");
// Append tagname of element we are editing after the message text
// above the attribute editing treewidget
var msgParent = document.getElementById("AttributeMsgParent");
// Remove temporary place holder text:
// TODO: REMOVE THIS WHEN WE CAN RESIZE DIALOG AFTER CREATION
msgParent.removeChild(msgParent.firstChild);
var msg = GetString("AttributesFor");
dump("Tagname Msg = "+msg+"\n");
msg +=(" "+element.nodeName);
dump("Tagname Msg = "+msg+"\n");
textNode = editorShell.editorDocument.createTextNode(msg);
if (textNode) {
msgParent.appendChild(textNode);
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.AddAttributeNameInput = document.getElementById("AddAttributeNameInput");
//TODO: We should disable this button if the AddAttributeNameInput editbox is empty
dialog.AddAttributeValueInput = document.getElementById("AddAttributeValueInput");
dialog.AddAttribute = document.getElementById("AddAttribute");
//TODO: Get the list of attribute nodes,
// read each one, and use to build a text + editbox
// in a treewidget row for each attribute
// build an attribute tree
BuildAttributeTable();
window.sizeToContent();
}
// build attribute list in tree form from element attributes
function BuildAttributeTable()
{
dump("NODENAME: " + element.nodeName + "\n");
var nodeMap = element.attributes;
var nodeMapCount = nodeMap.length;
var treekids = document.getElementById("attributelist");
// SET FOCUS TO FIRST CONTROL
if(nodeMapCount > 0) {
for(i = 0; i < nodeMapCount; i++)
{
if(!CheckAttributeNameSimilarity(nodeMap[i].nodeName)) {
dump("repeated attribute!\n");
continue; // repeated attribute, ignore this one and go to next
}
elAttrs[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);
}
}
}
// add an attribute to the tree widget
function onAddAttribute()
{
var name = dialog.AddAttributeNameInput.value;
//var name = TrimString(dialog.AddAttributeNameInput.value);
name = dialog.AddAttributeNameInput.value;
var value = TrimString(dialog.AddAttributeValueInput.value);
// Must have a name to be able to add (Value may be empty)
if(name == "")
return;
// WHAT'S GOING ON? NAME ALWAYS HAS A VALUE OF accented "a"???
dump(name+"= New Attribute Name - SHOULD BE EMPTY\n");
elAttrs[elAttrs.length] = name;
// TODO: Add a new text + editbox to the treewidget editing list
var treekids = document.getElementById("attributelist");
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);
dialog.AddAttributeNameInput.value = "";
dialog.AddAttributeValueInput.value = "";
// Set focus to the value edit field just added:
valField.focus();
//Clear the edit boxes
dialog.AddAttributeNameInput.value = "";
dialog.AddAttributeValueInput.value = "";
}
// shut the dialog, apply changes and tidy up
function onOK()
{
//TODO: Get all children of the treewidget to get all
// name, value strings for all attributes.
// Set those attributes on "element" we are editing.
UpdateObject(); // call UpdateObject fn to update element in document
window.opener.AdvancedEditOK = true;
window.opener.globalElement = element;
return true; // do close the window
}
// updates the element object with values set in the tree.
// TODO: make this work for many objects, so the "vicinity diagram"
// can be used.
function UpdateObject()
{
var treekids = document.getElementById("attributelist");
for(i = 0; i < treekids.childNodes.length; i++)
{
var item = treekids.childNodes[i];
var name = item.firstChild.firstChild.firstChild.nodeValue;
var value = TrimString(item.firstChild.lastChild.firstChild.value);
element.setAttribute(name,value);
}
}
// checks to see if any other attributes by the same name as the arg supplied
// already exist.
function CheckAttributeNameSimilarity(attName)
{
for(i = 0; i < elAttrs.length; i++)
{
if(attName == elAttrs[i])
return false;
}
return true;
}
// does enabling based on any user input.
function doOverallEnabling()
{
var name = TrimString(dialog.AddAttributeNameInput.value);
if( name == "" || !CheckAttributeNameSimilarity(name)) {
dialog.AddAttribute.setAttribute("disabled","true");
} else {
dialog.AddAttribute.removeAttribute("disabled");
}
}
function doSort()
{
/* UpdateObject();
var treekids = document.getElementById("attributelist");
var nameArray = []
for(i = 0; i < treekids.childNodes.length; i++)
{
var item = treekids.childNodes[i];
nameArray[i] = item.firstChild.firstChild.firstChild.nodeValue;
}
nameArray.sort(posval);
dump("nameArray: " + nameArray + "\n");
nameArray.sort(negval);
dump("nameArray: " + nameArray + "\n");
*/
}

Просмотреть файл

@ -19,49 +19,73 @@
- Rights Reserved.
-
- Contributor(s):
- Ben Goodger
-->
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://editor/skin/EditorDialog.css" type="text/css"?>
<?xul-overlay href="chrome://global/content/dialogOverlay.xul"?>
<?xul-overlay href="chrome://global/content/dialogOverlay.xul"?>
<!-- May not need this here -->
<!-- <?xul-overlay href="chrome://editor/content/EdDialogOverlay.xul"?> -->
<!DOCTYPE window SYSTEM "chrome://editor/locale/EdAdvancedEdit.dtd">
<xul:window class="dialog" title="&WindowTitle.label;"
xmlns:xul ="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns="http://www.w3.org/TR/REC-html40"
<window class="dialog" title="&WindowTitle.label;"
xmlns ="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/TR/REC-html40"
onload = "Startup()"
align="vertical">
<!-- Methods common to all editor dialogs -->
<script language="JavaScript" src="chrome://editor/content/EdDialogCommon.js">
</script>
<script language="JavaScript" src="chrome://editor/content/EdAdvancedEdit.js">
</script>
<script language="JavaScript" src="chrome://global/content/dialogOverlay.js" />
<!-- Methods common to all editor dialogs -->
<html:script language="JavaScript" src="chrome://editor/content/EdDialogCommon.js"/>
<html:script language="JavaScript" src="chrome://editor/content/EdAdvancedEdit.js"/>
<html:script language="JavaScript" src="chrome://global/content/dialogOverlay.js" />
<xul:broadcaster id="args" value=""/>
<broadcaster id="args" value=""/>
<xul:box align="vertical" style="width: 100%; height: 100%">
<xul:box align="horizontal">
<!-- temporary text, do not localize -->
<div id="AttributeMsgParent"> "REMOVE ME"</div>
<!-- Message with the tagname appended will be inserted here -->
</xul:box>
<xul:spring class="spacer"/>
<div id="AttributeTree" style="min-width: 200px; min-height: 200px; border: 1px inset white"/>
<xul:spring class="spacer"/>
<label for="AddAttributeNameInput"> &AddAttributeMsg.label;</label>
<xul:box align="horizontal" flex="100%">
<input type="text" id="AddAttributeNameInput"/>
<xul:spring class="spacer"/>
<div><xul:titledbutton class="hspaced" id="AddAttribute" onclick="AddAttribute()" value="&AddAttributeButton.label;"/></div>
</xul:box>
<html:div><html:hr width="100%"/></html:div>
</xul:box>
<!-- from global dialogOverlay -->
<xul:box id="okCancelButtons"/>
</xul:window>
<box align="horizontal">
<html:label flex="100%">&currentattributesfor.label;</html:label>
<html:div flex="100%" id="tagLabel"/>
</box>
<spring class="spacer"/>
<box>
<tree id="AttributesTree" class="AttributesTree" flex="100%">
<treecol width="20%"/>
<treecol width="80%"/>
<treehead>
<treerow>
<treecell onclick="doSort()">&tree.attributeHeader.label;</treecell>
<treecell>&tree.valueHeader.label;</treecell>
</treerow>
</treehead>
<treechildren id="attributelist"/>
</tree>
</box>
<box align="vertical">
<spring class="spacer"/>
<html:fieldset>
<html:legend>&AddAttributeLabel.label;</html:legend>
<box align="horizontal">
<html:label for="AddAttributeNameInput"> &AttName.label;</html:label>
<box align="horizontal" flex="100%">
<html:div><html:input type="text" id="AddAttributeNameInput" onkeyup="doOverallEnabling()" onmouseup="doOverallEnabling()"/></html:div>
<spring class="spacer"/>
</box>
<html:label for="AddAttributeValueInput"> &AttValue.label;</html:label>
<box align="horizontal" flex="100%">
<html:div><html:input type="text" id="AddAttributeValueInput"/></html:div>
<spring flex="100%" class="spacer"/>
<html:div><titledbutton class="hspaced" id="AddAttribute" onclick="onAddAttribute()" value="&AddAttributeButton.label;" disabled="true"/></html:div>
</box>
</box>
</html:fieldset>
</box>
<box align="horizontal">
<html:div style="margin-top: 0.5em"><titledbutton value="&HTMLReference.label;"/></html:div>
<spring flex="100%"/>
<!-- from global dialogOverlay -->
<box id="okCancelButtons"/>
</box>
</window>

Просмотреть файл

@ -405,7 +405,8 @@ function forceInteger(elementID)
function onAdvancedEdit()
{
// First validate data from widgets in the "simpler" property dialog
if (ValidateData()) {
if (ValidateData())
{
// Set true if OK is clicked in the Advanced Edit dialog
window.AdvancedEditOK = false;
// Open the AdvancedEdit dialog, passing in the element to be edited

Просмотреть файл

@ -85,6 +85,9 @@ function Startup()
InitButton(4,"button2", false);
InitButton(5,"button3", false);
InitButton(6,"button4", false);
// Resize content to adjust for added message
window.sizeToContent();
}
function InitButton(argIndex, buttonID, useOK)

Просмотреть файл

@ -85,11 +85,9 @@ function InitDialog()
function AnchorNameExists(name)
{
anchorList = editorShell.editorDocument.anchors; // getElementsByTagName("A");
anchorList = editorShell.editorDocument.anchors;
if (anchorList) {
dump("We have an anchor list\n");
for (i=0; i < anchorList.length; i++) {
dump("Anchor name: "+anchorList[i].name+"\n");
if (anchorList[i].name == name)
return true;
}

Просмотреть файл

@ -18,11 +18,12 @@
* Rights Reserved.
*
* Contributor(s):
* Ben Goodger
*/
//Cancel() is in EdDialogCommon.js
var tagname = "table"
var element;
var tableElement;
// dialog initialization code
function Startup()
@ -33,42 +34,42 @@ function Startup()
doSetOKCancel(onOK, null);
// Create dialog object to store controls for easy access
dialog = new Object;
// GET EACH CONTROL -- E.G.:
//dialog.editBox = document.getElementById("editBox");
/*
// Get the selected or enclosing table element
if(!element)
var table = editorShell.GetElementOrParentByTagName(tagname, null);
if(!tableElement)
{
dump("Failed to get selected element or create a new one!\n");
window.close();
}
*/
InitDialog();
globalElement = tableElement.cloneNode(false);
var table = editorShell.GetElementOrParentByTagName("table", null);
if (!table)
window.close();
// This uses values set on globalElement
InitDialog();
// SET FOCUS TO FIRST CONTROL
//dialog.editBox.focus();
}
}
function InitDialog()
{
dump{"Table Editing:InitDialog()\n");
}
function onAdvancedEdit()
function ValidateData()
{
dump("\n\n Need to write onAdvancedEdit for Table and Cell dialog\n\n");
dump{"Table Editing:ValidateData()\n");
return true;
}
function onOK()
{
// Set attribute example:
// imageElement.setAttribute("src",dialog.srcInput.value);
return true;
if (ValidateData())
{
editorShell.CloneAttributes(tableElement, globalElement);
return true;
}
return false;
}

Просмотреть файл

@ -41,7 +41,7 @@
</html:script>
<html:script language="JavaScript" src="chrome://editor/content/EdTableProps.js">
</html:script>
<script language="JavaScript" src="chrome://global/content/dialogOverlay.js" />
<html:script language="JavaScript" src="chrome://global/content/dialogOverlay.js" />
<broadcaster id="args" value=""/>
<tabcontrol align="vertical" >

Просмотреть файл

@ -18,8 +18,15 @@
- Rights Reserved.
-
- Contributor(s):
- Ben Goodger
-->
<!ENTITY WindowTitle.label "Advanced Property Editor">
<!ENTITY AddAttributeMsg.label "Name for attribute to add:">
<!ENTITY AddAttributeButton.label "Add">
<!ENTITY WindowTitle.label "Advanced Property Editor">
<!ENTITY AddAttributeLabel.label "Add an Attribute">
<!ENTITY AttName.label "Name: ">
<!ENTITY AttValue.label "Value: ">
<!ENTITY AddAttributeButton.label "Add">
<!ENTITY HTMLReference.label "HTML Reference...">
<!ENTITY currentattributesfor.label "Current attributes for: ">
<!ENTITY tree.attributeHeader.label "Attribute">
<!ENTITY tree.valueHeader.label "Value">

Просмотреть файл

@ -18,7 +18,7 @@
* Rights Reserved.
*
* Contributor(s):
* Pete Collins
* Pete Collins, Ben Goodger
*/
@ -341,15 +341,6 @@ select.SpellCheckList, select.SpellCheckLanguage, input.SpellCheckWord {
radio { margin: 5px 3px }
tree {
display: table;
background-color: #000000;
border: none;
border-spacing: 0px;
border-collapse: collapse;
width: 100%;
}
/* HTML ELEMENTS */
table { cell-spacing: 5px; }
@ -632,5 +623,96 @@ spring.bigspacer {
height: 10px;
}
// Override any I-Beam cursors in text
div, p, br, label, box, td { cursor: default; }
div.spacer [align~=horizontal] {
border : 1px inset white;
height : 2px;
}
div.tagname {
font-weight : bold;
font-size : 17px;
}
div#tagLabel {
font-weight : bold;
}
/* styles for an attribute tree-table */
tree.AttributesTree {
min-width : 200px;
min-height : 200px;
border : 1px inset white;
}
tree.AttributesTree treecell {
color : black;
padding-left : 10px;
padding-top : 2px;
padding-bottom : 2px;
padding-right : 2px;
}
tree.AttributesTree > treehead > treerow > treecell {
border : 1px outset white;
background-color : #CCCCDD;
}
tree.AttributesTree > treehead > treerow > treecell:active {
border-left : 1px inset white; /*inset white;*/
border-top : 1px inset white;
border-right : 1px solid #CCCCDD;
border-bottom : 1px solid #CCCCDD;
padding-left : 11px;
padding-top : 3px;
padding-right : 1px;
padding-bottom : 1px;
}
/* FILES/MOZILLAE/M96/BIN/chrome/editor/content/default/EdAdvancedEdit.xul */
tree.AttributesTree treechildren > treeitem > treerow > treecell {
border-right : 1px solid #CCCCDD;
border-bottom : 1px solid #CCCCDD;
color : black;
background-color : #FFFFFF;
padding-left : 10px;
padding-top : 2px;
padding-bottom : 2px;
padding-right : 2px;
}
tree.AttributesTree treechildren > treeitem > treerow > treecell.value {
border-bottom : 1px solid #CCCCDD;
color : black;
background-color : #FFFFFF;
padding-left : 0px;
padding-top : 0px;
padding-bottom : 0px;
padding-right : 0px;
margin-left : 0px;
}
tree.AttributesTree treechildren > treeitem > treerow [selected ~= false] {
color : black;
background-color : #FFFFFF;
}
tree.AttributesTree treechildren > treeitem > treerow [selected ~= true] {
color : white;
background-color : #666699;
}
input.AttributesCell {
width : 95%;
border : none;
height : 100%;
}
input.AttributesCell:active {
border: 1px white inset;
}
input.AttributesCell:hover {
border: 1px white inset;
}