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 >
2019-05-23 11:21:46 +02:00
< script src = "../dist/iwmlib.3rdparty.js" > < / script >
< script src = "../dist/iwmlib.js" > < / script >
2019-03-21 09:57:27 +01:00
< / head >
< body id = "page" onload = "Doctest.run()" >
< h1 >
2023-05-09 13:25:39 +02:00
< a href = "index.html" > lib.< / a > Popup
2019-03-21 09:57:27 +01:00
< / 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 >
