iwmlib/lib/pixi/popover.html

100 lines
4.0 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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>
</head>
<body onload="Doctest.run()">
<h1><a href="../index.html">lib.</a><a href="index.html">pixi.</a>Popover</h1>
<p>
Add small overlay content, like those found in iOS, to any element for housing secondary information. The
Popover plugin is similar to tooltips; it is a pop-up box that appears when the user clicks or touches an
element. The difference is that the popover can contain much more content.
</p>
<p>Let's look at an example of a popover:</p>
<canvas id="canvas" class="grayBorder interactive">Canvas not supported</canvas>
<script class="doctest">
const app = new PIXIApp({
view: canvas,
autoResize: false,
width: 850,
height: 450
})
.setup()
.run()
let popover1 = new Popover({ title: 'Popover title', text: 'This is the popover text.', x: 150, y: 130 })
app.scene.addChild(popover1)
let popover2 = new Popover({
text: 'This is another popover text. It has more words than the first one, some line breaks, \n\nbut no title :-(',
x: 50,
y: 230,
placement: 'right',
width: 180
})
app.scene.addChild(popover2)
let popover3 = new Popover({
title: 'Popover title 3. This title has many words but the Popover has no text...',
x: 650,
y: 70,
placement: 'left'
})
app.scene.addChild(popover3)
const text4 = `
Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses
getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er,
es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens
aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem
ungeheueren Ungeziefer verwandelt. Und es war ihnen wie eine Bestätigung
ihrer neuen Träume und guten Absichten, als am Ziele ihrer Fahrt die
Tochter als erste sich erhob und ihren jungen Körper dehnte. »Es ist ein
eigentümlicher Apparat«, sagte der Offizier zu dem Forschungsreisenden
und überblickte mit einem gewissermaßen bewundernden Blick den ihm doch
wohlbekannten Apparat.
`
let popover4 = new Popover({
title: 'Popover title 4',
text: text4,
x: 650,
y: 120,
width: 380,
placement: 'bottom',
titleStyle: {
fontFamily: 'Arial',
fontSize: 40,
fontStyle: 'italic',
fontWeight: 'bold',
fill: ['#6b6acf', '#d7626c'], // gradient
stroke: '#393879',
strokeThickness: 6,
dropShadow: true,
dropShadowColor: '#e7bc51',
dropShadowBlur: 4,
dropShadowAngle: Math.PI / 6,
dropShadowDistance: 3,
wordWrap: true,
wordWrapWidth: 440
},
textStyle: {
fontFamily: 'Arial',
fontSize: 10,
fill: '#76a9c9',
strokeThickness: 5,
wordWrap: true
}
})
app.scene.addChild(popover4)
</script>
</body>
</html>