git-svn-id: svn://euphorik.ch/pompage@45 02bbb61a-6d21-0410-aba0-cb053bdfd66a
[pompage.git] / doc / webdeveloper / features / display_ruler.js
diff --git a/doc/webdeveloper/features/display_ruler.js b/doc/webdeveloper/features/display_ruler.js
new file mode 100644 (file)
index 0000000..909f9b7
--- /dev/null
@@ -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