134 lines
4.1 KiB
HTML
134 lines
4.1 KiB
HTML
|
<!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>
|