2023-05-09 13:25:39 +02:00
|
|
|
<!DOCTYPE html>
|
2019-03-21 09:57:27 +01:00
|
|
|
<html lang="en">
|
2023-05-09 13:25:39 +02:00
|
|
|
<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>
|
2019-03-21 09:57:27 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
<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()
|
2019-03-21 09:57:27 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
let popover1 = new Popover({ title: 'Popover title', text: 'This is the popover text.', x: 150, y: 130 })
|
|
|
|
|
app.scene.addChild(popover1)
|
2019-03-21 09:57:27 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
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)
|
2019-03-21 09:57:27 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
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)
|
2019-03-21 09:57:27 +01:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
const text4 = `
|
2019-03-21 09:57:27 +01:00
|
|
|
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.
|
|
|
|
|
`
|
|
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
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>
|
