<!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>