X-Git-Url: http://git.euphorik.ch/?p=pompage.git;a=blobdiff_plain;f=doc%2Fwebdeveloper%2Ffeatures%2Fdisplay_ruler.js;fp=doc%2Fwebdeveloper%2Ffeatures%2Fdisplay_ruler.js;h=909f9b7825c96760d6ec99ad7c7da911330e5f1e;hp=0000000000000000000000000000000000000000;hb=c3b0deb3d8c9f439739c79806e915c29bc1d4b84;hpb=cff6539539a79e014f6ac8df46716cafce2c8472 diff --git a/doc/webdeveloper/features/display_ruler.js b/doc/webdeveloper/features/display_ruler.js new file mode 100644 index 0000000..909f9b7 --- /dev/null +++ b/doc/webdeveloper/features/display_ruler.js @@ -0,0 +1,445 @@ +var webdeveloper_rulerDrag = false; +var webdeveloper_rulerEndX = 0; +var webdeveloper_rulerEndY = 0; +var webdeveloper_rulerMove = false; +var webdeveloper_rulerMoveX = 0; +var webdeveloper_rulerMoveY = 0; +var webdeveloper_rulerResize = false; +var webdeveloper_rulerStartX = 0; +var webdeveloper_rulerStartY = 0; + +// Creates the ruler block +function webdeveloper_createRuler(ownerDocument) +{ + var containerElement = ownerDocument.createElement("div"); + var resizeElement = ownerDocument.createElement("div"); + var rulerElement = ownerDocument.createElement("div"); + + resizeElement.setAttribute("id", "webdeveloper-ruler-north-west"); + containerElement.appendChild(resizeElement); + + resizeElement = ownerDocument.createElement("div"); + resizeElement.setAttribute("id", "webdeveloper-ruler-north-east"); + containerElement.appendChild(resizeElement); + + resizeElement = ownerDocument.createElement("div"); + resizeElement.setAttribute("id", "webdeveloper-ruler-south-east"); + containerElement.appendChild(resizeElement); + + resizeElement = ownerDocument.createElement("div"); + resizeElement.setAttribute("id", "webdeveloper-ruler-south-west"); + containerElement.appendChild(resizeElement); + + containerElement.setAttribute("id", "webdeveloper-ruler-container"); + rulerElement.appendChild(containerElement); + + rulerElement.setAttribute("id", "webdeveloper-ruler"); + webdeveloper_getDocumentBodyElement(ownerDocument).appendChild(rulerElement); +} + +// Called when the ruler is deselected +function webdeveloper_deselectRuler(event) +{ + // If not moving the ruler + if(!webdeveloper_rulerMove) + { + var xPosition = event.pageX; + var yPosition = event.pageY; + + // If the X position is greater than the start X position + if(xPosition > webdeveloper_rulerStartX) + { + webdeveloper_rulerEndX = xPosition; + } + else + { + webdeveloper_rulerEndX = webdeveloper_rulerStartX; + webdeveloper_rulerStartX = xPosition; + } + + // If the Y position is greater than the start Y position + if(yPosition > webdeveloper_rulerStartY) + { + webdeveloper_rulerEndY = yPosition; + } + else + { + webdeveloper_rulerEndY = webdeveloper_rulerStartY; + webdeveloper_rulerStartY = yPosition; + } + } + + webdeveloper_rulerDrag = false; + webdeveloper_rulerMove = false; + webdeveloper_rulerMoveX = 0; + webdeveloper_rulerMoveY = 0; + webdeveloper_rulerResize = false; + + webdeveloper_updateRulerEnd(); + webdeveloper_updateRulerStart(); +} + +// Displays a ruler +function webdeveloper_displayRuler(element) +{ + // If the page has frames + if(webdeveloper_pageHasFrames()) + { + window.openDialog("chrome://webdeveloper/content/message/message.xul", "webdeveloper-message-dialog", "centerscreen,chrome,modal", document.getElementById("webdeveloper-string-bundle").getString("webdeveloper_framesNotSupported")); + } + else + { + var checked = false; + var contentDocument = webdeveloper_getContentDocument(); + var divElement = null; + + // If the element is set + if(element) + { + checked = element.getAttribute("checked"); + } + + webdeveloper_configureElement(document.getElementById("webdeveloper-ruler-toolbar"), "hidden", !checked); + + // If displaying a ruler + if(checked) + { + webdeveloper_updateRulerEnd(); + webdeveloper_updateRulerStart(); + webdeveloper_createRuler(contentDocument); + + contentDocument.addEventListener("mousedown", webdeveloper_selectRuler, false); + contentDocument.addEventListener("mousemove", webdeveloper_moveRuler, false); + contentDocument.addEventListener("mouseup", webdeveloper_deselectRuler, false); + } + else + { + var rulerHeightElement = document.getElementById("webdeveloper-ruler-height"); + var rulerWidthElement = document.getElementById("webdeveloper-ruler-width"); + + webdeveloper_removeRuler(contentDocument); + + // Try to remove the event listener + try + { + contentDocument.removeEventListener("mousedown", webdeveloper_selectRuler, false); + } + catch(exception) + { + // Do nothing + } + + // Try to remove the event listener + try + { + contentDocument.removeEventListener("mousemove", webdeveloper_moveRuler, false); + } + catch(exception) + { + // Do nothing + } + + // Try to remove the event listener + try + { + contentDocument.removeEventListener("mouseup", webdeveloper_deselectRuler, false); + } + catch(exception) + { + // Do nothing + } + + // If the ruler height element is set + if(rulerHeightElement) + { + rulerHeightElement.value = ""; + } + + // If the ruler width element is set + if(rulerWidthElement) + { + rulerWidthElement.value = ""; + } + + webdeveloper_rulerDrag = false; + webdeveloper_rulerEndX = 0; + webdeveloper_rulerEndY = 0; + webdeveloper_rulerMove = false; + webdeveloper_rulerMoveX = 0; + webdeveloper_rulerMoveY = 0; + webdeveloper_rulerResize = false; + webdeveloper_rulerStartX = 0; + webdeveloper_rulerStartY = 0; + } + + webdeveloper_toggleStyleSheet(element, "chrome://webdeveloper/content/stylesheets/display_ruler.css", "webdeveloper-display-ruler"); + } +} + +// Called when the ruler is moved +function webdeveloper_moveRuler(event) +{ + var element = event.target; + + // If the element is set + if(element) + { + var ownerDocument = element.ownerDocument; + + // If the element has an owner document + if(ownerDocument) + { + var rulerElement = ownerDocument.getElementById("webdeveloper-ruler"); + + // If the ruler element is set + if(rulerElement) + { + var xPosition = event.pageX; + var yPosition = event.pageY; + + // If the ruler is being dragged or resized + if(webdeveloper_rulerDrag || webdeveloper_rulerResize) + { + var height = 0; + var rulerHeightElement = document.getElementById("webdeveloper-ruler-height"); + var rulerWidthElement = document.getElementById("webdeveloper-ruler-width"); + var width = 0; + + webdeveloper_rulerEndX = xPosition; + webdeveloper_rulerEndY = yPosition; + + // If the start x position is greater than the end x position + if(webdeveloper_rulerStartX > webdeveloper_rulerEndX) + { + width = webdeveloper_rulerStartX - webdeveloper_rulerEndX; + + rulerElement.style.left = xPosition + "px"; + } + else + { + width = webdeveloper_rulerEndX - webdeveloper_rulerStartX; + + rulerElement.style.left = webdeveloper_rulerStartX + "px"; + } + + // If the start y position is greater than the end y position + if(webdeveloper_rulerStartY > webdeveloper_rulerEndY) + { + height = webdeveloper_rulerStartY - webdeveloper_rulerEndY; + + rulerElement.style.top = webdeveloper_rulerEndY + "px"; + } + else + { + height = webdeveloper_rulerEndY - webdeveloper_rulerStartY; + + rulerElement.style.top = webdeveloper_rulerStartY + "px"; + } + + rulerElement.style.height = height + "px"; + rulerElement.style.width = width + "px"; + + // If the ruler height element is set + if(rulerHeightElement) + { + rulerHeightElement.value = height; + } + + // If the ruler width element is set + if(rulerWidthElement) + { + rulerWidthElement.value = width; + } + } + else if(webdeveloper_rulerMove) + { + var newXPosition = xPosition - webdeveloper_rulerMoveX; + var newYPosition = yPosition - webdeveloper_rulerMoveY; + + rulerElement.style.left = newXPosition + "px"; + rulerElement.style.top = newYPosition + "px"; + + webdeveloper_rulerEndX = newXPosition + rulerElement.clientWidth; + webdeveloper_rulerEndY = newYPosition + rulerElement.clientHeight; + webdeveloper_rulerStartX = newXPosition; + webdeveloper_rulerStartY = newYPosition; + } + + webdeveloper_updateRulerEnd(); + webdeveloper_updateRulerStart(); + } + } + } +} + +// Remove the ruler from the document +function webdeveloper_removeRuler(ownerDocument) +{ + webdeveloper_removeElement(ownerDocument.getElementById("webdeveloper-ruler")); +} + +// Called when the ruler is selected +function webdeveloper_selectRuler(event) +{ + // If the click was not a right click + if(event.button != 2) + { + var element = event.target; + + // If the element is set + if(element) + { + var elementName = element.tagName; + var ownerDocument = element.ownerDocument; + + // If the element has a name and it is not scrollbar and it has an owner document + if(elementName && elementName != "scrollbar" && ownerDocument) + { + var rulerElement = ownerDocument.getElementById("webdeveloper-ruler"); + var xPosition = event.pageX; + var yPosition = event.pageY; + + // If the ruler element is set + if(rulerElement) + { + // If element is the container element + if(element == ownerDocument.getElementById("webdeveloper-ruler-container")) + { + webdeveloper_rulerMove = true; + webdeveloper_rulerMoveX = xPosition - rulerElement.offsetLeft; + webdeveloper_rulerMoveY = yPosition - rulerElement.offsetTop; + } + else if(element == ownerDocument.getElementById("webdeveloper-ruler-north-east")) + { + webdeveloper_rulerResize = true; + webdeveloper_rulerStartX = rulerElement.offsetLeft; + webdeveloper_rulerStartY = rulerElement.offsetTop + rulerElement.clientHeight; + } + else if(element == ownerDocument.getElementById("webdeveloper-ruler-north-west")) + { + webdeveloper_rulerResize = true; + webdeveloper_rulerStartX = rulerElement.offsetLeft + rulerElement.clientWidth; + webdeveloper_rulerStartY = rulerElement.offsetTop + rulerElement.clientHeight; + } + else if(element == ownerDocument.getElementById("webdeveloper-ruler-south-east")) + { + webdeveloper_rulerResize = true; + webdeveloper_rulerStartX = rulerElement.offsetLeft; + webdeveloper_rulerStartY = rulerElement.offsetTop; + } + else if(element == ownerDocument.getElementById("webdeveloper-ruler-south-west")) + { + webdeveloper_rulerResize = true; + webdeveloper_rulerStartX = rulerElement.offsetLeft + rulerElement.clientWidth; + webdeveloper_rulerStartY = rulerElement.offsetTop; + } + else + { + webdeveloper_rulerDrag = true; + webdeveloper_rulerEndX = 0; + webdeveloper_rulerEndY = 0; + webdeveloper_rulerStartX = xPosition; + webdeveloper_rulerStartY = yPosition; + + webdeveloper_updateRulerEnd(); + webdeveloper_updateRulerStart(); + } + } + } + } + + event.preventDefault(); + } +} + +// Update the ruler end information +function webdeveloper_updateRulerEnd() +{ + var endXElement = document.getElementById("webdeveloper-ruler-end-x"); + var endYElement = document.getElementById("webdeveloper-ruler-end-y"); + + // If the end X element is set + if(endXElement) + { + endXElement.value = webdeveloper_rulerEndX; + } + + // If the end Y element is set + if(endYElement) + { + endYElement.value = webdeveloper_rulerEndY; + } +} + +// Update the ruler height +function webdeveloper_updateRulerHeight(element) +{ + var height = element.value; + var stringBundle = document.getElementById("webdeveloper-string-bundle"); + + // If the height is empty or not a number or less than zero + if(!height || parseInt(height) != height || height <= 0) + { + webdeveloper_error(stringBundle.getString("webdeveloper_invalidHeight")); + } + else + { + var rulerElement = webdeveloper_getContentDocument().getElementById("webdeveloper-ruler"); + + // If the ruler element is set + if(rulerElement) + { + height = parseInt(height); + rulerElement.style.height = height + "px"; + webdeveloper_rulerEndY = webdeveloper_rulerStartY + height; + + webdeveloper_updateRulerEnd(); + } + } +} + +// Update the ruler start information +function webdeveloper_updateRulerStart() +{ + var startXElement = document.getElementById("webdeveloper-ruler-start-x"); + var startYElement = document.getElementById("webdeveloper-ruler-start-y"); + + // If the start X element is set + if(startXElement) + { + startXElement.value = webdeveloper_rulerStartX; + } + + // If the start Y element is set + if(startYElement) + { + startYElement.value = webdeveloper_rulerStartY; + } +} + +// Update the ruler width +function webdeveloper_updateRulerWidth(element) +{ + var stringBundle = document.getElementById("webdeveloper-string-bundle"); + var width = element.value; + + // If the width is empty or not a number or less than zero + if(!width || parseInt(width) != width || width <= 0) + { + webdeveloper_error(stringBundle.getString("webdeveloper_invalidWidth")); + } + else + { + var rulerElement = webdeveloper_getContentDocument().getElementById("webdeveloper-ruler"); + + // If the ruler element is set + if(rulerElement) + { + width = parseInt(width); + rulerElement.style.width = width + "px"; + webdeveloper_rulerEndX = webdeveloper_rulerStartX + width; + + webdeveloper_updateRulerEnd(); + } + } +} \ No newline at end of file