147 lines
4.9 KiB
HTML
147 lines
4.9 KiB
HTML
<!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>
|