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