IWMBrowser/iwmlib
IWMBrowser
/
iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity

Styling.

This commit is contained in:
Sebastian Kupke 2019-10-02 11:51:23 +02:00
parent 8960923514
commit b4bc200fbd
3 changed files with 107 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
dist/iwmlib.js vendored
View File

@ -10978,21 +10978,6 @@
} }
speak() { speak() {
/**
* This is a little bit ugly, but imho the most elegant of all dirty solutions.
*
5ht * Within the plugins we have no knowledge of other cards and such. But must differentiate the
* clicks by their corresponding owner. The SpeechUtterance just takes a text and has no knowledge
* about the node that is currently read to the user.
*
* This means, that we can identify same text, but not differentiate same text on different nodes.
* To account for that, we add the node to the speechSynthesis object (#benefitsOfJavaScript) and
* have access to the node, by - let's say - expanding the functionality of the SpeechSynthesis object.
*
* SO -17.07.19
*/
let activeNode = window.speechSynthesis['speechPluginNode'];
this._updateText(); this._updateText();
} }

209
lib/pixi/flipeffect.html
View File

@ -1,113 +1,116 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PIXI Flip Effect Doctest</title> <title>PIXI Flip Effect Doctest</title>
<link rel="stylesheet" href=".././3rdparty/highlight/styles/default.css"> <link rel="stylesheet" href=".././3rdparty/highlight/styles/default.css" />
<link rel="stylesheet" href="../../css/doctest.css"> <link rel="stylesheet" href="../../css/doctest.css" />
<script src=".././3rdparty/highlight/highlight.pack.js"></script> <script src=".././3rdparty/highlight/highlight.pack.js"></script>
<script src="../../dist/iwmlib.3rdparty.js"></script> <script src="../../dist/iwmlib.3rdparty.js"></script>
<script src="../../dist/iwmlib.js"></script> <script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script> <script src="../../dist/iwmlib.pixi.js"></script>
<link rel="stylesheet" href="../../css/flipeffect.css"> <link rel="stylesheet" href="../../css/flipeffect.css" />
<template id="flipTemplate"> <template id="flipTemplate">
<div class="flipWrapper"> <div class="flipWrapper">
<div class="flipCard"> <div class="flipCard">
<img class="flipFace front" src=""/> <img class="flipFace front" src="" />
<div class="flipFace back" style="visibility:hidden;" ></div> <div class="flipFace back" style="visibility:hidden;"></div>
</div> </div>
<!-- Very tricky problem to scale svgs: see https://css-tricks.com/scale-svg/ --> <!-- Very tricky problem to scale svgs: see https://css-tricks.com/scale-svg/ -->
<svg class="flipButton backBtn" style="visibility:hidden;" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"> <svg
<g stroke-width="8" stroke="white"> class="flipButton backBtn"
<circle cx="50" cy="50" r="44" fill="gray" /> style="visibility:hidden;"
<line x1="30" y1="30" x2="70" y2="70" /> viewBox="0 0 100 100"
<line x1="30" y1="70" x2="70" y2="30" /> preserveAspectRatio="xMidYMid meet"
</g> >
</svg> <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>
<svg class="flipButton infoBtn" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet"> <svg class="flipButton infoBtn" 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="50" r="44" stroke="white" stroke-width="8" fill="gray" />
<circle cx="50" cy="32" r="7" fill="white" /> <circle cx="50" cy="32" r="7" fill="white" />
<line x1="50" y1="46" x2="50" y2="78" stroke="white" stroke-width="12" /> <line x1="50" y1="46" x2="50" y2="78" stroke="white" stroke-width="12" />
</svg> </svg>
</div> </div>
</template> </template>
</head>
<body onload="Doctest.run()">
<h1>
Flip Effect
</h1>
<p>
The flip effect, which simulates a flip between a front and back view of an object by means of a 3D
rotation, is an interaction between a PIXI scatter object and a DOM Flip effect. The PIXI scatter is used as
the source for the front view of the DOM Flip which is created on demand if the user clicks the Info Button
which is added to the PIXI scatter by the FlipEffect wrapper.
</p>
<p>
For the user it simply looks like a single flipping card, but in terms of UI elements, the following levels
are mixed:
</p>
<ul>
<li>A PIXI scatter object, typically a zoomable image, as the default front view.</li>
<li>A special button (typically an info button), which triggers the animation.</li>
<li>
A DOM based animation which works on a DOM clone of the PIXI scatter and a DOM representation of the
back card. The PIXI scatter is hidden in the meanwhile.
</li>
<li>If the back card is closed, the DOM nodes are removed and the PIXI scatter is shown again.</li>
</ul>
<h3>
Example
</h3>
<main id="main" style="border: 1px solid red; position: relative;">
<canvas id="canvas" class="grayBorder interactive">Canvas not supported</canvas>
</main>
<script class="doctest">
let domScatterContainer = new DOMScatterContainer(main, { stopEvents: false })
</head> class ScatterApp extends PIXIApp {
<body onload="Doctest.run()"> sceneFactory() {
<h1> return new ScatterContainer(this.renderer, { showBounds: true, app: this })
Flip Effect }
</h1>
<p>
The flip effect, which simulates a flip between a front and back view of an object
by means of a 3D rotation, is an interaction between a PIXI scatter object
and a DOM Flip effect. The PIXI scatter is used as the source for the front view
of the DOM Flip which is created on demand if the user clicks the Info Button
which is added to the PIXI scatter by the FlipEffect wrapper.
</p>
<p>For the user it simply looks like a single flipping card, but in terms of
UI elements, the following levels are mixed:</p>
<ul><li>A PIXI scatter object, typically a zoomable image, as the default front view.</li>
<li>A special button (typically an info button), which triggers the animation.</li>
<li>A DOM based animation which works on a DOM clone of the PIXI scatter and
a DOM representation of the back card. The PIXI scatter is hidden in the meanwhile.</li>
<li>If the back card is closed, the DOM nodes are removed and the PIXI scatter
is shown again.</li>
</ul>
<h3>
Example
</h3>
<main id="main" style="border: 1px solid red; position: relative;" >
<canvas id="canvas" class="grayBorder interactive">Canvas not supported</canvas>
</main>
<script class="doctest">
let domScatterContainer = new DOMScatterContainer(main, {stopEvents: false}) setup() {
super.setup()
class ScatterApp extends PIXIApp { let urls = ['../examples/women.jpeg', '../examples/king.jpeg']
PIXI.Loader.shared.add(urls).load(loader => {
sceneFactory() { // We need a loader because the size of the sprite must be known
return new ScatterContainer(this.renderer, { showBounds: true, app: this}) // when the scatter is defined
} let x = 30
let y = 30
setup() { for (let url in loader.resources) {
super.setup() let sprite = PIXI.Sprite.from(url)
let urls = ['../examples/women.jpeg', '../examples/king.jpeg'] sprite.interactive = true
PIXI.Loader.shared.add(urls).load((loader) => { let scatter = new DisplayObjectScatter(sprite, this.renderer, {
// We need a loader because the size of the sprite must be known x: x,
// when the scatter is defined y: y,
let x = 30 startScale: 0.5,
let y = 30 scale: 0.5,
for(let url in loader.resources) { minScale: 0.2,
let sprite = PIXI.Sprite.from(url) maxScale: 1
sprite.interactive = true })
let scatter = new DisplayObjectScatter(sprite, this.renderer, this.scene.addChild(sprite)
{ x: x, y: y, x += 100
startScale: 0.5, y += 30
scale: 0.5, let loader = new ImageLoader(url)
minScale: 0.2, let flipEffect = new FlipEffect(scatter, domScatterContainer, flipTemplate, loader)
maxScale: 1 }
}) })
this.scene.addChild(sprite) return this
x += 100 }
y += 30
let loader = new ImageLoader(url)
let flipEffect = new FlipEffect(scatter, domScatterContainer, flipTemplate, loader)
} }
})
return this
}
}
const app = new ScatterApp({ view: canvas, const app = new ScatterApp({ view: canvas, autoResize: false, width: 450, height: 250 })
autoResize: false,
width: 450,
height: 250})
app.setup() app.setup()
app.run() app.run()
</script>
</script> </body>
</body> </html>

4
lib/pixi/flipeffect.js
View File

@ -1,6 +1,4 @@
import { getId, Angle } from '../utils.js' import { CardLoader, DOMFlip } from '../flippable.js'
import { DOMScatter } from '../scatter.js'
import { CardLoader, DOMFlip, DOMFlippable } from '../flippable.js'
import { Capabilities } from '../capabilities.js' import { Capabilities } from '../capabilities.js'
import { DeepZoomImage } from './deepzoom/image.js' import { DeepZoomImage } from './deepzoom/image.js'