diff options
Diffstat (limited to 'comm/mail/components/compose/content/dialogs/EdColorProps.js')
| -rw-r--r-- | comm/mail/components/compose/content/dialogs/EdColorProps.js | 476 |
1 files changed, 476 insertions, 0 deletions
diff --git a/comm/mail/components/compose/content/dialogs/EdColorProps.js b/comm/mail/components/compose/content/dialogs/EdColorProps.js new file mode 100644 index 0000000000..c2635912d5 --- /dev/null +++ b/comm/mail/components/compose/content/dialogs/EdColorProps.js @@ -0,0 +1,476 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* + Behavior notes: + Radio buttons select "UseDefaultColors" vs. "UseCustomColors" modes. + If any color attribute is set in the body, mode is "Custom Colors", + even if 1 or more (but not all) are actually null (= "use default") + When in "Custom Colors" mode, all colors will be set on body tag, + even if they are just default colors, to assure compatible colors in page. + User cannot select "use default" for individual colors +*/ + +/* import-globals-from ../editorUtilities.js */ +/* import-globals-from EdDialogCommon.js */ + +// Cancel() is in EdDialogCommon.js + +document.addEventListener("dialogaccept", onAccept); +document.addEventListener("dialogcancel", onCancel); + +var gBodyElement; +var prefs; +var gBackgroundImage; + +// Initialize in case we can't get them from prefs??? +var defaultTextColor = "#000000"; +var defaultLinkColor = "#000099"; +var defaultActiveColor = "#000099"; +var defaultVisitedColor = "#990099"; +var defaultBackgroundColor = "#FFFFFF"; +const styleStr = "style"; +const textStr = "text"; +const linkStr = "link"; +const vlinkStr = "vlink"; +const alinkStr = "alink"; +const bgcolorStr = "bgcolor"; +const backgroundStr = "background"; +const cssColorStr = "color"; +const cssBackgroundColorStr = "background-color"; +const cssBackgroundImageStr = "background-image"; +const colorStyle = cssColorStr + ": "; +const backColorStyle = cssBackgroundColorStr + ": "; +const backImageStyle = "; " + cssBackgroundImageStr + ": url("; + +var customTextColor; +var customLinkColor; +var customActiveColor; +var customVisitedColor; +var customBackgroundColor; +var previewBGColor; + +// dialog initialization code +function Startup() { + var editor = GetCurrentEditor(); + if (!editor) { + window.close(); + return; + } + + gDialog.ColorPreview = document.getElementById("ColorPreview"); + gDialog.NormalText = document.getElementById("NormalText"); + gDialog.LinkText = document.getElementById("LinkText"); + gDialog.ActiveLinkText = document.getElementById("ActiveLinkText"); + gDialog.VisitedLinkText = document.getElementById("VisitedLinkText"); + gDialog.PageColorGroup = document.getElementById("PageColorGroup"); + gDialog.DefaultColorsRadio = document.getElementById("DefaultColorsRadio"); + gDialog.CustomColorsRadio = document.getElementById("CustomColorsRadio"); + gDialog.BackgroundImageInput = document.getElementById( + "BackgroundImageInput" + ); + + try { + gBodyElement = editor.rootElement; + } catch (e) {} + + if (!gBodyElement) { + dump("Failed to get BODY element!\n"); + window.close(); + } + + // Set element we will edit + globalElement = gBodyElement.cloneNode(false); + + // Initialize default colors from browser prefs + var browserColors = GetDefaultBrowserColors(); + if (browserColors) { + // Use author's browser pref colors passed into dialog + defaultTextColor = browserColors.TextColor; + defaultLinkColor = browserColors.LinkColor; + defaultActiveColor = browserColors.ActiveLinkColor; + defaultVisitedColor = browserColors.VisitedLinkColor; + defaultBackgroundColor = browserColors.BackgroundColor; + } + + // We only need to test for this once per dialog load + gHaveDocumentUrl = GetDocumentBaseUrl(); + + InitDialog(); + + gDialog.PageColorGroup.focus(); + + SetWindowLocation(); +} + +function InitDialog() { + // Get image from document + gBackgroundImage = GetHTMLOrCSSStyleValue( + globalElement, + backgroundStr, + cssBackgroundImageStr + ); + if (/url\((.*)\)/.test(gBackgroundImage)) { + gBackgroundImage = RegExp.$1; + } + + if (gBackgroundImage) { + // Shorten data URIs for display. + shortenImageData(gBackgroundImage, gDialog.BackgroundImageInput); + gDialog.ColorPreview.setAttribute( + styleStr, + backImageStyle + gBackgroundImage + ");" + ); + } + + SetRelativeCheckbox(); + + customTextColor = GetHTMLOrCSSStyleValue(globalElement, textStr, cssColorStr); + customTextColor = ConvertRGBColorIntoHEXColor(customTextColor); + customLinkColor = globalElement.getAttribute(linkStr); + customActiveColor = globalElement.getAttribute(alinkStr); + customVisitedColor = globalElement.getAttribute(vlinkStr); + customBackgroundColor = GetHTMLOrCSSStyleValue( + globalElement, + bgcolorStr, + cssBackgroundColorStr + ); + customBackgroundColor = ConvertRGBColorIntoHEXColor(customBackgroundColor); + + var haveCustomColor = + customTextColor || + customLinkColor || + customVisitedColor || + customActiveColor || + customBackgroundColor; + + // Set default color explicitly for any that are missing + // PROBLEM: We are using "windowtext" and "window" for the Windows OS + // default color values. This works with CSS in preview window, + // but we should NOT use these as values for HTML attributes! + + if (!customTextColor) { + customTextColor = defaultTextColor; + } + if (!customLinkColor) { + customLinkColor = defaultLinkColor; + } + if (!customActiveColor) { + customActiveColor = defaultActiveColor; + } + if (!customVisitedColor) { + customVisitedColor = defaultVisitedColor; + } + if (!customBackgroundColor) { + customBackgroundColor = defaultBackgroundColor; + } + + if (haveCustomColor) { + // If any colors are set, then check the "Custom" radio button + gDialog.PageColorGroup.selectedItem = gDialog.CustomColorsRadio; + UseCustomColors(); + } else { + gDialog.PageColorGroup.selectedItem = gDialog.DefaultColorsRadio; + UseDefaultColors(); + } +} + +function GetColorAndUpdate(ColorWellID) { + // Only allow selecting when in custom mode + if (!gDialog.CustomColorsRadio.selected) { + return; + } + + var colorWell = document.getElementById(ColorWellID); + if (!colorWell) { + return; + } + + // Don't allow a blank color, i.e., using the "default" + var colorObj = { + NoDefault: true, + Type: "", + TextColor: 0, + PageColor: 0, + Cancel: false, + }; + + switch (ColorWellID) { + case "textCW": + colorObj.Type = "Text"; + colorObj.TextColor = customTextColor; + break; + case "linkCW": + colorObj.Type = "Link"; + colorObj.TextColor = customLinkColor; + break; + case "activeCW": + colorObj.Type = "ActiveLink"; + colorObj.TextColor = customActiveColor; + break; + case "visitedCW": + colorObj.Type = "VisitedLink"; + colorObj.TextColor = customVisitedColor; + break; + case "backgroundCW": + colorObj.Type = "Page"; + colorObj.PageColor = customBackgroundColor; + break; + } + + window.openDialog( + "chrome://messenger/content/messengercompose/EdColorPicker.xhtml", + "_blank", + "chrome,close,titlebar,modal", + "", + colorObj + ); + + // User canceled the dialog + if (colorObj.Cancel) { + return; + } + + var color = ""; + switch (ColorWellID) { + case "textCW": + color = customTextColor = colorObj.TextColor; + break; + case "linkCW": + color = customLinkColor = colorObj.TextColor; + break; + case "activeCW": + color = customActiveColor = colorObj.TextColor; + break; + case "visitedCW": + color = customVisitedColor = colorObj.TextColor; + break; + case "backgroundCW": + color = customBackgroundColor = colorObj.BackgroundColor; + break; + } + + setColorWell(ColorWellID, color); + SetColorPreview(ColorWellID, color); +} + +function SetColorPreview(ColorWellID, color) { + switch (ColorWellID) { + case "textCW": + gDialog.NormalText.setAttribute(styleStr, colorStyle + color); + break; + case "linkCW": + gDialog.LinkText.setAttribute(styleStr, colorStyle + color); + break; + case "activeCW": + gDialog.ActiveLinkText.setAttribute(styleStr, colorStyle + color); + break; + case "visitedCW": + gDialog.VisitedLinkText.setAttribute(styleStr, colorStyle + color); + break; + case "backgroundCW": + // Must combine background color and image style values + var styleValue = backColorStyle + color; + if (gBackgroundImage) { + styleValue += ";" + backImageStyle + gBackgroundImage + ");"; + } + + gDialog.ColorPreview.setAttribute(styleStr, styleValue); + previewBGColor = color; + break; + } +} + +function UseCustomColors() { + SetElementEnabledById("TextButton", true); + SetElementEnabledById("LinkButton", true); + SetElementEnabledById("ActiveLinkButton", true); + SetElementEnabledById("VisitedLinkButton", true); + SetElementEnabledById("BackgroundButton", true); + SetElementEnabledById("Text", true); + SetElementEnabledById("Link", true); + SetElementEnabledById("Active", true); + SetElementEnabledById("Visited", true); + SetElementEnabledById("Background", true); + + SetColorPreview("textCW", customTextColor); + SetColorPreview("linkCW", customLinkColor); + SetColorPreview("activeCW", customActiveColor); + SetColorPreview("visitedCW", customVisitedColor); + SetColorPreview("backgroundCW", customBackgroundColor); + + setColorWell("textCW", customTextColor); + setColorWell("linkCW", customLinkColor); + setColorWell("activeCW", customActiveColor); + setColorWell("visitedCW", customVisitedColor); + setColorWell("backgroundCW", customBackgroundColor); +} + +function UseDefaultColors() { + SetColorPreview("textCW", defaultTextColor); + SetColorPreview("linkCW", defaultLinkColor); + SetColorPreview("activeCW", defaultActiveColor); + SetColorPreview("visitedCW", defaultVisitedColor); + SetColorPreview("backgroundCW", defaultBackgroundColor); + + // Setting to blank color will remove color from buttons, + setColorWell("textCW", ""); + setColorWell("linkCW", ""); + setColorWell("activeCW", ""); + setColorWell("visitedCW", ""); + setColorWell("backgroundCW", ""); + + // Disable color buttons and labels + SetElementEnabledById("TextButton", false); + SetElementEnabledById("LinkButton", false); + SetElementEnabledById("ActiveLinkButton", false); + SetElementEnabledById("VisitedLinkButton", false); + SetElementEnabledById("BackgroundButton", false); + SetElementEnabledById("Text", false); + SetElementEnabledById("Link", false); + SetElementEnabledById("Active", false); + SetElementEnabledById("Visited", false); + SetElementEnabledById("Background", false); +} + +function chooseFile() { + // Get a local image file, converted into URL format + GetLocalFileURL("img").then(fileURL => { + // Always try to relativize local file URLs + if (gHaveDocumentUrl) { + fileURL = MakeRelativeUrl(fileURL); + } + + gDialog.BackgroundImageInput.value = fileURL; + + SetRelativeCheckbox(); + ValidateAndPreviewImage(true); + SetTextboxFocus(gDialog.BackgroundImageInput); + }); +} + +function ChangeBackgroundImage() { + // Don't show error message for image while user is typing + ValidateAndPreviewImage(false); + SetRelativeCheckbox(); +} + +function ValidateAndPreviewImage(ShowErrorMessage) { + // First make a string with just background color + var styleValue = backColorStyle + previewBGColor + ";"; + + var retVal = true; + var image = TrimString(gDialog.BackgroundImageInput.value); + if (image) { + if (isImageDataShortened(image)) { + gBackgroundImage = restoredImageData(gDialog.BackgroundImageInput); + } else { + gBackgroundImage = image; + + // Display must use absolute URL if possible + var displayImage = gHaveDocumentUrl ? MakeAbsoluteUrl(image) : image; + styleValue += backImageStyle + displayImage + ");"; + } + } else { + gBackgroundImage = null; + } + + // Set style on preview (removes image if not valid) + gDialog.ColorPreview.setAttribute(styleStr, styleValue); + + // Note that an "empty" string is valid + return retVal; +} + +function ValidateData() { + var editor = GetCurrentEditor(); + try { + // Colors values are updated as they are picked, no validation necessary + if (gDialog.DefaultColorsRadio.selected) { + editor.removeAttributeOrEquivalent(globalElement, textStr, true); + globalElement.removeAttribute(linkStr); + globalElement.removeAttribute(vlinkStr); + globalElement.removeAttribute(alinkStr); + editor.removeAttributeOrEquivalent(globalElement, bgcolorStr, true); + } else { + // Do NOT accept the CSS "WindowsOS" color strings! + // Problem: We really should try to get the actual color values + // from windows, but I don't know how to do that! + var tmpColor = customTextColor.toLowerCase(); + if (tmpColor != "windowtext") { + editor.setAttributeOrEquivalent( + globalElement, + textStr, + customTextColor, + true + ); + } else { + editor.removeAttributeOrEquivalent(globalElement, textStr, true); + } + + tmpColor = customBackgroundColor.toLowerCase(); + if (tmpColor != "window") { + editor.setAttributeOrEquivalent( + globalElement, + bgcolorStr, + customBackgroundColor, + true + ); + } else { + editor.removeAttributeOrEquivalent(globalElement, bgcolorStr, true); + } + + globalElement.setAttribute(linkStr, customLinkColor); + globalElement.setAttribute(vlinkStr, customVisitedColor); + globalElement.setAttribute(alinkStr, customActiveColor); + } + + if (ValidateAndPreviewImage(true)) { + // A valid image may be null for no image + if (gBackgroundImage) { + globalElement.setAttribute(backgroundStr, gBackgroundImage); + } else { + editor.removeAttributeOrEquivalent(globalElement, backgroundStr, true); + } + + return true; + } + } catch (e) {} + return false; +} + +function onAccept(event) { + // If it's a file, convert to a data URL. + if (gBackgroundImage && /^file:/i.test(gBackgroundImage)) { + let nsFile = Services.io + .newURI(gBackgroundImage) + .QueryInterface(Ci.nsIFileURL).file; + if (nsFile.exists()) { + let reader = new FileReader(); + reader.addEventListener("load", function () { + gBackgroundImage = reader.result; + gDialog.BackgroundImageInput.value = reader.result; + if (onAccept(event)) { + window.close(); + } + }); + File.createFromNsIFile(nsFile).then(file => { + reader.readAsDataURL(file); + }); + event.preventDefault(); // Don't close just yet... + return false; + } + } + if (ValidateData()) { + // Copy attributes to element we are changing + try { + GetCurrentEditor().cloneAttributes(gBodyElement, globalElement); + } catch (e) {} + + SaveWindowLocation(); + return true; // do close the window + } + event.preventDefault(); + return false; +} |