From 25771bd9e4d7db6905ed7b17947434267aa09319 Mon Sep 17 00:00:00 2001 From: "cmanske%netscape.com" Date: Wed, 3 Nov 1999 00:48:26 +0000 Subject: [PATCH] Fixed bugs 17098, 17808, and a lot of UI cleanup. Rewrote Image Properties dialog so More/Fewer works and layout is better. Moved image URLs from DTD to CSS files. r=brade --- editor/base/nsEditorShell.cpp | 2 +- editor/base/nsInterfaceState.cpp | 72 +- editor/composer/src/nsEditorShell.cpp | 2 +- editor/composer/src/nsInterfaceState.cpp | 72 +- editor/ui/composer/content/EditorCommands.js | 209 ++-- editor/ui/composer/content/editor.xul | 22 +- editor/ui/composer/content/editorOverlay.xul | 320 +++--- .../composer/locale/en-US/editor.properties | 2 + .../composer/locale/en-US/editorOverlay.dtd | 64 +- editor/ui/composer/skin/editor.css | 153 ++- editor/ui/dialogs/content/EdDialogCommon.js | 7 +- editor/ui/dialogs/content/EdDialogOverlay.xul | 2 + editor/ui/dialogs/content/EdHLineProps.js | 2 +- editor/ui/dialogs/content/EdImageProps.js | 570 ++++------- editor/ui/dialogs/content/EdImageProps.xul | 957 +++++++----------- editor/ui/dialogs/content/EdInsertTable.xul | 8 +- editor/ui/dialogs/content/EdLinkProps.js | 18 +- editor/ui/dialogs/content/EdLinkProps.xul | 2 +- editor/ui/dialogs/content/EdSpellCheck.xul | 32 +- .../dialogs/locale/en-US/EdDialogOverlay.dtd | 2 - .../locale/en-US/EditorImageProperties.dtd | 17 +- editor/ui/dialogs/skin/EditorDialog.css | 136 ++- 22 files changed, 1287 insertions(+), 1384 deletions(-) diff --git a/editor/base/nsEditorShell.cpp b/editor/base/nsEditorShell.cpp index afaf45ee412..8c83e431f37 100644 --- a/editor/base/nsEditorShell.cpp +++ b/editor/base/nsEditorShell.cpp @@ -1738,7 +1738,7 @@ nsEditorShell::SetDocumentTitle(const PRUnichar *title) if (NS_SUCCEEDED(res) && textNode) { // Go through the editor API so action is undoable - res = editor->InsertNode(textNode, headNode, 0); + res = editor->InsertNode(textNode, titleNode, 0); // This is the non-undoable code: //res = titleNode->AppendChild(textNode,getter_AddRefs(resultNode)); } diff --git a/editor/base/nsInterfaceState.cpp b/editor/base/nsInterfaceState.cpp index 62ac77d7d99..ea9b8aa9262 100644 --- a/editor/base/nsInterfaceState.cpp +++ b/editor/base/nsInterfaceState.cpp @@ -143,12 +143,14 @@ nsInterfaceState::ForceUpdate() // update underline rv = UpdateTextState("u", "Editor:Underline", "underline", mUnderlineState); + // update the paragraph format popup + rv = UpdateParagraphState("Editor:Paragraph:Format", "format", mParagraphFormat); + // udpate the font face rv = UpdateFontFace("Editor:Font:Face", "font", mFontString); - // update the paragraph format popup - rv = UpdateParagraphState("Editor:Paragraph:Format", "format", mParagraphFormat); - + // TODO: FINISH FONT FACE AND ADD FONT SIZE ("Editor:Font:Size", "size", mFontSize) + // update the list buttons rv = UpdateListState("Editor:Paragraph:ListType"); @@ -183,18 +185,33 @@ nsInterfaceState::UpdateParagraphState(const char* observerName, const char* att mEditor->GetParagraphTags(&tagList); PRInt32 numTags = tagList.Count(); + nsAutoString thisTag; + //Note: If numTags == 0, we probably have a text node not in a container + // (directly under ). Consider it normal if (numTags > 0) { - nsAutoString thisTag; +#ifdef DEBUG_cmanske + if (thisTag.Length() > 0) + printf (thisTag.ToNewCString()); + else + printf("[emtpy string]"); + printf(","); + if (mParagraphFormat.Length() > 0) + printf (mParagraphFormat.ToNewCString()); + else + printf("[mParagraph is empty]"); + printf(" = ParagraphTag,mParagraphFormat in nsInterfaceState::UpdateParagraphState()\n"); +#endif + // This will never show the "mixed state" + // TODO: Scan list of tags and if any are different, set to "mixed" tagList.StringAt(0, thisTag); - if (thisTag != mParagraphFormat) - { - nsresult rv = SetNodeAttribute(observerName, attributeName, thisTag); - if (NS_FAILED(rv)) return rv; - mParagraphFormat = thisTag; - } } - + if (thisTag != mParagraphFormat) + { + nsresult rv = SetNodeAttribute(observerName, attributeName, thisTag); + if (NS_FAILED(rv)) return rv; + mParagraphFormat = thisTag; + } return NS_OK; } @@ -252,16 +269,47 @@ nsInterfaceState::UpdateFontFace(const char* observerName, const char* attribute nsCOMPtr styleAtom = getter_AddRefs(NS_NewAtom("font")); nsAutoString faceStr("face"); + nsAutoString thisFace; + + // Use to test for "Default Fixed Width" + nsCOMPtr fixedStyleAtom = getter_AddRefs(NS_NewAtom("tt")); + + PRBool testBoolean; if (SelectionIsCollapsed()) { rv = mEditor->GetTypingStateValue(styleAtom, ioFontString); + if (ioFontString.Length() == 0) + { + // We don't have a font set, so check for "tt" (= "Default Fixed Width") + PRBool stateHasProp = PR_FALSE; + rv = mEditor->GetTypingState(fixedStyleAtom, testBoolean); + testBoolean = stateHasProp; + if (stateHasProp) + thisFace = faceStr; + } + else + testBoolean = PR_TRUE; } else { rv = mEditor->GetInlineProperty(styleAtom, &faceStr, nsnull, firstOfSelectionHasProp, anyOfSelectionHasProp, allOfSelectionHasProp); + if( !anyOfSelectionHasProp ) + { + // No font face set -- check for "tt" + rv = mEditor->GetInlineProperty(fixedStyleAtom, nsnull, nsnull, firstOfSelectionHasProp, anyOfSelectionHasProp, allOfSelectionHasProp); + testBoolean = anyOfSelectionHasProp; + thisFace = faceStr; + } + } + // TODO: HANDLE "MIXED" STATE + if (thisFace != mFontString) + { + nsresult rv = SetNodeAttribute(observerName, faceStr.GetBuffer(), thisFace); + if (NS_FAILED(rv)) return rv; + + mFontString = thisFace; } - // XXX this needs finishing. return rv; } diff --git a/editor/composer/src/nsEditorShell.cpp b/editor/composer/src/nsEditorShell.cpp index afaf45ee412..8c83e431f37 100644 --- a/editor/composer/src/nsEditorShell.cpp +++ b/editor/composer/src/nsEditorShell.cpp @@ -1738,7 +1738,7 @@ nsEditorShell::SetDocumentTitle(const PRUnichar *title) if (NS_SUCCEEDED(res) && textNode) { // Go through the editor API so action is undoable - res = editor->InsertNode(textNode, headNode, 0); + res = editor->InsertNode(textNode, titleNode, 0); // This is the non-undoable code: //res = titleNode->AppendChild(textNode,getter_AddRefs(resultNode)); } diff --git a/editor/composer/src/nsInterfaceState.cpp b/editor/composer/src/nsInterfaceState.cpp index 62ac77d7d99..ea9b8aa9262 100644 --- a/editor/composer/src/nsInterfaceState.cpp +++ b/editor/composer/src/nsInterfaceState.cpp @@ -143,12 +143,14 @@ nsInterfaceState::ForceUpdate() // update underline rv = UpdateTextState("u", "Editor:Underline", "underline", mUnderlineState); + // update the paragraph format popup + rv = UpdateParagraphState("Editor:Paragraph:Format", "format", mParagraphFormat); + // udpate the font face rv = UpdateFontFace("Editor:Font:Face", "font", mFontString); - // update the paragraph format popup - rv = UpdateParagraphState("Editor:Paragraph:Format", "format", mParagraphFormat); - + // TODO: FINISH FONT FACE AND ADD FONT SIZE ("Editor:Font:Size", "size", mFontSize) + // update the list buttons rv = UpdateListState("Editor:Paragraph:ListType"); @@ -183,18 +185,33 @@ nsInterfaceState::UpdateParagraphState(const char* observerName, const char* att mEditor->GetParagraphTags(&tagList); PRInt32 numTags = tagList.Count(); + nsAutoString thisTag; + //Note: If numTags == 0, we probably have a text node not in a container + // (directly under ). Consider it normal if (numTags > 0) { - nsAutoString thisTag; +#ifdef DEBUG_cmanske + if (thisTag.Length() > 0) + printf (thisTag.ToNewCString()); + else + printf("[emtpy string]"); + printf(","); + if (mParagraphFormat.Length() > 0) + printf (mParagraphFormat.ToNewCString()); + else + printf("[mParagraph is empty]"); + printf(" = ParagraphTag,mParagraphFormat in nsInterfaceState::UpdateParagraphState()\n"); +#endif + // This will never show the "mixed state" + // TODO: Scan list of tags and if any are different, set to "mixed" tagList.StringAt(0, thisTag); - if (thisTag != mParagraphFormat) - { - nsresult rv = SetNodeAttribute(observerName, attributeName, thisTag); - if (NS_FAILED(rv)) return rv; - mParagraphFormat = thisTag; - } } - + if (thisTag != mParagraphFormat) + { + nsresult rv = SetNodeAttribute(observerName, attributeName, thisTag); + if (NS_FAILED(rv)) return rv; + mParagraphFormat = thisTag; + } return NS_OK; } @@ -252,16 +269,47 @@ nsInterfaceState::UpdateFontFace(const char* observerName, const char* attribute nsCOMPtr styleAtom = getter_AddRefs(NS_NewAtom("font")); nsAutoString faceStr("face"); + nsAutoString thisFace; + + // Use to test for "Default Fixed Width" + nsCOMPtr fixedStyleAtom = getter_AddRefs(NS_NewAtom("tt")); + + PRBool testBoolean; if (SelectionIsCollapsed()) { rv = mEditor->GetTypingStateValue(styleAtom, ioFontString); + if (ioFontString.Length() == 0) + { + // We don't have a font set, so check for "tt" (= "Default Fixed Width") + PRBool stateHasProp = PR_FALSE; + rv = mEditor->GetTypingState(fixedStyleAtom, testBoolean); + testBoolean = stateHasProp; + if (stateHasProp) + thisFace = faceStr; + } + else + testBoolean = PR_TRUE; } else { rv = mEditor->GetInlineProperty(styleAtom, &faceStr, nsnull, firstOfSelectionHasProp, anyOfSelectionHasProp, allOfSelectionHasProp); + if( !anyOfSelectionHasProp ) + { + // No font face set -- check for "tt" + rv = mEditor->GetInlineProperty(fixedStyleAtom, nsnull, nsnull, firstOfSelectionHasProp, anyOfSelectionHasProp, allOfSelectionHasProp); + testBoolean = anyOfSelectionHasProp; + thisFace = faceStr; + } + } + // TODO: HANDLE "MIXED" STATE + if (thisFace != mFontString) + { + nsresult rv = SetNodeAttribute(observerName, faceStr.GetBuffer(), thisFace); + if (NS_FAILED(rv)) return rv; + + mFontString = thisFace; } - // XXX this needs finishing. return rv; } diff --git a/editor/ui/composer/content/EditorCommands.js b/editor/ui/composer/content/EditorCommands.js index 06e9001bec2..5df51766271 100644 --- a/editor/ui/composer/content/EditorCommands.js +++ b/editor/ui/composer/content/EditorCommands.js @@ -27,22 +27,10 @@ var toolbar; var documentModified; var EditorDisplayMode = 0; // Normal Editor mode -var gTagToFormat = { - "P" : "Normal", // these should really be entities. Not sure how to do that from JS - "H1" : "Heading 1", - "H2" : "Heading 2", - "H3" : "Heading 3", - "H4" : "Heading 4", - "H5" : "Heading 5", - "H6" : "Heading 6", - "BLOCKQUOTE" : "Blockquote", - "ADDRESS" : "Address", - "PRE" : "Preformatted", - "LI" : "List Item", - "DT" : "Definition Term", - "DD" : "Definition Description" - }; - +// These must be kept in synch with the XUL lists +var gParagraphTagNames = new Array("P","H1","H2","H3","H4","H5","H6","BLOCKQUOTE","ADDRESS","PRE","DT","DD"); +var gFontFaceNames = new Array("","tt","Arial, Helvetica","Times","Courier"); +var gFontSizeNames = new Array("-2","-1","0","+1","+2","+3","+4"); var gStyleTags = { "bold" : "b", @@ -83,18 +71,7 @@ function EditorStartup(editorType, editorElement) window.addEventListener("load", EditorDocumentLoaded, true, false); dump("Trying to make an Editor Shell through the component manager...\n"); -/* var editorShell = Components.classes["component://netscape/editor/editorshell"].createInstance(); - if (editorShell) - editorShell = editorShell.QueryInterface(Components.interfaces.nsIEditorShell); - if (!editorShell) - { - dump("Failed to create editor shell\n"); - // 7/12/99 THIS DOESN'T WORK YET! - window.close(); - return; - } -*/ // store the editor shell in the window, so that child windows can get to it. var editorShell = window.editorShell = editorElement.editorShell; @@ -110,6 +87,7 @@ function EditorStartup(editorType, editorElement) editorShell.LoadUrl(url); dump("EditorAppCore windows have been set.\n"); + SetupToolbarElements(); // Set focus to the edit window @@ -138,7 +116,7 @@ function TestMenuCreation() dump("Failed to find new menu item\n"); } - +// NOT USED? function GenerateFormatToolbar() { var toolbarButtons = [ @@ -208,7 +186,6 @@ function GenerateFormatToolbar() } - function SetupToolbarElements() { // Create an object to store controls for easy access @@ -372,41 +349,96 @@ function EditorSetTextProperty(property, attribute, value) contentWindow.focus(); } +function EditorSelectParagraphFormat() +{ + var select = document.getElementById("ParagraphSelect"); + if (select) + { + if (select.selectedIndex == -1) + return; + editorShell.SetParagraphFormat(gParagraphTagNames[select.selectedIndex]); + } +} + +function onParagraphFormatChange() +{ + var select = document.getElementById("ParagraphSelect"); + if (select) + { + // If we don't match anything, set to "normal" + var newIndex = 0; + var format = select.getAttribute("format"); + if ( format == "mixed") + { + // No single type selected + newIndex = -1; + } + else + { + for( var i = 0; i < gParagraphTagNames.length; i++) + { + if( gParagraphTagNames[i] == format ) + { + newIndex = i; + break; + } + } + } + if (select.selectedIndex != newIndex) + select.selectedIndex = newIndex; + } +} + function EditorSetParagraphFormat(paraFormat) { editorShell.SetParagraphFormat(paraFormat); contentWindow.focus(); } -function EditorListProperties() +function EditorSelectFontFace() { - window.openDialog("chrome://editor/content/EdListProps.xul","_blank", "chrome,close,titlebar,modal"); - contentWindow.focus(); + var select = document.getElementById("FontFaceSelect"); +dump("EditorSelectFontFace: "+gFontFaceNames[select.selectedIndex]+"\n"); + if (select) + { + if (select.selectedIndex == -1) + return; + + EditorSetFontFace(gFontFaceNames[select.selectedIndex]); + } } -function EditorSetFontSize(size) +function onFontFaceChange() { - if( size == "0" || size == "normal" || - size == "+0" ) - { - editorShell.RemoveTextProperty("font", size); - dump("Removing font size\n"); - } else { - dump("Setting font size\n"); - editorShell.SetTextProperty("font", "size", size); + var select = document.getElementById("FontFaceSelect"); + if (select) + { + // Default selects "Variable Width" + var newIndex = 0; + var face = select.getAttribute("face"); + if ( face == "mixed") + { + // No single type selected + newIndex = -1; + } + else + { + for( var i = 0; i < gFontFaceNames.length; i++) + { + if( gFontFaceNames[i] == face ) + { + newIndex = i; + break; + } + } + } + if (select.selectedIndex != newIndex) + select.selectedIndex = newIndex; } - contentWindow.focus(); } function EditorSetFontFace(fontFace) { -/* Testing returning out params - var first = new Object(); - var all = new Object(); - var any = new Object(); - editorShell.GetTextProperty("tt", "", "", first, any, all); - dump("GetTextProperty: first: "+first.value+", any: "+any.value+", all: "+all.value+"\n"); -*/ if( fontFace == "tt") { // The old "teletype" attribute editorShell.SetTextProperty("tt", "", ""); @@ -425,6 +457,62 @@ function EditorSetFontFace(fontFace) contentWindow.focus(); } +function EditorSelectFontSize() +{ + var select = document.getElementById("FontSizeSelect"); +dump("EditorSelectFontSize: "+gFontSizeNames[select.selectedIndex]+"\n"); + if (select) + { + if (select.selectedIndex == -1) + return; + + EditorSetFontSize(gFontSizeNames[select.selectedIndex]); + } +} + +function onFontSizeChange() +{ + var select = document.getElementById("FontFaceSelect"); + if (select) + { + // If we don't match anything, set to "0 (normal)" + var newIndex = 2; + var size = select.getAttribute("size"); + if ( size == "mixed") + { + // No single type selected + newIndex = -1; + } + else + { + for( var i = 0; i < gFontSizeNames.length; i++) + { + if( gFontSizeNames[i] == size ) + { + newIndex = i; + break; + } + } + } + if (select.selectedIndex != newIndex) + select.selectedIndex = newIndex; + } +} + +function EditorSetFontSize(size) +{ + if( size == "0" || size == "normal" || + size == "+0" ) + { + editorShell.RemoveTextProperty("font", size); + dump("Removing font size\n"); + } else { + dump("Setting font size\n"); + editorShell.SetTextProperty("font", "size", size); + } + contentWindow.focus(); +} + function EditorSetFontColor(color) { editorShell.SetTextProperty("font", "color", color); @@ -481,6 +569,12 @@ function EditorRemoveLinks() contentWindow.focus(); } +function EditorListProperties() +{ + window.openDialog("chrome://editor/content/EdListProps.xul","_blank", "chrome,close,titlebar,modal"); + contentWindow.focus(); +} + function EditorApplyStyleSheet(styleSheetURL) { // Second param is true for "override" type of sheet @@ -1203,26 +1297,15 @@ function onDirtyChange() var theButton = document.getElementById("saveButton"); if (theButton) { - var isDirty = theButton.getAttribute("dirty"); + var isDirty = theButton.getAttribute("dirty"); if (isDirty == "true") { - theButton.setAttribute("src", "chrome://editor/skin/images/ED_SaveMod.gif"); + theButton.setAttribute("src", "chrome://editor/skin/images/savemod.gif"); } else { - theButton.setAttribute("src", "chrome://editor/skin/images/ED_SaveFile.gif"); + theButton.setAttribute("src", "chrome://editor/skin/images/savefile.gif"); } } } -function onParagraphFormatChange() -{ - var theButton = document.getElementById("ParagraphPopupButton"); - if (theButton) - { - var theFormat = theButton.getAttribute("format"); - theButton.setAttribute("value", gTagToFormat[theFormat]); - dump("Setting value\n"); - } -} - function onListFormatChange(listType) { var theButton = document.getElementById(listType + "Button"); diff --git a/editor/ui/composer/content/editor.xul b/editor/ui/composer/content/editor.xul index 588e3ed584c..49790023737 100644 --- a/editor/ui/composer/content/editor.xul +++ b/editor/ui/composer/content/editor.xul @@ -38,7 +38,7 @@ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="EditorOnLoad()" onunload="EditorShutdown()" - titlemodifier="&textEditorWindow.titlemodifier;" + titlemodifier="&editorWindow.titlemodifier;" titlemenuseparator="&editorWindow.titlemodifiermenuseparator;" align="vertical" width="640" height="480"> @@ -157,19 +157,13 @@ - - - - - - - - - - - - - + + + + + + + diff --git a/editor/ui/composer/content/editorOverlay.xul b/editor/ui/composer/content/editorOverlay.xul index c303b40acd5..4a8abf01c5e 100644 --- a/editor/ui/composer/content/editorOverlay.xul +++ b/editor/ui/composer/content/editorOverlay.xul @@ -127,11 +127,10 @@ - + - - + @@ -227,86 +226,86 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -346,22 +345,22 @@ - - - - - - - + + + + + + + - - - + + + @@ -406,12 +405,12 @@ - - - - - - + + + + + + @@ -422,7 +421,6 @@ - @@ -471,40 +469,7 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + @@ -533,42 +498,75 @@ - + - + - + - + - - - - - - + + + + + + - - - - - + + + + + - - - - - - - + + + &headingNormalCmd.label; + &heading1Cmd.label; + &heading2Cmd.label; + &heading3Cmd.label; + &heading4Cmd.label; + &heading5Cmd.label; + &heading6Cmd.label; + ¶graphBlockquoteCmd.label; + ¶graphAddressCmd.label; + ¶graphPreformatCmd.label; + ¶graphDfnTermCmd.label; + ¶graphDfnDescCmd.label; + + + + + + &defaultVariableWidthCmd.label; + &defaultFixedWidthCmd.label; + &arialHelveticaFont.label; + ×Font.label; + &courierFont.label; + + + + + &size-2Cmd.label; + &size-1Cmd.label; + &size0Cmd.label; + &size1Cmd.label; + &size2Cmd.label; + &size3Cmd.label; + &size4Cmd.label; + + + + + @@ -581,17 +579,17 @@ - + - + - - - + + + diff --git a/editor/ui/composer/locale/en-US/editor.properties b/editor/ui/composer/locale/en-US/editor.properties index 89a6512dd58..d8820477064 100644 --- a/editor/ui/composer/locale/en-US/editor.properties +++ b/editor/ui/composer/locale/en-US/editor.properties @@ -14,6 +14,8 @@ Fewer=Fewer Less=Less MoreAttributes=More Attributes FewerAttributes=Fewer Attributes +MoreProperties=More Properties +FewerProperties=Fewer Properties None=None none=none OpenHTMLFile=Open HTML File diff --git a/editor/ui/composer/locale/en-US/editorOverlay.dtd b/editor/ui/composer/locale/en-US/editorOverlay.dtd index 33996a2d9d6..4c6ec56255f 100644 --- a/editor/ui/composer/locale/en-US/editorOverlay.dtd +++ b/editor/ui/composer/locale/en-US/editorOverlay.dtd @@ -219,11 +219,11 @@ - + - + - + @@ -233,19 +233,19 @@ - - - - - - - + + + + + + + - + - + - + @@ -302,17 +302,17 @@ - + - + - + - + - + - + @@ -327,9 +327,9 @@ - + - + @@ -438,19 +438,6 @@ - - - - - - - - - - - - - @@ -459,15 +446,10 @@ - - - - - - - + + diff --git a/editor/ui/composer/skin/editor.css b/editor/ui/composer/skin/editor.css index db39be5d115..014c85bf269 100644 --- a/editor/ui/composer/skin/editor.css +++ b/editor/ui/composer/skin/editor.css @@ -46,43 +46,34 @@ box#DisplayModeBar { background-color: #999999; } -toolbar#EditToolbar titledbutton#SaveButton { - list-style-image:url(chrome://editor/skin/images/savefile.gif); -} - -toolbar#EditToolbar titledbutton#SaveButton[dirty="true"] { - list-style-image:url(chrome://editor/skin/images/savemod.gif); -} - -toolbar#FormatToolbar titledbutton[class~=format] { - margin: 2px 2px 2px 2px; +toolbar#FormatToolbar titledbutton.format { + border: 1px solid transparent; + margin: 1px 1px 1px 1px; padding: 2px; text-decoration: none; color: inherit; } -toolbar#FormatToolbar titledbutton[class~=format]:hover { +toolbar#FormatToolbar titledbutton.format[toggled="1"] { + border: 1px white inset; +} + +toolbar#FormatToolbar titledbutton.format:hover { /* What we should use, but this has a blue border that doesn't look good against gray toolbars background-image:url("chrome://global/skin/otherbutton28-bg-hover.gif"); -*/ background-image:url("chrome://editor/skin/images/hover-teal.gif"); background-repeat: no-repeat; background-position: center center; +*/ + border: 1px solid white; text-decoration: none; /* global class="plain" should do this! */ } toolbar#FormatToolbar titledbutton[class~=format]:active { - margin: 3px 1px 1px 3px; + margin: 2px 0px 0px 2px; } -/* -Experimental: a flat look for buttons that show "set" state, like bold -toolbar#FormatToolbar titledbutton[class~=format][toggled="1"] { - border: 1px solid #003366; -} -*/ - toolbar#FormatToolbar titledbutton[class~=TextAttribute] { /* Make these narrower */ padding: 2px 0px; @@ -108,13 +99,18 @@ toolbar#FormatToolbar titledbutton#underlineButton { text-decoration: underline; } -/* Use negative margins to bring buttons together to look like one */ -toolbar#FormatToolbar titledbutton#TextColorPopupButton { - margin-right: -2px; +div.toolbar-middle { + /* trying to center vertically in the toolbar! */ + vertical-align: middle; } - -toolbar#FormatToolbar titledbutton#BackColorPopupButton { - margin-left: -2px; +select.toolbar { + /* I'd prefer to have this centered */ + margin-top: 3px; + margin-left: 3px; + margin-right: 3px; + /* This is ignored! */ + font-size: smaller; + max-width: 20em; } box#DisplayModeBar titledbutton[class~=DisplayModeButton] { @@ -128,12 +124,11 @@ box#DisplayModeBar titledbutton[class~=DisplayModeButton] { } box#DisplayModeBar titledbutton[class~=DisplayModeButton]:hover { - /*border: 1px solid white; - padding: 0px 4px 0px 4px; - margin: 0px; - */ + border: 1px solid white; + /* Alternate hover style: change background color: white; background-color: #66AAAA; + */ } box#DisplayModeBar titledbutton[class~=DisplayModeButton]:active { @@ -151,8 +146,11 @@ box#DisplayModeBar titledbutton[class~=DisplayModeButton][selected="1"] { } box#DisplayModeBar titledbutton[class~=DisplayModeButton][selected="1"]:hover { + border: 1px solid white; + /* Alternate hover style: change background background-color: #66AAAA; color: white; + */ } box#DisplayModeBar titledbutton[class~=DisplayModeButton][selected="1"]:active { @@ -176,3 +174,98 @@ spring.spacer5 { width: 5px; height: 5px; } + +/* Image URLs for all Editor toolbar buttons */ + +titledbutton#newButton { + list-style-image:url("chrome://editor/skin/images/newfile.gif"); +} +titledbutton#openButton { + list-style-image:url("chrome://editor/skin/images/openfile.gif"); +} + +titledbutton#saveButton { + list-style-image:url("chrome://editor/skin/images/savefile.gif"); +} +titledbutton#saveButton[dirty="true"] { + list-style-image:url(chrome://editor/skin/images/savemod.gif); +} + +titledbutton#publishButton { + list-style-image:url("chrome://editor/skin/images/publish.gif"); +} +titledbutton#printButton { + list-style-image:url("chrome://editor/skin/images/print.gif"); +} +titledbutton#findButton { + list-style-image:url("chrome://editor/skin/images/find.gif"); +} +titledbutton#linkButton { + list-style-image:url("chrome://editor/skin/images/link.gif"); +} +titledbutton#imageButton { + list-style-image:url("chrome://editor/skin/images/image.gif"); +} +titledbutton#namedAnchorButton { + list-style-image:url("chrome://editor/skin/images/anchor.gif"); +} +titledbutton#hlineButton { + list-style-image:url("chrome://editor/skin/images/hline.gif"); +} +titledbutton#tableButton { + list-style-image:url("chrome://editor/skin/images/table.gif"); +} +titledbutton#spellingButton { + list-style-image:url("chrome://editor/skin/images/spell.gif"); +} +titledbutton#ulButton { + list-style-image:url("chrome://editor/skin/images/bullets.gif"); +} +titledbutton#olButton { + list-style-image:url("chrome://editor/skin/images/numbers.gif"); +} +titledbutton#outdentButton { + list-style-image:url("chrome://editor/skin/images/outdent.gif"); +} +titledbutton#indentButton { + list-style-image:url("chrome://editor/skin/images/indent.gif"); +} +titledbutton#AlignPopupButton { + list-style-image:url("chrome://editor/skin/images/align.gif"); +} + +/* Use negative margins to bring buttons together to look like one */ +titledbutton#TextColorPopupButton { + list-style-image:url("chrome://editor/skin/images/text-color.gif"); + border: 1px solid transparent; + margin: 1px -1px 1px 1px; + padding: 0px; +} +titledbutton#TextColorPopupButton:hover { + list-style-image:url("chrome://editor/skin/images/text-color.gif"); + border: 1px solid white; +} + +titledbutton#BackColorPopupButton { + list-style-image:url("chrome://editor/skin/images/backcolor.gif"); + border: 1px solid transparent; + margin: 1px 1px 1px -1px; + padding: 0px; +} +titledbutton#BackColorPopupButton:hover { + list-style-image:url("chrome://editor/skin/images/backcolor.gif"); + border: 1px solid white; +} + +titledbutton#text-align-left { + list-style-image:url("chrome://editor/skin/images/left.gif"); +} +titledbutton#text-align-center { + list-style-image:url("chrome://editor/skin/images/center.gif"); +} +titledbutton#text-align-right { + list-style-image:url("chrome://editor/skin/images/right.gif"); +} +titledbutton#text-align-justify { + list-style-image:url("chrome://editor/skin/images/justify.gif"); +} diff --git a/editor/ui/dialogs/content/EdDialogCommon.js b/editor/ui/dialogs/content/EdDialogCommon.js index 6514d7df6f7..844f5aab6b0 100644 --- a/editor/ui/dialogs/content/EdDialogCommon.js +++ b/editor/ui/dialogs/content/EdDialogCommon.js @@ -63,6 +63,7 @@ function StringExists(string) function ClearList(list) { + dump("Clear List: list="+list+"\n"); if (list) { list.selectedIndex = -1; for( i=list.length-1; i >= 0; i--) @@ -227,7 +228,7 @@ function PrepareStringForURL(string) // or disabled (setAttribute) as specified in the "doEnable" parameter function SetElementEnabledByID( elementID, doEnable ) { - element = document.getElementById(elementID); + element = document.getElementById(elementID); if ( element ) { if ( doEnable ) @@ -336,7 +337,6 @@ function InitPixelOrPercentPopupButton(element, attribute, buttonID) function SetPixelOrPercentByID(elementID, percentString) { percentChar = percentString; - dump("SetPixelOrPercent. PercentChar="+percentChar+"\n"); btn = document.getElementById( elementID ); if ( btn ) @@ -346,7 +346,6 @@ function SetPixelOrPercentByID(elementID, percentString) var containing = getContainer(); if (containing != null) { - dump("Containing Element = " + containing + "\n"); if (containing.nodeName == "TD") btn.setAttribute("value", GetString("PercentOfCell")); else @@ -397,7 +396,6 @@ function onAdvancedEdit() // (the copy named "globalElement") window.openDialog("chrome://editor/content/EdAdvancedEdit.xul", "_blank", "chrome,close,titlebar,modal", "", globalElement); if (window.AdvancedEditOK) { - dump("Advanced Dialog closed with OK\n"); // Copy edited attributes to the dialog widgets: // to setup for validation InitDialog(); @@ -415,7 +413,6 @@ function onAdvancedEdit() function onCancel() { - dump("Cancel button clicked: closing window\n"); window.close(); } diff --git a/editor/ui/dialogs/content/EdDialogOverlay.xul b/editor/ui/dialogs/content/EdDialogOverlay.xul index ce021c766a0..e5603fbe076 100644 --- a/editor/ui/dialogs/content/EdDialogOverlay.xul +++ b/editor/ui/dialogs/content/EdDialogOverlay.xul @@ -30,6 +30,8 @@ + + diff --git a/editor/ui/dialogs/content/EdHLineProps.js b/editor/ui/dialogs/content/EdHLineProps.js index 535fdf3ceac..96a34fb9ccf 100644 --- a/editor/ui/dialogs/content/EdHLineProps.js +++ b/editor/ui/dialogs/content/EdHLineProps.js @@ -150,7 +150,6 @@ function ValidateData() { // Height is always pixels height = ValidateNumberString(dialog.heightInput.value, 1, maxPixels); - var isPercent = (dialog.pixelOrPercentSelect.selectedIndex == 1); if (height == "") { // Set focus to the offending control dump("Height is empty\n"); @@ -160,6 +159,7 @@ function ValidateData() dump("Setting height="+height+"\n"); globalElement.setAttribute("size", height); + var isPercent = (dialog.pixelOrPercentSelect.selectedIndex == 1); var maxLimit; if (isPercent) { maxLimit = 100; diff --git a/editor/ui/dialogs/content/EdImageProps.js b/editor/ui/dialogs/content/EdImageProps.js index 268986abe21..6b324517dd2 100644 --- a/editor/ui/dialogs/content/EdImageProps.js +++ b/editor/ui/dialogs/content/EdImageProps.js @@ -23,11 +23,11 @@ * Ben Goodger */ -var insertNew = true; +var insertNew = true; +var SeeMore = true; +var wasEnableAll = false; +var oldSourceInt = 0; var imageElement; -var SeeMore = true; -var wasEnableAll = false; -var oldSourceInt = 0; // dialog initialization code @@ -39,59 +39,47 @@ function Startup() doSetOKCancel(onOK, null); // Create dialog object to store controls for easy access + dialog = new Object; - dialog = new Object; - - // This is the "combined" widget: - - dialog.srcInput = document.getElementById("image.srcInput"); - dialog.altTextInput = document.getElementById("image.altTextInput"); - - dialog.MoreFewerButton = document.getElementById("MoreFewerButton"); - dialog.MoreRow = document.getElementById("MoreRow"); - - dialog.customsizeRadio = document.getElementById( "customsizeRadio" ); - dialog.imagewidthInput = document.getElementById( "imagewidthInput" ); - dialog.imageheightInput = document.getElementById( "imageheightInput" ); - dialog.imagewidthSelect = document.getElementById( "widthunitSelect" ); - dialog.imageheightSelect = document.getElementById( "heightunitSelect" ); - - dialog.imagelrInput = document.getElementById( "imageleftrightInput" ); - dialog.imagetbInput = document.getElementById( "imagetopbottomInput" ); - dialog.imageborderInput = document.getElementById( "imageborderInput" ); + dialog.srcInput = document.getElementById( "srcInput" ); + dialog.altTextInput = document.getElementById( "altTextInput" ); + dialog.MoreFewerButton = document.getElementById( "MoreFewerButton" ); + dialog.MoreSection = document.getElementById( "MoreSection" ); + dialog.customsizeRadio = document.getElementById( "customsizeRadio" ); + dialog.constrainCheckbox = document.getElementById( "constrainCheckbox" ); + dialog.widthInput = document.getElementById( "widthInput" ); + dialog.heightInput = document.getElementById( "heightInput" ); + dialog.widthUnitsSelect = document.getElementById( "widthUnitsSelect" ); + dialog.heightUnitsSelect = document.getElementById( "heightUnitsSelect" ); + dialog.imagelrInput = document.getElementById( "imageleftrightInput" ); + dialog.imagetbInput = document.getElementById( "imagetopbottomInput" ); + dialog.border = document.getElementById( "border" ); + dialog.alignTypeSelect = document.getElementById( "alignTypeSelect" ); // Set SeeMore bool to the OPPOSITE of the current state, // which is automatically saved by using the 'persist="more"' // attribute on the MoreFewerButton button - // onMoreFewer will toggle it and redraw the dialog + // onMoreFewer will toggle the state and redraw the dialog SeeMore = (dialog.MoreFewerButton.getAttribute("more") != "1"); onMoreFewer(); - if (null == dialog.srcInput || - null == dialog.altTextInput ) - { - dump("Not all dialog controls were found!!!\n"); - } - // Get a single selected image element - - var tagName = "img" - imageElement = editorShell.GetSelectedElement(tagName); + var tagName = "img" + imageElement = editorShell.GetSelectedElement(tagName); if (imageElement) { // We found an element and don't need to insert one - - insertNew = false; + insertNew = false; } else { - insertNew = true; + insertNew = true; // We don't have an element selected, // so create one with default attributes - imageElement = editorShell.CreateElementWithDefaults(tagName); + imageElement = editorShell.CreateElementWithDefaults(tagName); if( !imageElement ) { dump("Failed to get selected element or create a new one!\n"); @@ -111,87 +99,66 @@ function Startup() // Set dialog widgets with attribute data // We get them from globalElement copy so this can be used // by AdvancedEdit(), which is shared by all property dialogs -function InitDialog() { - +function InitDialog() +{ // Set the controls to the image's attributes - str = globalElement.getAttribute("src"); - if ( str == "null" ) - { - str = ""; - } - - dialog.srcInput.value = str; + str = globalElement.getAttribute("src"); + if (str) + dialog.srcInput.value = str; - str = globalElement.getAttribute("alt"); - - if ( str == "null" ) - { - str = ""; - } - dialog.altTextInput.value = str; + str = globalElement.getAttribute("alt"); + if (str) + dialog.altTextInput.value = str; - // set height and width - // note: need to set actual image size if no attributes - - dimvalue = globalElement.getAttribute("width"); - - if ( dimvalue == "null" ) - { - dimvalue = ""; - } - dialog.imagewidthInput.value = dimvalue; + // setup the height and width widgets + dialog.widthInput.value = InitPixelOrPercentCombobox(globalElement, "width", "widthUnitsSelect"); + dialog.heightInput.value = InitPixelOrPercentCombobox(globalElement, "height", "heightUnitsSelect"); - dimvalue = globalElement.getAttribute("height"); - if ( dimvalue == "null" ) - { - dimvalue = ""; - } - dialog.imageheightInput.value = dimvalue; + // TODO: We need to get the actual image dimensions. + // If different from attribute dimensions, then "custom" is checked. + // For now, always check custom, so we don't trash existing values + dialog.customsizeRadio.checked = true; - // Mods Brian King XML Workshop - // Set H & W pop-up on start-up - if (insertNew == false) - { - - var wdh = globalElement.getAttribute("width"); - var hgt = globalElement.getAttribute("height"); - ispercentw = wdh.substr(wdh.length-1, 1); - ispercenth = hgt.substr(hgt.length-1, 1); - - if (ispercentw == "%") - setPopup("w"); - - if (ispercenth == "%") - setPopup("h"); - - } - // End Mods BK - - // this is not the correct way to determine if custom or original - - if ( dimvalue != "" ) - { - dialog.customsizeRadio.checked = true; - } - - alignpopup = document.getElementById("image.alignType"); + dump(dialog.customsizeRadio.checked+" dialog.customsizeRadio.checked\n"); // set spacing editfields + dialog.imagelrInput.value = globalElement.getAttribute("hspace"); + dialog.imagetbInput.value = globalElement.getAttribute("vspace"); + dialog.border.value = globalElement.getAttribute("border"); - sizevalue = globalElement.getAttribute("hspace"); - dialog.imagelrInput.value = sizevalue; - - sizevalue = globalElement.getAttribute("vspace"); - dialog.imagetbInput.value = sizevalue; - - sizevalue = globalElement.getAttribute("border"); - dialog.imageborderInput.value = sizevalue; + // Get alignment setting + var align = globalElement.getAttribute("align"); + if (align) { + align.toLowerCase(); +dump("Image Align exists = "+align+"\n"); + } - +dump("Image Align="+align+"\n"); + switch ( align ) + { + case "top": + dialog.alignTypeSelect.selectedIndex = 0; + break; + case "center": + dialog.alignTypeSelect.selectedIndex = 1; + break; + case "left": + dialog.alignTypeSelect.selectedIndex = 3; + break; + case "right": + dialog.alignTypeSelect.selectedIndex = 4; + break; + default: // Default or "bottom" + dialog.alignTypeSelect.selectedIndex = 2; + break; + } + +dump( "Image Align Select Index after setting="+dialog.alignTypeSelect.selectedIndex+"\n"); + + imageTypeExtension = checkForImage(); // we want to force an update so initialize "wasEnableAll" to be the opposite of what the actual state is - imageTypeExtension = checkForImage(); - wasEnableAll = !imageTypeExtension; + wasEnableAll = !imageTypeExtension; doOverallEnabling(); } @@ -199,15 +166,16 @@ function chooseFile() { // Get a local file, converted into URL format - fileName = editorShell.GetLocalFileURL(window, "img"); + fileName = editorShell.GetLocalFileURL(window, "img"); if (fileName && fileName != "") { - dialog.srcInput.value = fileName; -// imageTypeExtension = checkForImage(); + dialog.srcInput.value = fileName; +// imageTypeExtension = checkForImage(); doValueChanged(); } - + + checkForImage( "srcInput" ); + // Put focus into the input field - dialog.srcInput.focus(); } @@ -215,22 +183,20 @@ function onMoreFewer() { if (SeeMore) { - SeeMore = false; - dialog.MoreFewerButton.setAttribute("value",GetString("MoreAttributes")); -// This has too many bugs to use now (10/22/99) - dialog.MoreRow.style.visibility = "collapse"; -// dialog.MoreRow.setAttribute("style","display: none"); + dialog.MoreSection.setAttribute("style","display: none"); + window.sizeToContent(); dialog.MoreFewerButton.setAttribute("more","0"); + dialog.MoreFewerButton.setAttribute("value",GetString("MoreProperties")); + SeeMore = false; } else { - SeeMore = true; - dialog.MoreFewerButton.setAttribute("value",GetString("FewerAttributes")); - dialog.MoreRow.style.visibility = "inherit"; -// dialog.MoreRow.setAttribute("style","display: inherit"); + dialog.MoreSection.setAttribute("style","display: inherit"); + window.sizeToContent(); dialog.MoreFewerButton.setAttribute("more","1"); + dialog.MoreFewerButton.setAttribute("value",GetString("FewerProperties")); + SeeMore = true; } - window.sizeToContent(); } function doValueChanged() @@ -238,16 +204,6 @@ function doValueChanged() doOverallEnabling(); } -function SelectWidthUnits() -{ - list = document.getElementById("WidthUnits"); - value = list.options[list.selectedIndex].value; - - dump("Selected item: "+value+"\n"); - - doValueChanged(); -} - function OnChangeSrc() { doValueChanged(); @@ -255,145 +211,98 @@ function OnChangeSrc() function doDimensionEnabling( doEnable ) { + // Make associated text labels look disabled or not + SetElementEnabledByID( "originalsizeLabel", doEnable ); + SetElementEnabledByID( "customsizeLabel", doEnable ); + SetElementEnabledByID( "dimensionsLabel", doEnable ); - SetClassEnabledByID( "originalsizeLabel", doEnable ); - SetClassEnabledByID( "customsizeLabel", doEnable ); + SetElementEnabledByID( "originalsizeRadio", doEnable ); + SetElementEnabledByID( "customsizeRadio", doEnable ); - SetClassEnabledByID( "dimensionsLegend", doEnable ); + // Rest are enabled only if "Custom" is checked + var enable = (doEnable && dialog.customsizeRadio.checked); - customradio = document.getElementById( "customsizeRadio" ); + SetElementEnabledByID( "widthInput", enable ); + SetElementEnabledByID( "widthLabel", enable); + SetElementEnabledByID( "widthUnitsSelect", enable ); + + SetElementEnabledByID( "heightInput", enable ); + SetElementEnabledByID( "heightLabel", enable ); + SetElementEnabledByID( "heightUnitsSelect", enable ); - if ( customradio && customradio.checked ) - { - // disable or enable custom setting controls - - SetElementEnabledByID( "imagewidthInput", doEnable && customradio.checked ); - -////////////////// this is currently the only way i can get it to work ///////////////// - - // SetElementEnabledByID( "widthunitSelect", doEnable && customradio.checked ); - - element = document.getElementById( "widthunitSelect" ); - element.setAttribute( "disabled", false ); - - SetElementEnabledByID( "imageheightInput", doEnable && customradio.checked ); - - element = document.getElementById( "heightunitSelect" ); - element.setAttribute( "disabled", false ); - - //SetElementEnabledByID( "heightunitSelect", doEnable && customradio.checked ); - -///////////////////////////////////////////////////////////////////////////////////////// - - SetElementEnabledByID( "constrainCheckbox", doEnable && customradio.checked ); - - SetClassEnabledByID( "imagewidthLabel", doEnable && customradio.checked ); - SetClassEnabledByID( "imageheightLabel", doEnable && customradio.checked ); - SetClassEnabledByID( "constrainLabel", doEnable && customradio.checked ); - } - + SetElementEnabledByID( "constrainCheckbox", enable ); + SetElementEnabledByID( "constrainLabel", enable ); } function doOverallEnabling() { - - var imageTypeExtension = checkForImage(); - var canEnableAll = imageTypeExtension != 0; + var imageTypeExtension = checkForImage(); + var canEnableAll = imageTypeExtension != 0; if ( wasEnableAll == canEnableAll ) return; - wasEnableAll = canEnableAll; + wasEnableAll = canEnableAll; SetElementEnabledByID("ok", canEnableAll ); + SetElementEnabledByID( "altTextLabel", canEnableAll ); - fieldset = document.getElementById("imagedimensionsFieldset"); - if ( fieldset ) - { - SetElementEnabledByID("imagedimensionsFieldset", canEnableAll ); - doDimensionEnabling( canEnableAll ); - } + // Do widgets for sizing + doDimensionEnabling( canEnableAll ); - // handle altText and MoreFewer button + SetElementEnabledByID("alignLabel", canEnableAll ); + SetElementEnabledByID("alignTypeSelect", canEnableAll ); - SetClassEnabledByID( "image.altTextLabel", canEnableAll ); - SetElementEnabledByID("image.altTextInput", canEnableAll ); - SetClassEnabledByID("MoreFewerButton", canEnableAll ); - SetElementEnabledByID("AdvancedEdit", canEnableAll ); + // spacing fieldset + SetElementEnabledByID( "spacingLabel", canEnableAll ); + SetElementEnabledByID( "imageleftrightInput", canEnableAll ); + SetElementEnabledByID( "leftrightLabel", canEnableAll ); + SetElementEnabledByID( "leftrighttypeLabel", canEnableAll ); - // alignment + SetElementEnabledByID( "imagetopbottomInput", canEnableAll ); + SetElementEnabledByID( "topbottomLabel", canEnableAll ); + SetElementEnabledByID( "topbottomtypeLabel", canEnableAll ); - SetClassEnabledByID( "imagealignmentLabel", canEnableAll ); - SetElementEnabledByID("image.alignType", canEnableAll ); + SetElementEnabledByID( "border", canEnableAll ); + SetElementEnabledByID( "borderLabel", canEnableAll ); + SetElementEnabledByID( "bordertypeLabel", canEnableAll ); -/* this shouldn't be needed here; doDimensionEnabling should do this */ - customradio = document.getElementById( "customsizeRadio" ); - if(customradio.checked){ - SetElementEnabledByID("heightunitSelect", canEnableAll ); - SetElementEnabledByID("widthunitSelect", canEnableAll ); - } - - // spacing fieldset - - SetClassEnabledByID( "spacingLegend", canEnableAll ); - SetElementEnabledByID("spacing.fieldset", canEnableAll ); - SetElementEnabledByID("imageleftrightInput", canEnableAll ); - SetElementEnabledByID("imagetopbottomInput", canEnableAll ); - SetElementEnabledByID("imageborderInput", canEnableAll ); - - // do spacing labels - - SetClassEnabledByID( "leftrightLabel", canEnableAll ); - SetClassEnabledByID( "leftrighttypeLabel", canEnableAll ); - SetClassEnabledByID( "topbottomLabel", canEnableAll ); - SetClassEnabledByID( "topbottomtypeLabel", canEnableAll ); - SetClassEnabledByID( "borderLabel", canEnableAll ); - SetClassEnabledByID( "bordertypeLabel", canEnableAll ); -} - -function SetImageAlignment(align) -{ -// do stuff - -// contentWindow.focus(); + SetElementEnabledByID( "AdvancedEdit", canEnableAll ); } // an API to validate and image by sniffing out the extension -/* assumes that the element id is "image.srcInput" */ +/* assumes that the element id is "srcInput" */ /* returns lower-case extension or 0 */ -function checkForImage() { - - image = document.getElementById( "image.srcInput" ).value; - +function checkForImage() +{ + image = dialog.srcInput.value.trimString(); if ( !image ) - return 0; + return 0; /* look for an extension */ - var tailindex = image.lastIndexOf("."); + var tailindex = image.lastIndexOf("."); if ( tailindex == 0 || tailindex == -1 ) /* -1 is not found */ - return 0; + return 0; /* move past period, get the substring from the first character after the '.' to the last character (length) */ tailindex = tailindex + 1; - var type = image.substring(tailindex,image.length); + var type = image.substring(tailindex,image.length); /* convert extension to lower case */ if (type) type = type.toLowerCase(); - + + // TODO: Will we convert .BMPs to a web format? switch( type ) { - case "gif": case "jpg": case "jpeg": case "png": - return type; - break; - - default : return 0; - - } - + return type; + break; + default : + return 0; + } } @@ -402,7 +311,7 @@ function checkForImage() { function constrainProportions( srcID, destID ) { - srcElement = document.getElementById ( srcID ); + srcElement = document.getElementById ( srcID ); if ( !srcElement ) return; @@ -410,13 +319,11 @@ function constrainProportions( srcID, destID ) // now find out if we should be constraining or not - checkbox = document.getElementById( "constrainCheckbox" ); - if ( !checkbox) - return; - if ( !checkbox.checked ) + var constrainChecked = (dialog.constrainCheckbox.checked); + if ( !constrainChecked ) return; - destElement = document.getElementById( destID ); + destElement = document.getElementById( destID ); if ( !destElement ) return; @@ -425,18 +332,18 @@ function constrainProportions( srcID, destID ) // newDest = (newSrc * oldDest / oldSrc) if ( oldSourceInt == 0 ) - destElement.value = srcElement.value; + destElement.value = srcElement.value; else - destElement.value = Math.round( srcElement.value * destElement.value / oldSourceInt ); + destElement.value = Math.round( srcElement.value * destElement.value / oldSourceInt ); - oldSourceInt = srcElement.value; + oldSourceInt = srcElement.value; } // Get data from widgets, validate, and set for the global element // accessible to AdvancedEdit() [in EdDialogCommon.js] function ValidateData() { - var imageTypeExtension = checkForImage(); + var imageTypeExtension = checkForImage(); if ( !imageTypeExtension ) { ShowInputErrorMessage(GetString("MissingImageError")); return false; @@ -444,63 +351,104 @@ function ValidateData() //TODO: WE NEED TO DO SOME URL VALIDATION HERE, E.G.: // We must convert to "file:///" or "http://" format else image doesn't load! - globalElement.setAttribute("src",dialog.srcInput.value); + var src = dialog.srcInput.value.trimString(); + globalElement.setAttribute("src", src); // TODO: Should we confirm with user if no alt tag? Or just set to empty string? - globalElement.setAttribute("alt", dialog.altTextInput.value); + var alt = dialog.altTextInput.value.trimString(); + globalElement.setAttribute("alt", alt); - // set width if custom size and width is greater than 0 - // Note: This accepts and empty string as meaning "don't set - // BUT IT ALSO ACCEPTS 0. Should use ValidateNumberString() to tell user proper range - if ( dialog.customsizeRadio.checked - && ( dialog.imagewidthInput.value.length > 0 ) - && ( dialog.imageheightInput.value.length > 0 ) ) + var isPercentWidth = (dialog.widthUnitsSelect.selectedIndex == 1); + var maxLimitWidth = isPercentWidth ? 100 : maxPixels; // Defined in EdDialogCommon.js + var isPercentHeight = (dialog.heightUnitsSelect.selectedIndex == 1); + var maxLimitHeight = isPercentHeight ? 100 : maxPixels; // Defined in EdDialogCommon.js + + //TODO: WE SHOULD ALWAYS SET WIDTH AND HEIGHT FOR FASTER IMAGE LAYOUT + // IF USER DOESN'T SET IT, WE NEED TO GET VALUE FROM ORIGINAL IMAGE + var width = ""; + var height = ""; + if ( dialog.customsizeRadio.checked ) { - setDimensions(); // width and height - } - else - { - //TODO: WE SHOULD ALWAYS SET WIDTH AND HEIGHT FOR FASTER IMAGE LAYOUT - // IF USER DOESN'T SET IT, WE NEED TO GET VALUE FROM ORIGINAL IMAGE - globalElement.removeAttribute( "width" ); - globalElement.removeAttribute( "height" ); + width = ValidateNumberString(dialog.widthInput.value, 1, maxLimitWidth); + if (width == "") { + dump("Image Width is empty\n"); + dialog.widthInput.focus(); + return false; + } + if (isPercentWidth) + width = width + "%"; + + height = ValidateNumberString(dialog.heightInput.value, 1, maxLimitHeight); + if (height == "") { + dump("Image Height is empty\n"); + dialog.heightInput.focus(); + return false; + } + if (isPercentHeight) + height = height + "%"; } + + dump("Image width,heigth: "+width+","+height+"\n"); + if (width.length > 0) + globalElement.setAttribute("width", width); + if (height.length > 0) + globalElement.setAttribute("width", width); // spacing attributes // All of these should use ValidateNumberString() to // ensure value is within acceptable range if ( dialog.imagelrInput.value.length > 0 ) - globalElement.setAttribute( "hspace", dialog.imagelrInput.value ); + { + var hspace = ValidateNumberString(dialog.imagelrInput.value, 0, maxPixels); + if (hspace == "") + return false; + globalElement.setAttribute( "hspace", hspace ); + } else globalElement.removeAttribute( "hspace" ); if ( dialog.imagetbInput.value.length > 0 ) - globalElement.setAttribute( "vspace", dialog.imagetbInput.value ); + { + var vspace = ValidateNumberString(dialog.imagetbInput.value, 0, maxPixels); + if (vspace == "") + return false; + globalElement.setAttribute( "vspace", vspace ); + } else globalElement.removeAttribute( "vspace" ); // note this is deprecated and should be converted to stylesheets - if ( dialog.imageborderInput.value.length > 0 ) - globalElement.setAttribute( "border", dialog.imageborderInput.value ); + if ( dialog.border.value.length > 0 ) + { + var border = ValidateNumberString(dialog.border.value, 0, maxPixels); + if (border == "") + return false; + globalElement.setAttribute( "border", border ); + } else globalElement.removeAttribute( "border" ); -// This currently triggers a "Not implemented" assertion, preventing inserting an image -// TODO: FIX THIS! -/* - alignpopup = document.getElementById("image.alignType"); - if ( alignpopup ) + // Default or setting "bottom" means don't set the attribute + var align = ""; + switch ( dialog.alignTypeSelect.selectedIndex ) { - var alignurl; - alignpopup.getAttribute( "src", alignurl ); - dump( "popup value = " + alignurl + "\n" ); - if ( alignurl == "&bottomIcon.url;" ) - globalElement.removeAttribute("align"); -// else -// globalElement.setAttribute("align", alignurl ); + case 0: + align = "top"; + break; + case 1: + align = "center"; + break; + case 3: + break; + case 4: + break; } -*/ + if (align == "") + globalElement.removeAttribute( "align" ); + else + globalElement.setAttribute( "align", align ); + return true; } @@ -526,77 +474,3 @@ function onOK() return false; } - -// setDimensions() -// sets height and width attributes to inserted image -// Brian King - XML Workshop -function setDimensions() -{ - - var wtype = dialog.imagewidthSelect.getAttribute("value"); - var htype = dialog.imageheightSelect.getAttribute("value"); - - // width - // TODO: NO! this is not the way to do it! Depends on english strings - // Instead, store which index is selected when popup "pixel" or "percent of..." is used - if (wtype.substr(0,4) == "% of") - { - //var Iwidth = eval("dialog.imagewidthInput.value + '%';"); - globalElement.setAttribute("width", dialog.imagewidthInput.value + "%"); - } - else - globalElement.setAttribute("width", dialog.imagewidthInput.value); - - //height - if (htype.substr(0,4) == "% of") - { - //var Iheight = eval("dialog.imageheightInput.value + '%';"); - globalElement.setAttribute("height", dialog.imageheightInput.value + "%"); - } - else - globalElement.setAttribute("height", dialog.imageheightInput.value); - -} - -// setPopup() -// sets height and width popups on during initialisation -// Brian King - XML Workshop - -function setPopup(dim) -{ - - select = getContainer(); - if (select.nodeName == "TD") - { - if (dim == "w") - dialog.imagewidthSelect.setAttribute("value",GetString("PercentOfCell")); - else - dialog.imageheightSelect.setAttribute("value",GetString("PercentOfCell")); - - } else - { - if (dim == "w") - dialog.imagewidthSelect.setAttribute("value",GetString("PercentOfWindow")); - else - dialog.imageheightSelect.setAttribute("value",GetString("PercentOfWindow")); - } -} - -// This function moves the selected item into view - -function popupSelectedImage( item, elementID, node ){ - -selectedItem = document.getElementById(elementID); -selectedItem.setAttribute(node, item); - - -} - -function SetPixelOrPercentByID(fu, bar){ - -dump("comming soon . . . SetPixelOrPercentByID\n\n"); - - - - -} diff --git a/editor/ui/dialogs/content/EdImageProps.xul b/editor/ui/dialogs/content/EdImageProps.xul index 14619313cc9..08a8a203c19 100644 --- a/editor/ui/dialogs/content/EdImageProps.xul +++ b/editor/ui/dialogs/content/EdImageProps.xul @@ -36,620 +36,369 @@ xmlns:xul ="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns="http://www.w3.org/TR/REC-html40" onload = "Startup()" - align="vertical" - style="width: auto; height: auto;"> - - - - - -