Added minimal navigation breadcrumbs to doctests.
This commit is contained in:
+126
-114
@@ -1,134 +1,146 @@
|
||||
<!doctype html>
|
||||
<html lang='en'>
|
||||
<!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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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')
|
||||
}
|
||||
|
||||
<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 = []
|
||||
|
||||
//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 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 = []
|
||||
|
||||
// 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 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 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>
|
||||
|
||||
// Remove all remaining elements.
|
||||
eventHandler.empty()
|
||||
eventHandler.call()
|
||||
Doctest.expect(result.join(","), [].join(","))
|
||||
result = []
|
||||
<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.
|
||||
|
||||
</script>
|
||||
<div
|
||||
id="positionOnElementBox"
|
||||
class="box"
|
||||
style="
|
||||
width: 512px;
|
||||
height: 256px;
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
transform: rotate(30deg);
|
||||
margin: 100px;
|
||||
"
|
||||
></div>
|
||||
|
||||
<h2>DomUtils</h2>
|
||||
<script class="doctest">
|
||||
let target = document.getElementById('positionOnElementBox')
|
||||
|
||||
Utility functions that help handling the DOM.
|
||||
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]
|
||||
]
|
||||
|
||||
<h3>positionOnElement(element, position)</h3>
|
||||
Function that returns the global position for a normalized position.
|
||||
positions.forEach((position) => {
|
||||
position = { x: position[0], y: position[1] }
|
||||
let transformedPosition = DomUtils.positionOnElement(target, position)
|
||||
let dot = document.createElement('div')
|
||||
const size = 10
|
||||
|
||||
<div id="positionOnElementBox" class="box" style="width: 512px;height:256px;border: 1px solid black; box-sizing: border-box; transform: rotate(30deg); margin:100px;"></div>
|
||||
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%'
|
||||
})
|
||||
|
||||
<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)
|
||||
})
|
||||
|
||||
|
||||
document.body.appendChild(dot)
|
||||
})
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user