iwmlib/lib/popup.html

54 lines
2.5 KiB
HTML
Raw Normal View History

2019-03-21 09:57:27 +01:00
<!doctype html>
<html lang="en">
<head>
<title>Popup Doctest</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
2019-05-22 16:03:19 +02:00
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
2019-03-21 09:57:27 +01:00
<link rel="stylesheet" href="../css/doctest.css">
2019-05-22 16:03:19 +02:00
<script src="./3rdparty/highlight/highlight.pack.js"></script>
<script src="./3rdparty/all.js"></script>
<script src="../dist/iwmlib.js"></script>
2019-03-21 09:57:27 +01:00
</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>