doc/webdeveloper/features/display_line_guides.js

   1 var webdeveloper_lineGuideSelected = null;
   2
   3 // Adds a horizontal line guide
   4 function webdeveloper_addHorizontalLineGuide()
   5 {
   6     var contentDocument    = webdeveloper_getContentDocument();
   7     var contentWindow      = webdeveloper_getContentWindow();
   8     var documentHeight     = contentDocument.height;
   9     var lineGuide          = contentDocument.createElement("div");
  10     var lineGuidePositions = webdeveloper_getHorizontalLineGuidePositions(contentDocument);
  11     var spacing            = contentWindow.pageYOffset + 100;
  12
  13     lineGuide.style.backgroundColor = webdeveloper_getStringPreference("webdeveloper.line.guides.color");
  14     lineGuide.style.top             = 0;
  15
  16     lineGuide.addEventListener("mousedown", webdeveloper_selectLineGuide, false);
  17     lineGuide.addEventListener("mouseout", webdeveloper_mouseoutLineGuide, false);
  18     lineGuide.addEventListener("mouseover", webdeveloper_mouseoverLineGuide, false);
  19     lineGuide.addEventListener("mouseup", webdeveloper_deselectLineGuide, false);
  20
  21     webdeveloper_sizeHorizontalLineGuide(lineGuide, contentDocument);
  22
  23     // While the spacing is less than the document height
  24     while(spacing < documentHeight)
  25     {
  26         // If there is already a line guide at this position
  27         if(webdeveloper_contains(lineGuidePositions, spacing + "px"))
  28         {
  29             spacing += 100;
  30         }
  31         else
  32         {
  33             lineGuide.style.top = spacing + "px";
  34             break;
  35         }
  36     }
  37
  38     lineGuide.setAttribute("class", "webdeveloper-line-guide webdeveloper-horizontal-line-guide");
  39     webdeveloper_getDocumentBodyElement(contentDocument).appendChild(lineGuide);
  40 }
  41
  42 // Adds a vertical line guide
  43 function webdeveloper_addVerticalLineGuide()
  44 {
  45     var contentDocument    = webdeveloper_getContentDocument();
  46     var contentWindow      = webdeveloper_getContentWindow();
  47     var documentWidth      = contentDocument.width;
  48     var lineGuide          = contentDocument.createElement("div");
  49     var lineGuidePositions = webdeveloper_getVerticalLineGuidePositions(contentDocument);
  50     var spacing            = contentWindow.pageXOffset + 100;
  51
  52     lineGuide.style.backgroundColor = webdeveloper_getStringPreference("webdeveloper.line.guides.color");
  53     lineGuide.style.left            = 0;
  54
  55     lineGuide.addEventListener("mousedown", webdeveloper_selectLineGuide, false);
  56     lineGuide.addEventListener("mouseout", webdeveloper_mouseoutLineGuide, false);
  57     lineGuide.addEventListener("mouseover", webdeveloper_mouseoverLineGuide, false);
  58     lineGuide.addEventListener("mouseup", webdeveloper_deselectLineGuide, false);
  59
  60     webdeveloper_sizeVerticalLineGuide(lineGuide, contentDocument);
  61
  62     // While the spacing is less than the document width
  63     while(spacing < documentWidth)
  64     {
  65         // If there is already a line guide at this position
  66         if(webdeveloper_contains(lineGuidePositions, spacing + "px"))
  67         {
  68             spacing += 100;
  69         }
  70         else
  71         {
  72             lineGuide.style.left = spacing + "px";
  73             break;
  74         }
  75     }
  76
  77     lineGuide.setAttribute("class", "webdeveloper-line-guide webdeveloper-vertical-line-guide");
  78     webdeveloper_getDocumentBodyElement(contentDocument).appendChild(lineGuide);
  79 }
  80
  81 // Called when a line guide is deselected
  82 function webdeveloper_deselectLineGuide(event)
  83 {
  84     webdeveloper_lineGuideSelected = null;
  85 }
  86
  87 // Displays line guides
  88 function webdeveloper_displayLineGuides(element)
  89 {
  90     // If the page has frames
  91     if(webdeveloper_pageHasFrames())
  92     {
  93         window.openDialog("chrome://webdeveloper/content/message/message.xul", "webdeveloper-message-dialog", "centerscreen,chrome,modal", document.getElementById("webdeveloper-string-bundle").getString("webdeveloper_framesNotSupported"));
  94     }
  95     else
  96     {
  97         var checked         = false;
  98         var contentDocument = webdeveloper_getContentDocument();
  99         var divElement      = null;
 100
 101         // If the element is set
 102         if(element)
 103         {
 104             checked = element.getAttribute("checked");
 105         }
 106
 107         webdeveloper_configureElement(document.getElementById("webdeveloper-line-guides-toolbar"), "hidden", !checked);
 108
 109         // If displaying line guides
 110         if(checked)
 111         {
 112             divElement = contentDocument.createElement("div");
 113
 114             document.getElementById("webdeveloper.line.guides.color").color = webdeveloper_getStringPreference("webdeveloper.line.guides.color");
 115
 116             webdeveloper_addHorizontalLineGuide();
 117             webdeveloper_addVerticalLineGuide();
 118
 119             divElement.setAttribute("id", "webdeveloper-line-guide-information");
 120             webdeveloper_getDocumentBodyElement(contentDocument).appendChild(divElement);
 121
 122             contentDocument.addEventListener("mousemove", webdeveloper_moveLineGuide, false);
 123             window.addEventListener("resize", webdeveloper_resizeLineGuides, false);
 124         }
 125         else
 126         {
 127             divElement = contentDocument.getElementById("webdeveloper-line-guide-information");
 128
 129             webdeveloper_removeElement(divElement);
 130             webdeveloper_removeLineGuides(contentDocument);
 131
 132             // Try to remove the event listener
 133             try
 134             {
 135                 contentDocument.removeEventListener("mousemove", webdeveloper_moveLineGuide, false);
 136             }
 137             catch(exception)
 138             {
 139                 // Do nothing
 140             }
 141
 142             // Try to remove the event listener
 143             try
 144             {
 145                 window.removeEventListener("resize", webdeveloper_resizeLineGuides, false);
 146             }
 147             catch(exception)
 148             {
 149                 // Do nothing
 150             }
 151
 152             webdeveloper_lineGuideSelected = null;
 153         }
 154
 155         webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/display_line_guides.css", "webdeveloper-display-line-guides");
 156     }
 157 }
 158
 159 // Returns an array containing the horizontal line guide positions
 160 function webdeveloper_getHorizontalLineGuidePositions(contentDocument)
 161 {
 162     return webdeveloper_getLineGuidePositions(contentDocument, true);
 163 }
 164
 165 // Returns the line guide position nearest to the given line guide position
 166 function webdeveloper_getLineGuidePosition(contentDocument, horizontal, lineGuidePosition, next)
 167 {
 168     var lineGuidePositions     = webdeveloper_getLineGuidePositions(contentDocument, horizontal);
 169     var lineGuidesLength       = lineGuidePositions.length;
 170     var otherLineGuidePosition = 0;
 171     var position               = 0;
 172
 173     // Loop through the line guide positions
 174     for(var i = 0; i < lineGuidesLength; i++)
 175     {
 176         otherLineGuidePosition = lineGuidePositions[i];
 177         otherLineGuidePosition = otherLineGuidePosition.substring(0, otherLineGuidePosition.length - 2);
 178
 179         // If looking for the next line guide position, the other line guide position is greater than the line guide position and the other line guide position is greater than the saved position
 180         if(next && otherLineGuidePosition > lineGuidePosition && otherLineGuidePosition > position)
 181         {
 182             position = otherLineGuidePosition;
 183         }
 184         else if(!next && otherLineGuidePosition < lineGuidePosition && otherLineGuidePosition > position)
 185         {
 186             position = otherLineGuidePosition;
 187         }
 188     }
 189
 190     return position;
 191 }
 192
 193 // Returns an array containing the line guide positions
 194 function webdeveloper_getLineGuidePositions(contentDocument, horizontal)
 195 {
 196     var divElement         = null;
 197     var divElementClass    = null;
 198     var divElements        = contentDocument.getElementsByTagName("div");
 199     var divElementsLength  = divElements.length;
 200     var lineGuidePositions = new Array();
 201
 202     // Loop through the div elements
 203     for(var i = 0; i < divElementsLength; i++)
 204     {
 205         divElement = divElements[i];
 206
 207         // If the div element is set
 208         if(divElement)
 209         {
 210             divElementClass = divElement.getAttribute("class");
 211
 212             // If the class exists and contains webdeveloper-line-guide
 213             if(divElementClass && divElementClass.indexOf("webdeveloper-line-guide") != -1)
 214             {
 215                 // If looking for horizontal line guides and the class contains webdeveloper-horizontal-line-guide
 216                 if(horizontal && divElementClass.indexOf("webdeveloper-horizontal-line-guide") != -1)
 217                 {
 218                     lineGuidePositions.push(divElement.style.top);
 219                 }
 220                 else if(!horizontal && divElementClass.indexOf("webdeveloper-vertical-line-guide") != -1)
 221                 {
 222                     lineGuidePositions.push(divElement.style.left);
 223                 }
 224             }
 225         }
 226     }
 227
 228     return lineGuidePositions;
 229 }
 230
 231 // Returns an array containing the vertical line guide positions
 232 function webdeveloper_getVerticalLineGuidePositions(contentDocument)
 233 {
 234     return webdeveloper_getLineGuidePositions(contentDocument, false);
 235 }
 236
 237 // Called when the mouse is not over a line guide
 238 function webdeveloper_mouseoutLineGuide(event)
 239 {
 240     var element = event.target;
 241
 242     // If the element is set
 243     if(element)
 244     {
 245         var ownerDocument = element.ownerDocument;
 246
 247         // If the element has an owner document
 248         if(ownerDocument)
 249         {
 250             var lineGuideInformation = ownerDocument.getElementById("webdeveloper-line-guide-information");
 251
 252             // If the line guide information is found
 253             if(lineGuideInformation)
 254             {
 255                 lineGuideInformation.style.display = "none";
 256             }
 257         }
 258     }
 259 }
 260
 261 // Called when the mouse is over a line guide
 262 function webdeveloper_mouseoverLineGuide(event)
 263 {
 264     var element = event.target;
 265
 266     // If the element is set
 267     if(element)
 268     {
 269         var ownerDocument = element.ownerDocument;
 270
 271         // If the element has an owner document
 272         if(ownerDocument)
 273         {
 274             var lineGuideInformation = ownerDocument.getElementById("webdeveloper-line-guide-information");
 275
 276             // If the line guide information is found
 277             if(lineGuideInformation)
 278             {
 279                 var headerElement       = ownerDocument.createElement("h1");
 280                 var horizontalLineGuide = true;
 281                 var lineGuidePositions  = null;
 282                 var pElement            = ownerDocument.createElement("p");
 283                 var position            = 0;
 284                 var stringBundle        = document.getElementById("webdeveloper-string-bundle");
 285                 var xPosition           = event.pageX;
 286                 var yPosition           = event.pageY;
 287
 288                 // If the line guide has a class attribute and it contains webdeveloper-vertical-line-guide
 289                 if(element.hasAttribute("class") && element.getAttribute("class").indexOf("webdeveloper-vertical-line-guide") != -1)
 290                 {
 291                     horizontalLineGuide = false;
 292                 }
 293
 294                 // If this is a horizontal line guide
 295                 if(horizontalLineGuide)
 296                 {
 297                     position = yPosition;
 298                 }
 299                 else
 300                 {
 301                     position = xPosition;
 302                 }
 303
 304                 webdeveloper_removeAllChildElements(lineGuideInformation);
 305
 306                 headerElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_position") + " = " + position));
 307                 lineGuideInformation.appendChild(headerElement);
 308
 309                 pElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_previousLineGuide") + " = " + webdeveloper_getLineGuidePosition(ownerDocument, horizontalLineGuide, position, false)));
 310                 lineGuideInformation.appendChild(pElement);
 311
 312                 pElement = ownerDocument.createElement("p");
 313                 pElement.appendChild(ownerDocument.createTextNode(stringBundle.getString("webdeveloper_nextLineGuide") + " = " + webdeveloper_getLineGuidePosition(ownerDocument, horizontalLineGuide, position, true)));
 314                 lineGuideInformation.appendChild(pElement);
 315
 316                 webdeveloper_adjustElementPosition(lineGuideInformation, xPosition, yPosition, 10);
 317
 318                 // Show the line guide information
 319                 lineGuideInformation.style.display = "block";
 320             }
 321         }
 322     }
 323 }
 324
 325 // Called when a line guide is moved
 326 function webdeveloper_moveLineGuide(event)
 327 {
 328     // If a line guide is selected
 329     if(webdeveloper_lineGuideSelected)
 330     {
 331         // If the line guide has a class attribute and it contains webdeveloper-horizontal-line-guide
 332         if(webdeveloper_lineGuideSelected.hasAttribute("class") && webdeveloper_lineGuideSelected.getAttribute("class").indexOf("webdeveloper-horizontal-line-guide") != -1)
 333         {
 334             webdeveloper_lineGuideSelected.style.top = event.pageY + "px";
 335         }
 336         else
 337         {
 338             webdeveloper_lineGuideSelected.style.left = event.pageX + "px";
 339         }
 340     }
 341 }
 342
 343 // Remove the line guides from the document
 344 function webdeveloper_removeLineGuides(ownerDocument)
 345 {
 346     var divElement        = null;
 347     var divElements       = ownerDocument.getElementsByTagName("div");
 348     var divElementsLength = divElements.length;
 349
 350     // Loop through the div elements
 351     for(var i = 0; i < divElementsLength; i++)
 352     {
 353         divElement = divElements[i];
 354
 355         // If the div element is set and the class exists and contains webdeveloper-line-guide
 356         if(divElement && divElement.hasAttribute("class") && divElement.getAttribute("class").indexOf("webdeveloper-line-guide") != -1)
 357         {
 358             webdeveloper_removeElement(divElement);
 359             i--;
 360         }
 361     }
 362 }
 363
 364 // Resizes the line guides when the window is resized
 365 function webdeveloper_resizeLineGuides(event)
 366 {
 367     var contentDocument   = webdeveloper_getContentDocument();
 368     var divElement        = null;
 369     var divElementClass   = null;
 370     var divElements       = contentDocument.getElementsByTagName("div");
 371     var divElementsLength = divElements.length;
 372
 373     // Loop through the div elements
 374     for(var i = 0; i < divElementsLength; i++)
 375     {
 376         divElement = divElements[i];
 377
 378         // If the div element is set
 379         if(divElement)
 380         {
 381             divElementClass = divElement.getAttribute("class");
 382
 383             // If the class exists and contains webdeveloper-line-guide
 384             if(divElementClass && divElementClass.indexOf("webdeveloper-line-guide") != -1)
 385             {
 386                 // If the class contains webdeveloper-horizontal-line-guide
 387                 if(divElementClass.indexOf("webdeveloper-horizontal-line-guide") != -1)
 388                 {
 389                     webdeveloper_sizeHorizontalLineGuide(divElement, contentDocument);
 390                 }
 391                 else
 392                 {
 393                     webdeveloper_sizeVerticalLineGuide(divElement, contentDocument);
 394                 }
 395             }
 396         }
 397     }
 398 }
 399
 400 // Called when a line guide is selected
 401 function webdeveloper_selectLineGuide(event)
 402 {
 403     // If the click was not a right click
 404     if(event.button != 2)
 405     {
 406         var element = event.target;
 407
 408         // If the element is set
 409         if(element)
 410         {
 411             webdeveloper_lineGuideSelected = element;
 412         }
 413     }
 414 }
 415
 416 // Sets the size of a horizontal line guide
 417 function webdeveloper_sizeHorizontalLineGuide(lineGuide, contentDocument)
 418 {
 419     webdeveloper_sizeLineGuide(lineGuide, contentDocument, true);
 420 }
 421
 422 // Sets the size of a line guide
 423 function webdeveloper_sizeLineGuide(lineGuide, contentDocument, horizontal)
 424 {
 425     // If the line guide and page document are set
 426     if(lineGuide && contentDocument)
 427     {
 428         var contentWindow = webdeveloper_getContentWindow();
 429
 430         // If sizing a horizontal line guide
 431         if(horizontal)
 432         {
 433             var documentWidth = contentDocument.width;
 434             var viewportWidth = contentWindow.innerWidth;
 435
 436             // If the viewport width is greater than the document width
 437             if(viewportWidth > documentWidth)
 438             {
 439                 lineGuide.style.width = viewportWidth + "px";
 440             }
 441             else
 442             {
 443                 lineGuide.style.width = documentWidth + "px";
 444             }
 445         }
 446         else
 447         {
 448             var documentHeight = contentDocument.height;
 449             var viewportHeight = contentWindow.innerHeight;
 450
 451             // If the viewport height is greater than the document height
 452             if(viewportHeight > documentHeight)
 453             {
 454                 lineGuide.style.height = viewportHeight + "px";
 455             }
 456             else
 457             {
 458                 lineGuide.style.height = documentHeight + "px";
 459             }
 460         }
 461     }
 462 }
 463
 464 // Sets the size of a vertical line guide
 465 function webdeveloper_sizeVerticalLineGuide(lineGuide, contentDocument)
 466 {
 467     webdeveloper_sizeLineGuide(lineGuide, contentDocument, false);
 468 }
 469
 470 // Updates the line guides color
 471 function webdeveloper_updateLineGuideColor(colorPicker)
 472 {
 473     // If the color picker is set
 474     if(colorPicker)
 475     {
 476         var color             = colorPicker.color;
 477         var divElement        = null;
 478         var divElements       = webdeveloper_getContentDocument().getElementsByTagName("div");
 479         var divElementsLength = divElements.length;
 480
 481         webdeveloper_setStringPreference("webdeveloper.line.guides.color", color);
 482
 483         // Loop through the div elements
 484         for(var i = 0; i < divElementsLength; i++)
 485         {
 486             divElement = divElements[i];
 487
 488             // If the div element is set and the class exists and contains webdeveloper-line-guide
 489             if(divElement && divElement.hasAttribute("class") && divElement.getAttribute("class").indexOf("webdeveloper-line-guide") != -1)
 490             {
 491                 divElement.style.backgroundColor = color;
 492             }
 493         }
 494     }
 495 }