Restructured library.

2019-03-22 12:54:57 +01:00
parent 1bc2deb4d3
commit d1efeeffa6
1912 changed files with 21424 additions and 21383 deletions
@@ -0,0 +1,77 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<link rel="stylesheet" href="../../lib/3rdparty/highlight/styles/default.css">
+	<link rel="stylesheet" href="../../css/doctest.css">
+	<script src="../../lib/3rdparty/highlight/highlight.pack.js"></script>
+    <script src="../../lib/3rdparty/all.js"></script>
+
+	<script src="../all.js"></script>
+	<script src="./all.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">
+
+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>