Initial commit.

2019-03-21 09:57:27 +01:00
parent 9893d5de24
commit 80317c5026
1907 changed files with 502783 additions and 0 deletions
@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <title>Popup Doctest</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <link rel="stylesheet" href="../lib/3rdparty/highlight/styles/default.css">
+    <link rel="stylesheet" href="../css/doctest.css">
+    <script src="../lib/3rdparty/highlight/highlight.pack.js"></script>
+    <script src="../lib/3rdparty/all.js"></script>
+    <script src="all.js"></script>
+</head>
+
+<body id="page" onload="Doctest.run()">
+    <h1>
+        Popups
+    </h1>
+    <p>
+        Popups present context information on demand at a specific place.
+    </p>
+    <p>Let's look at an example of a popup. Active the popup by using a context (right) click. Note that the position of the
+        open command must be in the coordinates of the parent node.
+        <pre><code class="html">
+oncontextmenu="Popup.open(content, 
+    {x: event.offsetX, y: event.offsetY}, 
+    {parent: example,
+    keepWithin: example}); return false;"
+</code></pre>
+    </p>
+    <div id="example" class="interactive" style="position:relative; width: 100%; height: 200px; border: 1px solid lightgray"
+        oncontextmenu="Popup.open(content, {x: event.offsetX, y: event.offsetY}, {parent: example, keepWithin: example}); return false;"></div>
+    <script class="doctest">
+        let content = { "text": "<p>A sample text that is long enough to demonstrate problems to fit within bounds.</p>" }
+        let app = new App()
+        let popup = new Popup({ parent: example, fontSize: "2em", autoClose: false })
+
+        // Using JavaScripts arrow functions we can describe the
+        // context commands in a concise way
+        popup.showAt(content,
+            { x: 200, y: 150 })
+        app.run()
+    </script>
+    <p>Sometimes popups are used within scaled, rotated, and translated DOM containers. Left click into the following scaled (0.5)
+        and rotated container.
+    </p>
+
+    <div id="example2" class="interactive" style="position:relative; width: 100%; height: 200px; border: 1px solid lightgray; transform: scale(0.5) rotate(15deg);"
+        oncontextmenu="Popup.open(content, {x: event.offsetX, y: event.offsetY}, {parent: example2, keepWithin: example2}); return false;"></div>
+
+    <p>Another complication results from links that are too long to fit within
+        <a href="#" onclick="Popup.open(content, Popup.targetCenter(event), {parent: page, keepWithin: page}); return false;">one line and which break if the page gets smaller.</a>
+        This can be solved by using the Popup.targetCenter(event) as provider for the popup position.
+    </p>
+</body>