<!doctype html>
<html lang="en">

<head>
    <title>Poppable 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="./3rdparty/all.js"></script>
    <script src="../dist/iwmlib.js"></script>
</head>

<body id="page" onload="Doctest.run()">
    <h1>
        Poppables
    </h1>
    <p>
        Poppables present information on demand in a given context. This
        is an abstract base class for Popup menus and other contextual information
        like image highlights. It's main purpose is to ensure that only
        one poppable at a time can be shown in a given context. Note
        that in an application multiple poppables can be shown in different context
        at the same time.
    </p>
    <p>Let's look at an example of a popup class. In this class the register
    method is called by the constructor. The class also implements a close
    method which is called if the second poppable is registered.
    <script class="doctest">
    class ConcretePoppable extends Poppable {

        constructor(context) {
            super()
            this.register(context)
        }

        close() {
            alert("closed")
        }
    }

    let context = window
    let a = new ConcretePoppable(context)
    let b = new ConcretePoppable(context)

</script>
    </p>

</body>