Uwe Oestermeier
57d6e8b461
* 'main' of gitea.iwm-tuebingen.de:IWMBrowser/iwmlib: Removed console.logs Fixed timestamp name mismatch. Updated iwmlib and removed log statement. Added pluggable throw behavior. Replaced requestAnimationFrame with setInterval Moved throws to a single loop. Added cancelAnimationFrame update code block to reflect current state Fixed html double code Fixed problem with scrolling text in card drawers. added fix for viewBox rotation bug fixed rollup documented/ solved svg rotation bug # Conflicts: # package.json
110 lines
4.6 KiB
HTML
110 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>Flippable 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>
|
|
|
|
<link rel="stylesheet" href="../css/flipeffect.css" />
|
|
<template id="flipTemplate">
|
|
<div class="flipWrapper">
|
|
<div class="flipCard">
|
|
<div class="flipFace front"></div>
|
|
<div class="flipFace back" style="visibility: hidden"></div>
|
|
</div>
|
|
<!-- Very tricky problem to scale svgs: see https://css-tricks.com/scale-svg/ -->
|
|
<!-- SVG viewPort interferes with DOMMatrix calculations: see
|
|
https://stackoverflow.com/questions/70696387/how-to-get-transform-matrix-of-a-dom-element-->
|
|
<div class="flipButton backBtn" style="visibility:hidden;">
|
|
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" style="width:inherit; height:inherit;">
|
|
<g stroke-width="8" stroke="white">
|
|
<circle cx="50" cy="50" r="44" fill="gray" />
|
|
<line x1="30" y1="30" x2="70" y2="70" />
|
|
<line x1="30" y1="70" x2="70" y2="30" />
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
|
|
<div class="flipButton infoBtn">
|
|
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" style="width:inherit; height:inherit;">
|
|
<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>
|
|
</template>
|
|
|
|
</head>
|
|
<body onload="Doctest.run()">
|
|
<h1>
|
|
Flippable
|
|
</h1>
|
|
<p>
|
|
The flip effect simulates a flip between a front and back view of an object
|
|
by means of a 3D rotation. The DOMFlippable class implements this effect for two
|
|
DOM nodes, one as the front view, the other as the back view. Both views are connected
|
|
via a HTML template that defines the placeholders for front and back views. The
|
|
style file "css/flipeffect.css" holds reasonable default styles for this kind of
|
|
templates.
|
|
</p>
|
|
<p>
|
|
The SVG buttons have to be wrapped in an HTML DOM element which handles events. Otherwise,
|
|
the viewbox of the SVG will interfere with the coordinate transformation.
|
|
</p>
|
|
<pre><code>
|
|
<template id="flipTemplate">
|
|
<div class="flipWrapper">
|
|
<div class="flipCard">
|
|
<div class="flipFace front"></div>
|
|
<div class="flipFace back" style="visibility:hidden;"></div>
|
|
</div>
|
|
<div class="flipButton backBtn" .../>
|
|
<svg .../>
|
|
</div>
|
|
<div class="flipButton infoBtn" .../>
|
|
<svg .../>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</code>
|
|
</pre>
|
|
<h3>Example</h3>
|
|
<main id="main" style="border: 1px solid gray; position: relative; height: 256px"></main>
|
|
<script class="doctest">
|
|
let scatterContainer = new DOMScatterContainer(main, { stopEvents: false })
|
|
if (Capabilities.supportsTemplate()) {
|
|
let flip1 = new DOMFlip(
|
|
scatterContainer,
|
|
flipTemplate,
|
|
new ImageLoader('./examples/king.jpeg'),
|
|
new ImageLoader('./examples/women.jpeg'),
|
|
{ /*tapDelegateFactory: CardWrapper,*/ preloadBack: true }
|
|
)
|
|
flip1.load().then((flip) => {
|
|
flip.centerAt({ x: 150, y: 120 })
|
|
})
|
|
|
|
let flip2 = new DOMFlip(
|
|
scatterContainer,
|
|
flipTemplate,
|
|
new ImageLoader('./examples/king.jpeg'),
|
|
new ImageLoader('./examples/queen.jpeg'),
|
|
{ /*tapDelegateFactory: CardWrapper,*/ preloadBack: true }
|
|
)
|
|
flip2.load().then((flip) => {
|
|
flip.centerAt({ x: 650, y: 120 })
|
|
})
|
|
} else {
|
|
alert('Templates not supported, use Edge, Chrome, Safari or Firefox.')
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|