Styling.
This commit is contained in:
parent
8960923514
commit
b4bc200fbd
|
|
@ -10978,21 +10978,6 @@
|
|||
}
|
||||
|
||||
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();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,113 +1,116 @@
|
|||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>PIXI Flip Effect 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>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>PIXI Flip Effect 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 src="../../dist/iwmlib.pixi.js"></script>
|
||||
<script src="../../dist/iwmlib.js"></script>
|
||||
<script src="../../dist/iwmlib.pixi.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="../../css/flipeffect.css">
|
||||
<template id="flipTemplate">
|
||||
<div class="flipWrapper">
|
||||
<div class="flipCard">
|
||||
<img class="flipFace front" src=""/>
|
||||
<div class="flipFace back" style="visibility:hidden;" ></div>
|
||||
</div>
|
||||
<link rel="stylesheet" href="../../css/flipeffect.css" />
|
||||
<template id="flipTemplate">
|
||||
<div class="flipWrapper">
|
||||
<div class="flipCard">
|
||||
<img class="flipFace front" src="" />
|
||||
<div class="flipFace back" style="visibility:hidden;"></div>
|
||||
</div>
|
||||
<!-- 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">
|
||||
<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 backBtn"
|
||||
style="visibility:hidden;"
|
||||
viewBox="0 0 100 100"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<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">
|
||||
<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>
|
||||
</template>
|
||||
<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="32" r="7" fill="white" />
|
||||
<line x1="50" y1="46" x2="50" y2="78" stroke="white" stroke-width="12" />
|
||||
</svg>
|
||||
</div>
|
||||
</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>
|
||||
<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">
|
||||
class ScatterApp extends PIXIApp {
|
||||
sceneFactory() {
|
||||
return new ScatterContainer(this.renderer, { showBounds: true, app: this })
|
||||
}
|
||||
|
||||
let domScatterContainer = new DOMScatterContainer(main, {stopEvents: false})
|
||||
|
||||
class ScatterApp extends PIXIApp {
|
||||
|
||||
sceneFactory() {
|
||||
return new ScatterContainer(this.renderer, { showBounds: true, app: this})
|
||||
}
|
||||
|
||||
setup() {
|
||||
super.setup()
|
||||
let urls = ['../examples/women.jpeg', '../examples/king.jpeg']
|
||||
PIXI.Loader.shared.add(urls).load((loader) => {
|
||||
// We need a loader because the size of the sprite must be known
|
||||
// when the scatter is defined
|
||||
let x = 30
|
||||
let y = 30
|
||||
for(let url in loader.resources) {
|
||||
let sprite = PIXI.Sprite.from(url)
|
||||
sprite.interactive = true
|
||||
let scatter = new DisplayObjectScatter(sprite, this.renderer,
|
||||
{ x: x, y: y,
|
||||
startScale: 0.5,
|
||||
scale: 0.5,
|
||||
minScale: 0.2,
|
||||
maxScale: 1
|
||||
})
|
||||
this.scene.addChild(sprite)
|
||||
x += 100
|
||||
y += 30
|
||||
let loader = new ImageLoader(url)
|
||||
let flipEffect = new FlipEffect(scatter, domScatterContainer, flipTemplate, loader)
|
||||
setup() {
|
||||
super.setup()
|
||||
let urls = ['../examples/women.jpeg', '../examples/king.jpeg']
|
||||
PIXI.Loader.shared.add(urls).load(loader => {
|
||||
// We need a loader because the size of the sprite must be known
|
||||
// when the scatter is defined
|
||||
let x = 30
|
||||
let y = 30
|
||||
for (let url in loader.resources) {
|
||||
let sprite = PIXI.Sprite.from(url)
|
||||
sprite.interactive = true
|
||||
let scatter = new DisplayObjectScatter(sprite, this.renderer, {
|
||||
x: x,
|
||||
y: y,
|
||||
startScale: 0.5,
|
||||
scale: 0.5,
|
||||
minScale: 0.2,
|
||||
maxScale: 1
|
||||
})
|
||||
this.scene.addChild(sprite)
|
||||
x += 100
|
||||
y += 30
|
||||
let loader = new ImageLoader(url)
|
||||
let flipEffect = new FlipEffect(scatter, domScatterContainer, flipTemplate, loader)
|
||||
}
|
||||
})
|
||||
return this
|
||||
}
|
||||
}
|
||||
})
|
||||
return this
|
||||
}
|
||||
}
|
||||
|
||||
const app = new ScatterApp({ view: canvas,
|
||||
autoResize: false,
|
||||
width: 450,
|
||||
height: 250})
|
||||
const app = new ScatterApp({ view: canvas, autoResize: false, width: 450, height: 250 })
|
||||
|
||||
app.setup()
|
||||
app.run()
|
||||
|
||||
</script>
|
||||
</body>
|
||||
app.setup()
|
||||
app.run()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
import { getId, Angle } from '../utils.js'
|
||||
import { DOMScatter } from '../scatter.js'
|
||||
import { CardLoader, DOMFlip, DOMFlippable } from '../flippable.js'
|
||||
import { CardLoader, DOMFlip } from '../flippable.js'
|
||||
import { Capabilities } from '../capabilities.js'
|
||||
import { DeepZoomImage } from './deepzoom/image.js'
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue