git-svn-id: svn://euphorik.ch/pompage@45 02bbb61a-6d21-0410-aba0-cb053bdfd66a
[pompage.git] / doc / webdeveloper / features / display_page_magnifier.js
diff --git a/doc/webdeveloper/features/display_page_magnifier.js b/doc/webdeveloper/features/display_page_magnifier.js
new file mode 100644 (file)
index 0000000..8317703
--- /dev/null
@@ -0,0 +1,195 @@
+// Displays the page magnifier
+function webdeveloper_displayPageMagnifier(element)
+{
+    var canvas = document.getElementById("webdeveloper-page-magnifier");
+
+    // If the canvas is not set or has no context
+    if(!canvas || !canvas.getContext)
+    {
+        window.openDialog("chrome://webdeveloper/content/message/message.xul", "webdeveloper-message-dialog", "centerscreen,chrome,modal", document.getElementById("webdeveloper-string-bundle").getString("webdeveloper_firefox15Required"));
+    }
+    else
+    {
+        var checked       = false;
+        var container     = document.getElementById("webdeveloper-page-magnifier-container");
+
+        // If the element is set
+        if(element)
+        {
+            checked = element.getAttribute("checked");
+        }
+
+        webdeveloper_configureElement(document.getElementById("webdeveloper-page-magnifier-toolbar"), "hidden", !checked);
+
+        // If displaying page validation
+        if(checked)
+        {
+            var browserBoxObject = webdeveloper_getSelectedBrowser().boxObject;
+
+            document.getElementById("webdeveloper.magnification.level").value = webdeveloper_getStringPreference("webdeveloper.magnification.level", true);
+            webdeveloper_updatePageMagnifier(0, 0);
+
+            container.addEventListener("DOMMouseScroll", webdeveloper_scrollPageMagnifier, false);
+            window.addEventListener("mousemove", webdeveloper_movePageMagnifier, false);
+
+            container.style.left = (browserBoxObject.x + 10) + "px";
+            container.style.top  = (browserBoxObject.y + 10) + "px";
+            container.hidden     = false;
+        }
+        else
+        {
+            // Try to remove the event listener
+            try
+            {
+                container.removeEventListener("DOMMouseScroll", webdeveloper_scrollPageMagnifier, false);
+            }
+            catch(exception)
+            {
+                // Do nothing
+            }
+
+            // Try to remove the event listener
+            try
+            {
+                window.removeEventListener("mousemove", webdeveloper_movePageMagnifier, false);
+            }
+            catch(exception)
+            {
+                // Do nothing
+            }
+
+            container.hidden = true;
+        }
+
+        webdeveloper_toggleAppliedStyle(element, "webdeveloper-display-page-magnifier");
+    }
+}
+
+// Called when the page magnifier is moved
+function webdeveloper_movePageMagnifier(event)
+{
+    var canvas      = document.getElementById("webdeveloper-page-magnifier");
+    var eventTarget = event.target;
+
+    // If the canvas and event target are set and the canvas is the event target
+    if(canvas && eventTarget && canvas == eventTarget)
+    {
+        var container = document.getElementById("webdeveloper-page-magnifier-container");
+
+        // If the container is set
+        if(container)
+        {
+            var browserBoxObject   = webdeveloper_getSelectedBrowser().boxObject;
+            var browserXPosition   = browserBoxObject.x;
+            var browserYPosition   = browserBoxObject.y;
+            var canvasHalfHeight   = canvas.height / 2;
+            var canvasHalfWidth    = canvas.width / 2;
+            var containerXPosition = event.clientX - canvasHalfWidth;
+            var containerYPosition = event.clientY - canvasHalfHeight;
+            var documentElement    = webdeveloper_getContentDocument().documentElement;
+            var magnificationLevel = parseFloat(webdeveloper_getStringPreference("webdeveloper.magnification.level", true));
+            var magnifierXPosition = event.clientX - browserXPosition - (canvasHalfWidth / magnificationLevel) + documentElement.scrollLeft;
+            var magnifierYPosition = event.clientY - browserYPosition - (canvasHalfHeight / magnificationLevel) + documentElement.scrollTop;
+
+            // If the container X position is less than the browser X position
+            if(containerXPosition < browserXPosition)
+            {
+                containerXPosition = browserXPosition;
+            }
+
+            // If the container Y position is less than the browser Y position
+            if(containerYPosition < browserYPosition)
+            {
+                containerYPosition = browserYPosition;
+            }
+
+            // If the magnifier X position is less than 0
+            if(magnifierXPosition < 0)
+            {
+                magnifierXPosition = 0;
+            }
+
+            // If the magnifier Y position is less than 0
+            if(magnifierYPosition < 0)
+            {
+                magnifierYPosition = 0;
+            }
+
+            container.style.left = containerXPosition + "px";
+            container.style.top  = containerYPosition + "px";
+
+            webdeveloper_updatePageMagnifier(magnifierXPosition, magnifierYPosition);
+        }
+    }
+}
+
+// Called when the page magnifier is scrolled with the mouse wheel
+function webdeveloper_scrollPageMagnifier(event)
+{
+    var eventDetail = event.detail;
+
+    // If the event detail is set
+    if(eventDetail)
+    {
+        var magnificationLevel = parseFloat(webdeveloper_getStringPreference("webdeveloper.magnification.level", true));
+
+        // If the event detail is greater than zero (scroll down)
+        if(eventDetail > 0)
+        {
+            // If the magnification level is greater than one
+            if(magnificationLevel > 1)
+            {
+                magnificationLevel -= 1;
+            }
+        }
+        else
+        {
+            magnificationLevel += 1;
+        }
+
+        document.getElementById("webdeveloper.magnification.level").value = magnificationLevel;
+
+        webdeveloper_setStringPreference("webdeveloper.magnification.level", magnificationLevel);
+        webdeveloper_updatePageMagnifier(0, 0);
+
+        event.preventDefault();
+    }
+}
+
+// Updates the magnification level
+function webdeveloper_updateMagnificationLevel(element)
+{
+    var magnificationLevel = element.value;
+    var stringBundle       = document.getElementById("webdeveloper-string-bundle");
+
+    // If the magnification level is empty or not a number or less than zero
+    if(!magnificationLevel || parseFloat(magnificationLevel) != magnificationLevel || magnificationLevel <= 0)
+    {
+        webdeveloper_error(stringBundle.getString("webdeveloper_invalidWidth"));
+    }
+    else
+    {
+        webdeveloper_setStringPreference("webdeveloper.magnification.level", magnificationLevel);
+        webdeveloper_updatePageMagnifier(0, 0);
+    }
+}
+
+// Updates the page magnifier
+function webdeveloper_updatePageMagnifier(xPosition, yPosition)
+{
+    var canvas = document.getElementById("webdeveloper-page-magnifier");
+
+    // If the canvas was found
+    if(canvas)
+    {
+        var context            = canvas.getContext("2d");
+        var height             = canvas.height;
+        var magnificationLevel = parseFloat(webdeveloper_getStringPreference("webdeveloper.magnification.level", true));
+        var width              = canvas.width;
+
+        context.save();
+        context.scale(magnificationLevel, magnificationLevel);
+        context.drawWindow(webdeveloper_getContentWindow(), xPosition, yPosition, (xPosition + width) / magnificationLevel, (yPosition + height) / magnificationLevel, "rgb(255, 255, 255)");
+        context.restore();
+    }
+}
\ No newline at end of file