extensions/editor/cascades/resources/content/specificCSSProps.js

   1 /* ***** BEGIN LICENSE BLOCK *****
   2  * Version: MPL 1.1/GPL 2.0/LGPL 2.1
   3  *
   4  * The contents of this file are subject to the Mozilla Public License Version
   5  * 1.1 (the "License"); you may not use this file except in compliance with
   6  * the License. You may obtain a copy of the License at
   7  * http://www.mozilla.org/MPL/
   8  *
   9  * Software distributed under the License is distributed on an "AS IS" basis,
  10  * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
  11  * for the specific language governing rights and limitations under the
  12  * License.
  13  *
  14  * The Original Code is CaScadeS, a stylesheet editor for Composer.
  15  *
  16  * The Initial Developer of the Original Code is
  17  * Daniel Glazman.
  18  * Portions created by the Initial Developer are Copyright (C) 2002
  19  * the Initial Developer. All Rights Reserved.
  20  *
  21  * Contributor(s):
  22  *   Original author: Daniel Glazman <daniel@glazman.org>
  23  *
  24  * Alternatively, the contents of this file may be used under the terms of
  25  * either the GNU General Public License Version 2 or later (the "GPL"), or
  26  * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
  27  * in which case the provisions of the GPL or the LGPL are applicable instead
  28  * of those above. If you wish to allow use of your version of this file only
  29  * under the terms of either the GPL or the LGPL, and not to allow others to
  30  * use your version of this file under the terms of the MPL, indicate your
  31  * decision by deleting the provisions above and replace them with the notice
  32  * and other provisions required by the GPL or the LGPL. If you do not delete
  33  * the provisions above, a recipient may use your version of this file under
  34  * the terms of any one of the MPL, the GPL or the LGPL.
  35  *
  36  * ***** END LICENSE BLOCK ***** */
  37
  38 var gTimerID;
  39
  40 const styleStr  = "style";
  41
  42 var textColor, backgroundColor;
  43 var gHaveDocumentUrl = false;
  44 var predefSelector = "";
  45
  46 var gPanel         = "";
  47 var gOriginalStyle = "";
  48
  49 // const COMPATIBILITY_TAB = 1;
  50 const GENERAL_TAB       = 2;
  51 const TEXT_TAB          = 3;
  52 const BACKGROUND_TAB    = 4;
  53 const BORDER_TAB        = 5;
  54 const BOX_TAB           = 6;
  55 const AURAL_TAB         = 7;
  56
  57 function doDump(text, value) {
  58   dump("===> " + text + " : " + value + "\n");
  59 }
  60
  61 // dialog initialization code
  62 function Startup()
  63 {
  64   // are we in a pre-1.3 Mozilla ?
  65   if (typeof window.InitEditorShell == "function") {
  66     // yes, so let's get an editorshell
  67     if (!InitEditorShell())
  68       return;
  69   }
  70   else if (typeof window.GetCurrentEditor != "function" || !GetCurrentEditor()) {
  71     window.close();
  72     return;
  73   }
  74
  75   var title                     = "Styles";
  76   gDialog.selectionBased        = false;
  77   gDialog.isSelectionCollapsed  = false;
  78   gDialog.selectionInSingleLine = false;
  79
  80   // if a title was provided at window creation, let's use it
  81   if ("arguments" in window && window.arguments.length >= 3) {
  82     gPanel       = window.arguments[0];
  83     title        = window.arguments[1];
  84     gDialog.selectionBased = window.arguments[2];
  85   }
  86   var w = document.getElementById("specificCssPropsWindow");
  87   if (!w || !gPanel) // we should never hit this but let's be paranoid...
  88     return;
  89   w.setAttribute("title", title);
  90
  91   // gDialog is declared in EdDialogCommon.js
  92   // Set commonly-used widgets like this:
  93   gDialog.textTab                       = document.getElementById("textTab");
  94   gDialog.brownFoxLabel                 = document.getElementById("brownFoxLabel");
  95   gDialog.backgroundImageInput          = document.getElementById("backgroundImageInput");
  96   gDialog.backgroundPreview             = document.getElementById("backgroundPreview");
  97   gDialog.sheetTabbox                   = document.getElementById("sheetTabbox");
  98   gDialog.backgroundColorInput          = document.getElementById("backgroundColorInput");
  99   gDialog.textColorInput                = document.getElementById("textColorInput");
 100   gDialog.backgroundRepeatMenulist      = document.getElementById("backgroundRepeatMenulist");
 101   gDialog.backgroundAttachmentCheckbox  = document.getElementById("backgroundAttachmentCheckbox");
 102   gDialog.xBackgroundPositionRadiogroup = document.getElementById("xBackgroundPositionRadiogroup");
 103   gDialog.yBackgroundPositionRadiogroup = document.getElementById("yBackgroundPositionRadiogroup");
 104   gDialog.fontFamilyRadiogroup          = document.getElementById("fontFamilyRadiogroup");
 105   gDialog.customFontFamilyInput         = document.getElementById("customFontFamilyInput");
 106   gDialog.predefFontFamilyMenulist      = document.getElementById("predefFontFamilyMenulist");
 107   gDialog.fontSizeInput                 = document.getElementById("fontSizeInput");
 108   gDialog.lineHeightInput               = document.getElementById("lineHeightInput");
 109   gDialog.textUnderlineCheckbox         = document.getElementById("underlineTextDecorationCheckbox");
 110   gDialog.textOverlineCheckbox          = document.getElementById("overlineTextDecorationCheckbox");
 111   gDialog.textLinethroughCheckbox       = document.getElementById("linethroughTextDecorationCheckbox");
 112   gDialog.textBlinkCheckbox             = document.getElementById("blinkTextDecorationCheckbox");
 113   gDialog.noDecorationCheckbox          = document.getElementById("noneTextDecorationCheckbox");
 114
 115   gDialog.topBorderStyleMenulist        = document.getElementById("topBorderStyleMenulist");
 116   gDialog.topBorderWidthInput           = document.getElementById("topBorderWidthInput");
 117   gDialog.topBorderColorInput           = document.getElementById("topBorderColorInput");
 118
 119   gDialog.leftBorderStyleMenulist       = document.getElementById("leftBorderStyleMenulist");
 120   gDialog.leftBorderWidthInput          = document.getElementById("leftBorderWidthInput");
 121   gDialog.leftBorderColorInput          = document.getElementById("leftBorderColorInput");
 122
 123   gDialog.rightBorderStyleMenulist      = document.getElementById("rightBorderStyleMenulist");
 124   gDialog.rightBorderWidthInput         = document.getElementById("rightBorderWidthInput");
 125   gDialog.rightBorderColorInput         = document.getElementById("rightBorderColorInput");
 126
 127   gDialog.bottomBorderStyleMenulist     = document.getElementById("bottomBorderStyleMenulist");
 128   gDialog.bottomBorderWidthInput        = document.getElementById("bottomBorderWidthInput");
 129   gDialog.bottomBorderColorInput        = document.getElementById("bottomBorderColorInput");
 130
 131   gDialog.allFourBordersSame            = document.getElementById("allFourBordersSame");
 132   gDialog.borderPreview                 = document.getElementById("borderPreview");
 133
 134   gDialog.volumeScrollbar               = document.getElementById("volumeScrollbar");
 135   gDialog.volumeMenulist                = document.getElementById("volumeMenulist");
 136   gDialog.muteVolumeCheckbox            = document.getElementById("muteVolumeCheckbox");
 137
 138   gDialog.opacityScrollbar              = document.getElementById("opacityScrollbar");
 139   gDialog.opacityLabel                  = document.getElementById("opacityLabel");
 140
 141   gDialog.modified = false;
 142   gDialog.selectedIndex = -1;
 143
 144   var elt;
 145   if (gDialog.selectionBased)
 146   {
 147     var editor = GetCurrentEditor();
 148     var selection = editor.selection;
 149     gDialog.isSelectionCollapsed = selection.isCollapsed;
 150     if (gDialog.isSelectionCollapsed) {
 151       elt = selection.focusNode;
 152       while (!editor.nodeIsBlock(elt))
 153         elt = elt.parentNode;
 154     }
 155     else
 156     {
 157       var range = selection.getRangeAt(0);
 158       var startNode = range.startContainer;
 159       var startOffset = range.startOffset;
 160       if (startNode.nodeType != Node.TEXT_NODE)
 161         elt = startNode.childNodes.item(startOffset);
 162       else
 163         elt = startNode;
 164     }
 165   }
 166   else
 167   {
 168     elt = window.opener.gContextMenuFiringDocumentElement;
 169   }
 170
 171   if (!elt) return;
 172
 173   if (elt.nodeType == Node.TEXT_NODE)
 174     elt = elt.parentNode;
 175
 176   if (gDialog.selectionBased &&
 177       gDialog.isSelectionCollapsed &&
 178       elt.nodeName.toLowerCase() == "body")
 179   {
 180     // the selection is collapsed in a line directly contained in the BODY
 181     gDialog.selectionInSingleLine = true;
 182     elt = GetCurrentEditor().document.createElement("div");
 183   }
 184
 185   gDialog.selectedObject = elt;
 186   gDialog.selectedHasStyle = elt.hasAttribute("style");
 187   if (gDialog.selectedHasStyle)
 188     gDialog.selectedStyle = elt.getAttribute("style");
 189   gDialog.selectedSheet  = null;
 190
 191   InitDialog();
 192
 193   if (gDialog.selectionBased && !gDialog.isSelectionCollapsed)
 194   {
 195     gDialog.selectedObject = GetCurrentEditor().document.createElement("div");
 196   }
 197
 198   // Set window location relative to parent window (based on persisted attributes)
 199   SetWindowLocation();
 200
 201   // Set focus to first widget in dialog, e.g.:
 202 }
 203
 204 function DisableTabIfNotSpecified(id, tabs, firstTab)
 205 {
 206   if (tabs.indexOf(id) == -1) {
 207     /* disable the corresponding tab */
 208     var elt = document.getElementById( id + "Tab" );
 209     elt.setAttribute("collapsed", "true");
 210   }
 211   else
 212     firstTab = id;
 213   return firstTab;
 214 }
 215
 216 function InitDialog()
 217 {
 218   switch (gPanel) {
 219     case "border":
 220       InitBorderTabPanel();
 221       break;
 222     case "text":
 223       InitTextTabPanel();
 224       break;
 225     case "background":
 226       InitBackgroundTabPanel();
 227       break;
 228     case "box":
 229       InitBoxTabPanel();
 230       break;
 231     case "aural":
 232       InitAuralTabPanel();
 233       break;
 234     default:
 235       break;
 236   }
 237 }
 238
 239 function getSelectedBlock()
 240 {
 241   var anchorNode = editorShell.editorSelection.anchorNode;
 242   if (!anchorNode) return null;
 243   var node;
 244   if (anchorNode.firstChild)
 245   {
 246     // Start at actual selected node
 247     var offset = editorShell.editorSelection.anchorOffset;
 248     // Note: If collapsed, offset points to element AFTER caret,
 249     //  thus node may be null
 250     node = anchorNode.childNodes.item(offset);
 251   }
 252   if (!node)
 253     node = anchorNode;
 254
 255   while (!nodeIsBlock(node) && node.nodeName.toLowerCase() != "body") {
 256     node = node.parentNode;
 257   }
 258   if (node.nodeName.toLowerCase() == "body") {
 259     node = null;
 260   }
 261   return node;
 262 }
 263
 264 function nodeIsBlock(node)
 265 {
 266   // HR doesn't count because it's not a container
 267   return !node || (node.localName != 'HR' && editorShell.NodeIsBlock(node));
 268 }
 269
 270 function SetModifiedFlagOnStylesheet()
 271 {
 272   /* STUB */
 273 }
 274
 275 function FlushChanges()
 276 {
 277   var editor = GetCurrentEditor();
 278   editor.incrementModificationCount(1);
 279
 280   if (gDialog.selectionBased)
 281   {
 282     var selection = editor.selection;
 283
 284     // we still have to update the selection, the preview is not "live",
 285     // with the styles hold by gDialog.selectedObject
 286
 287     var elt;
 288     if (gDialog.isSelectionCollapsed)
 289     {
 290       // do we have to create a block here or not ?
 291       editor.beginTransaction();
 292       if (gDialog.selectionInSingleLine)
 293       {
 294         // yes, need to create a div around the line
 295         editor.setParagraphFormat("div");
 296       }
 297       elt = selection.focusNode;
 298       while (!editor.nodeIsBlock(elt))
 299         elt = elt.parentNode;
 300       editor.setAttribute(elt, styleStr, gDialog.selectedObject.getAttribute(styleStr));
 301       editor.endTransaction();
 302     }
 303     else
 304     {
 305       // nope, the selection is already in a block, nothing to do here
 306       // the preview is live
 307       // let's reuse Absolute Positioning code here
 308       editor.makeComplexBlock(gDialog.selectedObject.getAttribute(styleStr));
 309     }
 310   }
 311 }
 312
 313 function CancelChanges()
 314 {
 315   if (gDialog.selectedHasStyle)
 316     gDialog.selectedObject.setAttribute("style", gDialog.selectedStyle);
 317   else
 318     gDialog.selectedObject.removeAttribute("style");
 319 }