base/content/bluegriffon/bindings/rulers.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) 2006
  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
  41 <bindings id="rulersBindings"
  42           xmlns="http://www.mozilla.org/xbl"
  43           xmlns:html="http://www.w3.org/1999/xhtml"
  44           xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  45           xmlns:xbl="http://www.mozilla.org/xbl"
  46           xmlns:svg="http://www.w3.org/2000/svg">
  47
  48   <binding id="ruler-base">
  49
  50         <implementation>
  51
  52       <constructor>
  53         <![CDATA[
  54           NotifierUtils.addNotifierCallback("selection",      this.selectionChanged, this);
  55           NotifierUtils.addNotifierCallback("resizeEvent",    this.onResizeEvent, this);
  56           NotifierUtils.addNotifierCallback("editorScrolled", this.onEditorScrolled, this);
  57         ]]>
  58       </constructor>
  59
  60       <field name="kSVG_NS">"http://www.w3.org/2000/svg"</field>
  61
  62       <field name="mPos">0</field>
  63       <field name="mSize">0</field>
  64       <field name="mSource">null</field>
  65       <field name="mRulerSeparatorPosition">null</field>
  66       <field name="mResizing">false</field>
  67       <field name="mRuleSeparator">null</field>
  68
  69       <method name="onEditorScrolled">
  70         <body>
  71         <![CDATA[
  72           var elt = EditorUtils.getSelectionContainer().node;
  73           this.selectionChanged(null, elt, true);
  74         ]]>
  75         </body>
  76       </method>
  77
  78       <method name="onResizeEvent">
  79         <body>
  80         <![CDATA[
  81           var elt = EditorUtils.getSelectionContainer().node;
  82           this.selectionChanged(null, elt, true);
  83         ]]>
  84         </body>
  85       </method>
  86
  87       <method name="selectionChanged">
  88         <parameter name="aArguments"/>
  89         <parameter name="aNode"/>
  90         <parameter name="aOneElementSelected"/>
  91         <body>
  92         <![CDATA[
  93           var node = aNode;
  94           var display = this.getComputedStyle(aNode).getPropertyValue("display");
  95           while (node &&
  96                  display != "block" &&
  97                  display != "inline-block" &&
  98                  display != "table" &&
  99                  display != "table-cell" &&
 100                  display != "list-item" &&
 101                  node.nodeName.toLowerCase() != "img")
 102           {
 103             node = node.parentNode;
 104             display = this.getComputedStyle(node).getPropertyValue("display");
 105           }
 106           this.clean();
 107           if (node instanceof Components.interfaces.nsIDOMHTMLTableCellElement)
 108           {
 109             var child = node;
 110             while (child.previousSibling)
 111               child = child.previousSibling;
 112             while (child)
 113             {
 114               if (child.nodeType == Node.ELEMENT_NODE)
 115                 this._showElementRuler(child);
 116               child = child.nextSibling;
 117             }
 118           }
 119           else
 120             this._showElementRuler(node);
 121         ]]>
 122         </body>
 123       </method>
 124
 125       <method name="getComputedStyle">
 126         <parameter name="aElt"/>
 127         <body>
 128         <![CDATA[
 129           return aElt.ownerDocument.defaultView.getComputedStyle(aElt, "");
 130         ]]>
 131         </body>
 132       </method>
 133
 134       <property name="mSVGGroup">
 135         <getter>
 136         <![CDATA[
 137           return document.getAnonymousElementByAttribute(this, "anonid", "SVGGroup");
 138         ]]>
 139         </getter>
 140       </property>
 141
 142       <property name="mHTMLcontainer">
 143         <getter>
 144         <![CDATA[
 145           return document.getAnonymousElementByAttribute(this, "anonid", "HTMLcontainer");
 146         ]]>
 147         </getter>
 148       </property>
 149
 150       <method name="clean">
 151         <body>
 152         <![CDATA[
 153           var svgGroup = this.mSVGGroup;
 154           var child = svgGroup.firstChild;
 155           while (child)
 156           {
 157             var tmp = child.nextSibling;
 158             svgGroup.removeChild(child);
 159             child = tmp;
 160           }
 161         ]]>
 162         </body>
 163       </method>
 164
 165
 166         </implementation>
 167   </binding>
 168
 169   <binding id="hruler" extends="chrome://bluegriffon/content/bindings/rulers.xml#ruler-base">
 170     <content>
 171         <html:div anonid="HTMLcontainer"
 172                                                 style="margin: 0px; padding: 0px; width: 100%!important; height: 100%">
 173                 <svg:svg style="width: 100% ! important; height: 16px;" height="16"
 174                                                  preserveAspectRatio="xMidYMid meet">
 175                         <svg:g anonid="SVGGroup"/>
 176                   </svg:svg>
 177                 </html:div>
 178     </content>
 179
 180     <implementation>
 181
 182       <field name="mOriginalX">0</field>
 183       <field name="mMarginLeft">0</field>
 184       <field name="mWidth">0</field>
 185
 186       <method name="_showElementRuler">
 187         <parameter name="aElt"/>
 188         <body>
 189         <![CDATA[
 190           var w = aElt.clientWidth;
 191           var x = aElt.offsetLeft + 12;
 192           var o = aElt;
 193           while (o.offsetParent)
 194           {
 195             o = o.offsetParent;
 196             x += o.offsetLeft;
 197           }
 198           if (aElt instanceof Components.interfaces.nsIDOMHTMLTableCellElement)
 199           {
 200             var cs = this.getComputedStyle(aElt);
 201             var pl = cs.getPropertyCSSValue("padding-left");
 202             var pr = cs.getPropertyCSSValue("padding-right");
 203
 204             if (pl.primitiveType == CSSPrimitiveValue.CSS_PX)
 205             {
 206               var plv = pl.getFloatValue(CSSPrimitiveValue.CSS_PX);
 207               x += plv;
 208               w -= plv;
 209             }
 210             if (pr.primitiveType == CSSPrimitiveValue.CSS_PX)
 211             {
 212               var prv = pr.getFloatValue(CSSPrimitiveValue.CSS_PX);
 213               w -= prv;
 214             }
 215           }
 216           this.addObject("hruler", x, w, aElt);
 217         ]]>
 218         </body>
 219       </method>
 220
 221       <property name="mScrollX">
 222         <getter>
 223         <![CDATA[
 224           return EditorUtils.getCurrentEditorElement() ?
 225                    EditorUtils.getCurrentEditorElement().contentWindow.scrollX :
 226                    0;
 227         ]]>
 228         </getter>
 229       </property>
 230
 231       <method name="addObject">
 232         <parameter name="aName"/>
 233         <parameter name="aPos"/>
 234         <parameter name="aSize"/>
 235         <parameter name="aSource"/>
 236         <body>
 237         <![CDATA[
 238           this.mPos  = aPos;
 239           this.mSize = aSize;
 240
 241           var svgGroup = this.mSVGGroup;
 242           var realRulerSize = this.mHTMLcontainer.clientWidth;
 243           var g = document.createElementNS(this.kSVG_NS, "g");
 244
 245           var r = document.createElementNS(this.kSVG_NS, "rect")
 246           r.setAttribute("x", (100*(aPos-this.mScrollX)/realRulerSize) + "%");
 247           r.setAttribute("y", "0");
 248           r.setAttribute("width", (100*aSize/realRulerSize) + "%");
 249           r.setAttribute("height", "16");
 250           r.setAttribute("anonid", "ruler");
 251           r.setAttribute("style", "fill: white; stroke-width: 1px; stroke: gray");
 252
 253           var lH = document.createElementNS(this.kSVG_NS, "rect")
 254           lH.setAttribute("x", (100*(aPos-this.mScrollX)/realRulerSize) + "%");
 255           lH.setAttribute("y", "0");
 256           lH.setAttribute("width", (100*4/realRulerSize) + "%");
 257           lH.setAttribute("height", "16");
 258           lH.setAttribute("style", "fill: gray; stroke-width: 1px; stroke: gray; cursor: w-resize");
 259           lH.setAttribute("ruler-position", aPos-12);
 260           lH.setAttribute("ruler-size", aSize);
 261           lH.setAttribute("class", "hruler-separator");
 262           lH.setAttribute("ruler-separator-position", "left");
 263           lH.setUserData("source", aSource, null);
 264
 265           var rH = document.createElementNS(this.kSVG_NS, "rect")
 266           rH.setAttribute("x", (100*(aPos+aSize-4-this.mScrollX)/realRulerSize) + "%");
 267           rH.setAttribute("y", "0");
 268           rH.setAttribute("width", (100*4/realRulerSize) + "%");
 269           rH.setAttribute("height", "16");
 270           rH.setAttribute("style", "fill: gray; stroke-width: 1px; stroke: gray; cursor: w-resize");
 271           rH.setAttribute("ruler-position", aPos-12);
 272           rH.setAttribute("ruler-size", aSize);
 273           rH.setAttribute("class", "hruler-separator");
 274           rH.setAttribute("ruler-separator-position", "right");
 275           rH.setUserData("source", aSource, null);
 276
 277           var t = document.createElementNS(this.kSVG_NS, "text");
 278           t.setAttribute("x", (100*(aPos-this.mScrollX+aSize/2)/realRulerSize) + "%");
 279           t.setAttribute("y", "50%");
 280
 281           var text = document.createTextNode(aSize + "px");
 282           t.appendChild(text);
 283
 284           g.appendChild(r);
 285           g.appendChild(lH);
 286           g.appendChild(rH);
 287           g.appendChild(t);
 288           svgGroup.appendChild(g);
 289         ]]>
 290         </body>
 291       </method>
 292
 293     </implementation>
 294
 295     <resources>
 296       <stylesheet src="chrome://bluegriffon/skin/rulers.css"/>
 297     </resources>
 298
 299     <handlers>
 300       <handler event="mousedown">
 301         <![CDATA[
 302           var elt = event.originalTarget;
 303           if (elt.getAttribute("class") != "hruler-separator")
 304             return;
 305
 306           this.mRulerSeparatorPosition = elt.getAttribute("ruler-separator-position");
 307
 308           this.mOriginalX = event.clientX;
 309           this.mSource = elt.getUserData("source");
 310           this.mMarginLeft = parseFloat(this.getComputedStyle(mSource).getPropertyValue("margin-left"));
 311           if (!this.mMarginLeft)
 312             this.mMarginLeft = 0;
 313           this.mWidth = this.mSource.clientWidth;
 314           this.mRuleSeparator = elt;
 315
 316           this.mResizing = true;
 317         ]]>
 318       </handler>
 319
 320       <handler event="mousemove">
 321         <![CDATA[
 322           if (!this.mResizing)
 323             return;
 324
 325           var x = event.clientX;
 326           var realRulerSize = this.mHTMLcontainer.clientWidth;
 327
 328           switch (this.mRulerSeparatorPosition)
 329           {
 330             case "left":
 331               this.mRuleSeparator.setAttribute("x",
 332                  (100*(this.mPos - this.mOriginalX + x - this.mScrollX)/realRulerSize) + "%");
 333               // update main ruler element
 334               this.mRuleSeparator.parentNode.firstChild
 335                 .setAttribute("x", (100*(this.mPos - this.mOriginalX + x- this.mScrollX)/realRulerSize) + "%");
 336               this.mRuleSeparator.parentNode.firstChild
 337                 .setAttribute("width", (100*(this.mSize + this.mOriginalX - x)/realRulerSize) + "%");
 338               // update text
 339               this.mRuleSeparator.parentNode.lastChild
 340                 .setAttribute("x", (100*((this.mPos - this.mOriginalX + x- this.mScrollX)+(this.mSize + this.mOriginalX - x)/2)/realRulerSize) + "%");
 341               this.mRuleSeparator.parentNode.lastChild.firstChild
 342                 .data = (this.mSize + this.mOriginalX - x) + "px";
 343               break;
 344             case "right":
 345               this.mRuleSeparator.setAttribute("x",
 346                  (100*(this.mPos - this.mOriginalX + x + this.mSize - 4- this.mScrollX)/realRulerSize) + "%");
 347               // update main ruler element
 348               this.mRuleSeparator.parentNode.firstChild
 349                 .setAttribute("width", (100*(this.mSize - this.mOriginalX + x)/realRulerSize) + "%");
 350               // update text
 351               this.mRuleSeparator.parentNode.lastChild
 352                 .setAttribute("x", (100*(this.mPos - this.mScrollX + (this.mSize - this.mOriginalX + x)/2)/realRulerSize) + "%");
 353               this.mRuleSeparator.parentNode.lastChild.firstChild
 354                 .data = (this.mSize - this.mOriginalX + x) + "px";
 355               break;
 356             default: break;
 357           }
 358         ]]>
 359       </handler>
 360
 361       <handler event="mouseup">
 362         <![CDATA[
 363           if (!this.mResizing)
 364             return;
 365
 366           this.mResizing = false;
 367           this.mRuleSeparator = null;
 368
 369           var x = event.clientX;
 370           var realRulerSize = this.mHTMLcontainer.clientWidth;
 371           var styleAttrValue = this.mSource.getAttribute("style");
 372           if (styleAttrValue)
 373             styleAttrValue += ";"
 374           else
 375             styleAttrValue = "";
 376           switch (this.mRulerSeparatorPosition)
 377           {
 378             case "left":
 379               styleAttrValue += "margin-left: " + (this.mMarginLeft - this.mOriginalX +
 380                                                x) + "px";
 381               styleAttrValue += "; width: " + (this.mWidth  + this.mOriginalX -
 382                                           x) + "px";
 383               break;
 384             case "right":
 385               styleAttrValue += "width: " + (this.mWidth  - this.mOriginalX +
 386                                           x) + "px";
 387               break;
 388             default: break;
 389           }
 390           EditorUtils.getCurrentEditor()
 391             .setAttribute(this.mSource, "style", styleAttrValue);
 392           this.selectionChanged(null, this.mSource, null);
 393         ]]>
 394       </handler>
 395
 396     </handlers>
 397
 398   </binding>
 399
 400   <binding id="vruler">
 401
 402     <content>
 403
 404         <html:div style="margin:0;padding: 0; width: 100%!important; height: 100%;">
 405           <svg:svg style="width: 16px ! important; height: 98%" viewBox="0 0 16 100"
 406                    preserveAspectRatio="xMidYMid meet">
 407             <svg:g>
 408               <svg:text transform="rotate(-90,8,50)" x="50%" y="50%">foo</svg:text>
 409             </svg:g>
 410           </svg:svg>
 411         </html:div>
 412
 413     </content>
 414     <resources>
 415       <stylesheet src="chrome://bluegriffon/skin/rulers.css"/>
 416     </resources>
 417
 418   </binding>
 419
 420 </bindings>