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

<head>
    <meta charset='UTF-8'>
    <title>Utils</title>
    <link rel='stylesheet' href='../iwmlib/lib/3rdparty/highlight/styles/default.css'>
    <link rel='stylesheet' href='../iwmlib/lib/../css/doctest.css'>
    <script src='../iwmlib/lib/3rdparty/highlight/highlight.pack.js'></script>
    <script src='../iwmlib/lib/3rdparty/all.js'></script>
    <script src='../iwmlib/lib/all.js'></script>
    <script src='../iwmlib/lib/pixi/all.js'></script>
    <script src="all.js"></script>

    <style>
        body {
            position: relative;
        }
    </style>
</head>

<body onload="Doctest.run()">
    <h1>Utils</h1>
    <p>Some utility functionalities for the Tuesch.</p>

    <h2>Event Handler</h2>
    <p>
        The event handler class generalizes a common design principle in javascript. When an event occurs, that is of relevance for
        other objects, then this event should be sent out to all objects, that are interested in that event. Objects interested
        in that event, subscribe the event handler and get notified via a callback function.
    </p>
    <script class="doctest">
        let result = []
        function a() { result.push("a") }
        function b() { result.push("b") }
        function c() { result.push("c") }
        function d() { result.push("d") }
        function e() { result.push("e") }
        function f() { result.push("f") }

        //Init and call.
        let eventHandler = new EventHandler("manual", { listeners: [a, b] })
        eventHandler.call()
        Doctest.expect(result.join(","), ["a", "b"].join(","))
        result = []

        // Add single
        eventHandler.add(c)
        eventHandler.call()
        Doctest.expect(result.join(","), ["a", "b", "c"].join(","))
        result = []

        // Add multiple
        eventHandler.addMultiple(d, e, f)
        eventHandler.call()
        Doctest.expect(result.join(","), ["a", "b", "c", "d", "e", "f"].join(","))
        result = []

        //Remove inbetween
        eventHandler.remove(c)
        eventHandler.call()
        Doctest.expect(result.join(","), ["a", "b", "d", "e", "f"].join(","))
        result = []

        // Remove first
        eventHandler.remove(a)
        eventHandler.call()
        Doctest.expect(result.join(","), ["b", "d", "e", "f"].join(","))
        result = []

        // Remove all remaining elements.
        eventHandler.empty()
        eventHandler.call()
        Doctest.expect(result.join(","), [].join(","))
        result = []



    </script>

    <h2>DomUtils</h2>

    Utility functions that help handling the DOM.

    <h3>positionOnElement(element, position)</h3>
    Function that returns the global position for a normalized position.

    <div id="positionOnElementBox" class="box" style="width: 512px;height:256px;border: 1px solid black; box-sizing: border-box; transform: rotate(30deg); margin:100px;"></div>

    <script class="doctest">


        let target = document.getElementById("positionOnElementBox")

        window.addEventListener("load", () => {

            let positions = [
                [0, 0],
                [0, 1],
                [1, 0],
                [0.5,0.5],
                [0.2, 0.2],
                [0.2, 0.8],
                [0.8, 0.2],
                [0.8, 0.8],
            ]

            positions.forEach(position => {
                position = { x: position[0], y: position[1] }
                let transformedPosition = DomUtils.positionOnElement(target, position)
                let dot = document.createElement("div");
                const size = 10;


                Object.assign(dot.style, {
                    width: size + "px",
                    height: size + "px",
                    top: target.offsetTop + target.offsetHeight / 2 + transformedPosition.y  -size/2+ "px",
                    left: target.offsetLeft + target.offsetWidth / 2 + transformedPosition.x -size/2 + "px",
                    position: "absolute",
                    backgroundColor: "green",
                    borderRadius: "50%"
                })


                document.body.appendChild(dot)
            })
        })

    </script>

</body>

</html>