Added minimal navigation breadcrumbs to doctests.
This commit is contained in:
+81
-59
@@ -1,42 +1,55 @@
|
||||
<!doctype 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>
|
||||
<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>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">
|
||||
<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()
|
||||
|
||||
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 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 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)
|
||||
|
||||
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 = `
|
||||
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
|
||||
@@ -49,29 +62,38 @@ 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>
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user