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() { 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();
} }

113
lib/pixi/flipeffect.html
View File

@ -1,25 +1,30 @@
<!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
class="flipButton backBtn"
style="visibility:hidden;"
viewBox="0 0 100 100"
preserveAspectRatio="xMidYMid meet"
>
<g stroke-width="8" stroke="white"> <g stroke-width="8" stroke="white">
<circle cx="50" cy="50" r="44" fill="gray" /> <circle cx="50" cy="50" r="44" fill="gray" />
<line x1="30" y1="30" x2="70" y2="70" /> <line x1="30" y1="30" x2="70" y2="70" />
@ -27,64 +32,65 @@
</g> </g>
</svg> </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>
</head> <body onload="Doctest.run()">
<body onload="Doctest.run()"> <h1>
<h1>
Flip Effect Flip Effect
</h1> </h1>
<p> <p>
The flip effect, which simulates a flip between a front and back view of an object The flip effect, which simulates a flip between a front and back view of an object by means of a 3D
by means of a 3D rotation, is an interaction between a PIXI scatter object rotation, is an interaction between a PIXI scatter object and a DOM Flip effect. The PIXI scatter is used as
and a DOM Flip effect. The PIXI scatter is used as the source for the front view the source for the front view of the DOM Flip which is created on demand if the user clicks the Info Button
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.
which is added to the PIXI scatter by the FlipEffect wrapper. </p>
</p> <p>
<p>For the user it simply looks like a single flipping card, but in terms of For the user it simply looks like a single flipping card, but in terms of UI elements, the following levels
UI elements, the following levels are mixed:</p> are mixed:
<ul><li>A PIXI scatter object, typically a zoomable image, as the default front view.</li> </p>
<li>A special button (typically an info button), which triggers the animation.</li> <ul>
<li>A DOM based animation which works on a DOM clone of the PIXI scatter and <li>A PIXI scatter object, typically a zoomable image, as the default front view.</li>
a DOM representation of the back card. The PIXI scatter is hidden in the meanwhile.</li> <li>A special button (typically an info button), which triggers the animation.</li>
<li>If the back card is closed, the DOM nodes are removed and the PIXI scatter <li>
is shown again.</li> A DOM based animation which works on a DOM clone of the PIXI scatter and a DOM representation of the
</ul> back card. The PIXI scatter is hidden in the meanwhile.
<h3> </li>
<li>If the back card is closed, the DOM nodes are removed and the PIXI scatter is shown again.</li>
</ul>
<h3>
Example Example
</h3> </h3>
<main id="main" style="border: 1px solid red; position: relative;" > <main id="main" style="border: 1px solid red; position: relative;">
<canvas id="canvas" class="grayBorder interactive">Canvas not supported</canvas> <canvas id="canvas" class="grayBorder interactive">Canvas not supported</canvas>
</main> </main>
<script class="doctest"> <script class="doctest">
let domScatterContainer = new DOMScatterContainer(main, { stopEvents: false })
let domScatterContainer = new DOMScatterContainer(main, {stopEvents: false})
class ScatterApp extends PIXIApp {
class ScatterApp extends PIXIApp {
sceneFactory() { sceneFactory() {
return new ScatterContainer(this.renderer, { showBounds: true, app: this}) return new ScatterContainer(this.renderer, { showBounds: true, app: this })
} }
setup() { setup() {
super.setup() super.setup()
let urls = ['../examples/women.jpeg', '../examples/king.jpeg'] 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 // We need a loader because the size of the sprite must be known
// when the scatter is defined // when the scatter is defined
let x = 30 let x = 30
let y = 30 let y = 30
for(let url in loader.resources) { for (let url in loader.resources) {
let sprite = PIXI.Sprite.from(url) let sprite = PIXI.Sprite.from(url)
sprite.interactive = true sprite.interactive = true
let scatter = new DisplayObjectScatter(sprite, this.renderer, let scatter = new DisplayObjectScatter(sprite, this.renderer, {
{ x: x, y: y, x: x,
y: y,
startScale: 0.5, startScale: 0.5,
scale: 0.5, scale: 0.5,
minScale: 0.2, minScale: 0.2,
@ -99,15 +105,12 @@ class ScatterApp extends PIXIApp {
}) })
return this 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'