54 lines
2.5 KiB
HTML
54 lines
2.5 KiB
HTML
|
<!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>
|