<!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="./3rdparty/highlight/styles/default.css"> <link rel="stylesheet" href="../css/doctest.css"> <script src="./3rdparty/highlight/highlight.pack.js"></script> <script src="../dist/iwmlib.3rdparty.js"></script> <script src="../dist/iwmlib.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>