doc/webdeveloper/features/display_ruler.js

   1 var webdeveloper_rulerDrag   = false;
   2 var webdeveloper_rulerEndX   = 0;
   3 var webdeveloper_rulerEndY   = 0;
   4 var webdeveloper_rulerMove   = false;
   5 var webdeveloper_rulerMoveX  = 0;
   6 var webdeveloper_rulerMoveY  = 0;
   7 var webdeveloper_rulerResize = false;
   8 var webdeveloper_rulerStartX = 0;
   9 var webdeveloper_rulerStartY = 0;
  10
  11 // Creates the ruler block
  12 function webdeveloper_createRuler(ownerDocument)
  13 {
  14     var containerElement = ownerDocument.createElement("div");
  15     var resizeElement    = ownerDocument.createElement("div");
  16     var rulerElement     = ownerDocument.createElement("div");
  17
  18     resizeElement.setAttribute("id", "webdeveloper-ruler-north-west");
  19     containerElement.appendChild(resizeElement);
  20
  21     resizeElement = ownerDocument.createElement("div");
  22     resizeElement.setAttribute("id", "webdeveloper-ruler-north-east");
  23     containerElement.appendChild(resizeElement);
  24
  25     resizeElement = ownerDocument.createElement("div");
  26     resizeElement.setAttribute("id", "webdeveloper-ruler-south-east");
  27     containerElement.appendChild(resizeElement);
  28
  29     resizeElement = ownerDocument.createElement("div");
  30     resizeElement.setAttribute("id", "webdeveloper-ruler-south-west");
  31     containerElement.appendChild(resizeElement);
  32
  33     containerElement.setAttribute("id", "webdeveloper-ruler-container");
  34     rulerElement.appendChild(containerElement);
  35
  36     rulerElement.setAttribute("id", "webdeveloper-ruler");
  37     webdeveloper_getDocumentBodyElement(ownerDocument).appendChild(rulerElement);
  38 }
  39
  40 // Called when the ruler is deselected
  41 function webdeveloper_deselectRuler(event)
  42 {
  43     // If not moving the ruler
  44     if(!webdeveloper_rulerMove)
  45     {
  46         var xPosition = event.pageX;
  47         var yPosition = event.pageY;
  48
  49         // If the X position is greater than the start X position
  50         if(xPosition > webdeveloper_rulerStartX)
  51         {
  52             webdeveloper_rulerEndX = xPosition;
  53         }
  54         else
  55         {
  56             webdeveloper_rulerEndX   = webdeveloper_rulerStartX;
  57             webdeveloper_rulerStartX = xPosition;
  58         }
  59
  60         // If the Y position is greater than the start Y position
  61         if(yPosition > webdeveloper_rulerStartY)
  62         {
  63             webdeveloper_rulerEndY = yPosition;
  64         }
  65         else
  66         {
  67             webdeveloper_rulerEndY   = webdeveloper_rulerStartY;
  68             webdeveloper_rulerStartY = yPosition;
  69         }
  70     }
  71
  72     webdeveloper_rulerDrag   = false;
  73     webdeveloper_rulerMove   = false;
  74     webdeveloper_rulerMoveX  = 0;
  75     webdeveloper_rulerMoveY  = 0;
  76     webdeveloper_rulerResize = false;
  77
  78     webdeveloper_updateRulerEnd();
  79     webdeveloper_updateRulerStart();
  80 }
  81
  82 // Displays a ruler
  83 function webdeveloper_displayRuler(element)
  84 {
  85     // If the page has frames
  86     if(webdeveloper_pageHasFrames())
  87     {
  88         window.openDialog("chrome://webdeveloper/content/message/message.xul", "webdeveloper-message-dialog", "centerscreen,chrome,modal", document.getElementById("webdeveloper-string-bundle").getString("webdeveloper_framesNotSupported"));
  89     }
  90     else
  91     {
  92         var checked         = false;
  93         var contentDocument = webdeveloper_getContentDocument();
  94         var divElement      = null;
  95
  96         // If the element is set
  97         if(element)
  98         {
  99             checked = element.getAttribute("checked");
 100         }
 101
 102         webdeveloper_configureElement(document.getElementById("webdeveloper-ruler-toolbar"), "hidden", !checked);
 103
 104         // If displaying a ruler
 105         if(checked)
 106         {
 107             webdeveloper_updateRulerEnd();
 108             webdeveloper_updateRulerStart();
 109             webdeveloper_createRuler(contentDocument);
 110
 111             contentDocument.addEventListener("mousedown", webdeveloper_selectRuler, false);
 112             contentDocument.addEventListener("mousemove", webdeveloper_moveRuler, false);
 113             contentDocument.addEventListener("mouseup", webdeveloper_deselectRuler, false);
 114         }
 115         else
 116         {
 117             var rulerHeightElement = document.getElementById("webdeveloper-ruler-height");
 118             var rulerWidthElement  = document.getElementById("webdeveloper-ruler-width");
 119
 120             webdeveloper_removeRuler(contentDocument);
 121
 122             // Try to remove the event listener
 123             try
 124             {
 125                 contentDocument.removeEventListener("mousedown", webdeveloper_selectRuler, false);
 126             }
 127             catch(exception)
 128             {
 129                 // Do nothing
 130             }
 131
 132             // Try to remove the event listener
 133             try
 134             {
 135                 contentDocument.removeEventListener("mousemove", webdeveloper_moveRuler, false);
 136             }
 137             catch(exception)
 138             {
 139                 // Do nothing
 140             }
 141
 142             // Try to remove the event listener
 143             try
 144             {
 145                 contentDocument.removeEventListener("mouseup", webdeveloper_deselectRuler, false);
 146             }
 147             catch(exception)
 148             {
 149                 // Do nothing
 150             }
 151
 152             // If the ruler height element is set
 153             if(rulerHeightElement)
 154             {
 155                 rulerHeightElement.value = "";
 156             }
 157
 158             // If the ruler width element is set
 159             if(rulerWidthElement)
 160             {
 161                 rulerWidthElement.value = "";
 162             }
 163
 164             webdeveloper_rulerDrag   = false;
 165             webdeveloper_rulerEndX   = 0;
 166             webdeveloper_rulerEndY   = 0;
 167             webdeveloper_rulerMove   = false;
 168             webdeveloper_rulerMoveX  = 0;
 169             webdeveloper_rulerMoveY  = 0;
 170             webdeveloper_rulerResize = false;
 171             webdeveloper_rulerStartX = 0;
 172             webdeveloper_rulerStartY = 0;
 173         }
 174
 175         webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/display_ruler.css", "webdeveloper-display-ruler");
 176     }
 177 }
 178
 179 // Called when the ruler is moved
 180 function webdeveloper_moveRuler(event)
 181 {
 182     var element = event.target;
 183
 184     // If the element is set
 185     if(element)
 186     {
 187         var ownerDocument = element.ownerDocument;
 188
 189         // If the element has an owner document
 190         if(ownerDocument)
 191         {
 192             var rulerElement = ownerDocument.getElementById("webdeveloper-ruler");
 193
 194             // If the ruler element is set
 195             if(rulerElement)
 196             {
 197                 var xPosition = event.pageX;
 198                 var yPosition = event.pageY;
 199
 200                 // If the ruler is being dragged or resized
 201                 if(webdeveloper_rulerDrag || webdeveloper_rulerResize)
 202                 {
 203                     var height             = 0;
 204                     var rulerHeightElement = document.getElementById("webdeveloper-ruler-height");
 205                     var rulerWidthElement  = document.getElementById("webdeveloper-ruler-width");
 206                     var width              = 0;
 207
 208                     webdeveloper_rulerEndX = xPosition;
 209                     webdeveloper_rulerEndY = yPosition;
 210
 211                     // If the start x position is greater than the end x position
 212                     if(webdeveloper_rulerStartX > webdeveloper_rulerEndX)
 213                     {
 214                         width = webdeveloper_rulerStartX - webdeveloper_rulerEndX;
 215
 216                         rulerElement.style.left = xPosition + "px";
 217                     }
 218                     else
 219                     {
 220                         width = webdeveloper_rulerEndX - webdeveloper_rulerStartX;
 221
 222                         rulerElement.style.left = webdeveloper_rulerStartX + "px";
 223                     }
 224
 225                     // If the start y position is greater than the end y position
 226                     if(webdeveloper_rulerStartY > webdeveloper_rulerEndY)
 227                     {
 228                         height = webdeveloper_rulerStartY - webdeveloper_rulerEndY;
 229
 230                         rulerElement.style.top = webdeveloper_rulerEndY + "px";
 231                     }
 232                     else
 233                     {
 234                         height = webdeveloper_rulerEndY - webdeveloper_rulerStartY;
 235
 236                         rulerElement.style.top = webdeveloper_rulerStartY + "px";
 237                     }
 238
 239                     rulerElement.style.height = height + "px";
 240                     rulerElement.style.width  = width + "px";
 241
 242                     // If the ruler height element is set
 243                     if(rulerHeightElement)
 244                     {
 245                         rulerHeightElement.value = height;
 246                     }
 247
 248                     // If the ruler width element is set
 249                     if(rulerWidthElement)
 250                     {
 251                         rulerWidthElement.value = width;
 252                     }
 253                 }
 254                 else if(webdeveloper_rulerMove)
 255                 {
 256                     var newXPosition = xPosition - webdeveloper_rulerMoveX;
 257                     var newYPosition = yPosition - webdeveloper_rulerMoveY;
 258
 259                     rulerElement.style.left = newXPosition + "px";
 260                     rulerElement.style.top  = newYPosition + "px";
 261
 262                     webdeveloper_rulerEndX   = newXPosition + rulerElement.clientWidth;
 263                     webdeveloper_rulerEndY   = newYPosition + rulerElement.clientHeight;
 264                     webdeveloper_rulerStartX = newXPosition;
 265                     webdeveloper_rulerStartY = newYPosition;
 266                 }
 267
 268                 webdeveloper_updateRulerEnd();
 269                 webdeveloper_updateRulerStart();
 270             }
 271         }
 272     }
 273 }
 274
 275 // Remove the ruler from the document
 276 function webdeveloper_removeRuler(ownerDocument)
 277 {
 278     webdeveloper_removeElement(ownerDocument.getElementById("webdeveloper-ruler"));
 279 }
 280
 281 // Called when the ruler is selected
 282 function webdeveloper_selectRuler(event)
 283 {
 284     // If the click was not a right click
 285     if(event.button != 2)
 286     {
 287         var element = event.target;
 288
 289         // If the element is set
 290         if(element)
 291         {
 292             var elementName   = element.tagName;
 293             var ownerDocument = element.ownerDocument;
 294
 295             // If the element has a name and it is not scrollbar and it has an owner document
 296             if(elementName && elementName != "scrollbar" && ownerDocument)
 297             {
 298                 var rulerElement = ownerDocument.getElementById("webdeveloper-ruler");
 299                 var xPosition    = event.pageX;
 300                 var yPosition    = event.pageY;
 301
 302                 // If the ruler element is set
 303                 if(rulerElement)
 304                 {
 305                     // If element is the container element
 306                     if(element == ownerDocument.getElementById("webdeveloper-ruler-container"))
 307                     {
 308                         webdeveloper_rulerMove  = true;
 309                         webdeveloper_rulerMoveX = xPosition - rulerElement.offsetLeft;
 310                         webdeveloper_rulerMoveY = yPosition - rulerElement.offsetTop;
 311                     }
 312                     else if(element == ownerDocument.getElementById("webdeveloper-ruler-north-east"))
 313                     {
 314                         webdeveloper_rulerResize = true;
 315                         webdeveloper_rulerStartX = rulerElement.offsetLeft;
 316                         webdeveloper_rulerStartY = rulerElement.offsetTop + rulerElement.clientHeight;
 317                     }
 318                     else if(element == ownerDocument.getElementById("webdeveloper-ruler-north-west"))
 319                     {
 320                         webdeveloper_rulerResize = true;
 321                         webdeveloper_rulerStartX = rulerElement.offsetLeft + rulerElement.clientWidth;
 322                         webdeveloper_rulerStartY = rulerElement.offsetTop + rulerElement.clientHeight;
 323                     }
 324                     else if(element == ownerDocument.getElementById("webdeveloper-ruler-south-east"))
 325                     {
 326                         webdeveloper_rulerResize = true;
 327                         webdeveloper_rulerStartX = rulerElement.offsetLeft;
 328                         webdeveloper_rulerStartY = rulerElement.offsetTop;
 329                     }
 330                     else if(element == ownerDocument.getElementById("webdeveloper-ruler-south-west"))
 331                     {
 332                         webdeveloper_rulerResize = true;
 333                         webdeveloper_rulerStartX = rulerElement.offsetLeft + rulerElement.clientWidth;
 334                         webdeveloper_rulerStartY = rulerElement.offsetTop;
 335                     }
 336                     else
 337                     {
 338                         webdeveloper_rulerDrag   = true;
 339                         webdeveloper_rulerEndX   = 0;
 340                         webdeveloper_rulerEndY   = 0;
 341                         webdeveloper_rulerStartX = xPosition;
 342                         webdeveloper_rulerStartY = yPosition;
 343
 344                         webdeveloper_updateRulerEnd();
 345                         webdeveloper_updateRulerStart();
 346                     }
 347                 }
 348             }
 349         }
 350
 351         event.preventDefault();
 352     }
 353 }
 354
 355 // Update the ruler end information
 356 function webdeveloper_updateRulerEnd()
 357 {
 358     var endXElement = document.getElementById("webdeveloper-ruler-end-x");
 359     var endYElement = document.getElementById("webdeveloper-ruler-end-y");
 360
 361     // If the end X element is set
 362     if(endXElement)
 363     {
 364         endXElement.value = webdeveloper_rulerEndX;
 365     }
 366
 367     // If the end Y element is set
 368     if(endYElement)
 369     {
 370         endYElement.value = webdeveloper_rulerEndY;
 371     }
 372 }
 373
 374 // Update the ruler height
 375 function webdeveloper_updateRulerHeight(element)
 376 {
 377     var height       = element.value;
 378     var stringBundle = document.getElementById("webdeveloper-string-bundle");
 379
 380     // If the height is empty or not a number or less than zero
 381     if(!height || parseInt(height) != height || height <= 0)
 382     {
 383         webdeveloper_error(stringBundle.getString("webdeveloper_invalidHeight"));
 384     }
 385     else
 386     {
 387         var rulerElement = webdeveloper_getContentDocument().getElementById("webdeveloper-ruler");
 388
 389         // If the ruler element is set
 390         if(rulerElement)
 391         {
 392             height                    = parseInt(height);
 393             rulerElement.style.height = height + "px";
 394             webdeveloper_rulerEndY    = webdeveloper_rulerStartY + height;
 395
 396             webdeveloper_updateRulerEnd();
 397         }
 398     }
 399 }
 400
 401 // Update the ruler start information
 402 function webdeveloper_updateRulerStart()
 403 {
 404     var startXElement = document.getElementById("webdeveloper-ruler-start-x");
 405     var startYElement = document.getElementById("webdeveloper-ruler-start-y");
 406
 407     // If the start X element is set
 408     if(startXElement)
 409     {
 410         startXElement.value = webdeveloper_rulerStartX;
 411     }
 412
 413     // If the start Y element is set
 414     if(startYElement)
 415     {
 416         startYElement.value = webdeveloper_rulerStartY;
 417     }
 418 }
 419
 420 // Update the ruler width
 421 function webdeveloper_updateRulerWidth(element)
 422 {
 423     var stringBundle = document.getElementById("webdeveloper-string-bundle");
 424     var width        = element.value;
 425
 426     // If the width is empty or not a number or less than zero
 427     if(!width || parseInt(width) != width || width <= 0)
 428     {
 429         webdeveloper_error(stringBundle.getString("webdeveloper_invalidWidth"));
 430     }
 431     else
 432     {
 433         var rulerElement = webdeveloper_getContentDocument().getElementById("webdeveloper-ruler");
 434
 435         // If the ruler element is set
 436         if(rulerElement)
 437         {
 438             width                    = parseInt(width);
 439             rulerElement.style.width = width + "px";
 440             webdeveloper_rulerEndX   = webdeveloper_rulerStartX + width;
 441
 442             webdeveloper_updateRulerEnd();
 443         }
 444     }
 445 }