git-svn-id: svn://euphorik.ch/pompage@45 02bbb61a-6d21-0410-aba0-cb053bdfd66a
[pompage.git] / 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 }