Added minimal navigation breadcrumbs to doctests.
This commit is contained in:
+116
-112
@@ -1,70 +1,70 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Scatter Doctest</title>
|
||||
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
|
||||
<link rel="stylesheet" href="../css/doctest.css">
|
||||
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
||||
<script src="../dist/iwmlib.3rdparty.js"></script>
|
||||
<script src="../dist/iwmlib.js"></script>
|
||||
<script>
|
||||
function drawPolygons() {
|
||||
debugCanvas.width = main.getBoundingClientRect().width
|
||||
let context = debugCanvas.getContext('2d')
|
||||
context.clearRect(0, 0, debugCanvas.width, debugCanvas.height)
|
||||
let stage = scatterContainer.polygon
|
||||
stage.draw(context, { stroke: "#0000FF"})
|
||||
for(let scatter of scatterContainer.scatter.values()) {
|
||||
let polygon = scatter.polygon
|
||||
polygon.draw(context, { stroke: '#0000FF'})
|
||||
}
|
||||
}
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>Scatter Doctest</title>
|
||||
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css" />
|
||||
<link rel="stylesheet" href="../css/doctest.css" />
|
||||
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
||||
<script src="../dist/iwmlib.3rdparty.js"></script>
|
||||
<script src="../dist/iwmlib.js"></script>
|
||||
<script>
|
||||
function drawPolygons() {
|
||||
debugCanvas.width = main.getBoundingClientRect().width
|
||||
let context = debugCanvas.getContext('2d')
|
||||
context.clearRect(0, 0, debugCanvas.width, debugCanvas.height)
|
||||
let stage = scatterContainer.polygon
|
||||
stage.draw(context, { stroke: '#0000FF' })
|
||||
for (let scatter of scatterContainer.scatter.values()) {
|
||||
let polygon = scatter.polygon
|
||||
polygon.draw(context, { stroke: '#0000FF' })
|
||||
}
|
||||
}
|
||||
|
||||
function animatePolygons() {
|
||||
requestAnimationFrame((dt) => {
|
||||
drawPolygons()
|
||||
animatePolygons()
|
||||
|
||||
})
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="Doctest.run()" >
|
||||
<h1>
|
||||
Scatter
|
||||
</h1>
|
||||
<p>
|
||||
Scatter objects are UI elements that can be rotated, scaled or moved around,
|
||||
which typically leads to "scattered" layouts. Scatters come in two flavours:
|
||||
DOM Scatters are working with arbitrary DOM elements, wheras PIXI Scatter
|
||||
work with PIXI Containers and DisplayObjects within the PIXI scene graph. Here
|
||||
we describe the more basic DOM scatter.
|
||||
</p>
|
||||
<p>Let's look at an example.</p>
|
||||
<div id="main" class="grayBorder interactive" style="position: relative; width: 100%; height: 280px;">
|
||||
<!-- Note that we need to set draggable to false to avoid conflicts. The DOM elements
|
||||
function animatePolygons() {
|
||||
requestAnimationFrame((dt) => {
|
||||
drawPolygons()
|
||||
animatePolygons()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="Doctest.run()">
|
||||
<h1><a href="index.html">lib.</a>Scatter</h1>
|
||||
<p>
|
||||
Scatter objects are UI elements that can be rotated, scaled or moved around, which typically leads to
|
||||
"scattered" layouts. Scatters come in two flavours: DOM Scatters are working with arbitrary DOM elements,
|
||||
wheras PIXI Scatter work with PIXI Containers and DisplayObjects within the PIXI scene graph. Here we
|
||||
describe the more basic DOM scatter.
|
||||
</p>
|
||||
<p>Let's look at an example.</p>
|
||||
<div id="main" class="grayBorder interactive" style="position: relative; width: 100%; height: 280px">
|
||||
<!-- Note that we need to set draggable to false to avoid conflicts. The DOM elements
|
||||
must also be positioned absolutely. -->
|
||||
<img id="women" draggable="false" style="position: absolute;" src="examples/women.jpeg" />
|
||||
<img id="king" draggable="false" style="position: absolute;" src="examples/king.jpeg" />
|
||||
<img id="women" draggable="false" style="position: absolute" src="examples/women.jpeg" />
|
||||
<img id="king" draggable="false" style="position: absolute" src="examples/king.jpeg" />
|
||||
|
||||
<canvas id="debugCanvas" height="280" style="z-index: 100000; pointer-events: none; position: absolute; border: 1px solid blue;">
|
||||
Canvas not supported.
|
||||
</canvas>
|
||||
</div>
|
||||
<canvas
|
||||
id="debugCanvas"
|
||||
height="280"
|
||||
style="z-index: 100000; pointer-events: none; position: absolute; border: 1px solid blue"
|
||||
>
|
||||
Canvas not supported.
|
||||
</canvas>
|
||||
</div>
|
||||
|
||||
<script class="doctest">
|
||||
let dx = 44
|
||||
<script class="doctest">
|
||||
let dx = 44
|
||||
|
||||
let app = new App()
|
||||
let scatterContainer = new DOMScatterContainer(main)
|
||||
let angle = 0 // 15
|
||||
for(let key of ['women', 'king']) {
|
||||
let image = document.getElementById(key)
|
||||
// The DOMScatter needs initial width and height. Therefore we
|
||||
// define the scatter when the image size is known, i.e. after loading...
|
||||
image.onload = (e) => {
|
||||
let scatter = new DOMScatter(image, scatterContainer, {
|
||||
let app = new App()
|
||||
let scatterContainer = new DOMScatterContainer(main)
|
||||
let angle = 0 // 15
|
||||
for (let key of ['women', 'king']) {
|
||||
let image = document.getElementById(key)
|
||||
// The DOMScatter needs initial width and height. Therefore we
|
||||
// define the scatter when the image size is known, i.e. after loading...
|
||||
image.onload = (e) => {
|
||||
let scatter = new DOMScatter(image, scatterContainer, {
|
||||
x: dx,
|
||||
y: 44,
|
||||
width: e.target.naturalWidth,
|
||||
@@ -72,57 +72,61 @@ for(let key of ['women', 'king']) {
|
||||
rotationDegrees: angle,
|
||||
throwVisibility: 88,
|
||||
minScale: 0.5,
|
||||
maxScale: 1.5})
|
||||
dx += 300
|
||||
angle = -angle
|
||||
}
|
||||
}
|
||||
app.run()
|
||||
animatePolygons()
|
||||
</script>
|
||||
<h1>
|
||||
Interactive Content
|
||||
</h1>
|
||||
<p>
|
||||
Scatter objects may contain interactive HTML structures. There is one major flag that allows
|
||||
to simulate click events by using taps. If the scatter detects a tap it looks for clickable
|
||||
elements under or nearby the event position and calls the click handler. Thus gestures
|
||||
can be disambiguated as moves, zooms. or taps.
|
||||
maxScale: 1.5
|
||||
})
|
||||
dx += 300
|
||||
angle = -angle
|
||||
}
|
||||
}
|
||||
app.run()
|
||||
animatePolygons()
|
||||
</script>
|
||||
<h1>Interactive Content</h1>
|
||||
<p>
|
||||
Scatter objects may contain interactive HTML structures. There is one major flag that allows to simulate
|
||||
click events by using taps. If the scatter detects a tap it looks for clickable elements under or nearby the
|
||||
event position and calls the click handler. Thus gestures can be disambiguated as moves, zooms. or taps.
|
||||
Note that on touch devices you can tap beside the object if you use an object that implements the
|
||||
ITapDelegate interface. An ITapDelegate allowes a distance that can be configured by allowClickDistance. The
|
||||
default value is 44px but here we use 88px.
|
||||
</p>
|
||||
|
||||
Note that on touch devices you can tap beside the object if you use an object that implements the ITapDelegate interface.
|
||||
An ITapDelegate allowes a distance that can be configured by allowClickDistance. The default value is 44px but here we
|
||||
use 88px.
|
||||
</p>
|
||||
<div id="contentExample" class="grayBorder interactive" style="position: relative; width: 100%; height: 280px">
|
||||
<div id="interactiveContent">
|
||||
<img draggable="false" style="position: absolute" src="examples/women.jpeg" />
|
||||
<a style="position: absolute; top: 10px; right: 10px; color: white" href="javascript:alert('test link')"
|
||||
>A Link</a
|
||||
>
|
||||
<div onclick="alert('div clicked')" style="position: absolute; top: 30px; right: 10px; color: white">
|
||||
A Div with click handler
|
||||
</div>
|
||||
<svg
|
||||
onclick="alert('svg clicked')"
|
||||
style="position: absolute; right: 0px; bottom: 0px; width: 32px; height: 32px"
|
||||
viewBox="0 0 100 100"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<circle cx="50" cy="50" r="44" stroke="white" stroke-width="8" fill="gray" />
|
||||
<circle cx="50" cy="32" r="7" fill="white" />
|
||||
<line x1="50" y1="46" x2="50" y2="78" stroke="white" stroke-width="12" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="contentExample" class="grayBorder interactive" style="position: relative; width: 100%; height: 280px;">
|
||||
|
||||
<div id="interactiveContent">
|
||||
<img draggable="false" style="position: absolute;" src="examples/women.jpeg" />
|
||||
<a style="position:absolute; top: 10px; right: 10px; color:white;" href="javascript:alert('test link')">A Link</a>
|
||||
<div onclick="alert('div clicked')" style="position:absolute; top: 30px; right: 10px; color:white;">A Div with click handler</div>
|
||||
<svg onclick="alert('svg clicked')" style="position: absolute; right: 0px; bottom: 0px; width: 32px; height: 32px;" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
|
||||
<circle cx="50" cy="50" r="44" stroke="white" stroke-width="8" fill="gray" />
|
||||
<circle cx="50" cy="32" r="7" fill="white" />
|
||||
<line x1="50" y1="46" x2="50" y2="78" stroke="white" stroke-width="12" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<script class="doctest">
|
||||
let contentContainer = new DOMScatterContainer(contentExample)
|
||||
|
||||
<script class="doctest">
|
||||
|
||||
let contentContainer = new DOMScatterContainer(contentExample)
|
||||
|
||||
let tapDelegate = new CardWrapper(interactiveContent, { allowClickDistance: 88})
|
||||
new DOMScatter(interactiveContent, contentContainer, {
|
||||
x: 44,
|
||||
y: 44,
|
||||
width: 274,
|
||||
height: 184,
|
||||
tapDelegate,
|
||||
throwVisibility: 88,
|
||||
minScale: 0.5,
|
||||
maxScale: 1.5})
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
let tapDelegate = new CardWrapper(interactiveContent, { allowClickDistance: 88 })
|
||||
new DOMScatter(interactiveContent, contentContainer, {
|
||||
x: 44,
|
||||
y: 44,
|
||||
width: 274,
|
||||
height: 184,
|
||||
tapDelegate,
|
||||
throwVisibility: 88,
|
||||
minScale: 0.5,
|
||||
maxScale: 1.5
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user