<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Utils</title>
<link rel="stylesheet" href="../../../lib/3rdparty/highlight/styles/default.css" />
<link rel="stylesheet" href="../../../css/doctest.css" />
<script src="../../../lib/3rdparty/highlight/highlight.pack.js"></script>
<script src="../../../dist/iwmlib.3rdparty.js"></script>
<script src="../../../dist/iwmlib.js"></script>
<script src="../../../dist/iwmlib.pixi.js"></script>
<script src="all.js"></script>
<style>
body {
position: relative;
}
</style>
</head>
<body onload="Doctest.run()">
<h1><a href="../../index.html">lib.</a><a href="../index.html">pixi.</a><a href="index.html">maps.</a>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>