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

Styling.

Browse Source
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() {
/**
* 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();
}

61
lib/pixi/flipeffect.html
View File

@ -1,17 +1,17 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<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>
<link rel="stylesheet" href=".././3rdparty/highlight/styles/default.css">
<link rel="stylesheet" href="../../css/doctest.css">
<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>
<link rel="stylesheet" href="../../css/flipeffect.css">
<link rel="stylesheet" href="../../css/flipeffect.css" />
<template id="flipTemplate">
<div class="flipWrapper">
<div class="flipCard">
@ -19,7 +19,12 @@
<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">
<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" />
@ -27,34 +32,36 @@
</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="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
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>
<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>
<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
@ -63,11 +70,9 @@ is shown again.</li>
<canvas id="canvas" class="grayBorder interactive">Canvas not supported</canvas>
</main>
<script class="doctest">
let domScatterContainer = new DOMScatterContainer(main, { stopEvents: false })
class ScatterApp extends PIXIApp {
sceneFactory() {
return new ScatterContainer(this.renderer, { showBounds: true, app: this })
}
@ -75,7 +80,7 @@ class ScatterApp extends PIXIApp {
setup() {
super.setup()
let urls = ['../examples/women.jpeg', '../examples/king.jpeg']
PIXI.Loader.shared.add(urls).load((loader) => {
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
@ -83,8 +88,9 @@ class ScatterApp extends PIXIApp {
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,
let scatter = new DisplayObjectScatter(sprite, this.renderer, {
x: x,
y: y,
startScale: 0.5,
scale: 0.5,
minScale: 0.2,
@ -101,13 +107,10 @@ class ScatterApp extends PIXIApp {
}
}
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>
</html>

4
lib/pixi/flipeffect.js
View File

@ -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'