base/content/bluegriffon/bindings/cssToggler.xml

   1 <?xml version="1.0"?>
   2
   3 <!-- ***** BEGIN LICENSE BLOCK *****
   4    - Version: MPL 1.1/GPL 2.0/LGPL 2.1
   5    -
   6    - The contents of this file are subject to the Mozilla Public License Version
   7    - 1.1 (the "License"); you may not use this file except in compliance with
   8    - the License. You may obtain a copy of the License at
   9    - http://www.mozilla.org/MPL/
  10    -
  11    - Software distributed under the License is distributed on an "AS IS" basis,
  12    - WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
  13    - for the specific language governing rights and limitations under the
  14    - License.
  15    -
  16    - The Original Code is BlueGriffon.
  17    -
  18    - The Initial Developer of the Original Code is
  19    - Disruptive Innovations SARL.
  20    - Portions created by the Initial Developer are Copyright (C) 2008
  21    - the Initial Developer. All Rights Reserved.
  22    -
  23    - Contributor(s):
  24    -   Daniel Glazman (daniel.glazman@disruptive-innovations.com), Original Author
  25    -
  26    - Alternatively, the contents of this file may be used under the terms of
  27    - either the GNU General Public License Version 2 or later (the "GPL"), or
  28    - the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
  29    - in which case the provisions of the GPL or the LGPL are applicable instead
  30    - of those above. If you wish to allow use of your version of this file only
  31    - under the terms of either the GPL or the LGPL, and not to allow others to
  32    - use your version of this file under the terms of the MPL, indicate your
  33    - decision by deleting the provisions above and replace them with the notice
  34    - and other provisions required by the LGPL or the GPL. If you do not delete
  35    - the provisions above, a recipient may use your version of this file under
  36    - the terms of any one of the MPL, the GPL or the LGPL.
  37    -
  38    - ***** END LICENSE BLOCK ***** -->
  39
  40 <!DOCTYPE bindings [
  41   <!ENTITY % cssTogglerDTD SYSTEM "chrome://bluegriffon/locale/cssToggler.dtd" >
  42   %cssTogglerDTD;
  43 ]>
  44 <bindings id="cssTogglerBindings"
  45           xmlns="http://www.mozilla.org/xbl"
  46           xmlns:html="http://www.w3.org/1999/xhtml"
  47           xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  48           xmlns:xbl="http://www.mozilla.org/xbl">
  49
  50   <binding id="cssToggler">
  51
  52     <resources>
  53       <stylesheet src="chrome://bluegriffon/skin/cssToggler.css"/>
  54     </resources>
  55
  56     <content>
  57       <xul:hbox align="center" anonid="prefBox">
  58         <xul:label value="&cssPolicy.label;"/>
  59         <xul:menulist oncommand="this.parentNode.parentNode.toggle()"
  60                       anonid="cssPolicy">
  61           <xul:menupopup>
  62             <xul:menuitem label="&htmlAttr.label;"
  63                           value="0"/>
  64             <xul:menuitem label="&inlineStyles.label;"
  65                           value="1"/>
  66             <xul:menuitem label="&cssRules.label;"
  67                           value="2"/>
  68             <xul:menuitem label="&reuseExistingStyle.label;"
  69                           value="3"/>
  70           </xul:menupopup>
  71         </xul:menulist>
  72       </xul:hbox>
  73       <xul:groupbox anonid="idBox" collapsed="true">
  74         <xul:caption label="&styleRule.label;"/>
  75         <xul:description>&mandatoryId.description;</xul:description>
  76         <xul:grid flex="1">
  77           <xul:columns><xul:column /><xul:column flex="1"/><xul:column/></xul:columns>
  78           <xul:rows>
  79             <xul:row align="center">
  80               <xul:label value="&idList.label;"/>
  81               <xul:textbox anonid="idTextbox" flex="1"
  82                            oninput="onIdOrClassBoxChange()"/>
  83               <xul:button label="&pickOne.button;"
  84                           oncommand="pickId(mIdTextBox)"/>
  85             </xul:row>
  86             <xul:row align="center">
  87               <xul:label value="&classList.label;"/>
  88               <xul:textbox anonid="classTextbox" flex="1"
  89                            oninput="onIdOrClassBoxChange()"/>
  90               <xul:button label="&pickOne.button;"
  91                           oncommand="pickId(mClassTextBox)"/>
  92             </xul:row>
  93           </xul:rows>
  94         </xul:grid>
  95         <xul:label value="&existingId.alert;" class="hiddenAlert" anonid="existingIdAlert"/>
  96       </xul:groupbox>
  97       <xul:groupbox anonid="reuseStylesBox" collapsed="true">
  98         <xul:caption label="&reuseExistingStyle.label;"/>
  99         <xul:grid flex="1">
 100           <xul:columns><xul:column/><xul:column/></xul:columns>
 101           <xul:rows>
 102             <xul:row align="center">
 103               <xul:label value="&classList.label;"/>
 104               <xul:menulist anonid="ClassList"
 105                             oncommand="onClassOrIdChange()">
 106                 <xul:menupopup id="ClassPopup" onpopupshowing="initClassMenu(this, false);"/>
 107               </xul:menulist>
 108             </xul:row>
 109             <xul:row align="center">
 110               <xul:label value="&idList.label;"/>
 111               <xul:menulist anonid="IDList"
 112                             oncommand="onClassOrIdChange()">
 113                 <xul:menupopup id="ClassPopup" onpopupshowing="initIdMenu(this);"/>
 114               </xul:menulist>
 115             </xul:row>
 116           </xul:rows>
 117         </xul:grid>
 118       </xul:groupbox>
 119       <xul:box anonid="childrenBox" collapsed="true" orient="vertical">
 120         <children/>
 121       </xul:box>
 122     </content>
 123
 124     <implementation>
 125
 126       <property name="cssPolicy"
 127                 readonly="true"
 128                 onget="return parseInt(this.mCSSPolicy.value)" />
 129
 130       <property name="reusedID"
 131                 readonly="true"
 132                 onget="return this.mIDList.value" />
 133       <property name="reusedClass"
 134                 readonly="true"
 135                 onget="return this.mClassList.value" />
 136
 137       <property name="newID"
 138                 readonly="true"
 139                 onget="return this.mIdTextBox.value" />
 140       <property name="newClass"
 141                 readonly="true"
 142                 onget="return this.mClassTextBox.value" />
 143
 144
 145       <property name="mCSSPolicy"
 146                 readonly="true"
 147                 onget="return document.getAnonymousElementByAttribute(this, 'anonid', 'cssPolicy')" />
 148
 149       <property name="mChildrenBox"
 150                 readonly="true"
 151                 onget="return document.getAnonymousElementByAttribute(this, 'anonid', 'childrenBox')" />
 152
 153       <property name="mIdBox"
 154                 readonly="true"
 155                 onget="return document.getAnonymousElementByAttribute(this, 'anonid', 'idBox')" />
 156
 157       <property name="mIdTextBox"
 158                 readonly="true"
 159                 onget="return document.getAnonymousElementByAttribute(this, 'anonid', 'idTextbox')" />
 160
 161       <property name="mClassTextBox"
 162                 readonly="true"
 163                 onget="return document.getAnonymousElementByAttribute(this, 'anonid', 'classTextbox')" />
 164
 165       <property name="mReuseStylesBox"
 166                 readonly="true"
 167                 onget="return document.getAnonymousElementByAttribute(this, 'anonid', 'reuseStylesBox')" />
 168
 169       <property name="mIDList"
 170                 readonly="true"
 171                 onget="return document.getAnonymousElementByAttribute(this, 'anonid', 'IDList')" />
 172
 173       <property name="mClassList"
 174                 readonly="true"
 175                 onget="return document.getAnonymousElementByAttribute(this, 'anonid', 'ClassList')" />
 176
 177       <property name="mExistingIdAlert"
 178                 readonly="true"
 179                 onget="return document.getAnonymousElementByAttribute(this, 'anonid', 'existingIdAlert')" />
 180
 181       <constructor>
 182         <![CDATA[
 183           //this.init();
 184         ]]>
 185       </constructor>
 186
 187       <method name="init">
 188         <body>
 189         <![CDATA[
 190           var useCssPref = 0;
 191           try {
 192             var useCssPref = GetPrefs().getIntPref("bluegriffon.css.policy");
 193           }
 194           catch(e) {}
 195           this.mCSSPolicy.value = useCssPref;
 196           // adapt dialog depending on the pref
 197           this.showOrHideBoxes(useCssPref);
 198         ]]>
 199         </body>
 200       </method>
 201
 202       <method name="toggle">
 203         <body>
 204         <![CDATA[
 205           // get user's choice for CSS policy
 206           var useCssPref = parseInt(this.mCSSPolicy.value);
 207           try {
 208             // early way out if no change
 209             if (GetPrefs().getIntPref("bluegriffon.css.policy") == useCssPref)
 210               return;
 211           }
 212           catch(e) {}
 213
 214           // save in pref
 215           try {
 216             GetPrefs().setIntPref("bluegriffon.css.policy", useCssPref);
 217           }
 218           catch(e) {}
 219
 220           // update dialog
 221           this.showOrHideBoxes(useCssPref);
 222         ]]>
 223         </body>
 224       </method>
 225
 226       <method name="showOrHideBoxes">
 227         <parameter name="useCssPref"/>
 228         <body>
 229         <![CDATA[
 230           switch(useCssPref)
 231           {
 232             case 3: // reuse existing CSS rule
 233               this.mChildrenBox.setAttribute("collapsed", "true");
 234               this.mIdBox.setAttribute("collapsed", "true");
 235               this.mReuseStylesBox.removeAttribute("collapsed");
 236               initClassMenu(this.mClassList.menupopup, false);
 237               initIdMenu(this.mIDList.menupopup);
 238               this.onClassOrIdChange(this.mClassList);
 239               break;
 240             case 2: // create style rules if possible
 241               this.mChildrenBox.removeAttribute("collapsed");
 242               this.mIdBox.removeAttribute("collapsed");
 243               this.mReuseStylesBox.setAttribute("collapsed", "true");
 244               this.onIdOrClassBoxChange();
 245               break;
 246             case 1: // create inline styles if possible
 247               this.mChildrenBox.removeAttribute("collapsed");
 248               this.mIdBox.setAttribute("collapsed", "true");
 249               this.mReuseStylesBox.setAttribute("collapsed", "true");
 250               document.documentElement.getButton("accept").removeAttribute("disabled");
 251               this.enableControls(true);
 252               break;
 253             case 0: // OMG, user really wants HTML attributes, OMG!!!
 254               this.mChildrenBox.setAttribute("collapsed", "true");
 255               this.mIdBox.setAttribute("collapsed", "true");
 256               this.mReuseStylesBox.setAttribute("collapsed", "true");
 257               document.documentElement.getButton("accept").removeAttribute("disabled");
 258               this.enableControls(true);
 259               break;
 260             default: break;
 261           }
 262
 263           this.setAttribute("style", "display: none");
 264           this.removeAttribute("style");
 265
 266           try {
 267             // ugly hack needed because sizeToContent() can suck if window
 268             // was never resized before...
 269             window.resizeTo(window.outerWidth, window.outerHeight + 1);
 270             window.sizeToContent();
 271           }
 272           catch(e) {}
 273         ]]>
 274         </body>
 275       </method>
 276
 277       <method name="onIdOrClassBoxChange">
 278         <body>
 279         <![CDATA[
 280           // make the alert on existing ID visible by default
 281           this.mExistingIdAlert.removeAttribute("class");
 282           if (this.mIdTextBox.value || this.mClassTextBox.value)
 283           {
 284             // ah, we have at least class or ID... if we have an ID, is there already
 285             // an element with that ID in the document ?
 286             var elt = this.mIdTextBox.value ?
 287                         EditorUtils.getCurrentDocument().getElementById(this.mIdTextBox.value)
 288                         : null;
 289             if (!elt)
 290             {
 291               // lucky man...
 292               this.mExistingIdAlert.setAttribute("class", "hiddenAlert");
 293               document.documentElement.getButton("accept").removeAttribute("disabled");
 294               this.enableControls(true);
 295               return;
 296             }
 297           }
 298           else
 299             this.mExistingIdAlert.setAttribute("class", "hiddenAlert");
 300
 301           // cannot create the element in that case
 302           document.documentElement.getButton("accept").setAttribute("disabled", "true");
 303           this.enableControls(false);
 304         ]]>
 305         </body>
 306       </method>
 307
 308       <method name="onClassOrIdChange">
 309         <parameter name="aElt"/>
 310         <body>
 311         <![CDATA[
 312           if (this.mIDList.value || this.mClassList.value)
 313           {
 314             // we have at least an ID or a class, we can create an element
 315             document.documentElement.getButton("accept").removeAttribute("disabled");
 316             this.enableControls(true);
 317             return;
 318           }
 319           document.documentElement.getButton("accept").setAttribute("disabled", "true");
 320           this.enableControls(false);
 321         ]]>
 322         </body>
 323       </method>
 324
 325       <method name="enableControls">
 326         <parameter name="aEnable"/>
 327         <body>
 328         <![CDATA[
 329           var allControls = this.getAttribute("controls").split(',');
 330           for (var i = 0; i < allControls.length; i++)
 331           {
 332             var c = allControls[i];
 333             var elt = document.getElementById(c);
 334             if (elt)
 335             {
 336               if (aEnable)
 337                 elt.removeAttribute("disabled");
 338               else
 339                 elt.setAttribute("disabled", "true");
 340             }
 341           }
 342         ]]>
 343         </body>
 344
 345       </method>
 346
 347       <method name="pickId">
 348         <parameter name="aElt"/>
 349         <body>
 350         <![CDATA[
 351           var prefix;
 352           try {
 353             // not sure this is needed, but I wanted to reserve user-defined
 354             // prefices for future use
 355             var useCssPref = GetPrefs().getCharPref("bluegriffon.css.id_prefix");
 356           }
 357           catch(e) { prefix = "BGelt"; }
 358
 359           aElt.value = prefix + new Date().valueOf() +
 360                             "_" + Math.round(Math.random() * 100000);
 361           this.onIdOrClassBoxChange(aElt);
 362         ]]>
 363         </body>
 364       </method>
 365
 366
 367     </implementation>
 368   </binding>
 369
 370 </bindings>