Implemented a mapChangeLock variable to prevent mapChanges.

Migrated a  ot of the content from the tuesch to the iwmlib.
This is before the decoupeling of the layers.

.eslintignore

@@ -0,0 +1,2 @@
+dist/*
+doc/out/*

.eslintrc

@@ -0,0 +1,32 @@
+{
+    "parserOptions": {
+        "ecmaVersion": 10,
+        "sourceType": "module",
+        "ecmaFeatures": {
+            "impliedStrict": true,
+            "modules": true
+        }
+    },
+    "env": {
+        "browser": true,
+        "es6": true,
+        "node": true,
+        "jquery": true,
+        "worker": true,
+        "mocha": true,
+        "serviceworker": true
+    },
+    "globals": {
+        "PIXI": false,
+        "TweenLite": false,
+        "TweenMax": false,
+        "TimelineLite": false,
+        "TimelineMax": false,
+        "SystemJS": false,
+        "app": true
+    },
+    "plugins": [
+        "prettier"
+    ],
+    "extends": ["eslint:recommended", "plugin:prettier/recommended"]
+}

.gitignore

@@ -79,3 +79,4 @@ typings/
 # own
 *.code-workspace
 .history/
+.vscode/

.htmlhintrc

@@ -0,0 +1,3 @@
+{
+    
+}

.prettierrc

@@ -0,0 +1,7 @@
+{
+    "singleQuote": true,
+    "jsxSingleQuote": true,
+    "tabWidth": 4,
+    "semi": false,
+    "printWidth": 120
+}

.stylelintignore

@@ -0,0 +1,3 @@
+dist/*
+doc/*
+lib/*

.stylelintrc.json

@@ -0,0 +1,11 @@
+{
+    "extends": "stylelint-config-standard",
+    "rules": {
+        "indentation": 4,
+        "selector-list-comma-newline-after": "never-multi-line",
+        "no-eol-whitespace": [true, {
+            "ignore": ["empty-lines"]
+        }]
+    },
+    "ignoreFiles": []
+}

.vscode/launch.json

@@ -0,0 +1,26 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Launch Program",
+            "program": "${workspaceFolder}\\index.js"
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "testrunner",
+            "program": "${workspaceFolder}\\bin\\testrunner.js"
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "single",
+            "program": "${workspaceFolder}\\bin\\singleshot.js"
+        }
+    ]
+}

README.md

@@ -40,6 +40,8 @@ Afterwards you can view the documentation here:
 
 ## Useful PixiJS Resources
 
+Currently using PixiJS version 5
+
 - The PixiJS [JavaScript API Docs](http://pixijs.download/dev/docs/index.html)
 - The PixiJS [Examples](http://pixijs.github.io/examples/#/basics/basic.js)
 - The PixiJS [GitHub Repository](https://github.com/pixijs/pixi.js)
@@ -47,4 +49,4 @@ Afterwards you can view the documentation here:
 ## List of 3<sup>rd</sup> party libraries included
 
 - [PixiJS](http://www.pixijs.com)
-- [Greensock](https://greensock.com) with TweenLite
+- [Greensock](https://greensock.com) with TweenMax and TimelineMax

assets/images/close.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
+	<rect x="0" y="0" width="100" height="100" style="fill:#6699FF; stroke:rgba(0,0,0,0)" />
+	<g stroke-width="10" stroke="white">
+			<line x1="25" y1="25" x2="75" y2="75" />
+			<line x1="25" y1="75" x2="75" y2="25" />
+	</g>
+</svg>

assets/images/close_popup.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
+	<line x1="20" y1="20" x2="80" y2="80" stroke="black" stroke-width="8" />
+	<line x1="80" y1="20" x2="20" y2="80" stroke="black" stroke-width="8" />
+</svg>

assets/images/info.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" >
+    <rect x="0" y="0" width="100" height="100" style="fill:#6699FF; stroke:rgba(0,0,0,0)" />
+	<circle cx="50" cy="33" r="8" fill="rgb(235, 230, 220)" />
+	<line x1="50" y1="44" x2="50" y2="75" stroke="rgb(235, 230, 220)" stroke-width="14" />
+</svg>

assets/images/resize_popup.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
+	<line x1="20" y1="80" x2="80" y2="20" stroke="lightgray" stroke-width="8" />
+	<line x1="40" y1="80" x2="80" y2="40" stroke="lightgray" stroke-width="8" />
+</svg>

bin/README.md

@@ -0,0 +1,23 @@
+Testrunner prerequisites
+========================
+
+npm install puppeteer
+
+
+testrunner.js
+-------------
+start from iwmlib directory with node testrunner
+
+defined in package.json
+"testrunner": "node bin/testrunner.js"
+
+or in vscode, defined in launch.json like
+{
+    "type": "node",
+    "request": "launch",
+    "name": "testrunner",
+    "program": "${workspaceFolder}\\bin\\testrunner.js"
+}
+
+iterates all doctest.html files that are listed in index.html
+create a screenshot of all pages

bin/singleshot.js

@@ -0,0 +1,70 @@
+/**
+ * test one single page, make a screenshot and log errors to 
+ * console
+ * (c) 2019 - Leibniz-Insitut für Wissensmedien
+ * 
+ */
+const puppeteer = require('puppeteer');
+const fs = require("fs")
+const path = require("path")
+const start_dir = process.cwd()
+
+
+// const start_file = path.join(start_dir,"lib","frames.html")
+const start_file = path.join(start_dir,"lib","pixi","badge.html")
+
+function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+const events = ["error","pageerror"]
+function logPageEvent(event){
+    if(event !== undefined){
+         console.log(event.message)
+    }
+}
+
+async function makeScreenshot(href){
+    
+    const browser = await puppeteer.launch({
+        // headless: false,
+        // loglevel : 0,
+        args : [
+        '–allow-file-access-from-files',
+      ],});
+    const page = await browser.newPage();
+    
+    await page.setViewport({width: 1024,height : 624})
+    for (var i = 0; i < events.length; i++) {
+        page.on(events[i],logPageEvent)
+    }
+    page.once("load",logPageEvent)
+
+    // await Promise.all([ page.coverage.startJSCoverage() ]);
+    await page.goto(href)
+    // const jsCoverage = await Promise.all([ page.coverage.stopJSCoverage() ]);
+
+    const fname = path.parse(href).name
+
+    if (fname != "index"){
+        image_url = href.replace(fname + ".html" ,"thumbnails/" + fname + ".png")
+    }
+    else{
+        image_url = href.replace(fname + ".html" ,"thumbnail.png")
+    }
+    image_url = image_url.replace("file:///","")
+    console.log(image_url)
+    // console.log(jsCoverage)
+    
+    page.removeAllListeners()
+    
+    await page.screenshot({path: image_url});
+    await browser.close();
+}
+
+
+(async function(){
+
+        await makeScreenshot(start_file)
+    }
+)()

bin/testrunner.js

@@ -0,0 +1,116 @@
+/**
+ *
+ * make screenshots and log errors to
+ * console
+ * (c) 2019 - Leibniz-Insitut für Wissensmedien
+ *
+ */
+
+const puppeteer = require('puppeteer');
+const fs_bare = require("fs") // required for fs-extra
+const fs = require("fs-extra")
+const path = require("path")
+const start_dir = process.cwd()
+const start_file = path.join(start_dir,"lib","index.html")
+
+const start_file_uri = path.join("file:///", start_file )
+
+// define events and log them
+const events = ["error","pageerror"]
+function logPageEvent(event){
+    if (event !== undefined){
+     console.log(event.toString())
+    }
+}
+
+async function makeScreenshot(href){
+
+    const browser = await puppeteer.launch({args: [
+        '–allow-file-access-from-files',
+      ],});
+
+    const page = await browser.newPage();
+
+    await page.setViewport({width: 1024,height : 624})
+
+    // register events
+    for (var i = 0; i < events.length; i++) {
+        page.on(events[i],logPageEvent)
+    }
+    page.once("load",logPageEvent)
+
+    await page.goto(href)
+    href = href.replace("file:///","")
+    const fname = path.parse(href).name
+    let fpath
+    if (fname != "index"){
+        image_url = href.replace(fname + ".html" ,"thumbnails/" + fname + ".png")
+        fpath = href.replace(fname + ".html", "thumbnails")
+    }
+    else{
+        image_url = href.replace(fname + ".html" ,"thumbnail.png")
+        fpath = href.replace(fname + ".html", "")
+    }
+    // image_url = image_url.replace("file:///","")
+    // fpath = fpath.replace("file:///","")
+
+    page.removeAllListeners()
+
+    fs.ensureDir(fpath)
+
+    await page.screenshot({path: image_url});
+    await browser.close();
+}
+
+/**
+ *
+ * collect all navigational links in all documents
+ *
+ * */
+
+async function collectLinks(href,reflist)
+{
+    const browser = await puppeteer.launch();
+    const page = await browser.newPage();
+
+
+    await page.goto(href)
+    let hrefs = await page.$$('a.wrapper')
+
+    for (var i=0; i < hrefs.length; i++) {
+        let hrefValue = await hrefs[i].getProperty('href')
+        let linkText = await hrefValue.jsonValue();
+        if (!linkText.startsWith("file:"))
+        {
+            continue;
+        }
+        if(linkText.endsWith("#")) continue;
+        if(linkText.endsWith("index.html")){
+            await collectLinks(linkText,reflist)
+        }
+        reflist.push(linkText)
+    }
+
+    await browser.close()
+}
+
+(async function(){
+    var reflist = []
+    let linkText = "file:///" + start_file.replace(/\\/g,"/")
+    reflist.push(linkText)
+    await collectLinks(start_file_uri,reflist)
+
+    // sort by path length to get depth first
+    reflist.sort(function(a,b){
+        let al = a.split("/").length
+        let bl = b.split("/").length
+
+        if (al < bl)  {return  1 }
+        if (al > bl)  {return -1 }
+        if (al == bl) {return  0 }
+    })
+    for (var i=0;i<reflist.length; i++) {
+        await makeScreenshot(reflist[i])
+        console.log(i,reflist[i])
+    }
+})()

css/article.css

@@ -0,0 +1,11 @@
+
+body {
+  background-color: white;
+  color: black;
+  width: 100%;
+  height: 100%;
+}
+
+article {
+  top: 66px;
+}

css/card.css

@@ -0,0 +1,440 @@
+@font-face {
+    font-family: "Material Icons";
+    font-style: normal;
+    font-weight: 400;
+    src: url(../fonts/material-icon-font/MaterialIcons-Regular.eot);
+    /* For IE6-8 */
+    src: local("Material Icons"), local("MaterialIcons-Regular"), url(../fonts/material-icon-font/MaterialIcons-Regular.woff2) format("woff2"), url(../fonts/material-icon-font/MaterialIcons-Regular.woff) format("woff"), url(../fonts/material-icon-font/MaterialIcons-Regular.ttf) format("truetype");
+}
+
+.material-icons {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    /* Preferred icon size */
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+    /* Support for all WebKit browsers. */
+    -webkit-font-smoothing: antialiased;
+    /* Support for Safari and Chrome. */
+    text-rendering: optimizeLegibility;
+    /* Support for Firefox. */
+    -moz-osx-font-smoothing: grayscale;
+    /* Support for IE. */
+    -webkit-font-feature-settings: 'liga';
+    font-feature-settings: 'liga';
+}
+
+html {
+    width: 100%;
+    height: 100%;
+    background-color: lightgray;
+}
+
+header {
+    color: white;
+    min-height: 33%;
+}
+
+main {
+    min-height: 67%;
+}
+
+article {
+    margin: 0px;
+    padding: 32px;
+    padding-right: 64px;
+    position: absolute;
+    overflow: hidden;
+    top: 66px;
+}
+
+.preview img {
+    max-height: 120px;
+    width: 80%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.preview p {
+    margin-top: 44px;
+}
+
+.preview {
+    text-align: center;
+    display: inline;
+}
+
+.thumbnail {
+    position: relative;
+    box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.1);
+    border: 2px solid lightgrey;
+    float: left;
+    margin: 12px;
+    max-height: 300px;
+    max-width: 480px;
+    height: auto;
+    width: auto;
+}
+
+.mainview {
+    background-color: #444;
+    color: white;
+    padding: 32px; 
+    position: absolute;
+    overflow: hidden;
+    width: 1400px;
+    height: 1200px;
+    font-size: 1.5rem;
+}
+
+.subcard {
+    position: relative;
+    background-color: white;
+    height: 300px;
+    max-width: 400px;
+}
+
+.svg-wrapper {
+    text-align: center;
+}
+
+.subcard h3 {
+    color: black;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.card-icon {
+    width: 44px;
+    height: 44px;
+}
+
+.zoom-icon {
+    position: absolute;
+    right: 0px;
+    bottom: 0px;
+    width: 44px;
+    height: 44px;
+}
+
+.zoomable-wrapper {
+    display: inline-block;
+    -ms-flex-item-align: center;
+    -ms-grid-row-align: center;
+    align-self: center;
+    font-size: 0;
+}
+
+.zoomable-wrapper figure {
+    display: inline-block;
+}
+
+.zoomable-wrapper figcaption {
+    font-size: initial;
+}
+
+.zoomable-wrapper>figure>div {
+    height: 100%;
+}
+
+.zoomable-wrapper svg {
+    overflow: visible;
+    width: 100%;
+    height: 100%;
+}
+
+/* ------------ zoomables and zoomed items below ------------ */
+
+.imggroupcontainer {
+    margin-top: 10px;
+    text-align: justify;
+}
+
+.imggroupcontainer:after {
+    content: '';
+    display: inline-block;
+    width: 100%;
+}
+
+.imggroupcontainer:before {
+    content: '';
+    display: block;
+    margin-top: -1.25em;
+}
+
+.imgcontainer {
+    text-align: center;
+}
+
+figure {
+    position: relative;
+    display: inline-block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.singlefig {
+    max-width: 50%;
+    margin-top: 10px;
+}
+
+.videofig {
+    max-width: 100%;
+    margin-top: 10px;
+}
+
+.groupfig {
+    max-width: 100%;
+    margin-top: 10px;
+}
+
+figure img {
+    object-fit: cover;
+}
+
+figure svg {
+    object-fit: cover;
+}
+
+figure video {
+    object-fit: cover;
+    /*box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.5);
+  border: 10px solid rgba(122, 0, 0, 0.05);*/
+}
+
+figure .mainimg {
+    display: block;
+    overflow: hidden;
+    /*box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.5);
+  border: 10px solid rgba(122, 0, 0, 0.05);*/
+}
+
+figure .groupmainimg {
+    display: block;
+    overflow: hidden;
+    /*box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.5);
+  border: 10px solid rgba(122, 0, 0, 0.05);*/
+}
+
+figcaption {
+    /* position: absolute;  */
+    text-align: center;
+    padding-top: 6px;
+    padding-left: 0px;
+    padding-right: 0px;
+    padding-bottom: 6px;
+    font-size: 12px;
+}
+
+.zoomcap {
+    /*position: absolute;*/
+    display: none;
+    overflow: hidden;
+    background: white;
+    box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.5);
+    width: 100%;
+    padding: 10px;
+}
+
+.cap {
+    width: 100%;
+}
+
+.zoomed-figure {
+    position: absolute;
+    font-family: 'MyriadRegular', sans-serif;
+    background: white;
+    box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
+    display: flex;
+    margin-top: 0px;
+    margin-bottom: 0px;
+}
+
+.zoomed-figure img {
+    top: 0px;
+    /*box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.5);
+  border: 10px solid rgba(122, 0, 0, 0.05);*/
+}
+
+.zoomed-figure figure {
+    margin-top: 0px;
+    margin-bottom: 0px;
+    box-shadow: none;
+}
+
+.zoomed-figure figcaption {
+    color: black;
+}
+
+.ZoomedIcon {
+    top: 0px;
+    left: 0px;
+}
+
+.subcard-content {
+    padding: 25px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    height: 100%;
+    -webkit-hyphens: auto;
+}
+
+/* ------------ bulma overwrites below ------------ */
+
+.content h1 {
+    min-height: 70px;
+    color: white;
+}
+
+.content figure {
+    background: transparent;
+    display: block;
+    margin-left: 0em;
+    margin-right: 0em;
+}
+
+.card-content {
+    padding: 25px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    height: 100%;
+    -webkit-hyphens: auto;
+}
+
+.content:not(:last-child) {
+    text-align: center;
+}
+
+.card-icon, .zoomable-icon {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+}
+
+.speech-only-text {
+    opacity: 0;
+    position: absolute;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    pointer-events: none;
+    z-index: -1;
+}
+
+figure .icon {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+}
+
+.button {
+    border: 0px solid transparent;
+    border-radius: 0px;
+}
+
+.button:hover {
+    color: #f2f2f2;
+}
+
+.view-button.icon {
+    background-color: #6699FF;
+    color: white;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+}
+
+.view-button.icon.inverted:before {
+    color: #f2f2f2;
+}
+
+.view-button.icon:before {
+    font-size: 36px;
+}
+
+.view-button.icon:hover {
+    color: #f2f2f2;
+}
+
+.icon {
+    min-width: 44px;
+    min-height: 44px;
+    color: white;
+    background-color: #6699FF;
+    pointer-events: none;
+}
+
+.icon.button {
+    pointer-events: all;
+}
+
+.icon.button.corner-button {
+    border-radius: 0;
+}
+
+.icon.button.corner-button.bottom-right {}
+
+.icon.inverted {
+    color: #f2f2f2;
+    background-color: #6699FF;
+}
+
+.icon.transparent-background {
+    background-color: #6699FF;
+}
+
+.icon.active {
+    color: #f2f2f2;
+    background-color: #6699FF;
+}
+
+.icon:before {
+    font-family: "Material Icons";
+    font-size: 36px;
+}
+
+.icon.info {
+    background-color: transparent;
+    font-size: 10px;
+}
+
+.icon.info:before {
+    font-size: 44px;
+    color: transparent;
+    content: url("../assets/images/info.svg") "w";
+}
+
+.icon.close:before {
+    content: "close";
+}
+
+.icon.zoom:before {
+    content: "search";
+}
+
+.icon.speech:before {
+    content: "record_voice_over";
+}
+
+.icon.language:before {
+    content: "language";
+}
+
+.info-card.debug .view-button {
+    background-color: rgba(255, 0, 0, 0.5) !important;
+}
+
+.info-card.debug .view-button.disabled {
+    -webkit-filter: grayscale(1);
+    filter: grayscale(1);
+}

css/doctest.css

@@ -1,12 +1,90 @@
-html
+html {
-{
+    padding: 0;
-	padding: 0px;
+    font-size: 16px;
-	font-size: 16px;
+    background: white;
-	background: white;
+    color: #000;
-	font-family: Arial,sans-serif;
+    font-family: 'Open Sans', Arial, sans-serif;
-	color: #000;
+    max-width: 1200px;
-	max-width: 932px;
+    margin: 0 auto;
-    margin:0 auto;
+}
+
+html.dark-mode {
+    background: rgb(51, 51, 51);
+    color: #ccc;
+}
+
+.dark-mode h1,
+.dark-mode h2,
+.dark-mode h3,
+.dark-mode h4,
+.dark-mode h5,
+.dark-mode h6 {
+    color: white;
+}
+
+.dark-mode a{
+    color: #569CD6;
+    font-weight: bold;
+}
+
+.dark-mode a:hover{
+    color: white;
+}
+
+a{
+    text-decoration: none;
+}
+
+.title {
+    position: relative;
+    font-size: 2.5rem;
+}
+
+.description {
+    font-style: italic;
+    margin-bottom: 3rem;
+}
+
+.center {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.doctest {
+    margin: 0;
+    padding-top: 50px;
+    padding-bottom: 50px;
+    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.5);
+}
+.collapsed .doctest {
+    height: 0;
+    margin: 0;
+    padding: 0;
+}
+
+.doctest-wrapper {
+    overflow: hidden;
+    border-radius: 5px;
+
+    margin-top: 1em;
+    margin-bottom: 1em;
+}
+
+.doctest-collapsible-toggle {
+    display: flex;
+    align-items: center;
+    color: whitesmoke;
+    background-color: #111;
+    padding: 10px;
+}
+
+.doctest-section-title {
+    margin: 0;
+    margin-left: 40px;
+
+    padding: 0;
+    font-size: 1.3em;
 }
 
 .grayBorder {
@@ -24,10 +102,10 @@ html
 }
 
 .unselectable {
-  -moz-user-select: none;
+    -moz-user-select: none;
-  -webkit-user-select: none;
+    -webkit-user-select: none;
-  -ms-user-select: none;
+    -ms-user-select: none;
-  user-select: none;
+    user-select: none;
 }
 
 body {
@@ -35,8 +113,8 @@ body {
 }
 
 canvas {
-    -ms-content-zooming: none;  /** Crucial for MS Edge pointer events **/
+    -ms-content-zooming: none; /** Crucial for MS Edge pointer events **/
-    touch-action: none;         /** Crucial for MS Edge? **/
+    touch-action: none; /** Crucial for MS Edge? **/
 }
 
 #runtime-errors {
@@ -44,28 +122,27 @@ canvas {
     margin-left: 8px;
 }
 
-
 .intrinsic-container {
-  position: relative;
+    position: relative;
-  height: 0;
+    height: 0;
-  overflow: hidden;
+    overflow: hidden;
 }
 
 /* 16x9 Aspect Ratio */
 .intrinsic-container-16x9 {
-  padding-bottom: 56.25%;
+    padding-bottom: 56.25%;
 }
 
 /* 4x3 Aspect Ratio */
 .intrinsic-container-4x3 {
-  padding-bottom: 75%;
+    padding-bottom: 75%;
 }
 
 .intrinsic-container iframe {
-  position: absolute;
+    position: absolute;
-  border: 0;
+    border: 0;
-  top:0;
+    top: 0;
-  left: 0;
+    left: 0;
-  width: 100%;
+    width: 100%;
-  height: 100%;
+    height: 100%;
 }

css/flipeffect.css

@@ -0,0 +1,73 @@
+
+.flipWrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+/* Fix to render
+.flipWrapper > div:first-child{
+    z-index: 1;
+} */
+
+.flipCard {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+
+    /*** See: https://stackoverflow.com/questions/7439042/css-js-to-prevent-dragging-of-ghost-image ***/
+
+    /* -webkit-user-drag: none;
+    -khtml-user-drag: none;
+    -moz-user-drag: none;
+    -o-user-drag: none;
+    user-drag: none; */
+}
+
+.flipFace {
+    box-shadow: 2px 2px 10px #000;
+    visibility: hidden;
+}
+
+.front {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background-color: #333;
+}
+
+.back {
+    background-color: #333;
+    position: absolute;
+    border: 8px solid white;
+}
+
+.closeBtn {
+    transform-origin: top right;
+    position: absolute;
+    width: 44px;
+    height: 44px;
+    padding: 4px;
+    right: 0;
+    top: 0;
+}
+
+.infoBtn {
+    transform-origin: bottom right;
+    position: fixed;
+    width: 44px;
+    height: 44px;
+    padding: 4px;
+    right: 0;
+    bottom: 0;
+}
+
+.backBtn {
+    transform-origin: bottom right;
+    position: fixed;
+    width: 44px;
+    height: 44px;
+    padding: 4px;
+    right: 0;
+    bottom: 0;
+}

css/highlight.css

@@ -0,0 +1,20 @@
+circle {
+    stroke: white;
+    fill: transparent;
+    stroke-width: 8px;
+}
+
+mask circle {
+    stroke-width: 0;
+    fill: white;
+}
+
+.addedImage {
+    filter: invert(1);
+}
+
+.debugRect {
+    stroke: red;
+    fill: transparent;
+    stroke-width: 8px;
+}

css/index.css

@@ -0,0 +1,159 @@
+html {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    font-family: sans-serif;
+    font-size: 22pt;
+    -webkit-tap-highlight-color: #ccc;
+    background-color: #ddd;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -webkit-overflow-scrolling: auto;
+    user-select: none;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+
+    /* https://davidwalsh.name/font-smoothing */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+h3 {
+    color: white;
+    padding: 4px;
+    margin: 2px;
+    background-color: rgba(0, 0, 15, 0.5);
+}
+
+a { text-decoration: none; }
+
+div.wrapper {
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    transform-origin: 0% 100%;
+    transform: scale(0.25);
+}
+
+/* Color animation from https://www.tjvantoll.com/2012/02/20/css3-color-animations/ */
+@-webkit-keyframes color_change {
+    from { background-color: rgba(0, 0, 0, 0); }
+    to { background-color: red; }
+}
+
+@-moz-keyframes color_change {
+    from { background-color: rgba(0, 0, 0, 0); }
+    to { background-color: red; }
+}
+
+@-ms-keyframes color_change {
+    from { background-color: rgba(0, 0, 0, 0); }
+    to { background-color: red; }
+}
+
+@-o-keyframes color_change {
+    from { background-color: rgba(0, 0, 0, 0); }
+    to { background-color: red; }
+}
+
+@keyframes color_change {
+    from { background-color: rgba(0, 0, 0, 0); }
+    to { background-color: red; }
+}
+
+/*** CSS taken from https://medium.com/@jamesfuthey/simulating-the-creation-of-website-thumbnail-screenshots-using-iframes-7145269891db#.7v7fshos5 ***/
+.thumbnail {
+    position: relative;
+    -ms-zoom: 0.25;
+    -moz-transform: scale(0.25);
+    -moz-transform-origin: 0 0;
+    -o-transform: scale(0.25);
+    -o-transform-origin: 0 0;
+    -webkit-transform: scale(0.25);
+    -webkit-transform-origin: 0 0;
+}
+
+.thumbnail::after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: -1024px; /*** This is a deviation from the above mentioned
+    jamesfuthey blog. Otherwise touches would go through on iPad. ***/
+}
+
+iframe {
+    pointer-events: none;
+}
+
+.thumbnail iframe {
+    width: 1024px;
+    height: 624px;
+    -webkit-animation-delay: 3s; /* Safari 4.0 - 8.0 */
+    animation-delay: 3s;
+    -webkit-animation: color_change 1s infinite alternate;
+    -moz-animation: color_change 1s infinite alternate;
+    -ms-animation: color_change 1s infinite alternate;
+    -o-animation: color_change 1s infinite alternate;
+    animation: color_change 1s infinite alternate;
+}
+
+.thumbnail-container {
+    width: calc(1024px * 0.25);
+    height: calc(624px * 0.25);
+    display: inline-block;
+    overflow: hidden;
+    position: relative;
+    box-shadow: 2px 2px 10px #000;
+    color: #ddd;
+}
+
+div.preview {
+    display: inline-block;
+    margin: 22px;
+    padding: 0;
+    color: #333;
+    font-size: 12pt;
+    text-align: center;
+    width: 256px;
+    height: 196px;
+}
+
+div.title {
+    padding-top: 8px;
+    width: 256px;
+    height: 20px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.container {
+    margin: 0;
+    padding: 0;
+    border: 2pt #000;
+    min-height: 100%;
+    min-width: 100%;
+    display: -webkit-flex;
+    -webkit-align-items: flex-end;
+    align-items: flex-end;
+    -webkit-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -webkit-align-content: flex-end;
+    align-content: flex-end;
+}
+
+/** See https://github.com/electron/electron/issues/4420 */
+::selection {
+    background: transparent;
+}

css/popup.css

@@ -0,0 +1,35 @@
+.popup {
+    width: 800px;
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
+    min-width: 400px;
+    color: #191919;
+    background-color: #f2f2f2;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+    padding: 25.64px 40px;
+  }
+  
+  .popup img {
+    display: block;
+    margin: auto;
+  }
+  
+  .popup img:not(:first-child) {
+    margin-top: 20px;
+  }
+  
+  .popup img:not(:last-child) {
+    margin-bottom: 20px;
+  }
+  
+  .popup .notch {
+    width: 20px;
+    height: 20px;
+    border-color: #f2f2f2;
+  }
+  
+  .PopupContent p:not(:last-child) {
+    margin-bottom: 30px;
+  }

css/subcard.css

@@ -0,0 +1,22 @@
+
+.info-card .subcard {
+  color: black;
+}
+
+.info-card .subcard p {
+  text-align: justify;
+}
+
+.info-card .content h1 {
+  color: black;
+}
+
+.info-card .subcard .preview p {
+  text-align: center;
+}
+
+.info-card>.zoomable-wrapper figcaption, .info-card .mainview>.subcard figcaption {
+  width: 100%;
+  position: absolute;
+  text-align: center;
+}

doc/README.md

@@ -20,4 +20,3 @@ This is the JavaScript API documentation of the IWM Browser JavaScript classes.
 
 - [PixiJS](http://www.pixijs.com)
 - [Greensock](https://greensock.com) with all Plugins
-- [D3](https://d3js.org)

doc/out/AbstractPopup.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1467,7 +1473,7 @@ like Popup, Message, Tooltip...</p></div>
     
         
         <div class="tag-source">
-            <a href="pixi_abstractpopup.js.html#line49">abstractpopup.js:49</a>
+            <a href="pixi_abstractpopup.js.html#line48">abstractpopup.js:48</a>
         </div>
         
     </div>
@@ -2491,7 +2497,7 @@ a string, a number or a PIXI.Text object.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_abstractpopup.js.html#line307">abstractpopup.js:307</a>
+            <a href="pixi_abstractpopup.js.html#line302">abstractpopup.js:302</a>
         </div>
         
     </div>
@@ -2648,7 +2654,7 @@ a string, a number or a PIXI.Text object.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_abstractpopup.js.html#line185">abstractpopup.js:185</a>
+            <a href="pixi_abstractpopup.js.html#line184">abstractpopup.js:184</a>
         </div>
         
     </div>
@@ -2753,7 +2759,7 @@ a string, a number or a PIXI.Text object.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_abstractpopup.js.html#line287">abstractpopup.js:287</a>
+            <a href="pixi_abstractpopup.js.html#line283">abstractpopup.js:283</a>
         </div>
         
     </div>
@@ -2912,7 +2918,7 @@ a string, a number or a PIXI.Text object.</p>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/Badge.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1465,7 +1471,7 @@
     
         
         <div class="tag-source">
-            <a href="pixi_badge.js.html#line47">badge.js:47</a>
+            <a href="pixi_badge.js.html#line46">badge.js:46</a>
         </div>
         
     </div>
@@ -1939,7 +1945,7 @@ a string, a number or a PIXI.Text object.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_abstractpopup.js.html#line307">abstractpopup.js:307</a>
+            <a href="pixi_abstractpopup.js.html#line302">abstractpopup.js:302</a>
         </div>
         
     </div>
@@ -2100,7 +2106,7 @@ a string, a number or a PIXI.Text object.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_badge.js.html#line102">badge.js:102</a>
+            <a href="pixi_badge.js.html#line106">badge.js:106</a>
         </div>
         
     </div>
@@ -2209,7 +2215,7 @@ a string, a number or a PIXI.Text object.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_abstractpopup.js.html#line287">abstractpopup.js:287</a>
+            <a href="pixi_abstractpopup.js.html#line283">abstractpopup.js:283</a>
         </div>
         
     </div>
@@ -2368,7 +2374,7 @@ a string, a number or a PIXI.Text object.</p>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/BlurFilter.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1469,7 +1475,7 @@ is assigned to!</p></div>
     
         
         <div class="tag-source">
-            <a href="pixi_blurfilter.js.html#line37">blurfilter.js:37</a>
+            <a href="pixi_blurfilter.js.html#line36">blurfilter.js:36</a>
         </div>
         
     </div>
@@ -1633,7 +1639,7 @@ const app = new PIXIApp({
 }).setup().run()
 
 // Add a video sprite
-const sprite = new PIXI.Sprite(PIXI.Texture.fromVideo("assets/blurfilter.mp4"))
+const sprite = new PIXI.Sprite(PIXI.Texture.from("assets/blurfilter.mp4"))
 sprite.width = app.size.width
 sprite.height = app.size.height
 app.scene.addChild(sprite)
@@ -1792,7 +1798,7 @@ app.scene.filters = [blurFilter]</code></pre>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/Button.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1465,7 +1471,7 @@
     
         
         <div class="tag-source">
-            <a href="pixi_button.js.html#line109">button.js:109</a>
+            <a href="pixi_button.js.html#line112">button.js:112</a>
         </div>
         
     </div>
@@ -2461,6 +2467,78 @@ button is activated. See PIXI.TextStyle for possible options.</p></td>
 	
 	
 	
+        <tr>
+            
+                <td class="name"><code>textAlpha</code></td>
+            
+            
+            <td class="type">
+            
+                
+<span class="param-type">number</span>
+
+
+            
+            </td>
+            
+            
+                <td class="default">
+                
+                    Theme.textAlpha
+                
+                </td>
+            
+            
+            <td class="description last">
+                
+                    
+                        <span class="optional">optional</span>
+                    
+                    
+                        
+                    
+                
+                <p>The alpha value of the text.</p></td>
+        </tr>
+	
+	
+	
+        <tr>
+            
+                <td class="name"><code>textActiveAlpha</code></td>
+            
+            
+            <td class="type">
+            
+                
+<span class="param-type">number</span>
+
+
+            
+            </td>
+            
+            
+                <td class="default">
+                
+                    Theme.textActiveAlpha
+                
+                </td>
+            
+            
+            <td class="description last">
+                
+                    
+                        <span class="optional">optional</span>
+                    
+                    
+                        
+                    
+                
+                <p>The alpha value of the text when activated.</p></td>
+        </tr>
+	
+	
+	
         <tr>
             
                 <td class="name"><code>style</code></td>
@@ -3369,7 +3447,7 @@ the tint property of the icon sprite.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_button.js.html#line193">button.js:193</a>
+            <a href="pixi_button.js.html#line211">button.js:211</a>
         </div>
         
     </div>
@@ -3493,7 +3571,7 @@ the tint property of the icon sprite.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_button.js.html#line595">button.js:595</a>
+            <a href="pixi_button.js.html#line642">button.js:642</a>
         </div>
         
     </div>
@@ -3598,7 +3676,7 @@ the tint property of the icon sprite.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_button.js.html#line350">button.js:350</a>
+            <a href="pixi_button.js.html#line369">button.js:369</a>
         </div>
         
     </div>
@@ -3703,7 +3781,7 @@ the tint property of the icon sprite.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_button.js.html#line578">button.js:578</a>
+            <a href="pixi_button.js.html#line626">button.js:626</a>
         </div>
         
     </div>
@@ -3810,7 +3888,7 @@ the tint property of the icon sprite.</p>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/ButtonGroup.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1465,7 +1471,7 @@
     
         
         <div class="tag-source">
-            <a href="pixi_buttongroup.js.html#line78">buttongroup.js:78</a>
+            <a href="pixi_buttongroup.js.html#line86">buttongroup.js:86</a>
         </div>
         
     </div>
@@ -1811,6 +1817,146 @@ or a Theme object.</p></td>
 	
 	
 	
+        <tr>
+            
+                <td class="name"><code>maxWidth</code></td>
+            
+            
+            <td class="type">
+            
+                
+<span class="param-type">number</span>
+
+
+            
+            </td>
+            
+            
+                <td class="default">
+                
+                </td>
+            
+            
+            <td class="description last">
+                
+                    
+                        <span class="optional">optional</span>
+                    
+                    
+                        
+                    
+                
+                <p>The maximum width of the button group. If the buttons are wider than the maximum width, the buttons get stacked. Note: The buttons can only be stacked if margin is not zero. Note 2: Load the Greensock ThrowPropsPlugin for smoother animations.</p></td>
+        </tr>
+	
+	
+	
+        <tr>
+            
+                <td class="name"><code>maxHeight</code></td>
+            
+            
+            <td class="type">
+            
+                
+<span class="param-type">number</span>
+
+
+            
+            </td>
+            
+            
+                <td class="default">
+                
+                </td>
+            
+            
+            <td class="description last">
+                
+                    
+                        <span class="optional">optional</span>
+                    
+                    
+                        
+                    
+                
+                <p>The maximum height of the button group. If the buttons are higher than the maximum height, the buttons get stacked. Note: The buttons can only be stacked if margin is not zero. Note 2: Load the Greensock ThrowPropsPlugin for smoother animations.</p></td>
+        </tr>
+	
+	
+	
+        <tr>
+            
+                <td class="name"><code>stackPadding</code></td>
+            
+            
+            <td class="type">
+            
+                
+<span class="param-type">number</span>
+
+
+            
+            </td>
+            
+            
+                <td class="default">
+                
+                    10
+                
+                </td>
+            
+            
+            <td class="description last">
+                
+                    
+                        <span class="optional">optional</span>
+                    
+                    
+                        
+                    
+                
+                <p>The padding for stacked buttons.</p></td>
+        </tr>
+	
+	
+	
+        <tr>
+            
+                <td class="name"><code>app</code></td>
+            
+            
+            <td class="type">
+            
+                
+<span class="param-type">PIXI.Application</span>
+
+
+            
+            </td>
+            
+            
+                <td class="default">
+                
+                    window.app
+                
+                </td>
+            
+            
+            <td class="description last">
+                
+                    
+                        <span class="optional">optional</span>
+                    
+                    
+                        
+                    
+                
+                <p>The PixiJS Application. Must be set if you want to use the mousewheel to scroll your button group. Only used when the buttons are stacked (with maxWidth or maxHeight).</p></td>
+        </tr>
+	
+	
+	
         <tr>
             
                 <td class="name"><code>padding</code></td>
@@ -2425,6 +2571,78 @@ button is activated. See PIXI.TextStyle for possible options.</p></td>
 	
 	
 	
+        <tr>
+            
+                <td class="name"><code>textAlpha</code></td>
+            
+            
+            <td class="type">
+            
+                
+<span class="param-type">number</span>
+
+
+            
+            </td>
+            
+            
+                <td class="default">
+                
+                    Theme.textAlpha
+                
+                </td>
+            
+            
+            <td class="description last">
+                
+                    
+                        <span class="optional">optional</span>
+                    
+                    
+                        
+                    
+                
+                <p>Button: The alpha value of the text.</p></td>
+        </tr>
+	
+	
+	
+        <tr>
+            
+                <td class="name"><code>textActiveAlpha</code></td>
+            
+            
+            <td class="type">
+            
+                
+<span class="param-type">number</span>
+
+
+            
+            </td>
+            
+            
+                <td class="default">
+                
+                    Theme.textActiveAlpha
+                
+                </td>
+            
+            
+            <td class="description last">
+                
+                    
+                        <span class="optional">optional</span>
+                    
+                    
+                        
+                    
+                
+                <p>Button: The alpha value of the text when activated.</p></td>
+        </tr>
+	
+	
+	
         <tr>
             
                 <td class="name"><code>style</code></td>
@@ -2859,6 +3077,108 @@ app.scene.addChild(buttonGroup)</code></pre>
     
     
     
+</dl>
+
+    
+    
+</dd>
+
+        
+            
+<dt>
+    <div class="nameContainer">
+        <h4 class="name" id="maxHeight">
+            <a class="share-icon" href="#maxHeight"><span class="glyphicon glyphicon-link"></span></a>
+            <span class="">maxHeight</span>
+            <span class="type-signature type">number</span>
+            
+            
+            
+            
+        </h4>
+    </div>
+    
+    
+</dt>
+<dd>
+    
+    <div class="description">
+        <p>Gets or sets the maximum height of the button group for stacking. Usefull when you want to resize the available space.</p>
+    </div>
+    
+    
+    
+<dl class="details">
+    
+        
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+</dl>
+
+    
+    
+</dd>
+
+        
+            
+<dt>
+    <div class="nameContainer">
+        <h4 class="name" id="maxWidth">
+            <a class="share-icon" href="#maxWidth"><span class="glyphicon glyphicon-link"></span></a>
+            <span class="">maxWidth</span>
+            <span class="type-signature type">number</span>
+            
+            
+            
+            
+        </h4>
+    </div>
+    
+    
+</dt>
+<dd>
+    
+    <div class="description">
+        <p>Gets or sets the maximum width of the button group for stacking. Usefull when you want to resize the available space.</p>
+    </div>
+    
+    
+    
+<dl class="details">
+    
+        
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
 </dl>
 
     
@@ -2873,6 +3193,130 @@ app.scene.addChild(buttonGroup)</code></pre>
         
         <dl class="list-methods">
             
+<dt>
+    <div class="nameContainer">
+        <h4 class="name" id="capture">
+            <a class="share-icon" href="#capture"><span class="glyphicon glyphicon-link"></span></a>
+            <span class="">
+                capture
+            </span>
+            <span class="signature">(event)</span>
+            
+            
+            
+            
+        </h4>
+    
+        
+        <div class="tag-source">
+            <a href="pixi_buttongroup.js.html#line596">buttongroup.js:596</a>
+        </div>
+        
+    </div>
+
+    
+</dt>
+<dd>
+    
+    
+    <div class="description">
+        <p>Captures an event to inform InteractionMapper about processed events.</p>
+    </div>
+    
+
+    
+    
+    
+    
+    
+        
+
+<table class="params">
+    <thead>
+	<tr>
+		
+		<th>Name</th>
+		
+		
+		<th>Type</th>
+		
+		
+		
+		<th class="last">Description</th>
+	</tr>
+	</thead>
+	
+	<tbody>
+	
+	
+        <tr>
+            
+                <td class="name"><code>event</code></td>
+            
+            
+            <td class="type">
+            
+                
+<span class="param-type">event</span>
+|
+
+<span class="param-type">PIXI.InteractionEvent</span>
+
+
+            
+            </td>
+            
+            
+            
+            <td class="description last">
+                
+                <p>The PIXI event to capture.</p></td>
+        </tr>
+	
+	
+	</tbody>
+</table>
+    
+    
+    
+<dl class="details">
+    
+        
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+</dl>
+
+    
+    
+
+    
+
+    
+    
+    
+    
+    
+    
+    
+</dd>
+
+        
+            
 <dt>
     <div class="nameContainer">
         <h4 class="name" id="hide">
@@ -2889,7 +3333,7 @@ app.scene.addChild(buttonGroup)</code></pre>
     
         
         <div class="tag-source">
-            <a href="pixi_buttongroup.js.html#line342">buttongroup.js:342</a>
+            <a href="pixi_buttongroup.js.html#line442">buttongroup.js:442</a>
         </div>
         
     </div>
@@ -2994,7 +3438,7 @@ app.scene.addChild(buttonGroup)</code></pre>
     
         
         <div class="tag-source">
-            <a href="pixi_buttongroup.js.html#line244">buttongroup.js:244</a>
+            <a href="pixi_buttongroup.js.html#line317">buttongroup.js:317</a>
         </div>
         
     </div>
@@ -3099,7 +3543,7 @@ app.scene.addChild(buttonGroup)</code></pre>
     
         
         <div class="tag-source">
-            <a href="pixi_buttongroup.js.html#line330">buttongroup.js:330</a>
+            <a href="pixi_buttongroup.js.html#line431">buttongroup.js:431</a>
         </div>
         
     </div>
@@ -3206,7 +3650,7 @@ app.scene.addChild(buttonGroup)</code></pre>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/DeepZoomImage.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1469,7 +1475,7 @@ more detailed tiles at the larger level as fast as possible.</p></div>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line351">image.js:351</a>
+            <a href="pixi_deepzoom_image.js.html#line323">image.js:323</a>
         </div>
         
     </div>
@@ -1922,7 +1928,7 @@ Adds a PIXI.Container if necessary.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line608">image.js:608</a>
+            <a href="pixi_deepzoom_image.js.html#line578">image.js:578</a>
         </div>
         
     </div>
@@ -2000,7 +2006,7 @@ rect.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line837">image.js:837</a>
+            <a href="pixi_deepzoom_image.js.html#line798">image.js:798</a>
         </div>
         
     </div>
@@ -2152,7 +2158,7 @@ rect.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line1076">image.js:1076</a>
+            <a href="pixi_deepzoom_image.js.html#line1028">image.js:1028</a>
         </div>
         
     </div>
@@ -2228,7 +2234,7 @@ rect.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line520">image.js:520</a>
+            <a href="pixi_deepzoom_image.js.html#line491">image.js:491</a>
         </div>
         
     </div>
@@ -2372,7 +2378,7 @@ rect.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line636">image.js:636</a>
+            <a href="pixi_deepzoom_image.js.html#line606">image.js:606</a>
         </div>
         
     </div>
@@ -2547,7 +2553,7 @@ rect.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line1014">image.js:1014</a>
+            <a href="pixi_deepzoom_image.js.html#line964">image.js:964</a>
         </div>
         
     </div>
@@ -2668,7 +2674,7 @@ rect.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line617">image.js:617</a>
+            <a href="pixi_deepzoom_image.js.html#line587">image.js:587</a>
         </div>
         
     </div>
@@ -2746,7 +2752,7 @@ the also overwritten _calculateBounds method.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line743">image.js:743</a>
+            <a href="pixi_deepzoom_image.js.html#line706">image.js:706</a>
         </div>
         
     </div>
@@ -2921,7 +2927,7 @@ the also overwritten _calculateBounds method.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line1087">image.js:1087</a>
+            <a href="pixi_deepzoom_image.js.html#line1040">image.js:1040</a>
         </div>
         
     </div>
@@ -2997,7 +3003,7 @@ the also overwritten _calculateBounds method.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line974">image.js:974</a>
+            <a href="pixi_deepzoom_image.js.html#line924">image.js:924</a>
         </div>
         
     </div>
@@ -3073,7 +3079,7 @@ the also overwritten _calculateBounds method.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line989">image.js:989</a>
+            <a href="pixi_deepzoom_image.js.html#line939">image.js:939</a>
         </div>
         
     </div>
@@ -3150,7 +3156,7 @@ visible quadTrees</p>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line920">image.js:920</a>
+            <a href="pixi_deepzoom_image.js.html#line871">image.js:871</a>
         </div>
         
     </div>
@@ -3272,7 +3278,7 @@ be reused.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line960">image.js:960</a>
+            <a href="pixi_deepzoom_image.js.html#line910">image.js:910</a>
         </div>
         
     </div>
@@ -3348,7 +3354,7 @@ be reused.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line893">image.js:893</a>
+            <a href="pixi_deepzoom_image.js.html#line844">image.js:844</a>
         </div>
         
     </div>
@@ -3469,7 +3475,7 @@ be reused.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line870">image.js:870</a>
+            <a href="pixi_deepzoom_image.js.html#line821">image.js:821</a>
         </div>
         
     </div>
@@ -3620,7 +3626,7 @@ a new Tiles layer if necessary</p>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line508">image.js:508</a>
+            <a href="pixi_deepzoom_image.js.html#line479">image.js:479</a>
         </div>
         
     </div>
@@ -3741,7 +3747,7 @@ a new Tiles layer if necessary</p>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line499">image.js:499</a>
+            <a href="pixi_deepzoom_image.js.html#line470">image.js:470</a>
         </div>
         
     </div>
@@ -3862,7 +3868,7 @@ a new Tiles layer if necessary</p>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line670">image.js:670</a>
+            <a href="pixi_deepzoom_image.js.html#line640">image.js:640</a>
         </div>
         
     </div>
@@ -4076,7 +4082,7 @@ a new Tiles layer if necessary</p>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line771">image.js:771</a>
+            <a href="pixi_deepzoom_image.js.html#line734">image.js:734</a>
         </div>
         
     </div>
@@ -4220,7 +4226,7 @@ a new Tiles layer if necessary</p>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line789">image.js:789</a>
+            <a href="pixi_deepzoom_image.js.html#line752">image.js:752</a>
         </div>
         
     </div>
@@ -4413,7 +4419,7 @@ Optional parameter:</p></td>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line401">image.js:401</a>
+            <a href="pixi_deepzoom_image.js.html#line372">image.js:372</a>
         </div>
         
     </div>
@@ -4560,7 +4566,7 @@ layer.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line437">image.js:437</a>
+            <a href="pixi_deepzoom_image.js.html#line408">image.js:408</a>
         </div>
         
     </div>
@@ -4690,7 +4696,7 @@ Can be overwritten in subclasses.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line627">image.js:627</a>
+            <a href="pixi_deepzoom_image.js.html#line597">image.js:597</a>
         </div>
         
     </div>
@@ -4796,7 +4802,7 @@ large images.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line944">image.js:944</a>
+            <a href="pixi_deepzoom_image.js.html#line895">image.js:895</a>
         </div>
         
     </div>
@@ -4872,7 +4878,7 @@ large images.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line1029">image.js:1029</a>
+            <a href="pixi_deepzoom_image.js.html#line979">image.js:979</a>
         </div>
         
     </div>
@@ -5090,7 +5096,7 @@ i.e. after loading a single tile</p></td>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/DeepZoomInfo.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1466,7 +1472,7 @@ height and width of the overall image, overlap, and image type.</p></div>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line48">image.js:48</a>
+            <a href="pixi_deepzoom_image.js.html#line35">image.js:35</a>
         </div>
         
     </div>
@@ -1631,7 +1637,7 @@ height and width of the overall image, overlap, and image type.</p></div>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line238">image.js:238</a>
+            <a href="pixi_deepzoom_image.js.html#line224">image.js:224</a>
         </div>
         
     </div>
@@ -1781,7 +1787,7 @@ height and width of the overall image, overlap, and image type.</p></div>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line94">image.js:94</a>
+            <a href="pixi_deepzoom_image.js.html#line80">image.js:80</a>
         </div>
         
     </div>
@@ -1931,7 +1937,7 @@ height and width of the overall image, overlap, and image type.</p></div>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line105">image.js:105</a>
+            <a href="pixi_deepzoom_image.js.html#line91">image.js:91</a>
         </div>
         
     </div>
@@ -2081,7 +2087,7 @@ height and width of the overall image, overlap, and image type.</p></div>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line80">image.js:80</a>
+            <a href="pixi_deepzoom_image.js.html#line66">image.js:66</a>
         </div>
         
     </div>
@@ -2231,7 +2237,7 @@ height and width of the overall image, overlap, and image type.</p></div>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line227">image.js:227</a>
+            <a href="pixi_deepzoom_image.js.html#line213">image.js:213</a>
         </div>
         
     </div>
@@ -2405,7 +2411,7 @@ on completion.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line196">image.js:196</a>
+            <a href="pixi_deepzoom_image.js.html#line182">image.js:182</a>
         </div>
         
     </div>
@@ -2603,7 +2609,7 @@ on completion.</p>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/Flippable.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1465,7 +1471,7 @@
     
         
         <div class="tag-source">
-            <a href="pixi_flippable.js.html#line72">flippable.js:72</a>
+            <a href="pixi_flippable.js.html#line71">flippable.js:71</a>
         </div>
         
     </div>
@@ -1569,7 +1575,7 @@
             <td class="type">
             
                 
-<span class="param-type">PIXI.WebGLRenderer</span>
+<span class="param-type">PIXI.Renderer</span>
 |
 
 <span class="param-type">PIXI.CanvasRenderer</span>
@@ -1837,7 +1843,7 @@
             
                 <td class="default">
                 
-                    Sine.easeOut
+                    Power1.easeOut
                 
                 </td>
             
@@ -2237,8 +2243,8 @@
         
 
     
-    <pre class="prettyprint"><code>const front = PIXI.Sprite.fromImage('./assets/front.jpg')
+    <pre class="prettyprint"><code>const front = PIXI.Sprite.from('./assets/front.jpg')
-const back = PIXI.Sprite.fromImage('./assets/back.jpg')
+const back = PIXI.Sprite.from('./assets/back.jpg')
 app.scene.addChild(front)
 
 // Create the flippable
@@ -2506,7 +2512,7 @@ front.on('click', event => flippable.toggle())</code></pre>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/FontInfo.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1465,7 +1471,7 @@
     
         
         <div class="tag-source">
-            <a href="pixi_labeledgraphics.js.html#line6">labeledgraphics.js:6</a>
+            <a href="pixi_labeledgraphics.js.html#line4">labeledgraphics.js:4</a>
         </div>
         
     </div>
@@ -1553,7 +1559,7 @@
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/Hypenate.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1463,7 +1469,7 @@
     
         
         <div class="tag-source">
-            <a href="pixi_labeledgraphics.js.html#line21">labeledgraphics.js:21</a>
+            <a href="pixi_labeledgraphics.js.html#line18">labeledgraphics.js:18</a>
         </div>
         
     </div>
@@ -1557,7 +1563,7 @@
     
         
         <div class="tag-source">
-            <a href="pixi_labeledgraphics.js.html#line120">labeledgraphics.js:120</a>
+            <a href="pixi_labeledgraphics.js.html#line112">labeledgraphics.js:112</a>
         </div>
         
     </div>
@@ -1755,7 +1761,7 @@
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/InteractivePopup.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1467,7 +1473,7 @@ like Popup, Message...</p></div>
     
         
         <div class="tag-source">
-            <a href="pixi_popup.js.html#line28">popup.js:28</a>
+            <a href="pixi_popup.js.html#line27">popup.js:27</a>
         </div>
         
     </div>
@@ -1910,7 +1916,7 @@ a string, a number or a PIXI.Text object.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_abstractpopup.js.html#line307">abstractpopup.js:307</a>
+            <a href="pixi_abstractpopup.js.html#line302">abstractpopup.js:302</a>
         </div>
         
     </div>
@@ -2069,7 +2075,7 @@ a string, a number or a PIXI.Text object.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_popup.js.html#line130">popup.js:130</a>
+            <a href="pixi_popup.js.html#line134">popup.js:134</a>
         </div>
         
     </div>
@@ -2178,7 +2184,7 @@ a string, a number or a PIXI.Text object.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_abstractpopup.js.html#line287">abstractpopup.js:287</a>
+            <a href="pixi_abstractpopup.js.html#line283">abstractpopup.js:283</a>
         </div>
         
     </div>
@@ -2337,7 +2343,7 @@ a string, a number or a PIXI.Text object.</p>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/LabeledGraphics.exports.LabeledGraphics.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1463,7 +1469,7 @@
     
         
         <div class="tag-source">
-            <a href="pixi_labeledgraphics.js.html#line189">labeledgraphics.js:189</a>
+            <a href="pixi_labeledgraphics.js.html#line179">labeledgraphics.js:179</a>
         </div>
         
     </div>
@@ -1555,7 +1561,7 @@
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/LabeledGraphics.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1463,7 +1469,7 @@
     
         
         <div class="tag-source">
-            <a href="pixi_labeledgraphics.js.html#line174">labeledgraphics.js:174</a>
+            <a href="pixi_labeledgraphics.js.html#line165">labeledgraphics.js:165</a>
         </div>
         
     </div>
@@ -1571,7 +1577,7 @@ resuse and place labels across different layout variants</p>
     
         
         <div class="tag-source">
-            <a href="pixi_labeledgraphics.js.html#line353">labeledgraphics.js:353</a>
+            <a href="pixi_labeledgraphics.js.html#line341">labeledgraphics.js:341</a>
         </div>
         
     </div>
@@ -1647,7 +1653,7 @@ resuse and place labels across different layout variants</p>
     
         
         <div class="tag-source">
-            <a href="pixi_labeledgraphics.js.html#line365">labeledgraphics.js:365</a>
+            <a href="pixi_labeledgraphics.js.html#line353">labeledgraphics.js:353</a>
         </div>
         
     </div>
@@ -1723,7 +1729,7 @@ resuse and place labels across different layout variants</p>
     
         
         <div class="tag-source">
-            <a href="pixi_labeledgraphics.js.html#line215">labeledgraphics.js:215</a>
+            <a href="pixi_labeledgraphics.js.html#line204">labeledgraphics.js:204</a>
         </div>
         
     </div>
@@ -1996,7 +2002,7 @@ maxWidth: {number} word wraps text using hyphenation if possible</p></td>
     
         
         <div class="tag-source">
-            <a href="pixi_labeledgraphics.js.html#line320">labeledgraphics.js:320</a>
+            <a href="pixi_labeledgraphics.js.html#line309">labeledgraphics.js:309</a>
         </div>
         
     </div>
@@ -2146,7 +2152,7 @@ maxWidth: {number} word wraps text using hyphenation if possible</p></td>
     
         
         <div class="tag-source">
-            <a href="pixi_labeledgraphics.js.html#line329">labeledgraphics.js:329</a>
+            <a href="pixi_labeledgraphics.js.html#line318">labeledgraphics.js:318</a>
         </div>
         
     </div>
@@ -2267,7 +2273,7 @@ maxWidth: {number} word wraps text using hyphenation if possible</p></td>
     
         
         <div class="tag-source">
-            <a href="pixi_labeledgraphics.js.html#line341">labeledgraphics.js:341</a>
+            <a href="pixi_labeledgraphics.js.html#line330">labeledgraphics.js:330</a>
         </div>
         
     </div>
@@ -2388,7 +2394,7 @@ maxWidth: {number} word wraps text using hyphenation if possible</p></td>
     
         
         <div class="tag-source">
-            <a href="pixi_labeledgraphics.js.html#line284">labeledgraphics.js:284</a>
+            <a href="pixi_labeledgraphics.js.html#line270">labeledgraphics.js:270</a>
         </div>
         
     </div>
@@ -2620,7 +2626,7 @@ than wanted</p>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/List.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1465,7 +1471,7 @@
     
         
         <div class="tag-source">
-            <a href="pixi_list.js.html#line47">list.js:47</a>
+            <a href="pixi_list.js.html#line46">list.js:46</a>
         </div>
         
     </div>
@@ -1925,8 +1931,8 @@ scroll your list.</p></td>
         
 
     
-    <pre class="prettyprint"><code>const elephant1 = PIXI.Sprite.fromImage('./assets/elephant-1.jpg')
+    <pre class="prettyprint"><code>const elephant1 = PIXI.Sprite.from('./assets/elephant-1.jpg')
-const elephant2 = PIXI.Sprite.fromImage('./assets/elephant-2.jpg')
+const elephant2 = PIXI.Sprite.from('./assets/elephant-2.jpg')
 
 // Create the list
 const list = new List([elephant1, elephant2])
@@ -2077,7 +2083,7 @@ app.scene.addChild(list)</code></pre>
     
         
         <div class="tag-source">
-            <a href="pixi_list.js.html#line379">list.js:379</a>
+            <a href="pixi_list.js.html#line375">list.js:375</a>
         </div>
         
     </div>
@@ -2201,7 +2207,7 @@ app.scene.addChild(list)</code></pre>
     
         
         <div class="tag-source">
-            <a href="pixi_list.js.html#line147">list.js:147</a>
+            <a href="pixi_list.js.html#line148">list.js:148</a>
         </div>
         
     </div>
@@ -2306,7 +2312,7 @@ app.scene.addChild(list)</code></pre>
     
         
         <div class="tag-source">
-            <a href="pixi_list.js.html#line254">list.js:254</a>
+            <a href="pixi_list.js.html#line251">list.js:251</a>
         </div>
         
     </div>
@@ -2427,7 +2433,7 @@ app.scene.addChild(list)</code></pre>
     
         
         <div class="tag-source">
-            <a href="pixi_list.js.html#line133">list.js:133</a>
+            <a href="pixi_list.js.html#line134">list.js:134</a>
         </div>
         
     </div>
@@ -2579,7 +2585,7 @@ app.scene.addChild(list)</code></pre>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/Message.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1465,7 +1471,7 @@
     
         
         <div class="tag-source">
-            <a href="pixi_message.js.html#line57">message.js:57</a>
+            <a href="pixi_message.js.html#line56">message.js:56</a>
         </div>
         
     </div>
@@ -2169,7 +2175,7 @@ a string, a number or a PIXI.Text object.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_abstractpopup.js.html#line307">abstractpopup.js:307</a>
+            <a href="pixi_abstractpopup.js.html#line302">abstractpopup.js:302</a>
         </div>
         
     </div>
@@ -2328,7 +2334,7 @@ a string, a number or a PIXI.Text object.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_message.js.html#line82">message.js:82</a>
+            <a href="pixi_message.js.html#line84">message.js:84</a>
         </div>
         
     </div>
@@ -2435,7 +2441,7 @@ a string, a number or a PIXI.Text object.</p>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/MessageInteractivePopup.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1469,7 +1475,7 @@ like Popup, Message...</p></div>
     
         
         <div class="tag-source">
-            <a href="pixi_popup.js.html#line28">popup.js:28</a>
+            <a href="pixi_popup.js.html#line27">popup.js:27</a>
         </div>
         
     </div>
@@ -1783,7 +1789,7 @@ like Popup, Message...</p></div>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/MessageMessageInteractivePopup.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1469,7 +1475,7 @@ like Popup, Message...</p></div>
     
         
         <div class="tag-source">
-            <a href="pixi_popup.js.html#line28">popup.js:28</a>
+            <a href="pixi_popup.js.html#line27">popup.js:27</a>
         </div>
         
     </div>
@@ -1783,7 +1789,7 @@ like Popup, Message...</p></div>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/Modal.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1465,7 +1471,7 @@
     
         
         <div class="tag-source">
-            <a href="pixi_modal.js.html#line47">modal.js:47</a>
+            <a href="pixi_modal.js.html#line46">modal.js:46</a>
         </div>
         
     </div>
@@ -2015,7 +2021,7 @@ a string or a PIXI.Text object.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_modal.js.html#line166">modal.js:166</a>
+            <a href="pixi_modal.js.html#line169">modal.js:169</a>
         </div>
         
     </div>
@@ -2122,7 +2128,7 @@ a string or a PIXI.Text object.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_modal.js.html#line131">modal.js:131</a>
+            <a href="pixi_modal.js.html#line132">modal.js:132</a>
         </div>
         
     </div>
@@ -2336,7 +2342,7 @@ a string or a PIXI.Text object.</p>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/ModalInteractivePopup.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1469,7 +1475,7 @@ like Popup, Message...</p></div>
     
         
         <div class="tag-source">
-            <a href="pixi_popup.js.html#line28">popup.js:28</a>
+            <a href="pixi_popup.js.html#line27">popup.js:27</a>
         </div>
         
     </div>
@@ -1783,7 +1789,7 @@ like Popup, Message...</p></div>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/ModalModalInteractivePopup.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1469,7 +1475,7 @@ like Popup, Message...</p></div>
     
         
         <div class="tag-source">
-            <a href="pixi_popup.js.html#line28">popup.js:28</a>
+            <a href="pixi_popup.js.html#line27">popup.js:27</a>
         </div>
         
     </div>
@@ -1783,7 +1789,7 @@ like Popup, Message...</p></div>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/PIXIApp.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1466,7 +1472,7 @@ by several functions and makes meaningful pre-assumptions.</p></div>
     
         
         <div class="tag-source">
-            <a href="pixi_app.js.html#line90">app.js:90</a>
+            <a href="pixi_app.js.html#line87">app.js:87</a>
         </div>
         
     </div>
@@ -2316,7 +2322,7 @@ const app = new PIXIApp({
     
         
         <div class="tag-source">
-            <a href="pixi_app.js.html#line272">app.js:272</a>
+            <a href="pixi_app.js.html#line280">app.js:280</a>
         </div>
         
     </div>
@@ -2423,7 +2429,7 @@ const app = new PIXIApp({
     
         
         <div class="tag-source">
-            <a href="pixi_app.js.html#line207">app.js:207</a>
+            <a href="pixi_app.js.html#line214">app.js:214</a>
         </div>
         
     </div>
@@ -2552,7 +2558,7 @@ handler for the orientationchange event.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_app.js.html#line664">app.js:664</a>
+            <a href="pixi_app.js.html#line666">app.js:666</a>
         </div>
         
     </div>
@@ -2749,7 +2755,7 @@ to browser page coordinates.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_app.js.html#line644">app.js:644</a>
+            <a href="pixi_app.js.html#line646">app.js:646</a>
         </div>
         
     </div>
@@ -2946,7 +2952,7 @@ to local DisplayObject coordinates.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_app.js.html#line244">app.js:244</a>
+            <a href="pixi_app.js.html#line252">app.js:252</a>
         </div>
         
     </div>
@@ -3023,7 +3029,7 @@ to the layout method.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_app.js.html#line374">app.js:374</a>
+            <a href="pixi_app.js.html#line384">app.js:384</a>
         </div>
         
     </div>
@@ -3188,7 +3194,7 @@ to the layout method.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_app.js.html#line235">app.js:235</a>
+            <a href="pixi_app.js.html#line245">app.js:245</a>
         </div>
         
     </div>
@@ -3347,7 +3353,7 @@ adapt their layout to the new app size.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_app.js.html#line451">app.js:451</a>
+            <a href="pixi_app.js.html#line458">app.js:458</a>
         </div>
         
     </div>
@@ -3680,7 +3686,7 @@ renderer resolution?</p></td>
     
         
         <div class="tag-source">
-            <a href="pixi_app.js.html#line483">app.js:483</a>
+            <a href="pixi_app.js.html#line491">app.js:491</a>
         </div>
         
     </div>
@@ -4013,7 +4019,7 @@ renderer resolution?</p></td>
     
         
         <div class="tag-source">
-            <a href="pixi_app.js.html#line430">app.js:430</a>
+            <a href="pixi_app.js.html#line438">app.js:438</a>
         </div>
         
     </div>
@@ -4170,7 +4176,7 @@ renderer resolution?</p></td>
     
         
         <div class="tag-source">
-            <a href="pixi_app.js.html#line416">app.js:416</a>
+            <a href="pixi_app.js.html#line425">app.js:425</a>
         </div>
         
     </div>
@@ -4327,7 +4333,7 @@ renderer resolution?</p></td>
     
         
         <div class="tag-source">
-            <a href="pixi_app.js.html#line576">app.js:576</a>
+            <a href="pixi_app.js.html#line580">app.js:580</a>
         </div>
         
     </div>
@@ -4528,7 +4534,7 @@ rejected with an error.</td>
     
         
         <div class="tag-source">
-            <a href="pixi_app.js.html#line197">app.js:197</a>
+            <a href="pixi_app.js.html#line204">app.js:204</a>
         </div>
         
     </div>
@@ -4633,7 +4639,7 @@ rejected with an error.</td>
     
         
         <div class="tag-source">
-            <a href="pixi_app.js.html#line222">app.js:222</a>
+            <a href="pixi_app.js.html#line232">app.js:232</a>
         </div>
         
     </div>
@@ -4769,7 +4775,7 @@ rejected with an error.</td>
     
         
         <div class="tag-source">
-            <a href="pixi_app.js.html#line398">app.js:398</a>
+            <a href="pixi_app.js.html#line408">app.js:408</a>
         </div>
         
     </div>
@@ -4930,7 +4936,7 @@ called without a parameter.</td>
     
         
         <div class="tag-source">
-            <a href="pixi_app.js.html#line544">app.js:544</a>
+            <a href="pixi_app.js.html#line549">app.js:549</a>
         </div>
         
     </div>
@@ -5131,7 +5137,7 @@ rejected with an error.</td>
     
         
         <div class="tag-source">
-            <a href="pixi_app.js.html#line308">app.js:308</a>
+            <a href="pixi_app.js.html#line316">app.js:316</a>
         </div>
         
     </div>
@@ -5428,7 +5434,7 @@ rejected with an error.</td>
     
         
         <div class="tag-source">
-            <a href="pixi_app.js.html#line153">app.js:153</a>
+            <a href="pixi_app.js.html#line160">app.js:160</a>
         </div>
         
     </div>
@@ -5534,7 +5540,7 @@ Overwrite this method if you need additonal views and components.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_app.js.html#line608">app.js:608</a>
+            <a href="pixi_app.js.html#line611">app.js:611</a>
         </div>
         
     </div>
@@ -5737,7 +5743,7 @@ rejected with an error.</td>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/Popup.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1465,7 +1471,7 @@
     
         
         <div class="tag-source">
-            <a href="pixi_popup.js.html#line205">popup.js:205</a>
+            <a href="pixi_popup.js.html#line206">popup.js:206</a>
         </div>
         
     </div>
@@ -1901,7 +1907,7 @@ a string, a number or a PIXI.Text object.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_abstractpopup.js.html#line307">abstractpopup.js:307</a>
+            <a href="pixi_abstractpopup.js.html#line302">abstractpopup.js:302</a>
         </div>
         
     </div>
@@ -2062,7 +2068,7 @@ a string, a number or a PIXI.Text object.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_popup.js.html#line130">popup.js:130</a>
+            <a href="pixi_popup.js.html#line134">popup.js:134</a>
         </div>
         
     </div>
@@ -2171,7 +2177,7 @@ a string, a number or a PIXI.Text object.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_abstractpopup.js.html#line287">abstractpopup.js:287</a>
+            <a href="pixi_abstractpopup.js.html#line283">abstractpopup.js:283</a>
         </div>
         
     </div>
@@ -2330,7 +2336,7 @@ a string, a number or a PIXI.Text object.</p>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/PopupInteractivePopup.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1469,7 +1475,7 @@ like Popup, Message...</p></div>
     
         
         <div class="tag-source">
-            <a href="pixi_popup.js.html#line28">popup.js:28</a>
+            <a href="pixi_popup.js.html#line27">popup.js:27</a>
         </div>
         
     </div>
@@ -1783,7 +1789,7 @@ like Popup, Message...</p></div>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/PopupMenu.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1465,7 +1471,7 @@
     
         
         <div class="tag-source">
-            <a href="pixi_popupmenu.js.html#line47">popupmenu.js:47</a>
+            <a href="pixi_popupmenu.js.html#line46">popupmenu.js:46</a>
         </div>
         
     </div>
@@ -1955,7 +1961,7 @@ a string, a number or a PIXI.Text object.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_abstractpopup.js.html#line307">abstractpopup.js:307</a>
+            <a href="pixi_abstractpopup.js.html#line302">abstractpopup.js:302</a>
         </div>
         
     </div>
@@ -2116,7 +2122,7 @@ a string, a number or a PIXI.Text object.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_popup.js.html#line130">popup.js:130</a>
+            <a href="pixi_popup.js.html#line134">popup.js:134</a>
         </div>
         
     </div>
@@ -2225,7 +2231,7 @@ a string, a number or a PIXI.Text object.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_abstractpopup.js.html#line287">abstractpopup.js:287</a>
+            <a href="pixi_abstractpopup.js.html#line283">abstractpopup.js:283</a>
         </div>
         
     </div>
@@ -2384,7 +2390,7 @@ a string, a number or a PIXI.Text object.</p>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/PopupMenuPopupInteractivePopup.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1469,7 +1475,7 @@ like Popup, Message...</p></div>
     
         
         <div class="tag-source">
-            <a href="pixi_popup.js.html#line28">popup.js:28</a>
+            <a href="pixi_popup.js.html#line27">popup.js:27</a>
         </div>
         
     </div>
@@ -1783,7 +1789,7 @@ like Popup, Message...</p></div>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/PopupMenuPopupMenuPopupInteractivePopup.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1469,7 +1475,7 @@ like Popup, Message...</p></div>
     
         
         <div class="tag-source">
-            <a href="pixi_popup.js.html#line28">popup.js:28</a>
+            <a href="pixi_popup.js.html#line27">popup.js:27</a>
         </div>
         
     </div>
@@ -1783,7 +1789,7 @@ like Popup, Message...</p></div>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/PopupMenuPopupMenuPopupPopupInteractivePopup.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1469,7 +1475,7 @@ like Popup, Message...</p></div>
     
         
         <div class="tag-source">
-            <a href="pixi_popup.js.html#line28">popup.js:28</a>
+            <a href="pixi_popup.js.html#line27">popup.js:27</a>
         </div>
         
     </div>
@@ -1783,7 +1789,7 @@ like Popup, Message...</p></div>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/PopupMenuPopupPopupInteractivePopup.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1469,7 +1475,7 @@ like Popup, Message...</p></div>
     
         
         <div class="tag-source">
-            <a href="pixi_popup.js.html#line28">popup.js:28</a>
+            <a href="pixi_popup.js.html#line27">popup.js:27</a>
         </div>
         
     </div>
@@ -1783,7 +1789,7 @@ like Popup, Message...</p></div>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/PopupPopupInteractivePopup.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1469,7 +1475,7 @@ like Popup, Message...</p></div>
     
         
         <div class="tag-source">
-            <a href="pixi_popup.js.html#line28">popup.js:28</a>
+            <a href="pixi_popup.js.html#line27">popup.js:27</a>
         </div>
         
     </div>
@@ -1783,7 +1789,7 @@ like Popup, Message...</p></div>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/Progress.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1465,7 +1471,7 @@
     
         
         <div class="tag-source">
-            <a href="pixi_progress.js.html#line57">progress.js:57</a>
+            <a href="pixi_progress.js.html#line56">progress.js:56</a>
         </div>
         
     </div>
@@ -2552,7 +2558,7 @@ app.scene.addChild(progress)</code></pre>
     
         
         <div class="tag-source">
-            <a href="pixi_progress.js.html#line266">progress.js:266</a>
+            <a href="pixi_progress.js.html#line263">progress.js:263</a>
         </div>
         
     </div>
@@ -2657,7 +2663,7 @@ app.scene.addChild(progress)</code></pre>
     
         
         <div class="tag-source">
-            <a href="pixi_progress.js.html#line150">progress.js:150</a>
+            <a href="pixi_progress.js.html#line151">progress.js:151</a>
         </div>
         
     </div>
@@ -2762,7 +2768,7 @@ app.scene.addChild(progress)</code></pre>
     
         
         <div class="tag-source">
-            <a href="pixi_progress.js.html#line255">progress.js:255</a>
+            <a href="pixi_progress.js.html#line252">progress.js:252</a>
         </div>
         
     </div>
@@ -2869,7 +2875,7 @@ app.scene.addChild(progress)</code></pre>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/Scrollview.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1465,7 +1471,7 @@
     
         
         <div class="tag-source">
-            <a href="pixi_scrollview.js.html#line38">scrollview.js:38</a>
+            <a href="pixi_scrollview.js.html#line37">scrollview.js:37</a>
         </div>
         
     </div>
@@ -1594,7 +1600,7 @@ app.loader
     
         
         <div class="tag-source">
-            <a href="pixi_scrollview.js.html#line69">scrollview.js:69</a>
+            <a href="pixi_scrollview.js.html#line58">scrollview.js:58</a>
         </div>
         
     </div>
@@ -1701,7 +1707,7 @@ app.loader
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/Slider.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1465,7 +1471,7 @@
     
         
         <div class="tag-source">
-            <a href="pixi_slider.js.html#line90">slider.js:90</a>
+            <a href="pixi_slider.js.html#line89">slider.js:89</a>
         </div>
         
     </div>
@@ -2643,7 +2649,7 @@ app.scene.addChild(slider)</code></pre>
     
         
         <div class="tag-source">
-            <a href="pixi_slider.js.html#line462">slider.js:462</a>
+            <a href="pixi_slider.js.html#line458">slider.js:458</a>
         </div>
         
     </div>
@@ -2748,7 +2754,7 @@ app.scene.addChild(slider)</code></pre>
     
         
         <div class="tag-source">
-            <a href="pixi_slider.js.html#line286">slider.js:286</a>
+            <a href="pixi_slider.js.html#line287">slider.js:287</a>
         </div>
         
     </div>
@@ -2853,7 +2859,7 @@ app.scene.addChild(slider)</code></pre>
     
         
         <div class="tag-source">
-            <a href="pixi_slider.js.html#line445">slider.js:445</a>
+            <a href="pixi_slider.js.html#line442">slider.js:442</a>
         </div>
         
     </div>
@@ -2960,7 +2966,7 @@ app.scene.addChild(slider)</code></pre>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/Switch.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1465,7 +1471,7 @@
     
         
         <div class="tag-source">
-            <a href="pixi_switch.js.html#line110">switch.js:110</a>
+            <a href="pixi_switch.js.html#line109">switch.js:109</a>
         </div>
         
     </div>
@@ -3073,7 +3079,7 @@ app.scene.addChild(switch1)</code></pre>
     
         
         <div class="tag-source">
-            <a href="pixi_switch.js.html#line495">switch.js:495</a>
+            <a href="pixi_switch.js.html#line508">switch.js:508</a>
         </div>
         
     </div>
@@ -3283,7 +3289,7 @@ app.scene.addChild(switch1)</code></pre>
     
         
         <div class="tag-source">
-            <a href="pixi_switch.js.html#line474">switch.js:474</a>
+            <a href="pixi_switch.js.html#line488">switch.js:488</a>
         </div>
         
     </div>
@@ -3390,7 +3396,7 @@ app.scene.addChild(switch1)</code></pre>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/TextLabel.TextLabel.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1463,7 +1469,7 @@
     
         
         <div class="tag-source">
-            <a href="pixi_labeledgraphics.js.html#line142">labeledgraphics.js:142</a>
+            <a href="pixi_labeledgraphics.js.html#line133">labeledgraphics.js:133</a>
         </div>
         
     </div>
@@ -1684,7 +1690,7 @@
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/Theme.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1465,7 +1471,7 @@
     
         
         <div class="tag-source">
-            <a href="pixi_theme.js.html#line85">theme.js:85</a>
+            <a href="pixi_theme.js.html#line86">theme.js:86</a>
         </div>
         
     </div>
@@ -2878,6 +2884,78 @@ is used for large actived text.</p></td>
         </tr>
 	
 	
+	
+        <tr>
+            
+                <td class="name"><code>textAlpha</code></td>
+            
+            
+            <td class="type">
+            
+                
+<span class="param-type">number</span>
+
+
+            
+            </td>
+            
+            
+                <td class="default">
+                
+                    Theme.textAlpha
+                
+                </td>
+            
+            
+            <td class="description last">
+                
+                    
+                        <span class="optional">optional</span>
+                    
+                    
+                        
+                    
+                
+                <p>The alpha value of text.</p></td>
+        </tr>
+	
+	
+	
+        <tr>
+            
+                <td class="name"><code>textActiveAlpha</code></td>
+            
+            
+            <td class="type">
+            
+                
+<span class="param-type">number</span>
+
+
+            
+            </td>
+            
+            
+                <td class="default">
+                
+                    Theme.textActiveAlpha
+                
+                </td>
+            
+            
+            <td class="description last">
+                
+                    
+                        <span class="optional">optional</span>
+                    
+                    
+                        
+                    
+                
+                <p>The alpha value of text when activated.</p></td>
+        </tr>
+	
+	
 	</tbody>
 </table>
             </td>
@@ -2999,7 +3077,7 @@ const app = new PIXIApp({
     
         
         <div class="tag-source">
-            <a href="pixi_theme.js.html#line143">theme.js:143</a>
+            <a href="pixi_theme.js.html#line179">theme.js:179</a>
         </div>
         
     </div>
@@ -3159,7 +3237,7 @@ const app = new PIXIApp({
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/ThemeDark.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1465,7 +1471,7 @@
     
         
         <div class="tag-source">
-            <a href="pixi_theme.js.html#line176">theme.js:176</a>
+            <a href="pixi_theme.js.html#line211">theme.js:211</a>
         </div>
         
     </div>
@@ -1580,7 +1586,7 @@ const app = new PIXIApp({
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/ThemeLight.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1466,7 +1472,7 @@ The color1 is set to 0xf6f6f6, color2 to 0x282828.</p></div>
     
         
         <div class="tag-source">
-            <a href="pixi_theme.js.html#line204">theme.js:204</a>
+            <a href="pixi_theme.js.html#line236">theme.js:236</a>
         </div>
         
     </div>
@@ -1592,7 +1598,7 @@ const app = new PIXIApp({
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/ThemeRed.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1466,7 +1472,7 @@ The primaryColor is set to 0xd92f31.</p></div>
     
         
         <div class="tag-source">
-            <a href="pixi_theme.js.html#line234">theme.js:234</a>
+            <a href="pixi_theme.js.html#line264">theme.js:264</a>
         </div>
         
     </div>
@@ -1592,7 +1598,7 @@ const app = new PIXIApp({
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/TileQuadNode.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1472,7 +1478,7 @@ the memory pressure.</p></div>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line278">image.js:278</a>
+            <a href="pixi_deepzoom_image.js.html#line256">image.js:256</a>
         </div>
         
     </div>
@@ -1676,7 +1682,7 @@ the memory pressure.</p></div>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line321">image.js:321</a>
+            <a href="pixi_deepzoom_image.js.html#line294">image.js:294</a>
         </div>
         
     </div>
@@ -1844,7 +1850,7 @@ and west flags to address nw, ne, sw, and se.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line293">image.js:293</a>
+            <a href="pixi_deepzoom_image.js.html#line271">image.js:271</a>
         </div>
         
     </div>
@@ -1921,7 +1927,7 @@ an indicator of tiles to free.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_deepzoom_image.js.html#line307">image.js:307</a>
+            <a href="pixi_deepzoom_image.js.html#line280">image.js:280</a>
         </div>
         
     </div>
@@ -2044,7 +2050,7 @@ an indicator of tiles to free.</p>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/Tooltip.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1465,7 +1471,7 @@
     
         
         <div class="tag-source">
-            <a href="pixi_tooltip.js.html#line49">tooltip.js:49</a>
+            <a href="pixi_tooltip.js.html#line48">tooltip.js:48</a>
         </div>
         
     </div>
@@ -2077,7 +2083,7 @@ a string, a number or a PIXI.Text object.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_abstractpopup.js.html#line307">abstractpopup.js:307</a>
+            <a href="pixi_abstractpopup.js.html#line302">abstractpopup.js:302</a>
         </div>
         
     </div>
@@ -2238,7 +2244,7 @@ a string, a number or a PIXI.Text object.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_abstractpopup.js.html#line185">abstractpopup.js:185</a>
+            <a href="pixi_abstractpopup.js.html#line184">abstractpopup.js:184</a>
         </div>
         
     </div>
@@ -2347,7 +2353,7 @@ a string, a number or a PIXI.Text object.</p>
     
         
         <div class="tag-source">
-            <a href="pixi_abstractpopup.js.html#line287">abstractpopup.js:287</a>
+            <a href="pixi_abstractpopup.js.html#line283">abstractpopup.js:283</a>
         </div>
         
     </div>
@@ -2506,7 +2512,7 @@ a string, a number or a PIXI.Text object.</p>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/UITest.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1465,7 +1471,7 @@
     
         
         <div class="tag-source">
-            <a href="uitest.js.html#line42">uitest.js:42</a>
+            <a href="uitest.js.html#line41">uitest.js:41</a>
         </div>
         
     </div>
@@ -1857,7 +1863,7 @@ test.start()</code></pre>
     
         
         <div class="tag-source">
-            <a href="uitest.js.html#line126">uitest.js:126</a>
+            <a href="uitest.js.html#line134">uitest.js:134</a>
         </div>
         
     </div>
@@ -1962,7 +1968,7 @@ test.start()</code></pre>
     
         
         <div class="tag-source">
-            <a href="uitest.js.html#line266">uitest.js:266</a>
+            <a href="uitest.js.html#line287">uitest.js:287</a>
         </div>
         
     </div>
@@ -2596,7 +2602,7 @@ test.start()</code></pre>
     
         
         <div class="tag-source">
-            <a href="uitest.js.html#line391">uitest.js:391</a>
+            <a href="uitest.js.html#line423">uitest.js:423</a>
         </div>
         
     </div>
@@ -3340,7 +3346,7 @@ test.start()</code></pre>
     
         
         <div class="tag-source">
-            <a href="uitest.js.html#line136">uitest.js:136</a>
+            <a href="uitest.js.html#line144">uitest.js:144</a>
         </div>
         
     </div>
@@ -3445,7 +3451,7 @@ test.start()</code></pre>
     
         
         <div class="tag-source">
-            <a href="uitest.js.html#line106">uitest.js:106</a>
+            <a href="uitest.js.html#line114">uitest.js:114</a>
         </div>
         
     </div>
@@ -3550,7 +3556,7 @@ test.start()</code></pre>
     
         
         <div class="tag-source">
-            <a href="uitest.js.html#line116">uitest.js:116</a>
+            <a href="uitest.js.html#line124">uitest.js:124</a>
         </div>
         
     </div>
@@ -3655,7 +3661,7 @@ test.start()</code></pre>
     
         
         <div class="tag-source">
-            <a href="uitest.js.html#line156">uitest.js:156</a>
+            <a href="uitest.js.html#line164">uitest.js:164</a>
         </div>
         
     </div>
@@ -4177,7 +4183,7 @@ test.start()</code></pre>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/Volatile.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1465,7 +1471,7 @@
     
         
         <div class="tag-source">
-            <a href="pixi_volatile.js.html#line50">volatile.js:50</a>
+            <a href="pixi_volatile.js.html#line49">volatile.js:49</a>
         </div>
         
     </div>
@@ -1986,7 +1992,7 @@ app.scene.addChild(button)</code></pre>
     
         
         <div class="tag-source">
-            <a href="pixi_volatile.js.html#line104">volatile.js:104</a>
+            <a href="pixi_volatile.js.html#line105">volatile.js:105</a>
         </div>
         
     </div>
@@ -2093,7 +2099,7 @@ app.scene.addChild(button)</code></pre>
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/global.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1655,7 +1661,7 @@
     
         
         <div class="tag-source">
-            <a href="pixi_button.js.html#line8">button.js:8</a>
+            <a href="pixi_button.js.html#line10">button.js:10</a>
         </div>
         
     </div>
@@ -1943,7 +1949,7 @@
     
         
         <div class="tag-source">
-            <a href="pixi_button.js.html#line24">button.js:24</a>
+            <a href="pixi_button.js.html#line26">button.js:26</a>
         </div>
         
     </div>
@@ -2231,7 +2237,7 @@
     
         
         <div class="tag-source">
-            <a href="pixi_button.js.html#line16">button.js:16</a>
+            <a href="pixi_button.js.html#line18">button.js:18</a>
         </div>
         
     </div>
@@ -3314,7 +3320,7 @@
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/index.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1467,7 +1473,6 @@
 <ul>
 <li><a target="_blank" href="http://www.pixijs.com">PixiJS</a></li>
 <li><a target="_blank" href="https://greensock.com">Greensock</a> with all Plugins</li>
-<li><a target="_blank" href="https://d3js.org">D3</a></li>
 </ul></article>
     </section>
 
@@ -1480,7 +1485,7 @@
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a target="_blank" href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_abstractpopup.js.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1451,7 +1457,6 @@
  * @see {@link http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics}
  */
 export default class AbstractPopup extends PIXI.Graphics {
-    
     /**
      * Creates an instance of an AbstractPopup (only for internal use).
      *
@@ -1485,34 +1490,37 @@ export default class AbstractPopup extends PIXI.Graphics {
      *     to landscape, the popup cannot be displayed in portrait mode.
      */
     constructor(opts = {}) {
-
         super()
 
         const theme = Theme.fromString(opts.theme)
         this.theme = theme
 
-        this.opts = Object.assign({}, {
+        this.opts = Object.assign(
-            id: PIXI.utils.uid(),
+            {},
-            x: 0,
+            {
-            y: 0,
+                id: PIXI.utils.uid(),
-            header: null,                       // null or null
+                x: 0,
-            content: null,                      // null or String or PIXI.DisplayObject
+                y: 0,
-            minWidth: 320,
+                header: null, // null or null
-            minHeight: 130,
+                content: null, // null or String or PIXI.DisplayObject
-            maxWidth: null,
+                minWidth: 320,
-            padding: theme.padding,
+                minHeight: 130,
-            fill: theme.fill,
+                maxWidth: null,
-            fillAlpha: theme.fillAlpha,
+                padding: theme.padding,
-            stroke: theme.stroke,
+                fill: theme.fill,
-            strokeWidth: theme.strokeWidth,
+                fillAlpha: theme.fillAlpha,
-            strokeAlpha: theme.strokeAlpha,
+                stroke: theme.stroke,
-            headerStyle: theme.textStyleLarge,
+                strokeWidth: theme.strokeWidth,
-            textStyle: theme.textStyleSmall,
+                strokeAlpha: theme.strokeAlpha,
-            radius: theme.radius,
+                headerStyle: theme.textStyleLarge,
-            onHidden: null,
+                textStyle: theme.textStyleSmall,
-            visible: true,
+                radius: theme.radius,
-            orientation: null
+                onHidden: null,
-        }, opts)
+                visible: true,
+                orientation: null
+            },
+            opts
+        )
 
         this.id = this.opts.id
 
@@ -1521,10 +1529,10 @@ export default class AbstractPopup extends PIXI.Graphics {
 
         if (this.opts.maxWidth) {
             this.headerStyle.wordWrap = true
-            this.headerStyle.wordWrapWidth = this.opts.maxWidth - (2 * this.opts.padding)
+            this.headerStyle.wordWrapWidth = this.opts.maxWidth - 2 * this.opts.padding
 
             this.textStyle.wordWrap = true
-            this.textStyle.wordWrapWidth = this.opts.maxWidth - (2 * this.opts.padding)
+            this.textStyle.wordWrapWidth = this.opts.maxWidth - 2 * this.opts.padding
         }
 
         this.alpha = 0
@@ -1555,7 +1563,6 @@ export default class AbstractPopup extends PIXI.Graphics {
      * @return {AbstractPopup} A reference to the popup for chaining.
      */
     setup() {
-
         // position
         //-----------------
         this.sy = this.opts.padding
@@ -1563,15 +1570,14 @@ export default class AbstractPopup extends PIXI.Graphics {
         // header
         //-----------------
         if (this.opts.header != null) {
-
             let header = null
 
             if (this.opts.header instanceof PIXI.Text) {
                 header = this.opts.header
             } else if (typeof this.opts.header === 'number') {
-                header =  new PIXI.Text(this.opts.header.toString(), this.headerStyle)
+                header = new PIXI.Text(this.opts.header.toString(), this.headerStyle)
             } else {
-                header =  new PIXI.Text(this.opts.header, this.headerStyle)
+                header = new PIXI.Text(this.opts.header, this.headerStyle)
             }
 
             header.x = this.opts.padding
@@ -1591,7 +1597,6 @@ export default class AbstractPopup extends PIXI.Graphics {
         // content
         //-----------------
         if (this.opts.content != null) {
-
             let content = null
 
             if (typeof this.opts.content === 'string') {
@@ -1621,13 +1626,12 @@ export default class AbstractPopup extends PIXI.Graphics {
      * @return {AbstractPopup} A reference to the popup for chaining.
      */
     layout() {
-        
         // wanted width &amp; wanted height
         //-----------------
         const padding = this.opts.padding
         const size = this.getInnerSize()
-        const width = size.width + (2 * padding)
+        const width = size.width + 2 * padding
-        const height = size.height + (2 * padding)
+        const height = size.height + 2 * padding
 
         this.wantedWidth = Math.max(width, this.opts.minWidth)
         this.wantedHeight = Math.max(height, this.opts.minHeight)
@@ -1669,7 +1673,6 @@ export default class AbstractPopup extends PIXI.Graphics {
      * @return {AbstractPopup} A reference to the popup for chaining.
      */
     draw() {
-
         const square = Math.round(this.wantedWidth) === Math.round(this.wantedHeight)
         const diameter = Math.round(this.opts.radius * 2)
 
@@ -1695,7 +1698,6 @@ export default class AbstractPopup extends PIXI.Graphics {
      * @returns {object} An JavaScript object width the keys width and height.
      */
     getInnerSize() {
-
         let width = 0
         let height = 0
 
@@ -1713,7 +1715,7 @@ export default class AbstractPopup extends PIXI.Graphics {
             height += this._content.height
         }
 
-        return {width, height}
+        return { width, height }
     }
 
     /**
@@ -1723,7 +1725,6 @@ export default class AbstractPopup extends PIXI.Graphics {
      * @return {AbstractPopup} A reference to the popup for chaining.
      */
     show(cb) {
-
         TweenLite.to(this, this.theme.fast, {
             alpha: 1,
             onComplete: () => {
@@ -1743,7 +1744,6 @@ export default class AbstractPopup extends PIXI.Graphics {
      * @return {AbstractPopup} A reference to the popup for chaining.
      */
     hide(cb) {
-
         TweenLite.to(this, this.theme.fast, {
             alpha: 0,
             onComplete: () => {
@@ -1808,7 +1808,7 @@ export default class AbstractPopup extends PIXI.Graphics {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_app.js.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1444,7 +1450,7 @@ import Theme from './theme.js'
 import Progress from './progress.js'
 import Modal from './modal.js'
 import Message from './message.js'
-import {debounce} from '../utils.js'
+import { debounce } from '../utils.js'
 
 /**
  * A special InteractionManager for fullscreen apps, which may
@@ -1461,7 +1467,6 @@ import {debounce} from '../utils.js'
  * @see {@link https://stackoverflow.com/questions/29710696/webgl-drawing-buffer-size-does-not-equal-canvas-size}
  */
 class FullscreenInteractionManager extends PIXI.interaction.InteractionManager {
-
     mapPositionToPoint(point, x, y) {
         let resolution = this.renderer.resolution
         let extendWidth = 1.0
@@ -1469,8 +1474,7 @@ class FullscreenInteractionManager extends PIXI.interaction.InteractionManager {
         let dy = 0
         let canvas = this.renderer.view
         let context = canvas.getContext('webgl')
-        if (context.drawingBufferWidth &lt; canvas.width ||
+        if (context.drawingBufferWidth &lt; canvas.width || context.drawingBufferHeight &lt; canvas.height) {
-            context.drawingBufferHeight &lt; canvas.height) {
             extendWidth = context.drawingBufferWidth / canvas.width
             extendHeight = context.drawingBufferHeight / canvas.height
             //dx = wantedWidth - context.drawingBufferWidth
@@ -1503,7 +1507,6 @@ class FullscreenInteractionManager extends PIXI.interaction.InteractionManager {
  * @see {@link http://pixijs.download/dev/docs/PIXI.Application.html|PIXI.Application}
  */
 export default class PIXIApp extends PIXI.Application {
-
     /**
      * Creates an instance of a PixiApp.
      *
@@ -1526,12 +1529,23 @@ export default class PIXIApp extends PIXI.Application {
      * @param {boolean} [opts.adaptive=true] - Adds Graphics adaptive calculation of quadratic curve and arc subdivision.
      */
     constructor({
-        width = null, height = null, view = null,
+        width = null,
-        transparent = true, backgroundColor = 0x282828, theme = 'dark',
+        height = null,
-        antialias = true, resolution = window.devicePixelRatio || 1, autoResize = true,
+        view = null,
-        fpsLogging = false, progress = {}, forceCanvas = false, roundPixels = true, monkeyPatchMapping = true, adaptive = true,
+        transparent = true,
-        graphql = false }) {
+        backgroundColor = 0x282828,
-
+        theme = 'dark',
+        antialias = true,
+        resolution = window.devicePixelRatio || 1,
+        autoResize = true,
+        fpsLogging = false,
+        progress = {},
+        forceCanvas = false,
+        roundPixels = true,
+        monkeyPatchMapping = true,
+        adaptive = true,
+        graphql = false
+    }) {
         const fullScreen = !width || !height
 
         if (fullScreen) {
@@ -1548,8 +1562,7 @@ export default class PIXIApp extends PIXI.Application {
             resolution,
             autoResize,
             backgroundColor,
-            forceCanvas,
+            forceCanvas
-            roundPixels             // not needed for PixiJS >= 5
         })
 
         this.width = width
@@ -1599,7 +1612,6 @@ export default class PIXIApp extends PIXI.Application {
 
         // GraphQL
         if (this.graphql &amp;&amp; typeof apollo !== 'undefined') {
-
             const networkInterface = apollo.createNetworkInterface({
                 uri: '/graphql'
             })
@@ -1609,10 +1621,7 @@ export default class PIXIApp extends PIXI.Application {
                 connectionParams: {}
             })
 
-            const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions(
+            const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions(networkInterface, wsClient)
-                networkInterface,
-                wsClient
-            )
 
             this.apolloClient = new apollo.ApolloClient({
                 networkInterface: networkInterfaceWithSubscriptions
@@ -1620,7 +1629,11 @@ export default class PIXIApp extends PIXI.Application {
         }
 
         // progress
-        this._progress = new Progress(Object.assign({ theme: this.theme }, this.progressOpts, { app: this }))
+        this._progress = new Progress(
+            Object.assign({ theme: this.theme }, this.progressOpts, {
+                app: this
+            })
+        )
         this._progress.visible = false
         this.stage.addChild(this._progress)
 
@@ -1645,9 +1658,12 @@ export default class PIXIApp extends PIXI.Application {
     checkOrientation(event) {
         var value = this.orientation()
         if (value != this.orient) {
-            setTimeout(100, function () {
+            setTimeout(
-                this.orientationChanged(true)
+                100,
-            }.bind(this))
+                function() {
+                    this.orientationChanged(true)
+                }.bind(this)
+            )
             this.orient = value
         }
     }
@@ -1670,9 +1686,7 @@ export default class PIXIApp extends PIXI.Application {
      * @param {number} [width] - The width of the app.
      * @param {number} [height] - The height of the app.
      */
-    layout(width, height) {
+    layout(width, height) {}
-
-    }
 
     /**
      * Draws the display tree of the app. Typically this can be delegated
@@ -1791,8 +1805,10 @@ export default class PIXIApp extends PIXI.Application {
         let canvas = this.renderer.view
         let context = canvas.getContext('webgl')
 
-        if (context !== null &amp;&amp; (context.drawingBufferWidth &lt; canvas.width ||
+        if (
-            context.drawingBufferHeight &lt; canvas.height)) {
+            context !== null &amp;&amp;
+            (context.drawingBufferWidth &lt; canvas.width || context.drawingBufferHeight &lt; canvas.height)
+        ) {
             extendWidth = context.drawingBufferWidth / canvas.width
             extendHeight = context.drawingBufferHeight / canvas.height
             //dx = wantedWidth - context.drawingBufferWidth
@@ -1834,7 +1850,6 @@ export default class PIXIApp extends PIXI.Application {
      *     called without a parameter.
      */
     progress(value) {
-
         if (typeof value === 'undefined') {
             return this._progress
         }
@@ -1852,7 +1867,6 @@ export default class PIXIApp extends PIXI.Application {
      * @return {Modal} Returns the Modal object.
      */
     modal(opts = {}) {
-
         let modal = new Modal(Object.assign({ theme: this.theme }, opts, { app: this }))
         this.scene.addChild(modal)
 
@@ -1866,7 +1880,6 @@ export default class PIXIApp extends PIXI.Application {
      * @return {Message} Returns the Message object.
      */
     message(opts = {}) {
-
         let message = new Message(Object.assign({ theme: this.theme }, opts, { app: this }))
         this.scene.addChild(message)
 
@@ -1887,20 +1900,21 @@ export default class PIXIApp extends PIXI.Application {
      * @return {PIXIApp} The PIXIApp object for chaining.
      */
     loadSprites(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) {
+        this.loadTextures(
+            resources,
+            textures => {
+                let sprites = new Map()
 
-        this.loadTextures(resources, textures => {
+                for (let [key, texture] of textures) {
+                    sprites.set(key, new PIXI.Sprite(texture))
+                }
 
-            let sprites = new Map()
+                if (loaded) {
-
+                    loaded.call(this, sprites)
-            for (let [key, texture] of textures) {
+                }
-                sprites.set(key, new PIXI.Sprite(texture))
+            },
-            }
+            { resolutionDependent, progress }
-
+        )
-            if (loaded) {
-                loaded.call(this, sprites)
-            }
-
-        }, { resolutionDependent, progress })
 
         return this
     }
@@ -1919,7 +1933,6 @@ export default class PIXIApp extends PIXI.Application {
      * @return {PIXIApp} The PIXIApp object for chaining.
      */
     loadTextures(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) {
-
         if (!Array.isArray(resources)) {
             resources = [resources]
         }
@@ -1927,9 +1940,7 @@ export default class PIXIApp extends PIXI.Application {
         const loader = this.loader
 
         for (let resource of resources) {
-
             if (!loader.resources[resource]) {
-
                 if (resolutionDependent) {
                     let resolution = Math.round(this.renderer.resolution)
                     switch (resolution) {
@@ -1980,7 +1991,6 @@ export default class PIXIApp extends PIXI.Application {
      *     rejected with an error.
      */
     query(query, opts = {}) {
-
         if (typeof query === 'string') {
             opts = Object.assign({}, opts, { query })
         } else {
@@ -2012,7 +2022,6 @@ export default class PIXIApp extends PIXI.Application {
      *     rejected with an error.
      */
     mutate(mutation, opts = {}) {
-
         if (typeof mutation === 'string') {
             opts = Object.assign({}, opts, { mutation })
         } else {
@@ -2044,7 +2053,6 @@ export default class PIXIApp extends PIXI.Application {
      *     rejected with an error.
      */
     subscribe(subscription, opts = {}) {
-
         if (typeof subscription === 'string') {
             opts = Object.assign({}, opts, { subscription })
         } else {
@@ -2081,7 +2089,7 @@ export default class PIXIApp extends PIXI.Application {
 
     convertPointFromPageToNode(displayObject, x, y) {
         let resolution = this.renderer.resolution
-        console.log("resolution", resolution)
+        console.log('resolution', resolution)
         let pixiGlobal = window.convertPointFromPageToNode(app.view, x, y)
         pixiGlobal.x /= resolution
         pixiGlobal.y /= resolution
@@ -2119,7 +2127,6 @@ export default class PIXIApp extends PIXI.Application {
  * @see {@link http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics}
  */
 class FpsDisplay extends PIXI.Graphics {
-
     /**
      * Creates an instance of a FpsDisplay.
      *
@@ -2127,25 +2134,27 @@ class FpsDisplay extends PIXI.Graphics {
      * @param {PIXIApp} app - The PIXIApp where the frames per second should be displayed.
      */
     constructor(app) {
-
         super()
 
         this.app = app
 
         this.lineStyle(3, 0x434f4f, 1)
-            .beginFill(0x434f4f, .6)
+            .beginFill(0x434f4f, 0.6)
             .drawRoundedRect(0, 0, 68, 32, 5)
             .endFill()
             .position.set(20, 20)
 
-        this.text = new PIXI.Text(this.fps, new PIXI.TextStyle({
+        this.text = new PIXI.Text(
-            fontFamily: 'Arial',
+            this.fps,
-            fontSize: 14,
+            new PIXI.TextStyle({
-            fontWeight: 'bold',
+                fontFamily: 'Arial',
-            fill: '#f6f6f6',
+                fontSize: 14,
-            stroke: '#434f4f',
+                fontWeight: 'bold',
-            strokeThickness: 3
+                fill: '#f6f6f6',
-        }))
+                stroke: '#434f4f',
+                strokeThickness: 3
+            })
+        )
         this.text.position.set(6, 6)
 
         this.addChild(this.text)
@@ -2161,7 +2170,7 @@ class FpsDisplay extends PIXI.Graphics {
      * @return {PIXIApp} Returns the PIXIApp object for chaining.
      */
     refreshFps() {
-        this.text.text = `${(this.app.ticker.FPS).toFixed(1)} fps`
+        this.text.text = `${this.app.ticker.FPS.toFixed(1)} fps`
 
         return this
     }
@@ -2179,7 +2188,7 @@ class FpsDisplay extends PIXI.Graphics {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_badge.js.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1470,7 +1476,6 @@ import Tooltip from './tooltip.js'
  * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/badge.html|DocTest}
  */
 export default class Badge extends AbstractPopup {
-    
     /**
      * Creates an instance of a Badge.
      *
@@ -1483,15 +1488,18 @@ export default class Badge extends AbstractPopup {
      *     to display.
      */
     constructor(opts = {}) {
-        
         const theme = Theme.fromString(opts.theme)
 
-        opts = Object.assign({}, {
+        opts = Object.assign(
-            minWidth: 0,
+            {},
-            minHeight: 0,
+            {
-            padding: theme.padding / 2,
+                minWidth: 0,
-            tooltip: null
+                minHeight: 0,
-        }, opts)
+                padding: theme.padding / 2,
+                tooltip: null
+            },
+            opts
+        )
 
         super(opts)
 
@@ -1514,16 +1522,18 @@ export default class Badge extends AbstractPopup {
      * @return {Badge} A reference to the badge for chaining.
      */
     setup() {
-
         super.setup()
 
         // tooltip
         //-----------------
         if (this.opts.tooltip) {
             if (typeof this.opts.tooltip === 'string') {
-                this.tooltip = new Tooltip({object: this, content: this.opts.tooltip})
+                this.tooltip = new Tooltip({
+                    object: this,
+                    content: this.opts.tooltip
+                })
             } else {
-                this.opts.tooltip = Object.assign({}, {object: this}, this.opts.tooltip)
+                this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip)
                 this.tooltip = new Tooltip(this.opts.tooltip)
             }
         }
@@ -1538,7 +1548,6 @@ export default class Badge extends AbstractPopup {
      * @return {Badge} A reference to the badge for chaining.
      */
     layout() {
-
         super.layout()
 
         this.content.x = this.width / 2 - this.content.width / 2 - this.opts.strokeWidth / 2
@@ -1560,7 +1569,7 @@ export default class Badge extends AbstractPopup {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_blurfilter.js.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1455,7 +1461,7 @@
  * }).setup().run()
  *
  * // Add a video sprite
- * const sprite = new PIXI.Sprite(PIXI.Texture.fromVideo("assets/blurfilter.mp4"))
+ * const sprite = new PIXI.Sprite(PIXI.Texture.from("assets/blurfilter.mp4"))
  * sprite.width = app.size.width
  * sprite.height = app.size.height
  * app.scene.addChild(sprite)
@@ -1471,7 +1477,6 @@
  * @param {number} [blur=50] The strength of the blur.
  */
 export default class BlurFilter extends PIXI.Filter {
-    
     constructor(shape, blur = 50) {
         super()
 
@@ -1482,10 +1487,15 @@ export default class BlurFilter extends PIXI.Filter {
     }
 
     apply(filterManager, input, output) {
-        let renderTarget = filterManager.getRenderTarget(true)
+        let renderTarget = filterManager.getFilterTexture()
         this.tiltShiftXFilter.apply(filterManager, input, renderTarget)
         this.tiltShiftYFilter.apply(filterManager, renderTarget, output)
-        filterManager.returnRenderTarget(renderTarget)
+        filterManager.returnFilterTexture(renderTarget)
+
+        // let renderTarget = filterManager.getRenderTarget(true)
+        // this.tiltShiftXFilter.apply(filterManager, input, renderTarget)
+        // this.tiltShiftYFilter.apply(filterManager, renderTarget, output)
+        // filterManager.returnRenderTarget(renderTarget)
     }
 
     /**
@@ -1519,16 +1529,27 @@ export default class BlurFilter extends PIXI.Filter {
      * @returns {Object}
      */
     normalize(value) {
-
         let shape = null
 
         if (value instanceof PIXI.Circle) {
-            shape = {type: 'circle', x: value.x, y: value.y, r: value.radius}
+            shape = { type: 'circle', x: value.x, y: value.y, r: value.radius }
         } else if (value instanceof PIXI.Rectangle) {
-            shape = {type: 'rectangle', x: value.x, y: value.y, width: value.width, height: value.height}
+            shape = {
+                type: 'rectangle',
+                x: value.x,
+                y: value.y,
+                width: value.width,
+                height: value.height
+            }
         } else {
             const bounds = value.getBounds()
-            shape = {type: 'rectangle', x: bounds.x, y: bounds.y, width: bounds.width, height: bounds.height}
+            shape = {
+                type: 'rectangle',
+                x: bounds.x,
+                y: bounds.y,
+                width: bounds.width,
+                height: bounds.height
+            }
         }
 
         return shape
@@ -1544,28 +1565,30 @@ export default class BlurFilter extends PIXI.Filter {
  * @private
  */
 class TiltShiftAxisFilter extends PIXI.Filter {
-
+    constructor(shape, blur) {
-    constructor(shape, blur){
-
         const vertex = `
             attribute vec2 aVertexPosition;
             attribute vec2 aTextureCoord;
 
             uniform mat3 projectionMatrix;
 
+            varying vec2 vVertexPosition;
             varying vec2 vTextureCoord;
 
             void main(void) {
-                gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
+                vVertexPosition = aVertexPosition;
                 vTextureCoord = aTextureCoord;
+                gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
             }
         `
 
         const fragment = `
+
+            varying vec2 vVertexPosition;
             varying vec2 vTextureCoord;
 
-            uniform vec4 filterArea;
             uniform sampler2D uSampler;
+            
             uniform int shape;
             uniform vec4 rectangle;
             uniform vec3 circle;
@@ -1578,15 +1601,12 @@ class TiltShiftAxisFilter extends PIXI.Filter {
             }
 
             void main(void) {
-                // textureCoord to pixelCoord
-                vec2 pixelCoord = vTextureCoord * filterArea.xy - vec2(4.0, 4.0);   // FIXME: There's a shift of 4 * 4 pixels, don't know why...
-
                 bool inside = false;
 
                 if (shape == 1) {
-                    inside = distance(pixelCoord, circle.xy) &lt;= circle.z;
+                    inside = distance(vVertexPosition, circle.xy) &lt;= circle.z;
                 } else if (shape == 2) {
-                    inside = pixelCoord.x >= rectangle.x &amp;&amp; pixelCoord.x &lt;= rectangle.z &amp;&amp; pixelCoord.y >= rectangle.y &amp;&amp; pixelCoord.y &lt;= rectangle.w;
+                    inside = vVertexPosition.x >= rectangle.x &amp;&amp; vVertexPosition.x &lt;= rectangle.z &amp;&amp; vVertexPosition.y >= rectangle.y &amp;&amp; vVertexPosition.y &lt;= rectangle.w;
                 }
 
                 if (inside) {
@@ -1700,7 +1720,6 @@ class TiltShiftYFilter extends TiltShiftAxisFilter {
         this.uniforms.delta.y = 0.1
     }
 }
-
 </code></pre>
         </article>
     </section>
@@ -1714,7 +1733,7 @@ class TiltShiftYFilter extends TiltShiftAxisFilter {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_button.js.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1438,10 +1444,12 @@
             </div>
         </header>
         <article>
-            <pre id="source-code" class="prettyprint source linenums"><code>import Theme from './theme.js'
+            <pre id="source-code" class="prettyprint source linenums"><code>/* global */
+import Theme from './theme.js'
 import Tooltip from './tooltip.js'
 import Badge from './badge.js'
 import Events from '../events.js'
+import { Points } from '../utils.js'
 
 /**
  * Callback for the button action.
@@ -1486,7 +1494,6 @@ import Events from '../events.js'
  * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/button.html|DocTest}
  */
 export default class Button extends PIXI.Container {
-
     /**
      * Creates an instance of a Button.
      *
@@ -1520,6 +1527,8 @@ export default class Button extends PIXI.Container {
      *     for possible options.
      * @param {number} [opts.textStyleActive=Theme.textStyleActive] - A textstyle object for the styling of the label when the
      *     button is activated. See PIXI.TextStyle for possible options.
+     * @param {number} [opts.textAlpha=Theme.textAlpha] - The alpha value of the text.
+     * @param {number} [opts.textActiveAlpha=Theme.textActiveAlpha] - The alpha value of the text when activated.
      * @param {string} [opts.style=default] - A shortcut for styling options. Possible values are default, link.
      * @param {number} [opts.radius=Theme.radius] - The radius of the four corners of the button (which is a rounded rectangle).
      * @param {boolean} [opts.disabled=false] - Is the button disabled? When disabled, the button has a lower alpha value
@@ -1545,54 +1554,62 @@ export default class Button extends PIXI.Container {
      * @param {boolean} [opts.visible=true] - Is the button initially visible (property visible)?
      */
     constructor(opts = {}) {
-
         super()
 
         const theme = Theme.fromString(opts.theme)
         this.theme = theme
 
-        this.opts = Object.assign({}, {
+        this.opts = Object.assign(
-            id: PIXI.utils.uid(),
+            {},
-            label: null,
+            {
-            x: 0,
+                id: PIXI.utils.uid(),
-            y: 0,
+                label: null,
-            minWidth: 44,
+                x: 0,
-            minHeight: 44,
+                y: 0,
-            padding: theme.padding,
+                minWidth: 44,
-            icon: undefined,
+                minHeight: 44,
-            iconActive: undefined,
+                padding: theme.padding,
-            iconPosition: 'left',
+                icon: undefined,
-            iconColor: theme.iconColor,
+                iconActive: undefined,
-            iconColorActive: theme.iconColorActive,
+                iconPosition: 'left',
-            fill: theme.fill,
+                iconColor: theme.iconColor,
-            fillAlpha: theme.fillAlpha,
+                iconColorActive: theme.iconColorActive,
-            fillActive: theme.fillActive,
+                fill: theme.fill,
-            fillActiveAlpha: theme.fillActiveAlpha,
+                fillAlpha: theme.fillAlpha,
-            stroke: theme.stroke,
+                fillActive: theme.fillActive,
-            strokeWidth: theme.strokeWidth,
+                fillActiveAlpha: theme.fillActiveAlpha,
-            strokeAlpha: theme.strokeAlpha,
+                stroke: theme.stroke,
-            strokeActive: theme.strokeActive,
+                strokeWidth: theme.strokeWidth,
-            strokeActiveWidth: theme.strokeActiveWidth,
+                strokeAlpha: theme.strokeAlpha,
-            strokeActiveAlpha: theme.strokeActiveAlpha,
+                strokeActive: theme.strokeActive,
-            textStyle: theme.textStyle,
+                strokeActiveWidth: theme.strokeActiveWidth,
-            textStyleActive: theme.textStyleActive,
+                strokeActiveAlpha: theme.strokeActiveAlpha,
-            style: 'default',
+                textStyle: {},
-            radius: theme.radius,
+                textStyleActive: {},
-            disabled: false,
+                textAlpha: theme.textAlpha,
-            active: false,
+                textActiveAlpha: theme.textActiveAlpha,
-            action: null,
+                style: 'default',
-            beforeAction: null,
+                radius: theme.radius,
-            afterAction: null,
+                disabled: false,
-            type: 'default',
+                active: false,
-            align: 'center',
+                action: null,
-            verticalAlign: 'middle',
+                beforeAction: null,
-            tooltip: null,
+                afterAction: null,
-            badge: null,
+                type: 'default',
-            visible: true
+                align: 'center',
-        }, opts)
+                verticalAlign: 'middle',
+                tooltip: null,
+                badge: null,
+                visible: true
+            },
+            opts
+        )
 
         this.id = this.opts.id
 
+        this.opts.textStyle = Object.assign({}, theme.textStyle, this.opts.textStyle)
+        this.opts.textStyleActive = Object.assign({}, theme.textStyleActive, this.opts.textStyleActive)
+
         if (typeof this.opts.icon === 'undefined' &amp;&amp; typeof this.opts.iconActive !== 'undefined') {
             this.opts.icon = this.opts.iconActive
         } else if (typeof this.opts.icon !== 'undefined' &amp;&amp; typeof this.opts.iconActive === 'undefined') {
@@ -1600,12 +1617,19 @@ export default class Button extends PIXI.Container {
         }
 
         if (this.opts.style === 'link') {
-            Object.assign(this.opts, {strokeAlpha: 0, strokeActiveAlpha: 0, fillAlpha: 0, fillActiveAlpha: 0})
+            Object.assign(this.opts, {
+                strokeAlpha: 0,
+                strokeActiveAlpha: 0,
+                fillAlpha: 0,
+                fillActiveAlpha: 0
+            })
         }
 
         this._active = null
         this._disabled = null
 
+        this.__start = { x: null, y: null }
+
         this.iconInactive = null
         this.iconActive = null
         this.text = null
@@ -1639,7 +1663,6 @@ export default class Button extends PIXI.Container {
      * @return {Button} A reference to the button for chaining.
      */
     setup() {
-
         // Button
         //-----------------
         let button = new PIXI.Graphics()
@@ -1672,41 +1695,59 @@ export default class Button extends PIXI.Container {
         //-----------------
         this.button.on('pointerover', e => {
             this.capture(e)
-            TweenLite.to([this.button, this.content], this.theme.fast, {alpha: .83, overwrite: 'none'})
+            TweenLite.to([this.button, this.content], this.theme.fast, {
+                alpha: 0.83,
+                overwrite: 'none'
+            })
         })
 
         this.button.on('pointermove', e => {
             this.capture(e)
         })
 
-        this.button.on('pointerout', e => {
+        this.button.on('pointerout', this.onEnd.bind(this))
-            this.capture(e)
+        this.button.on('pointercancel', this.onEnd.bind(this))
-            TweenLite.to([this.button, this.content], this.theme.fast, {alpha: 1, overwrite: 'none'})
+        this.button.on('pointerupoutside', this.onEnd.bind(this))
-        })
+        this.button.on('pointertap', this.onEnd.bind(this))
+        this.button.on('scroll', this.onEnd.bind(this))
 
+        // eslint-disable-next-line no-unused-vars
         this.button.on('pointerdown', e => {
             //this.capture(e)
-            TweenLite.to([this.button, this.content], this.theme.fast, {alpha: .7, overwrite: 'none'})
+            this.__start.x = e.data.global.x
+            this.__start.y = e.data.global.y
+            TweenLite.to([this.button, this.content], this.theme.fast, {
+                alpha: 0.7,
+                overwrite: 'none'
+            })
         })
 
         this.button.on('pointerup', e => {
             this.capture(e)
-            if (this.opts.beforeAction) {
-                this.opts.beforeAction.call(this, e, this)
-            }
 
-            if (this.opts.action) {
+            const distance = Points.distance(e.data.global, this.__start)
-                this.opts.action.call(this, e, this)
-            }
 
-            TweenLite.to([this.button, this.content], this.theme.fast, {alpha: .83, overwrite: 'none'})
+            if (distance &lt; 5) {
+                if (this.opts.beforeAction) {
+                    this.opts.beforeAction.call(this, e, this)
+                }
 
-            if (this.opts.type === 'checkbox') {
+                if (this.opts.action) {
-                this.active = !this.active
+                    this.opts.action.call(this, e, this)
-            }
+                }
 
-            if (this.opts.afterAction) {
+                TweenLite.to([this.button, this.content], this.theme.fast, {
-                this.opts.afterAction.call(this, e, this)
+                    alpha: 0.83,
+                    overwrite: 'none'
+                })
+
+                if (this.opts.type === 'checkbox') {
+                    this.active = !this.active
+                }
+
+                if (this.opts.afterAction) {
+                    this.opts.afterAction.call(this, e, this)
+                }
             }
         })
 
@@ -1716,15 +1757,18 @@ export default class Button extends PIXI.Container {
 
         // active
         //-----------------
-        this.active = this.opts.active      // calls .layout()
+        this.active = this.opts.active // calls .layout()
 
         // tooltip
         //-----------------
         if (this.opts.tooltip) {
             if (typeof this.opts.tooltip === 'string') {
-                this.tooltip = new Tooltip({object: this, content: this.opts.tooltip})
+                this.tooltip = new Tooltip({
+                    object: this,
+                    content: this.opts.tooltip
+                })
             } else {
-                this.opts.tooltip = Object.assign({}, {object: this}, this.opts.tooltip)
+                this.opts.tooltip = Object.assign({}, { object: this }, this.opts.tooltip)
                 this.tooltip = new Tooltip(this.opts.tooltip)
             }
         }
@@ -1732,47 +1776,28 @@ export default class Button extends PIXI.Container {
         // badge
         //-----------------
         if (this.opts.badge) {
-            let opts = Object.assign({}, {
+            let opts = Object.assign(
-                align: 'right',
+                {},
-                verticalAlign: 'top',
+                {
-                offsetLeft: 0,
+                    align: 'right',
-                offsetTop: 0
+                    verticalAlign: 'top',
-            })
+                    offsetLeft: 0,
+                    offsetTop: 0
+                }
+            )
             if (typeof this.opts.badge === 'string') {
-                opts = Object.assign(opts, {content: this.opts.badge})
+                opts = Object.assign(opts, { content: this.opts.badge })
             } else {
                 opts = Object.assign(opts, this.opts.badge)
             }
 
             const badge = new Badge(opts)
-
-            switch (opts.align) {
-                case 'left':
-                    badge.x = this.x - badge.width / 2 + opts.offsetLeft
-                    break
-                case 'center':
-                    badge.x = this.x + this.width / 2 - badge.width / 2 + opts.offsetLeft
-                    break
-                case 'right':
-                    badge.x = this.x + this.width - badge.width / 2 + opts.offsetLeft
-            }
-
-            switch (opts.verticalAlign) {
-                case 'top':
-                    badge.y = this.y - badge.height / 2 + opts.offsetTop
-                    break
-                case 'middle':
-                    badge.y = this.y + this.height / 2 - badge.height / 2 + opts.offsetTop
-                    break
-                case 'bottom':
-                    badge.y = this.y + this.height - badge.height / 2 + opts.offsetTop
-            }
-
             this.addChild(badge)
-
             this.badge = badge
         }
 
+        this.layout()
+
         // set position
         //-----------------
         this.position.set(this.opts.x, this.opts.y)
@@ -1786,7 +1811,6 @@ export default class Button extends PIXI.Container {
      * @return {Button} A reference to the button for chaining.
      */
     layout() {
-
         // Clear content
         //-----------------
         this.removeChild(this.content)
@@ -1858,6 +1882,39 @@ export default class Button extends PIXI.Container {
 
         this.icon = icon
 
+        // badge
+        //--------------------
+        if (this.badge) {
+            this.removeChild(this.badge)
+            const width = this._width
+            const height = this._height
+            this.addChild(this.badge)
+
+            const badge = this.badge
+
+            switch (badge.opts.align) {
+                case 'left':
+                    badge.x = -badge.width / 2 + badge.opts.offsetLeft
+                    break
+                case 'center':
+                    badge.x = width / 2 - badge.width / 2 + badge.opts.offsetLeft
+                    break
+                case 'right':
+                    badge.x = width - badge.width / 2 + badge.opts.offsetLeft
+            }
+
+            switch (badge.opts.verticalAlign) {
+                case 'top':
+                    badge.y = -badge.height / 2 + badge.opts.offsetTop
+                    break
+                case 'middle':
+                    badge.y = height / 2 - badge.height / 2 + badge.opts.offsetTop
+                    break
+                case 'bottom':
+                    badge.y = height - badge.height / 2 + badge.opts.offsetTop
+            }
+        }
+
         // draw
         //-----------------
         this.draw()
@@ -1872,7 +1929,6 @@ export default class Button extends PIXI.Container {
      * @return {Button} A reference to the button for chaining.
      */
     layoutInnerContent() {
-
         for (let child of this.content.children) {
             switch (this.opts.verticalAlign) {
                 case 'top':
@@ -1898,13 +1954,12 @@ export default class Button extends PIXI.Container {
      * @return {Button} A reference to the button for chaining.
      */
     layoutContent() {
-
         switch (this.opts.align) {
             case 'left':
                 this.content.x = this.opts.padding
                 break
             case 'center':
-                this.content.x = ((this._width - this.content.width) / 2)
+                this.content.x = (this._width - this.content.width) / 2
                 break
             case 'right':
                 this.content.x = this._width - this.opts.padding - this.content.width
@@ -1933,7 +1988,6 @@ export default class Button extends PIXI.Container {
      * @return {Button} A reference to the button for chaining.
      */
     draw() {
-
         this.button.clear()
         if (this.active) {
             this.button.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha)
@@ -1957,16 +2011,17 @@ export default class Button extends PIXI.Container {
         return this._active
     }
     set active(value) {
-
         this._active = value
 
         if (this._active) {
             if (this.text) {
                 this.text.style = this.opts.textStyleActive
+                this.text.alpha = this.opts.textActiveAlpha
             }
         } else {
             if (this.text) {
                 this.text.style = this.opts.textStyle
+                this.text.alpha = this.opts.textAlpha
             }
         }
 
@@ -1982,18 +2037,17 @@ export default class Button extends PIXI.Container {
         return this._disabled
     }
     set disabled(value) {
-
         this._disabled = value
 
         if (this._disabled) {
             this.button.interactive = false
             this.button.buttonMode = false
-            this.button.alpha = .5
+            this.button.alpha = 0.5
             if (this.icon) {
-                this.icon.alpha = .5
+                this.icon.alpha = 0.5
             }
             if (this.text) {
-                this.text.alpha = .5
+                this.text.alpha = 0.5
             }
         } else {
             this.button.interactive = true
@@ -2014,7 +2068,6 @@ export default class Button extends PIXI.Container {
      * @return {Button} A reference to the button for chaining.
      */
     show() {
-
         this.opts.strokeAlpha = 1
         this.opts.strokeActiveAlpha = 1
         this.opts.fillAlpha = 1
@@ -2031,11 +2084,10 @@ export default class Button extends PIXI.Container {
      * @return {Button} A reference to the button for chaining.
      */
     hide() {
-
+        this.opts.strokeAlpha = 0.0
-        this.opts.strokeAlpha = 0
+        this.opts.strokeActiveAlpha = 0.0
-        this.opts.strokeActiveAlpha = 0
+        this.opts.fillAlpha = 0.0000000001 // WORKAROUND: See https://github.com/pixijs/pixi.js/wiki/v5-Migration-Guide#graphics-interaction
-        this.opts.fillAlpha = 0
+        this.opts.fillActiveAlpha = 0.0000000001
-        this.opts.fillActiveAlpha = 0
 
         this.layout()
 
@@ -2051,7 +2103,6 @@ export default class Button extends PIXI.Container {
      * @return {PIXI.DisplayObject} Return the icon as an PIXI.DisplayObject.
      */
     loadIcon(icon, color) {
-
         let displayObject = null
 
         if (icon instanceof PIXI.DisplayObject) {
@@ -2061,11 +2112,11 @@ export default class Button extends PIXI.Container {
             if (this.text) {
                 size = this.text.height
             } else if (this.opts.minHeight) {
-                size = this.opts.minHeight - (2 * this.opts.padding)
+                size = this.opts.minHeight - 2 * this.opts.padding
             }
 
             const url = Button.iconIsUrl(icon) ? icon : `../../assets/icons/${icon}.png`
-            const iconTexture = PIXI.Texture.fromImage(url, true)
+            const iconTexture = PIXI.Texture.from(url)
 
             const sprite = new PIXI.Sprite(iconTexture)
             sprite.tint = color
@@ -2104,6 +2155,14 @@ export default class Button extends PIXI.Container {
             this.icon.tint = value
         }
     }
+
+    onEnd(event) {
+        this.capture(event)
+        TweenLite.to([this.button, this.content], this.theme.fast, {
+            alpha: 1,
+            overwrite: 'none'
+        })
+    }
 }
 </code></pre>
         </article>
@@ -2118,7 +2177,7 @@ export default class Button extends PIXI.Container {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_buttongroup.js.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1438,8 +1444,11 @@
             </div>
         </header>
         <article>
-            <pre id="source-code" class="prettyprint source linenums"><code>import Theme from './theme.js'
+            <pre id="source-code" class="prettyprint source linenums"><code>/* globals ThrowPropsPlugin, Strong */
+
+import Theme from './theme.js'
 import Button from './button.js'
+import Events from '../events.js'
 
 /**
  * Class that represents a PixiJS ButtonGroup.
@@ -1463,8 +1472,7 @@ import Button from './button.js'
  * @see {@link http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics}
  * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/buttongroup.html|DocTest}
  */
-export default class ButtonGroup extends PIXI.Graphics {
+export default class ButtonGroup extends PIXI.Container {
-
     /**
      * Creates an instance of a ButtonGroup.
      *
@@ -1480,6 +1488,10 @@ export default class ButtonGroup extends PIXI.Graphics {
      *     or a Theme object.
      * @param {number} [opts.minWidth=44] - Button: The minimum width of one button.
      * @param {number} [opts.minHeight=44] - Button: The minimum height of one button.
+     * @param {number} [opts.maxWidth] - The maximum width of the button group. If the buttons are wider than the maximum width, the buttons get stacked. Note: The buttons can only be stacked if margin is not zero. Note 2: Load the Greensock ThrowPropsPlugin for smoother animations.
+     * @param {number} [opts.maxHeight] - The maximum height of the button group. If the buttons are higher than the maximum height, the buttons get stacked. Note: The buttons can only be stacked if margin is not zero. Note 2: Load the Greensock ThrowPropsPlugin for smoother animations.
+     * @param {number} [opts.stackPadding=10] - The padding for stacked buttons.
+     * @param {PIXI.Application} [opts.app=window.app] - The PixiJS Application. Must be set if you want to use the mousewheel to scroll your button group. Only used when the buttons are stacked (with maxWidth or maxHeight).
      * @param {number} [opts.padding=Theme.padding] - Button: The inner spacing (distance from icon and/or label) the the border.
      * @param {number} [opts.margin=Theme.margin] - The outer spacing (distance from one button to the previous/next button).
      * @param {string} [opts.iconPosition=left] - Button: The position of the icon in relation to the label. Can be left or right.
@@ -1499,6 +1511,8 @@ export default class ButtonGroup extends PIXI.Graphics {
      *     for possible options.
      * @param {number} [opts.textStyleActive=Theme.textStyleActive] - Button: A textstyle object for the styling of the label when the
      *     button is activated. See PIXI.TextStyle for possible options.
+     * @param {number} [opts.textAlpha=Theme.textAlpha] - Button: The alpha value of the text.
+     * @param {number} [opts.textActiveAlpha=Theme.textActiveAlpha] - Button: The alpha value of the text when activated.
      * @param {string} [opts.style=default] - A shortcut for styling options. Possible values are default, link.
      * @param {number} [opts.radius=Theme.radius] - Button: The radius of the four corners of the button (which is a rounded rectangle).
      * @param {boolean} [opts.disabled=false] - Is the button group disabled? When disabled, the button group has a lower alpha value
@@ -1514,49 +1528,62 @@ export default class ButtonGroup extends PIXI.Graphics {
      * @param {boolean} [opts.visible=true] - Is the button group initially visible (property visible)?
      */
     constructor(opts = {}) {
-
         super()
 
         const theme = Theme.fromString(opts.theme)
         this.theme = theme
 
-        this.opts = Object.assign({}, {
+        this.opts = Object.assign(
-            id: PIXI.utils.uid(),
+            {},
-            x: 0,
+            {
-            y: 0,
+                id: PIXI.utils.uid(),
-            buttons: [],
+                x: 0,
-            minWidth: 44,
+                y: 0,
-            minHeight: 44,
+                buttons: [],
-            padding: theme.padding,
+                minWidth: 44,
-            margin: theme.margin,
+                minHeight: 44,
-            iconPosition: 'left',             // left, right
+                maxWidth: null,
-            iconColor: theme.iconColor,
+                maxHeight: null,
-            iconColorActive: theme.iconColorActive,
+                stackPadding: 10,
-            fill: theme.fill,
+                app: window.app,
-            fillAlpha: theme.fillAlpha,
+                padding: theme.padding,
-            fillActive: theme.fillActive,
+                margin: theme.margin,
-            fillActiveAlpha: theme.fillActiveAlpha,
+                iconPosition: 'left', // left, right
-            stroke: theme.stroke,
+                iconColor: theme.iconColor,
-            strokeWidth: theme.strokeWidth,
+                iconColorActive: theme.iconColorActive,
-            strokeAlpha: theme.strokeAlpha,
+                fill: theme.fill,
-            strokeActive: theme.strokeActive,
+                fillAlpha: theme.fillAlpha,
-            strokeActiveWidth: theme.strokeActiveWidth,
+                fillActive: theme.fillActive,
-            strokeActiveAlpha: theme.strokeActiveAlpha,
+                fillActiveAlpha: theme.fillActiveAlpha,
-            textStyle: theme.textStyle,
+                stroke: theme.stroke,
-            textStyleActive: theme.textStyleActive,
+                strokeWidth: theme.strokeWidth,
-            style: 'default',
+                strokeAlpha: theme.strokeAlpha,
-            radius: theme.radius,
+                strokeActive: theme.strokeActive,
-            disabled: null,
+                strokeActiveWidth: theme.strokeActiveWidth,
-            type: 'default',                   // default, checkbox, radio
+                strokeActiveAlpha: theme.strokeActiveAlpha,
-            orientation: 'horizontal',
+                textStyle: {},
-            align: 'center',                   // left, center, right
+                textStyleActive: {},
-            verticalAlign: 'middle',           // top, middle, bottom
+                textAlpha: theme.textAlpha,
-            visible: true
+                textActiveAlpha: theme.textActiveAlpha,
-        }, opts)
+                style: 'default',
+                radius: theme.radius,
+                disabled: null,
+                type: 'default', // default, checkbox, radio
+                orientation: 'horizontal',
+                align: 'center', // left, center, right
+                verticalAlign: 'middle', // top, middle, bottom
+                visible: true
+            },
+            opts
+        )
+
+        this.opts.textStyle = Object.assign({}, theme.textStyle, this.opts.textStyle)
+        this.opts.textStyleActive = Object.assign({}, theme.textStyleActive, this.opts.textStyleActive)
 
         this.buttons = []
 
         this._disabled = null
+        this.__dragging = false
 
         this.visible = this.opts.visible
 
@@ -1576,13 +1603,18 @@ export default class ButtonGroup extends PIXI.Graphics {
      * @return {ButtonGroup} A reference to the button group for chaining.
      */
     setup() {
+        // inner container
+        //--------------------
+        const container = new PIXI.Graphics()
+        this.addChild(container)
+        this.container = container
 
         // Buttons
         //-----------------
         let position = 0
+        let index = 0
 
         for (let it of this.opts.buttons) {
-
             delete it.x
             delete it.y
 
@@ -1611,6 +1643,8 @@ export default class ButtonGroup extends PIXI.Graphics {
             it.strokeActiveAlpha = it.strokeActiveAlpha != null ? it.strokeActiveAlpha : this.opts.strokeActiveAlpha
             it.textStyle = it.textStyle || this.opts.textStyle
             it.textStyleActive = it.textStyleActive || this.opts.textStyleActive
+            it.textAlpha = it.textAlpha != null ? it.textAlpha : this.opts.textAlpha
+            it.textActiveAlpha = it.textActiveAlpha != null ? it.textActiveAlpha : this.opts.textActiveAlpha
             it.style = it.style || this.opts.style
             it.radius = it.radius != null ? it.radius : this.opts.radius
             if (!it.type) {
@@ -1642,18 +1676,26 @@ export default class ButtonGroup extends PIXI.Graphics {
 
             if (it.tooltip) {
                 if (typeof it.tooltip === 'string') {
-                    it.tooltip = {content: it.tooltip, container: this}
+                    it.tooltip = { content: it.tooltip, container: this }
                 } else {
-                    it.tooltip = Object.assign({}, {container: this}, it.tooltip)
+                    it.tooltip = Object.assign({}, { container: this }, it.tooltip)
                 }
             }
 
             let button = new Button(it)
 
-            this.addChild(button)
+            this.container.addChild(button)
             this.buttons.push(button)
 
+            button.__originalPosition = {
+                x: button.x,
+                y: button.y
+            }
+
             position += (this.opts.orientation === 'horizontal' ? button.width : button.height) + this.opts.margin
+
+            button.__initIndex = index
+            index++
         }
 
         if (this.opts.orientation === 'vertical') {
@@ -1671,6 +1713,43 @@ export default class ButtonGroup extends PIXI.Graphics {
             this.disabled = this.opts.disabled
         }
 
+        // interaction
+        //--------------------
+        if (this.opts.margin > 0 &amp;&amp; (this.opts.maxWidth || this.opts.maxHeight)) {
+            this.interactive = true
+            this.on('pointerdown', this.onStart.bind(this))
+            this.on('pointermove', this.onMove.bind(this))
+            this.on('pointerup', this.onEnd.bind(this))
+            this.on('pointercancel', this.onEnd.bind(this))
+            this.on('pointerout', this.onEnd.bind(this))
+            this.on('pointerupoutside', this.onEnd.bind(this))
+            this.on('scroll', this.onScroll.bind(this))
+
+            // mousewheel
+            //--------------------
+            if (this.opts.app) {
+                const app = this.opts.app
+                app.view.addEventListener('mousewheel', event => {
+                    const bounds = this.getBounds()
+                    const x = event.clientX - app.view.getBoundingClientRect().left
+                    const y = event.clientY - app.view.getBoundingClientRect().top
+                    if (bounds.contains(x, y)) {
+                        event.preventDefault()
+                        this.emit('scroll', event)
+                    }
+                })
+            }
+
+            const background = new PIXI.Graphics()
+            background.beginFill(0x000000, 0)
+            background.drawRect(0, 0, this.width, this.height)
+            background.endFill()
+            this.addChildAt(background, 0)
+
+            this.__initWidth = this.container.width
+            this.__initHeight = this.container.height
+        }
+
         return this
     }
 
@@ -1680,7 +1759,6 @@ export default class ButtonGroup extends PIXI.Graphics {
      * @return {ButtonGroup} A reference to the button group for chaining.
      */
     layout() {
-        
         // set position
         //-----------------
         this.position.set(this.opts.x, this.opts.y)
@@ -1689,6 +1767,12 @@ export default class ButtonGroup extends PIXI.Graphics {
         //-----------------
         this.draw()
 
+        // stack
+        //-----------------
+        if (this.opts.margin > 0 &amp;&amp; (this.opts.maxWidth || this.opts.maxHeight)) {
+            this.stack()
+        }
+
         return this
     }
 
@@ -1699,33 +1783,30 @@ export default class ButtonGroup extends PIXI.Graphics {
      * @return {ButtonGroup} A reference to the button group for chaining.
      */
     draw() {
-
         if (this.opts.margin === 0) {
-
             this.buttons.forEach(it => it.hide())
 
-            this.clear()
+            this.container.clear()
-            this.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
+            this.container.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
-            this.beginFill(this.opts.fill, this.opts.fillAlpha)
+            this.container.beginFill(this.opts.fill, this.opts.fillAlpha)
-            this.drawRoundedRect(0, 0, this.width, this.height, this.opts.radius)
+            this.container.drawRoundedRect(0, 0, this.width, this.height, this.opts.radius)
 
             // Draw borders
-            this.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha / 2)
+            this.container.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha / 2)
 
             this.buttons.forEach((it, i) => {
                 if (i > 0) {
-                    this.moveTo(it.x, it.y)
+                    this.container.moveTo(it.x, it.y)
 
                     if (this.opts.orientation === 'horizontal') {
-                        this.lineTo(it.x, it.height)
+                        this.container.lineTo(it.x, it.height)
                     } else {
-                        this.lineTo(it.width, it.y)
+                        this.container.lineTo(it.width, it.y)
                     }
-                    
                 }
             })
 
-            this.endFill()
+            this.container.endFill()
         }
 
         return this
@@ -1741,10 +1822,37 @@ export default class ButtonGroup extends PIXI.Graphics {
     }
 
     set disabled(value) {
-
         this._disabled = value
 
-        this.buttons.forEach(it => it.disabled = value)
+        this.buttons.forEach(it => (it.disabled = value))
+    }
+
+    /**
+     * Gets or sets the maximum width of the button group for stacking. Usefull when you want to resize the available space.
+     *
+     * @member {number}
+     */
+    get maxWidth() {
+        return this.opts.maxWidth
+    }
+
+    set maxWidth(value) {
+        this.opts.maxWidth = value
+        this.layout()
+    }
+
+    /**
+     * Gets or sets the maximum height of the button group for stacking. Usefull when you want to resize the available space.
+     *
+     * @member {number}
+     */
+    get maxHeight() {
+        return this.opts.maxHeight
+    }
+
+    set maxHeight(value) {
+        this.opts.maxHeight = value
+        this.layout()
     }
 
     /**
@@ -1754,7 +1862,6 @@ export default class ButtonGroup extends PIXI.Graphics {
      * @return {number} The maximum with of a button of the button group.
      */
     getMaxButtonWidth() {
-
         let widths = this.buttons.map(it => it.width)
 
         return Math.max(...widths)
@@ -1766,7 +1873,6 @@ export default class ButtonGroup extends PIXI.Graphics {
      * @return {ButtonGroup} A reference to the button group for chaining.
      */
     show() {
-
         this.alpha = 1
 
         return this
@@ -1778,11 +1884,288 @@ export default class ButtonGroup extends PIXI.Graphics {
      * @return {ButtonGroup} A reference to the button group for chaining.
      */
     hide() {
-
         this.alpha = 0
 
         return this
     }
+
+    /**
+     *
+     * @private
+     * @param {*} event
+     */
+    onStart(event) {
+        if (
+            (this.opts.maxWidth != null &amp;&amp; this.__initWidth > this.opts.maxWidth) ||
+            (this.opts.maxHeight != null &amp;&amp; this.__initHeight > this.opts.maxHeight)
+        ) {
+            this.__dragging = true
+
+            this.capture(event)
+
+            this.__delta = {
+                x: this.container.position.x - event.data.global.x,
+                y: this.container.position.y - event.data.global.y
+            }
+
+            TweenLite.killTweensOf(this.container.position, { x: true, y: true })
+            if (typeof ThrowPropsPlugin != 'undefined') {
+                ThrowPropsPlugin.track(this.container.position, 'x,y')
+            }
+        }
+    }
+
+    /**
+     *
+     * @private
+     * @param {*} event
+     */
+    onMove(event) {
+        if (this.__dragging) {
+            this.capture(event)
+            if (this.opts.orientation === 'horizontal') {
+                this.container.position.x = event.data.global.x + this.__delta.x
+            } else {
+                this.container.position.y = event.data.global.y + this.__delta.y
+            }
+
+            this.stack()
+        }
+    }
+
+    /**
+     *
+     * @private
+     * @param {*} event
+     */
+    onEnd(event) {
+        if (this.__dragging) {
+            this.__dragging = false
+
+            this.capture(event)
+
+            const throwProps = { x: { velocity: 'auto' }, y: { velocity: 'auto' } }
+
+            if (this.opts.orientation === 'horizontal') {
+                if (this.__initWidth > this.opts.maxWidth) {
+                    // stack!
+                    const distanceToLeft = this.container.x
+                    const distanceToRight = this.opts.maxWidth - this.container.x - this.__initWidth
+
+                    if (distanceToLeft > 0) {
+                        throwProps.x.end = 0
+                    } else if (distanceToRight > 0) {
+                        throwProps.x.end = this.opts.maxWidth - this.__initWidth
+                    }
+                } else {
+                    // just magnetize
+                    throwProps.x.end = 0
+                }
+            } else {
+                if (this.__initHeight > this.opts.maxHeight) {
+                    // stack!
+                    const distanceToTop = this.container.y
+                    const distanceToBottom = this.opts.maxHeight - this.container.y - this.__initHeight
+
+                    if (distanceToTop > 0) {
+                        throwProps.y.end = 0
+                    } else if (distanceToBottom > 0) {
+                        throwProps.y.end = this.opts.maxHeight - this.__initHeight
+                    }
+                } else {
+                    // just magnetize
+                    throwProps.y.end = 0
+                }
+            }
+
+            if (typeof ThrowPropsPlugin != 'undefined') {
+                ThrowPropsPlugin.to(
+                    this.container.position,
+                    {
+                        throwProps,
+                        ease: Strong.easeOut,
+                        onUpdate: () => this.stack(),
+                        onComplete: () => ThrowPropsPlugin.untrack(this.container.position)
+                    },
+                    0.8,
+                    0.4
+                )
+            } else {
+                if (this.opts.orientation === 'horizontal' &amp;&amp; throwProps.x.end != null) {
+                    TweenMax.to(this.container.position, 0.3, { x: throwProps.x.end, onUpdate: this.stack.bind(this) })
+                } else if (this.opts.orientation === 'vertical' &amp;&amp; throwProps.y.end != null) {
+                    TweenMax.to(this.container.position, 0.3, { y: throwProps.y.end, onUpdate: this.stack.bind(this) })
+                }
+            }
+        }
+    }
+
+    /**
+     *
+     * @private
+     * @param {*} event
+     */
+    onScroll(event) {
+        if (
+            (this.opts.maxWidth != null &amp;&amp; this.__initWidth > this.opts.maxWidth) ||
+            (this.opts.maxHeight != null &amp;&amp; this.__initHeight > this.opts.maxHeight)
+        ) {
+            this.capture(event)
+
+            if (this.opts.orientation === 'horizontal') {
+                this.container.position.x -= event.deltaX
+                if (this.container.position.x > 0) {
+                    this.container.position.x = 0
+                } else if (this.container.position.x + this.__initWidth &lt; this.opts.maxWidth) {
+                    this.container.position.x = this.opts.maxWidth - this.__initWidth
+                }
+            } else {
+                this.container.position.y -= event.deltaY
+                if (this.container.position.y > 0) {
+                    this.container.position.y = 0
+                } else if (this.container.position.y + this.container.height &lt; this.opts.maxHeight) {
+                    this.container.position.y = this.opts.maxHeight - this.container.height
+                }
+            }
+
+            this.stack()
+        }
+    }
+
+    /**
+     * Captures an event to inform InteractionMapper about processed events.
+     *
+     * @param {event|PIXI.InteractionEvent} event - The PIXI event to capture.
+     */
+    capture(event) {
+        const originalEvent = event.data &amp;&amp; event.data.originalEvent ? event.data.originalEvent : event
+        Events.capturedBy(originalEvent, this)
+    }
+
+    /**
+     * @private
+     */
+    stack() {
+        if (this.opts.maxWidth) {
+            this._stackHorizontal()
+        } else if (this.opts.maxHeight) {
+            this._stackVertical()
+        }
+    }
+
+    /**
+     * @private
+     */
+    _stackHorizontal() {
+        const sorted = []
+
+        let reverseCounter = this.buttons.length - 1
+
+        this.buttons.forEach((it, index) => {
+            const leftCorner = it.__originalPosition.x + this.container.x
+            const rightCorner = it.__originalPosition.x + it.button.width
+            const paddingLeft = index * this.opts.stackPadding
+            const paddingRight = reverseCounter * this.opts.stackPadding
+            if (leftCorner &lt; paddingLeft) {
+                // left border
+                it.x = -this.container.x + paddingLeft
+            } else if (rightCorner > -this.container.x + this.opts.maxWidth - paddingRight) {
+                // right border
+                it.x = -this.container.x + this.opts.maxWidth - it.button.width - paddingRight
+            } else {
+                it.x = it.__originalPosition.x
+            }
+
+            reverseCounter--
+
+            sorted.push(it)
+        })
+
+        const min = Math.min(...sorted.map(it => it.x))
+        const max = Math.max(...sorted.map(it => it.x + it.button.width))
+        const center = (min + max) / 2
+
+        // z-index
+        sorted
+            .sort((a, b) => {
+                const centerA = a.x + a.button.width / 2
+                const centerB = b.x + b.button.width / 2
+
+                if (centerA &lt; center &amp;&amp; centerB &lt; center) {
+                    if (a.x &lt; b.x) {
+                        return -1
+                    } else if (b.x &lt; a.x) {
+                        return 1
+                    }
+                } else if (centerA > center &amp;&amp; centerB > center) {
+                    if (a.x + a.button.width > b.x + b.button.width) {
+                        return -1
+                    } else if (b.x + b.button.width &lt; a.x + a.button.x) {
+                        return 1
+                    }
+                }
+
+                return 0
+            })
+            .forEach(it => it.parent.addChild(it))
+    }
+
+    /**
+     * @private
+     */
+    _stackVertical() {
+        const sorted = []
+
+        let reverseCounter = this.buttons.length - 1
+
+        this.buttons.forEach((it, index) => {
+            const topCorner = it.__originalPosition.y + this.container.y
+            const bottomCorner = it.__originalPosition.y + it.button.height
+            const paddingTop = index * this.opts.stackPadding
+            const paddingBottom = reverseCounter * this.opts.stackPadding
+            if (topCorner &lt; paddingTop) {
+                // top border
+                it.y = -this.container.y + paddingTop
+            } else if (bottomCorner > -this.container.y + this.opts.maxHeight - paddingBottom) {
+                // bottom border
+                it.y = -this.container.y + this.opts.maxHeight - it.button.height - paddingBottom
+            } else {
+                it.y = it.__originalPosition.y
+            }
+
+            reverseCounter--
+
+            sorted.push(it)
+        })
+
+        const min = Math.min(...sorted.map(it => it.y))
+        const max = Math.max(...sorted.map(it => it.y + it.button.height))
+        const center = (min + max) / 2
+
+        // z-index
+        sorted
+            .sort((a, b) => {
+                const centerA = a.y + a.button.height / 2
+                const centerB = b.y + b.button.height / 2
+
+                if (centerA &lt; center &amp;&amp; centerB &lt; center) {
+                    if (a.y &lt; b.y) {
+                        return -1
+                    } else if (b.y &lt; a.y) {
+                        return 1
+                    }
+                } else if (centerA > center &amp;&amp; centerB > center) {
+                    if (a.y + a.button.height > b.y + b.button.height) {
+                        return -1
+                    } else if (b.y + b.button.height &lt; a.y + a.button.y) {
+                        return 1
+                    }
+                }
+
+                return 0
+            })
+            .forEach(it => it.parent.addChild(it))
+    }
 }
 </code></pre>
         </article>
@@ -1797,7 +2180,7 @@ export default class ButtonGroup extends PIXI.Graphics {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_deepzoom_image.js.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1440,26 +1446,13 @@
         <article>
             <pre id="source-code" class="prettyprint source linenums"><code>import { Capabilities } from '../../capabilities.js'
 import { Points } from '../../utils.js'
-import { deepZoomTileCache } from './tile.js'
+import Tile from './tile.js'
 import { Tiles } from './tiles.js'
 
 function isEven(n) {
     return n % 2 == 0
 }
 
-
-function printTileCacheInfos() {
-    let references = new Map()
-    let multiples = 0
-    for (let [url, tiles] of deepZoomTileCache.entries()) {
-        let count = tiles.size
-        references.set(url, count)
-        if (count > 1) {
-            multiples += 1
-        }
-    }
-    console.log({ multiples, references })
-}
 /**
  * A utility class that holds information typically provided by DZI files, i.e.
  * height and width of the overall image, overlap, and image type.
@@ -1493,15 +1486,14 @@ export class DeepZoomInfo {
         // number in the file system for the folder with tiles
         this.clip = this.clip || null // e.g. { level: 12, col: 301436, row: 354060 }
         this.type = this.type || 'dzi'
-        this.urlTileTemplate =
+        this.urlTileTemplate = this.urlTileTemplate || '{path}/{level}/{column}_{row}.{format}'
-            this.urlTileTemplate || '{path}/{level}/{column}_{row}.{format}'
         this.setupDimensions()
     }
 
     /* Computes the needed number of layers from the width and height
-    *  of the image. Note that this includes the level 0, i.e. 0 ... 4
+     *  of the image. Note that this includes the level 0, i.e. 0 ... 4
-    * means that 5 levels exist.
+     * means that 5 levels exist.
-    **/
+     **/
     numLevels() {
         let maxDimension = Math.max(this.width, this.height)
         let boundary = this.type === 'dzi' ? 1 : this.tileSize
@@ -1684,15 +1676,7 @@ export class DeepZoomInfo {
     test() {
         //console.log("w=" + this.width + " h=" + this.height + " maxlevel=" + this.maxLevel + " base=" + this.baseLevel)
         for (let i = 0; i &lt;= this.maxLevel; i++) {
-            console.log(
+            console.log(' ' + i + ' -> ' + this.getScale(i) + ' [' + this.dimensions(i) + ']')
-                ' ' +
-                i +
-                ' -> ' +
-                this.getScale(i) +
-                ' [' +
-                this.dimensions(i) +
-                ']'
-            )
         }
         console.log(this.urlForTile(this.baseLevel, 0, 0))
     }
@@ -1732,12 +1716,7 @@ class TileQuadNode {
     **/
     noQuads() {
         if (this.previous === null) return false
-        return (
+        return this.nw === null &amp;&amp; this.ne === null &amp;&amp; this.sw === null &amp;&amp; this.se === null
-            this.nw === null &amp;&amp;
-            this.ne === null &amp;&amp;
-            this.sw === null &amp;&amp;
-            this.se === null
-        )
     }
 
     /** Unlink the given quad node
@@ -1776,7 +1755,6 @@ class TileQuadNode {
     }
 }
 
-
 /**
  * The main class of a deeply zoomable image that is represented by a hierarchy
  * of tile layers for each zoom level. This gives the user the impression that
@@ -1794,10 +1772,10 @@ export class DeepZoomImage extends PIXI.Container {
             debug = false,
             shadow = false,
             center = false,
-            world = null,               // Defines the world bounds the images lives in
+            world = null, // Defines the world bounds the images lives in
             highResolution = true,
             autoLoadTiles = true,
-            preferWorker = false,
+            useWorker = '',
             minimumLevel = 0,
             alpha = 1,
             app = window.app
@@ -1808,12 +1786,11 @@ export class DeepZoomImage extends PIXI.Container {
         this.debug = debug
         this.shadow = shadow
         this.world = world
-        this.preferWorker = preferWorker
+        this.useWorker = useWorker
-        this.resolution = highResolution
+        this.resolution = highResolution ? Math.round(window.devicePixelRatio) : 1
-            ? Math.round(window.devicePixelRatio)
-            : 1
         this.alpha = alpha
         this.fastLoads = 0
+        this.active = true
         this.autoLoadTiles = autoLoadTiles
         this.minimumLevel = minimumLevel
         this.quadTrees = new Map() // url as keys, TileQuadNodes as values
@@ -1849,22 +1826,22 @@ export class DeepZoomImage extends PIXI.Container {
 
         let [w, h] = this.baseSize
         if (this.shadow) {
-            this.filters = [new PIXI.filters.DropShadowFilter(45, 3)]
+            this.filters = [new PIXI.filters.DropShadowFilter({ rotation: 45, distance: 3 })]
         }
         this.addChild(this.tileContainer)
 
         if (deepZoomInfo.clip) {
             let mask = new PIXI.Graphics()
-            mask.beginFill(1, 1)
+            mask.alpha = 0.0000001
+            mask.beginFill(0xff0000, 1)
             mask.drawRect(0, 0, w, h)
             mask.endFill()
             this.mask = mask
-            mask.alpha = 0
             this.addChild(mask)
             this.minimumLevel = deepZoomInfo.baseLevel
         }
         this.currentLevel = Math.max(this.minimumLevel, deepZoomInfo.baseLevel)
-        console.log("autoLoadTiles", this.autoLoadTiles)
+        //console.log("autoLoadTiles", this.autoLoadTiles)
         if (this.autoLoadTiles) {
             this.setupTiles(center)
         }
@@ -2000,7 +1977,7 @@ export class DeepZoomImage extends PIXI.Container {
      **/
     get maxScale() {
         let delta = this.info.maxLevel - this.info.baseLevel
-        return Math.pow(2, delta) / this.resolution * 2
+        return (Math.pow(2, delta) / this.resolution) * 2
     }
 
     /** Getter for the current width.
@@ -2015,7 +1992,6 @@ export class DeepZoomImage extends PIXI.Container {
         return this.pixelSize[1]
     }
 
-
     /* Overrides PIXI.Container.hitArea()
      * Allows to optimize the hit testing. Container with hit areas are directly
      * hit tested without consideration of children.
@@ -2065,7 +2041,7 @@ export class DeepZoomImage extends PIXI.Container {
      * @return {Sprite} sprite - A sprite with a single tile texture
      */
     thumbnail() {
-        return new PIXI.Sprite.fromImage(this.info.baseURL)
+        return new PIXI.Sprite.from(this.info.baseURL)
     }
 
     /** Returns a list of all tiles of a given level.
@@ -2085,9 +2061,9 @@ export class DeepZoomImage extends PIXI.Container {
     }
 
     worldBounds() {
-        let viewBounds = this.app.scene.bounds
+        let viewBounds = this.app.scene.bounds || this.app.scene.getBounds()
         // Using getBounds extends visible scope after loading tiles and leads
-        // to excessive loading
+        // to excessive loading. So we prefer bounds over getBounds()
         if (this.world != null) {
             let bounds = this.world.bounds
             let x = Math.max(-bounds.width, bounds.x)
@@ -2123,11 +2099,7 @@ export class DeepZoomImage extends PIXI.Container {
         let topLeft = tiles.toLocal(worldTopLeft)
         let bottomRight = tiles.toLocal(worldBottomRight)
         tiles._centerPoint = tilesCenter
-        let bounds = new PIXI.Rectangle(
+        let bounds = new PIXI.Rectangle(topLeft.x, topLeft.y, bottomRight.x - topLeft.x, bottomRight.y - topLeft.y)
-            topLeft.x,
-            topLeft.y,
-            bottomRight.x - topLeft.x,
-            bottomRight.y - topLeft.y)
 
         tiles._boundsRect = bounds
 
@@ -2172,9 +2144,6 @@ export class DeepZoomImage extends PIXI.Container {
         return { centerCol, centerRow, needed }
     }
 
-
-
-
     /** Returns all changed tiles for a given level.
      * @param {Tiles} tiles - the grid of tiles
      * @param {number} level - The zoom level of the grid
@@ -2227,8 +2196,7 @@ export class DeepZoomImage extends PIXI.Container {
      * @param {PIXI.Point} about - point of interaction
      */
     populateTiles(tiles, level, { onlyone = false, about = null } = {}) {
-        if (tiles.isComplete())
+        if (tiles.isComplete()) return
-            return
         let referenceCol = -1
         let referenceRow = -1
         let { centerCol, centerRow, changed } = this.changedTiles(tiles, level)
@@ -2239,8 +2207,7 @@ export class DeepZoomImage extends PIXI.Container {
             let scaledTileSize = tiles.tileSize * tiles.tileScale
             referenceCol = Math.floor(refPoint.x / scaledTileSize)
             referenceRow = Math.floor(refPoint.y / scaledTileSize)
-        }
+        } else {
-        else {
             referenceCol = centerCol
             referenceRow = centerRow
         }
@@ -2278,17 +2245,7 @@ export class DeepZoomImage extends PIXI.Container {
         let [cols, rows, w, h] = this.info.dimensions(level)
         let increasedLevels = level - this.info.baseLevel
         let invScale = Math.pow(0.5, increasedLevels)
-        let tiles = new Tiles(
+        let tiles = new Tiles(level, this, invScale, cols, rows, w, h, this.info.tileSize, this.info.overlap)
-            level,
-            this,
-            invScale,
-            cols,
-            rows,
-            w,
-            h,
-            this.info.tileSize,
-            this.info.overlap
-        )
         this.addTiles(key, tiles)
         if (this.info.clip) {
             let rest = this.info.rests[level]
@@ -2391,7 +2348,6 @@ export class DeepZoomImage extends PIXI.Container {
         })
     }
 
-
     /**
      * Destroy tiles in all layers that are no longer needed
      *
@@ -2436,8 +2392,8 @@ export class DeepZoomImage extends PIXI.Container {
     }
 
     /* Tint all tiles
-    * @param {number} level - The zoom level of the grid
+     * @param {number} level - The zoom level of the grid
-    */
+     */
     tintTilesBelowLevel(level) {
         Object.keys(this.tileLayers).forEach(key => {
             let tiles = this.tileLayers[key]
@@ -2467,6 +2423,9 @@ export class DeepZoomImage extends PIXI.Container {
      * @param {boolean} debug - log debug infos
      */
     transformed(event) {
+        if (!this.active) {
+            return
+        }
         let key = this.currentLevel.toString()
         let currentTiles = this.tileLayers[key]
         if (typeof currentTiles == 'undefined') {
@@ -2480,8 +2439,7 @@ export class DeepZoomImage extends PIXI.Container {
             })
             if (this.fastLoads == 3) {
                 this.fastLoads = 0
-            }
+            } else {
-            else {
                 return
             }
         }
@@ -2509,51 +2467,36 @@ export class DeepZoomImage extends PIXI.Container {
     }
 
     /**
-   *Activates the textures on the DeepZoomImage.
+     *Activates the textures on the DeepZoomImage.
-   *
+     *
-   * @memberof DeepZoomImage
+     * @memberof DeepZoomImage
-   */
+     */
     activate() {
+        this.active = true
         this.destroyTilesAboveLevel(this.currentLevel)
         this.ensureTiles(this.currentLevel, null)
         //console.log("Activate Textures!", this.currentLevel)
     }
 
     /**
-   *Dectivates the textures on the DeepZoomImage.
+     *Dectivates the textures on the DeepZoomImage.
-   *
+     *
-   * @memberof DeepZoomImage
+     * @memberof DeepZoomImage
-   */
+     */
     deactivate() {
+        this.active = false
         this.destroyAllTiles()
-        Object.keys(this.tileLayers).forEach(key => {
-            this.destroyTiles(key)
-        })
         this.tileContainer.destroy({ children: true })
-        printTileCacheInfos()
     }
 
     throwFinished() {
-        console.log("throwFinished")
+        //console.log("throwFinished")
         let key = this.currentLevel.toString()
         let currentTiles = this.tileLayers[key]
         if (typeof currentTiles == 'undefined') {
             return
         }
-
         this.ensureTiles(this.currentLevel)
-        // let all = new Set()
-        // for (let tile of currentTiles.children) {
-        //     all.add(tile.url)
-        // }
-        // let { centerCol, centerRow, needed } = this.neededTiles(currentTiles, this.currentLevel)
-        // for (let [url, col, row] of needed) {
-        //     all.delete(url)
-        // }
-        // for (let url of all) {
-        //     currentTiles.destroyTileByUrl(url)
-        // }
-        // currentTiles.loader.loader.reset()
     }
 }
 </code></pre>
@@ -2569,7 +2512,7 @@ export class DeepZoomImage extends PIXI.Container {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_flippable.js.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1466,8 +1472,8 @@
  * Class that represents a PixiJS Flippable.
  *
  * @example
- * const front = PIXI.Sprite.fromImage('./assets/front.jpg')
+ * const front = PIXI.Sprite.from('./assets/front.jpg')
- * const back = PIXI.Sprite.fromImage('./assets/back.jpg')
+ * const back = PIXI.Sprite.from('./assets/back.jpg')
  * app.scene.addChild(front)
  *
  * // Create the flippable
@@ -1482,21 +1488,20 @@
  * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/flippable.html|DocTest}
  */
 export default class Flippable extends PIXI.projection.Camera3d {
-
     /**
      * Creates an instance of a Flippable.
      *
      * @constructor
      * @param {PIXI.DisplayObject} front - The object to show initially. Should have been added to the scene.
      * @param {PIXI.DisplayObject} back - The object to show on the backside. Should have not been added to the scene.
-     * @param {PIXI.WebGLRenderer|PIXI.CanvasRenderer} renderer - The renderer of the application.
+     * @param {PIXI.Renderer|PIXI.CanvasRenderer} renderer - The renderer of the application.
      * @param {object} [opts] - An options object which can contain the following properties.
      * @param {number} [opts.duration=1] - The duration of the flip animation in seconds.
      * @param {GSAP.Ease} [opts.ease=Power2.easeOut] - The ease of the flip animation.
      * @param {boolean} [opts.shadow=false] - Should be a shadow been display during the animation?
      * @param {numer} [opts.eulerX=0] - The shift of the x-axis during the animation.
      * @param {numer} [opts.eulerY=0] - The shift of the y-axis during the animation.
-     * @param {GSAP.Ease} [opts.eulerEase=Sine.easeOut] - The ease of the shift.
+     * @param {GSAP.Ease} [opts.eulerEase=Power1.easeOut] - The ease of the shift.
      * @param {boolean} [opts.useBackTransforms=false] - When set to true, the flip animation also animates to the transform parameters of the back-object.
      * @param {GSAP.Ease} [opts.transformEase=Power2.easeOut] - The ease of the transform.
      * @param {numer} [opts.focus=800] - The value of the focus of the 3D camera (see pixi-projection).
@@ -1508,26 +1513,29 @@ export default class Flippable extends PIXI.projection.Camera3d {
      * @param {function} [opts.onComplete=null] - A callback executed when the flip animation is finished.
      */
     constructor(front, back, renderer, opts = {}) {
-
         super()
 
-        this.opts = Object.assign({}, {
+        this.opts = Object.assign(
-            front,
+            {},
-            back,
+            {
-            renderer,
+                front,
-            duration: 1,
+                back,
-            ease: Power2.easeOut,
+                renderer,
-            shadow: false,
+                duration: 1,
-            eulerX: 0,
+                ease: Power2.easeOut,
-            eulerY: 0,
+                shadow: false,
-            eulerEase: Sine.easeOut,
+                eulerX: 0,
-            useBackTransforms: false,
+                eulerY: 0,
-            transformEase: Power2.easeOut,
+                eulerEase: Power1.easeOut,
-            focus: 800,
+                useBackTransforms: false,
-            near: 10,
+                transformEase: Power2.easeOut,
-            far: 10000,
+                focus: 800,
-            orthographic: false
+                near: 10,
-        }, opts)
+                far: 10000,
+                orthographic: false
+            },
+            opts
+        )
 
         // planes
         //--------------------
@@ -1553,8 +1561,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
      * @return {Flippable} A reference to the flippable for chaining.
      */
     setup() {
-
+        const scale = 0.5
-        const scale = .5
 
         // filters
         //--------------------
@@ -1571,10 +1578,10 @@ export default class Flippable extends PIXI.projection.Camera3d {
 
         // shadow
         //--------------------
-        const shadow = new PIXI.projection.Sprite3d(PIXI.Texture.fromImage('../../assets/images/shadow.png'))
+        const shadow = new PIXI.projection.Sprite3d(PIXI.Texture.from('../../assets/images/shadow.png'))
         shadow.renderable = false
         shadow.anchor.set(0.5)
-        shadow.scale3d.set(.98)
+        shadow.scale3d.set(0.98)
         shadow.alpha = 0.7
         shadow.filters = [blurFilter]
         shadow.visible = this.opts.shadow
@@ -1593,7 +1600,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
         const front = new PIXI.projection.Sprite3d(PIXI.Texture.EMPTY)
         front.scale.set(-1 / scale, 1 / scale)
         front.renderable = true
-        front.anchor.set(.5)
+        front.anchor.set(0.5)
         inner.addChild(front)
         this.objects.front = front
 
@@ -1602,7 +1609,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
         const back = new PIXI.projection.Sprite3d(PIXI.Texture.EMPTY)
         back.scale.set(1 / scale, 1 / scale)
         back.renderable = false
-        back.anchor.set(.5)
+        back.anchor.set(0.5)
         inner.addChild(back)
         this.objects.back = back
 
@@ -1618,7 +1625,6 @@ export default class Flippable extends PIXI.projection.Camera3d {
         return this._flipped
     }
     set flipped(toBack) {
-
         this._flipped = toBack
 
         // references
@@ -1745,20 +1751,20 @@ export default class Flippable extends PIXI.projection.Camera3d {
         // camera
         //--------------------
         new TimelineMax()
-            .to(this.euler, half, {x: this.opts.eulerX, y: this.opts.eulerY, ease})
+            .to(this.euler, half, {
-            .to(this.euler, half, {x: 0, y: 0, ease})
+                x: this.opts.eulerX,
+                y: this.opts.eulerY,
+                ease
+            })
+            .to(this.euler, half, { x: 0, y: 0, ease })
 
         // shadow
         //--------------------
-        new TimelineMax()
+        new TimelineMax().to(shadow, half, { alpha: 0.3, ease }).to(shadow, half, { alpha: 0.7, ease })
-            .to(shadow, half, {alpha: .3, ease})
-            .to(shadow, half, {alpha: .7, ease})
 
         // blurfilter
         //--------------------
-        new TimelineMax()
+        new TimelineMax().to(blurFilter, half, { blur: 6, ease }).to(blurFilter, half, { blur: 0.2, ease })
-            .to(blurFilter, half, {blur: 6, ease})
-            .to(blurFilter, half, {blur: .2, ease})
     }
 
     /**
@@ -1767,7 +1773,6 @@ export default class Flippable extends PIXI.projection.Camera3d {
      * @return {Flippable} A reference to the flippable for chaining.
      */
     layout() {
-
         const front = this.objects.front
         const back = this.objects.back
         const shadow = this.objects.shadow
@@ -1838,13 +1843,22 @@ export default class Flippable extends PIXI.projection.Camera3d {
      * @return {PIXI.Texture} The generated PIXI.Texture.
      */
     generateTexture(displayObject) {
-
         // renderTexture
         //--------------------
         const renderTexture = PIXI.RenderTexture.create(displayObject.width, displayObject.height)
 
         // save position
-        const transform = [displayObject.x, displayObject.y, displayObject.scale.x, displayObject.scale.y, displayObject.rotation, displayObject.skew.x, displayObject.skew.y, displayObject.pivot.x, displayObject.pivot.y]
+        const transform = [
+            displayObject.x,
+            displayObject.y,
+            displayObject.scale.x,
+            displayObject.scale.y,
+            displayObject.rotation,
+            displayObject.skew.x,
+            displayObject.skew.y,
+            displayObject.pivot.x,
+            displayObject.pivot.y
+        ]
 
         displayObject.position.set(0, 0)
         displayObject.skew.set(0, 0)
@@ -1892,7 +1906,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_labeledgraphics.js.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1438,13 +1444,10 @@
             </div>
         </header>
         <article>
-            <pre id="source-code" class="prettyprint source linenums"><code>
+            <pre id="source-code" class="prettyprint source linenums"><code>/**
-
-/**
  * Defines usefull default text styles.
  */
 export class FontInfo {
-
     static get small() {
         return app.theme.textStyleSmall
     }
@@ -1464,11 +1467,9 @@ export class FontInfo {
  * @class Hypenate
  */
 export class Hypenate {
-
     static splitPart(part) {
         let parts = part.split('-')
-        if (parts.length == 1)
+        if (parts.length == 1) return [part]
-            return [part]
         let result = []
         let last = parts.pop()
         for (let p of parts) {
@@ -1479,7 +1480,7 @@ export class Hypenate {
     }
 
     static splitWord(word) {
-        if (typeof (language) == 'undefined') {
+        if (typeof language == 'undefined') {
             if (word.indexOf('-') > -1) {
                 return word.split('-')
             }
@@ -1498,11 +1499,11 @@ export class Hypenate {
     static abbreviateLine(label, style, width) {
         const pixiStyle = new PIXI.TextStyle(style)
         let metrics = PIXI.TextMetrics.measureText(label, pixiStyle)
-        while(metrics.width > width &amp;&amp; label.length > 3) {
+        while (metrics.width > width &amp;&amp; label.length > 3) {
-            label = label.slice(0, label.length-1)
+            label = label.slice(0, label.length - 1)
             metrics = PIXI.TextMetrics.measureText(label, pixiStyle)
         }
-        label = label.slice(0, label.length-1)
+        label = label.slice(0, label.length - 1)
         return label + '…'
     }
 
@@ -1518,17 +1519,15 @@ export class Hypenate {
                 if (parts.length == 1) {
                     newWord += '\n' + word + ' '
                     x = wordMetrics.width + space.width
-                }
+                } else {
-                else {
                     let first = true
                     let lastPart = ''
                     for (let part of parts) {
                         let partMetrics = PIXI.TextMetrics.measureText(part, pixiStyle)
                         if (x + partMetrics.width + space.width > width) {
-                            newWord += ((first || lastPart.endsWith('-')) ? '\n' : '-\n') + part
+                            newWord += (first || lastPart.endsWith('-') ? '\n' : '-\n') + part
                             x = partMetrics.width
-                        }
+                        } else {
-                        else {
                             newWord += part
                             x += partMetrics.width
                         }
@@ -1538,8 +1537,7 @@ export class Hypenate {
                     x += space.width
                 }
                 result += newWord + ' '
-            }
+            } else {
-            else {
                 result += word + ' '
                 x += wordMetrics.width + space.width
             }
@@ -1571,7 +1569,6 @@ export class Hypenate {
 }
 
 class TextLabel extends PIXI.Text {
-
     /**
      *Creates an instance of TextLabel.
      * @param {string} text - The string that you would like the text to display
@@ -1579,8 +1576,8 @@ class TextLabel extends PIXI.Text {
      * @param {canvas}
      * @memberof TextLabel
      */
-    constructor(text, style=null, canvas=null, { minZoom = 0.1, maxZoom = 10} = {}) {
+    constructor(text, style = null, canvas = null, { minZoom = 0.1, maxZoom = 10 } = {}) {
-        super(text, style, canvas )
+        super(text, style, canvas)
         this.normFontSize = this.style.fontSize
         this.minZoom = minZoom
         this.maxZoom = maxZoom
@@ -1620,7 +1617,6 @@ class TextLabel extends PIXI.Text {
  * @extends {PIXI.Graphics}
  */
 export class LabeledGraphics extends PIXI.Graphics {
-
     /**
      * Creates an instance of LabeledGraphics and defines a local label cache.
      *
@@ -1635,7 +1631,6 @@ export class LabeledGraphics extends PIXI.Graphics {
         return new TextLabel(label, fontInfo)
     }
 
-    
     /**
      * Main additional method. Ensures that a text object is created that is cached
      * under the given key.
@@ -1653,11 +1648,9 @@ export class LabeledGraphics extends PIXI.Graphics {
      * @memberof LabeledGraphics
      */
     ensureLabel(key, label, attrs = {}, fontInfo = FontInfo.normal) {
-
         if (attrs.maxWidth &amp;&amp; attrs.maxLines == 1) {
             label = Hypenate.abbreviateLine(label, fontInfo, attrs.maxWidth)
-        }
+        } else {
-        else {
             if (attrs.maxWidth) {
                 label = Hypenate.splitLines(label, fontInfo, attrs.maxWidth)
             }
@@ -1681,8 +1674,7 @@ export class LabeledGraphics extends PIXI.Graphics {
         for (let k in attrs) {
             text[k] = attrs[k]
         }
-        if (label != text.text)
+        if (label != text.text) text.text = label
-            text.text = label
         // We do not follow the flexbox jargon and use align for x and justify for y axis
         // This deviation is needed to ensure backward compatability
         switch (attrs.justify || null) {
@@ -1735,15 +1727,18 @@ export class LabeledGraphics extends PIXI.Graphics {
             const words = lastLine.split(' ')
             const wordMetrics = PIXI.TextMetrics.measureText(`\u00A0\n...\n${words.join('\n')}`, pixiStyle)
             const [spaceLength, dotsLength, ...wordLengths] = wordMetrics.lineWidths
-            const { text: newLastLine } = wordLengths.reduce((data, wordLength, i) => {
+            const { text: newLastLine } = wordLengths.reduce(
-                if (data.length + wordLength + spaceLength >= wordWrapWidth) {
+                (data, wordLength, i) => {
-                    return { ...data, length: wordWrapWidth }
+                    if (data.length + wordLength + spaceLength >= wordWrapWidth) {
-                }
+                        return { ...data, length: wordWrapWidth }
-                return {
+                    }
-                    text: `${data.text}${i > 0 ? ' ' : ''}${words[i]}`,
+                    return {
-                    length: data.length + wordLength + spaceLength,
+                        text: `${data.text}${i > 0 ? ' ' : ''}${words[i]}`,
-                };
+                        length: data.length + wordLength + spaceLength
-            }, { text: '', length: dotsLength })
+                    }
+                },
+                { text: '', length: dotsLength }
+            )
             truncatedLines[truncatedLines.length - 1] = `${newLastLine}...`
             newText = truncatedLines.join('\n')
         }
@@ -1784,7 +1779,6 @@ export class LabeledGraphics extends PIXI.Graphics {
         label.destroy()
     }
 
-   
     /**
      * Ensures that labels are hidden on clear.
      *
@@ -1807,7 +1801,6 @@ export class LabeledGraphics extends PIXI.Graphics {
     }
 }
 
-
 const labelCache = new Map()
 
 function getTexture(label, fontInfo = FontInfo.normal) {
@@ -1825,7 +1818,6 @@ function getTexture(label, fontInfo = FontInfo.normal) {
 }
 
 class SpriteLabel extends PIXI.Sprite {
-
     constructor(label, fontInfo) {
         let texture = getTexture(label, fontInfo)
         super(texture)
@@ -1845,12 +1837,10 @@ class SpriteLabel extends PIXI.Sprite {
 }
 
 export class BitmapLabeledGraphics extends LabeledGraphics {
-
     _createText(label, fontInfo) {
         let texture = getTexture(label, fontInfo)
         return new SpriteLabel(texture)
     }
-
 }
 </code></pre>
         </article>
@@ -1865,7 +1855,7 @@ export class BitmapLabeledGraphics extends LabeledGraphics {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_list.js.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1438,7 +1444,7 @@
             </div>
         </header>
         <article>
-            <pre id="source-code" class="prettyprint source linenums"><code>/* globals */
+            <pre id="source-code" class="prettyprint source linenums"><code>/* globals ThrowPropsPlugin, Strong */
 
 /* Imports */
 import Events from '../events.js'
@@ -1447,8 +1453,8 @@ import Events from '../events.js'
  * Class that represents a PixiJS List.
  *
  * @example
- * const elephant1 = PIXI.Sprite.fromImage('./assets/elephant-1.jpg')
+ * const elephant1 = PIXI.Sprite.from('./assets/elephant-1.jpg')
- * const elephant2 = PIXI.Sprite.fromImage('./assets/elephant-2.jpg')
+ * const elephant2 = PIXI.Sprite.from('./assets/elephant-2.jpg')
  *
  * // Create the list
  * const list = new List([elephant1, elephant2])
@@ -1461,7 +1467,6 @@ import Events from '../events.js'
  * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/list.html|DocTest}
  */
 export default class List extends PIXI.Container {
-
     /**
      * Creates an instance of a Flippable.
      *
@@ -1483,19 +1488,22 @@ export default class List extends PIXI.Container {
      *     scroll your list.
      */
     constructor(items = [], opts = {}) {
-
         super()
 
-        this.opts = Object.assign({}, {
+        this.opts = Object.assign(
-            padding: 10,
+            {},
-            margin: 10,
+            {
-            orientation: 'vertical',
+                padding: 10,
-            align: 'left',
+                margin: 10,
-            verticalAlign: 'middle',
+                orientation: 'vertical',
-            width: null,
+                align: 'left',
-            height: null,
+                verticalAlign: 'middle',
-            app: null
+                width: null,
-        }, opts)
+                height: null,
+                app: null
+            },
+            opts
+        )
 
         this.__items = items
         this.__dragging = false
@@ -1512,7 +1520,6 @@ export default class List extends PIXI.Container {
      * @return {List} A reference to the list for chaining.
      */
     setup() {
-
         // inner container
         //--------------------
         const container = new PIXI.Container()
@@ -1527,7 +1534,7 @@ export default class List extends PIXI.Container {
 
         // add items
         //--------------------
-        for(let item of this.__items) {
+        for (let item of this.__items) {
             container.addChild(item)
         }
 
@@ -1571,7 +1578,7 @@ export default class List extends PIXI.Container {
     setItems(items) {
         this.container.removeChildren()
         this.__items = items
-        for(let item of this.__items) {
+        for (let item of this.__items) {
             this.container.addChild(item)
         }
         this.layout()
@@ -1583,14 +1590,12 @@ export default class List extends PIXI.Container {
      * @return {List} A reference to the list for chaining.
      */
     layout() {
-
         const margin = this.opts.margin
 
         let x = margin
         let y = margin
 
         for (let item of this.__items) {
-
             item.x = x
             item.y = y
 
@@ -1606,13 +1611,13 @@ export default class List extends PIXI.Container {
         if (this.opts.orientation === 'vertical') {
             switch (this.opts.align) {
                 case 'center':
-                    this.__items.forEach(it => it.x = margin + this.width / 2 - it.width / 2)
+                    this.__items.forEach(it => (it.x = margin + this.width / 2 - it.width / 2))
                     break
                 case 'right':
-                    this.__items.forEach(it => it.x = margin + this.width - it.width)
+                    this.__items.forEach(it => (it.x = margin + this.width - it.width))
                     break
                 default:
-                    this.__items.forEach(it => it.x = margin)
+                    this.__items.forEach(it => (it.x = margin))
                     break
             }
 
@@ -1632,13 +1637,13 @@ export default class List extends PIXI.Container {
         if (this.opts.orientation === 'horizontal') {
             switch (this.opts.verticalAlign) {
                 case 'top':
-                    this.__items.forEach(it => it.y = margin)
+                    this.__items.forEach(it => (it.y = margin))
                     break
                 case 'bottom':
-                    this.__items.forEach(it => it.y = margin + this.height - it.height)
+                    this.__items.forEach(it => (it.y = margin + this.height - it.height))
                     break
                 default:
-                    this.__items.forEach(it => it.y = margin + this.height / 2 - it.height / 2)
+                    this.__items.forEach(it => (it.y = margin + this.height / 2 - it.height / 2))
                     break
             }
 
@@ -1660,10 +1665,9 @@ export default class List extends PIXI.Container {
      *
      */
     get innerWidth() {
-
         let size = 0
 
-        this.__items.forEach(it => size += it.width)
+        this.__items.forEach(it => (size += it.width))
         size += this.opts.padding * (this.__items.length - 1)
         size += 2 * this.opts.margin
 
@@ -1674,10 +1678,9 @@ export default class List extends PIXI.Container {
      *
      */
     get innerHeight() {
-
         let size = 0
 
-        this.__items.forEach(it => size += it.height)
+        this.__items.forEach(it => (size += it.height))
         size += this.opts.padding * (this.__items.length - 1)
         size += 2 * this.opts.margin
 
@@ -1690,7 +1693,6 @@ export default class List extends PIXI.Container {
      * @param {number} widthOrHeight - The new width (if orientation is horizontal) or height (if orientation is vertical) of the list.
      */
     resize(widthOrHeight) {
-
         if (this.opts.orientation === 'horizontal') {
             this.opts.width = widthOrHeight
         } else {
@@ -1706,7 +1708,6 @@ export default class List extends PIXI.Container {
      * @param {*} event
      */
     onStart(event) {
-
         this.__dragging = true
 
         this.capture(event)
@@ -1716,8 +1717,8 @@ export default class List extends PIXI.Container {
             y: this.container.position.y - event.data.global.y
         }
 
-        TweenLite.killTweensOf(this.container.position, {x: true, y: true})
+        TweenLite.killTweensOf(this.container.position, { x: true, y: true })
-        if (typeof ThrowPropsPlugin != "undefined") {
+        if (typeof ThrowPropsPlugin != 'undefined') {
             ThrowPropsPlugin.track(this.container.position, 'x,y')
         }
     }
@@ -1728,9 +1729,7 @@ export default class List extends PIXI.Container {
      * @param {*} event
      */
     onMove(event) {
-
         if (this.__dragging) {
-        
             this.capture(event)
 
             if (this.opts.orientation === 'horizontal') {
@@ -1747,7 +1746,6 @@ export default class List extends PIXI.Container {
      * @param {*} event
      */
     onEnd(event) {
-
         if (this.__dragging) {
             this.__dragging = false
 
@@ -1773,12 +1771,17 @@ export default class List extends PIXI.Container {
                 }
             }
 
-            if (typeof ThrowPropsPlugin != "undefined") {
+            if (typeof ThrowPropsPlugin != 'undefined') {
-                ThrowPropsPlugin.to(this.container.position, {
+                ThrowPropsPlugin.to(
-                    throwProps,
+                    this.container.position,
-                    ease: Strong.easeOut,
+                    {
-                    onComplete: () => ThrowPropsPlugin.untrack(this.container.position)
+                        throwProps,
-                }, .8, .4)
+                        ease: Strong.easeOut,
+                        onComplete: () => ThrowPropsPlugin.untrack(this.container.position)
+                    },
+                    0.8,
+                    0.4
+                )
             }
         }
     }
@@ -1789,7 +1792,6 @@ export default class List extends PIXI.Container {
      * @param {*} event
      */
     onScroll(event) {
-
         this.capture(event)
 
         if (this.opts.orientation === 'horizontal') {
@@ -1832,7 +1834,7 @@ export default class List extends PIXI.Container {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_message.js.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1439,7 +1445,7 @@
         </header>
         <article>
             <pre id="source-code" class="prettyprint source linenums"><code>import Theme from './theme.js'
-import {InteractivePopup} from './popup.js'
+import { InteractivePopup } from './popup.js'
 
 /**
  * Class that represents a Message. A message pops up and disappears after a specific amount of time.
@@ -1473,7 +1479,6 @@ import {InteractivePopup} from './popup.js'
  * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/message.html|DocTest}
  */
 export default class Message extends InteractivePopup {
-
     /**
      * Creates an instance of a Message.
      *
@@ -1493,21 +1498,24 @@ export default class Message extends InteractivePopup {
      * @param {number} [opts.closeDuration=Theme.fast] - The duration in seconds of the closing of the message box.
      */
     constructor(opts = {}) {
-        
         const theme = Theme.fromString(opts.theme)
 
-        opts = Object.assign({}, {
+        opts = Object.assign(
-            app: window.app,
+            {},
-            closeButton: false,
+            {
-            minWidth: 280,
+                app: window.app,
-            minHeight: 100,
+                closeButton: false,
-            margin: theme.margin,
+                minWidth: 280,
-            align: 'right',                     // left, center, right
+                minHeight: 100,
-            verticalAlign: 'top',               // top, middle, bottom
+                margin: theme.margin,
-            duration: 5,
+                align: 'right', // left, center, right
-            autoClose: true,
+                verticalAlign: 'top', // top, middle, bottom
-            closeDuration: theme.fast
+                duration: 5,
-        }, opts)
+                autoClose: true,
+                closeDuration: theme.fast
+            },
+            opts
+        )
 
         super(opts)
     }
@@ -1518,7 +1526,6 @@ export default class Message extends InteractivePopup {
      * @return {Message} Returns the message box for chaining.
      */
     layout() {
-
         super.layout()
 
         // horizontal
@@ -1527,7 +1534,7 @@ export default class Message extends InteractivePopup {
                 this.x = this.opts.margin
                 break
             case 'center':
-                this.x = (this.opts.app.size.width / 2) - (this.width / 2)
+                this.x = this.opts.app.size.width / 2 - this.width / 2
                 break
             case 'right':
                 this.x = this.opts.app.size.width - this.opts.margin - this.width
@@ -1540,7 +1547,7 @@ export default class Message extends InteractivePopup {
                 this.y = this.opts.margin
                 break
             case 'middle':
-                this.y = (this.opts.app.size.height / 2) - (this.height / 2)
+                this.y = this.opts.app.size.height / 2 - this.height / 2
                 break
             case 'bottom':
                 this.y = this.opts.app.size.height - this.opts.margin - this.height
@@ -1554,7 +1561,6 @@ export default class Message extends InteractivePopup {
      * @private
      */
     show() {
-
         super.show()
 
         if (this.opts.autoClose) {
@@ -1577,7 +1583,7 @@ export default class Message extends InteractivePopup {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_modal.js.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1439,7 +1445,7 @@
         </header>
         <article>
             <pre id="source-code" class="prettyprint source linenums"><code>import Theme from './theme.js'
-import {InteractivePopup} from './popup.js'
+import { InteractivePopup } from './popup.js'
 
 /**
  * Class that represents a PixiJS Modal.
@@ -1468,7 +1474,6 @@ import {InteractivePopup} from './popup.js'
  * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/modal.html|DocTest}
  */
 export default class Modal extends PIXI.Container {
-
     /**
      * Creates an instance of a Modal.
      *
@@ -1483,20 +1488,23 @@ export default class Modal extends PIXI.Container {
      * @param {boolean} [opts.visible=true] - Is the modal initially visible (property visible)?
      */
     constructor(opts = {}) {
-
         super()
 
         const theme = Theme.fromString(opts.theme)
         this.theme = theme
 
-        this.opts = Object.assign({}, {
+        this.opts = Object.assign(
-            id: PIXI.utils.uid(),
+            {},
-            app: window.app,
+            {
-            backgroundFill: theme.background,
+                id: PIXI.utils.uid(),
-            backgroundFillAlpha: .6,
+                app: window.app,
-            closeOnBackground: true,
+                backgroundFill: theme.background,
-            visible: true
+                backgroundFillAlpha: 0.6,
-        }, opts)
+                closeOnBackground: true,
+                visible: true
+            },
+            opts
+        )
 
         this.id = this.opts.id
 
@@ -1522,7 +1530,6 @@ export default class Modal extends PIXI.Container {
      * @return {Modal} A reference to the modal for chaining.
      */
     setup() {
-
         // interaction
         //-----------------
         this.interactive = true
@@ -1567,7 +1574,6 @@ export default class Modal extends PIXI.Container {
      * @return {Modal} A reference to the modal for chaining.
      */
     layout() {
-
         const width = this.opts.app.size.width
         const height = this.opts.app.size.height
 
@@ -1591,7 +1597,10 @@ export default class Modal extends PIXI.Container {
      * @return {Modal} A reference to the modal for chaining.
      */
     show() {
-        TweenLite.to(this, this.theme.fast, {alpha: 1, onStart: () => this.visible = true})
+        TweenLite.to(this, this.theme.fast, {
+            alpha: 1,
+            onStart: () => (this.visible = true)
+        })
 
         return this
     }
@@ -1602,7 +1611,10 @@ export default class Modal extends PIXI.Container {
      * @return {Modal} A reference to the modal for chaining.
      */
     hide() {
-        TweenLite.to(this, this.theme.fast, {alpha: 0, onComplete: () => this.visible = false})
+        TweenLite.to(this, this.theme.fast, {
+            alpha: 0,
+            onComplete: () => (this.visible = false)
+        })
 
         return this
     }
@@ -1652,7 +1664,7 @@ export default class Modal extends PIXI.Container {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_popup.js.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1452,7 +1458,6 @@ import ButtonGroup from './buttongroup.js'
  * @extends AbstractPopup
  */
 export class InteractivePopup extends AbstractPopup {
-
     /**
      * Creates an instance of an InteractivePopup (only for internal use).
      *
@@ -1464,13 +1469,16 @@ export class InteractivePopup extends AbstractPopup {
      * @param {object} [opts.buttonGroup] - A ButtonGroup object to be displayed on the lower right corner.
      */
     constructor(opts = {}) {
-
+        opts = Object.assign(
-        opts = Object.assign({}, {
+            {},
-            closeOnPopup: false,
+            {
-            closeButton: true,
+                closeOnPopup: false,
-            button: null,
+                closeButton: true,
-            buttonGroup: null
+                button: null,
-        }, opts)
+                buttonGroup: null
+            },
+            opts
+        )
 
         super(opts)
 
@@ -1496,7 +1504,6 @@ export class InteractivePopup extends AbstractPopup {
      * @return {AbstractPopup} A reference to the popup for chaining.
      */
     setup() {
-
         super.setup()
 
         // interaction
@@ -1512,7 +1519,7 @@ export class InteractivePopup extends AbstractPopup {
         // closeButton
         //-----------------
         if (this.opts.closeButton) {
-            let closeButton = PIXI.Sprite.fromImage('../../assets/icons/close.png', true)
+            let closeButton = PIXI.Sprite.from('../../assets/icons/close.png')
             closeButton.width = this.headerStyle.fontSize
             closeButton.height = closeButton.width
             closeButton.tint = this.theme.color2
@@ -1535,7 +1542,8 @@ export class InteractivePopup extends AbstractPopup {
             // maxWidth is set and a closeButton should be displayed
             //-----------------
             if (this.opts.maxWidth) {
-                const wordWrapWidth = this.opts.maxWidth - (2 * this.opts.padding) - this.smallPadding - this._closeButton.width
+                const wordWrapWidth =
+                    this.opts.maxWidth - 2 * this.opts.padding - this.smallPadding - this._closeButton.width
                 if (this._header) {
                     this.headerStyle.wordWrapWidth = wordWrapWidth
                 } else if (this._content) {
@@ -1548,9 +1556,11 @@ export class InteractivePopup extends AbstractPopup {
         //-----------------
         if (this.opts.button || this.opts.buttonGroup) {
             if (this.opts.button) {
-                this._buttons = new Button(Object.assign({textStyle: this.theme.textStyleSmall}, this.opts.button))
+                this._buttons = new Button(Object.assign({ textStyle: this.theme.textStyleSmall }, this.opts.button))
             } else {
-                this._buttons = new ButtonGroup(Object.assign({textStyle: this.theme.textStyleSmall}, this.opts.buttonGroup))
+                this._buttons = new ButtonGroup(
+                    Object.assign({ textStyle: this.theme.textStyleSmall }, this.opts.buttonGroup)
+                )
             }
             this.addChild(this._buttons)
 
@@ -1566,7 +1576,6 @@ export class InteractivePopup extends AbstractPopup {
      * @return {AbstractPopup} A reference to the popup for chaining.
      */
     layout() {
-
         super.layout()
 
         // closeButton
@@ -1596,7 +1605,6 @@ export class InteractivePopup extends AbstractPopup {
      * @returns {object} An JavaScript object width the keys width and height.
      */
     getInnerSize() {
-
         let size = super.getInnerSize()
 
         if (this._closeButton) {
@@ -1630,7 +1638,6 @@ export class InteractivePopup extends AbstractPopup {
  * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/popup.html|DocTest}
  */
 export default class Popup extends InteractivePopup {
-
     /**
      * Creates an instance of a Popup.
      *
@@ -1641,12 +1648,15 @@ export default class Popup extends InteractivePopup {
      * @param {number} [opts.minHeight=0] - The minimum height of the popup.
      */
     constructor(opts = {}) {
-
+        opts = Object.assign(
-        opts = Object.assign({}, {
+            {},
-            closeButton: false,
+            {
-            minWidth: 0,
+                closeButton: false,
-            minHeight: 0
+                minWidth: 0,
-        }, opts)
+                minHeight: 0
+            },
+            opts
+        )
 
         super(opts)
     }
@@ -1664,7 +1674,7 @@ export default class Popup extends InteractivePopup {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_popupmenu.js.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1468,7 +1474,6 @@ import Popup from './popup.js'
  * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/popupmenu.html|DocTest}
  */
 export default class PopupMenu extends Popup {
-    
     /**
      * Creates an instance of a PopupMenu.
      *
@@ -1483,15 +1488,18 @@ export default class PopupMenu extends Popup {
      * @param {boolean} [opts.closeOnPopup=true] - The opacity of the background.
      */
     constructor(opts = {}) {
-        
         const theme = Theme.fromString(opts.theme)
 
-        opts = Object.assign({}, {
+        opts = Object.assign(
-            items: [],
+            {},
-            margin: theme.margin / 2,
+            {
-            textStyle: theme.textStyle,
+                items: [],
-            closeOnPopup: true
+                margin: theme.margin / 2,
-        }, opts)
+                textStyle: theme.textStyle,
+                closeOnPopup: true
+            },
+            opts
+        )
 
         super(opts)
     }
@@ -1503,14 +1511,12 @@ export default class PopupMenu extends Popup {
      * @return {PopupMenu} A reference to the popupmenu for chaining.
      */
     setup() {
-
         // content
         //-----------------
         const content = new PIXI.Container()
 
         let y = 0
         for (let item of this.opts.items) {
-
             let object = null
 
             if (item.label) {
@@ -1523,16 +1529,22 @@ export default class PopupMenu extends Popup {
 
             if (item.action) {
                 if (item.disabled) {
-                    object.alpha = .5
+                    object.alpha = 0.5
                 } else {
                     object.interactive = true
                     object.buttonMode = true
                 }
                 object.on('pointerover', e => {
-                    TweenLite.to(object, this.theme.fast, {alpha: .83, overwrite: 'none'})
+                    TweenLite.to(object, this.theme.fast, {
+                        alpha: 0.83,
+                        overwrite: 'none'
+                    })
                 })
                 object.on('pointerout', e => {
-                    TweenLite.to(object, this.theme.fast, {alpha: 1, overwrite: 'none'})
+                    TweenLite.to(object, this.theme.fast, {
+                        alpha: 1,
+                        overwrite: 'none'
+                    })
                 })
                 object.on('pointerup', e => {
                     item.action.call(object, e, object)
@@ -1565,7 +1577,7 @@ export default class PopupMenu extends Popup {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_progress.js.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1458,7 +1464,6 @@
  * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/progress.html|DocTest}
  */
 export default class Progress extends PIXI.Container {
-    
     /**
      * Creates an instance of a Progress.
      *
@@ -1493,36 +1498,39 @@ export default class Progress extends PIXI.Container {
      * @param {boolean} [opts.visible=true] - Is the progress initially visible (property visible)?
      */
     constructor(opts = {}) {
-
         super()
 
         const theme = Theme.fromString(opts.theme)
         this.theme = theme
 
-        this.opts = Object.assign({}, {
+        this.opts = Object.assign(
-            id: PIXI.utils.uid(),
+            {},
-            app: window.app,
+            {
-            width: null,
+                id: PIXI.utils.uid(),
-            height: 2,
+                app: window.app,
-            margin: 100,
+                width: null,
-            padding: 0,
+                height: 2,
-            fill: theme.fill,
+                margin: 100,
-            fillAlpha: theme.fillAlpha,
+                padding: 0,
-            fillActive: theme.primaryColor,
+                fill: theme.fill,
-            fillActiveAlpha: theme.fillActiveAlpha,
+                fillAlpha: theme.fillAlpha,
-            stroke: theme.stroke,
+                fillActive: theme.primaryColor,
-            strokeWidth: 0,
+                fillActiveAlpha: theme.fillActiveAlpha,
-            strokeAlpha: theme.strokeAlpha,
+                stroke: theme.stroke,
-            strokeActive: theme.strokeActive,
+                strokeWidth: 0,
-            strokeActiveWidth: 0,
+                strokeAlpha: theme.strokeAlpha,
-            strokeActiveAlpha: theme.strokeActiveAlpha,
+                strokeActive: theme.strokeActive,
-            background: false,
+                strokeActiveWidth: 0,
-            backgroundFill: theme.background,
+                strokeActiveAlpha: theme.strokeActiveAlpha,
-            backgroundFillAlpha: 1,
+                background: false,
-            radius: theme.radius,
+                backgroundFill: theme.background,
-            destroyOnComplete: true,
+                backgroundFillAlpha: 1,
-            visible: true
+                radius: theme.radius,
-        }, opts)
+                destroyOnComplete: true,
+                visible: true
+            },
+            opts
+        )
 
         this.id = this.opts.id
 
@@ -1552,7 +1560,6 @@ export default class Progress extends PIXI.Container {
      * @return {Progress} A reference to the progress for chaining.
      */
     setup() {
-
         // interaction
         //-----------------
         this.on('added', e => {
@@ -1586,7 +1593,6 @@ export default class Progress extends PIXI.Container {
      * @return {Progress} A reference to the progress for chaining.
      */
     layout() {
-
         const width = this.opts.app.size.width
         const height = this.opts.app.size.height
 
@@ -1611,7 +1617,6 @@ export default class Progress extends PIXI.Container {
      * @return {Progress} A reference to the progress for chaining.
      */
     draw() {
-
         this.bar.clear()
         this.barActive.clear()
 
@@ -1628,16 +1633,15 @@ export default class Progress extends PIXI.Container {
      * @return {Progress} A reference to the progress for chaining.
      */
     drawBar() {
-
         const width = this.opts.app.size.width
         const height = this.opts.app.size.height
 
         this.radius = this.opts.radius
-        if ((this.radius * 2) > this.opts.height) {
+        if (this.radius * 2 > this.opts.height) {
             this.radius = this.opts.height / 2
         }
 
-        const wantedWidth = this.opts.width || (width - (2 * this.opts.margin))
+        const wantedWidth = this.opts.width || width - 2 * this.opts.margin
         const wantedHeight = this.opts.height
 
         this.bar.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha)
@@ -1662,11 +1666,10 @@ export default class Progress extends PIXI.Container {
      * @return {Progress} A reference to the progress for chaining.
      */
     drawBarActive() {
+        const wantedWidth = this.bar.width - 2 * this.opts.padding
+        const wantedHeight = this.bar.height - 2 * this.opts.padding
 
-        const wantedWidth = this.bar.width - (2 * this.opts.padding)
+        const barActiveWidth = (wantedWidth * this._progress) / 100
-        const wantedHeight = this.bar.height - (2 * this.opts.padding)
-        
-        const barActiveWidth = wantedWidth * this._progress / 100
 
         this.barActive.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha)
         this.barActive.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha)
@@ -1691,7 +1694,7 @@ export default class Progress extends PIXI.Container {
      * @return {Progress} A reference to the progress for chaining.
      */
     show() {
-        TweenLite.to(this, this.theme.fast, {alpha: 1})
+        TweenLite.to(this, this.theme.fast, { alpha: 1 })
 
         return this
     }
@@ -1702,7 +1705,10 @@ export default class Progress extends PIXI.Container {
      * @return {Progress} A reference to the progress for chaining.
      */
     hide() {
-        TweenLite.to(this, this.theme.fast, {alpha: 0, onComplete: () => this.visible = false})
+        TweenLite.to(this, this.theme.fast, {
+            alpha: 0,
+            onComplete: () => (this.visible = false)
+        })
 
         return this
     }
@@ -1716,7 +1722,6 @@ export default class Progress extends PIXI.Container {
         return this._progress
     }
     set progress(value) {
-
         value = Math.round(value)
 
         if (value &lt; 0) {
@@ -1734,7 +1739,7 @@ export default class Progress extends PIXI.Container {
                 if (value === 100 &amp;&amp; this.opts.destroyOnComplete) {
                     TweenLite.to(this, this.theme.fast, {
                         alpha: 0,
-                        onComplete: () => this.destroy({children: true})
+                        onComplete: () => this.destroy({ children: true })
                     })
                 }
             }
@@ -1754,7 +1759,7 @@ export default class Progress extends PIXI.Container {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_scrollview.js.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1466,7 +1472,6 @@
  * @see {@link https://davidfig.github.io/pixi-viewport/jsdoc/Viewport.html|Viewport}
  */
 export default class Scrollview extends Scrollbox {
-    
     /**
      * Creates an instance of a Scrollview.
      *
@@ -1474,18 +1479,9 @@ export default class Scrollview extends Scrollbox {
      * @see https://davidfig.github.io/pixi-scrollbox/jsdoc/Scrollbox.html
      */
     constructor(opts = {}) {
-
         super(opts)
 
         this.opts = opts
-
-        // setup
-        //-----------------
-        this.setup()
-
-        // layout
-        //-----------------
-        this.layout()
     }
 
     /**
@@ -1495,7 +1491,6 @@ export default class Scrollview extends Scrollbox {
      * @return {Scrollview} A reference to the Scrollview for chaining.
      */
     setup() {
-
         return this
     }
 
@@ -1505,7 +1500,6 @@ export default class Scrollview extends Scrollbox {
      * @return {Scrollview} A reference to the Scrollview for chaining.
      */
     layout() {
-
         this.update()
 
         return this
@@ -1524,7 +1518,7 @@ export default class Scrollview extends Scrollbox {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_slider.js.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1491,7 +1497,6 @@ import Tooltip from './tooltip.js'
  * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/slider.html|DocTest}
  */
 export default class Slider extends PIXI.Container {
-    
     /**
      * Creates an instance of a Slider.
      *
@@ -1526,41 +1531,44 @@ export default class Slider extends PIXI.Container {
      * @param {boolean} [opts.visible=true] - Is the slider initially visible (property visible)?
      */
     constructor(opts = {}) {
-
         super()
 
         const theme = Theme.fromString(opts.theme)
         this.theme = theme
 
-        this.opts = Object.assign({}, {
+        this.opts = Object.assign(
-            id: PIXI.utils.uid(),
+            {},
-            x: 0,
+            {
-            y: 0,
+                id: PIXI.utils.uid(),
-            width: 250,
+                x: 0,
-            height: 2,
+                y: 0,
-            container: null,
+                width: 250,
-            fill: theme.fill,
+                height: 2,
-            fillAlpha: theme.fillAlpha,
+                container: null,
-            stroke: theme.stroke,
+                fill: theme.fill,
-            strokeWidth: theme.strokeWidth,
+                fillAlpha: theme.fillAlpha,
-            strokeAlpha: theme.strokeAlpha,
+                stroke: theme.stroke,
-            controlFill: theme.fill,
+                strokeWidth: theme.strokeWidth,
-            controlFillAlpha: .5,
+                strokeAlpha: theme.strokeAlpha,
-            controlStroke: theme.primaryColor,
+                controlFill: theme.fill,
-            controlStrokeWidth: 2,
+                controlFillAlpha: 0.5,
-            controlStrokeAlpha: theme.strokeAlpha,
+                controlStroke: theme.primaryColor,
-            controlRadius: 16,
+                controlStrokeWidth: 2,
-            orientation: 'horizontal',
+                controlStrokeAlpha: theme.strokeAlpha,
-            min: 0,
+                controlRadius: 16,
-            max: 100,
+                orientation: 'horizontal',
-            value: 0,
+                min: 0,
-            disabled: false,
+                max: 100,
-            onStart: null,
+                value: 0,
-            onUpdate: null,
+                disabled: false,
-            onComplete: null,
+                onStart: null,
-            tooltip: null,
+                onUpdate: null,
-            visible: true
+                onComplete: null,
-        }, opts)
+                tooltip: null,
+                visible: true
+            },
+            opts
+        )
 
         this.opts.container = this.opts.container || this
 
@@ -1608,7 +1616,6 @@ export default class Slider extends PIXI.Container {
      * @return {Slider} A reference to the slider for chaining.
      */
     setup() {
-
         // Container events
         //-----------------
         const container = this.opts.container
@@ -1673,16 +1680,16 @@ export default class Slider extends PIXI.Container {
         // interaction
         //-----------------
         this.sliderObj.on('pointerover', e => {
-            TweenLite.to(this.control, this.theme.fast, {alpha: .83})
+            TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
         })
 
         this.sliderObj.on('pointerout', e => {
-            TweenLite.to(this.control, this.theme.fast, {alpha: 1})
+            TweenLite.to(this.control, this.theme.fast, { alpha: 1 })
         })
 
         this.sliderObj.on('pointerdown', e => {
             this.sliderObj.pointerdowned = true
-            TweenLite.to(this.control, this.theme.fast, {alpha: .7})
+            TweenLite.to(this.control, this.theme.fast, { alpha: 0.7 })
         })
 
         // Click on the slider bar
@@ -1691,7 +1698,7 @@ export default class Slider extends PIXI.Container {
                 this.sliderObj.pointerdowned = false
                 const position = e.data.getLocalPosition(this.control.parent)
                 this.value = this.pixelToValue(position.x - this.opts.controlRadius)
-                TweenLite.to(this.control, this.theme.fast, {alpha: .83})
+                TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
             }
         })
 
@@ -1722,7 +1729,6 @@ export default class Slider extends PIXI.Container {
      * @return {Slider} A reference to the slider for chaining.
      */
     layout() {
-        
         // set position
         //-----------------
         this.position.set(this.opts.x, this.opts.y)
@@ -1741,7 +1747,6 @@ export default class Slider extends PIXI.Container {
      * @return {Slider} A reference to the slider for chaining.
      */
     draw() {
-
         const r = this.radius
         const cr = this.opts.controlRadius
         const w = this.opts.width
@@ -1757,7 +1762,7 @@ export default class Slider extends PIXI.Container {
         this.sliderObj.moveTo(x, y)
         this.sliderObj.lineTo(x + w, y)
         this.sliderObj.arcTo(x + w + r, y, x + w + r, y + r, r)
-        this.sliderObj.lineTo(x + w + r, y + r + 1)                     // BUGFIX: If not specified, there is a small area without a stroke.
+        this.sliderObj.lineTo(x + w + r, y + r + 1) // BUGFIX: If not specified, there is a small area without a stroke.
         this.sliderObj.arcTo(x + w + r, y + h, x + w, y + h, r)
         this.sliderObj.lineTo(x, y + h)
         this.sliderObj.arcTo(x - r, y + h, x - r, y + r, r)
@@ -1783,7 +1788,6 @@ export default class Slider extends PIXI.Container {
      * @return {Slider} A reference to the slider for chaining.
      */
     onEnd(e) {
-
         if (this.control.dragging) {
             this.control.event = null
             this.control.dragging = false
@@ -1808,7 +1812,7 @@ export default class Slider extends PIXI.Container {
         } else if (value > this.opts.max) {
             value = this.opts.max
         }
-        return this.opts.width * (value - this.opts.min) / (this.opts.max - this.opts.min)
+        return (this.opts.width * (value - this.opts.min)) / (this.opts.max - this.opts.min)
     }
 
     /**
@@ -1824,7 +1828,7 @@ export default class Slider extends PIXI.Container {
         } else if (pixel > this.opts.width) {
             pixel = this.opts.width
         }
-        return this.opts.min + ((this.opts.max - this.opts.min) * pixel / this.opts.width)
+        return this.opts.min + ((this.opts.max - this.opts.min) * pixel) / this.opts.width
     }
 
     /**
@@ -1845,7 +1849,7 @@ export default class Slider extends PIXI.Container {
 
         const x = this.valueToPixel(value) + this.opts.controlRadius
 
-        TweenLite.to(this.control, this.theme.fast, {x})
+        TweenLite.to(this.control, this.theme.fast, { x })
     }
 
     /**
@@ -1857,7 +1861,6 @@ export default class Slider extends PIXI.Container {
         return this._disabled
     }
     set disabled(value) {
-
         this._disabled = value
 
         if (this._disabled) {
@@ -1865,7 +1868,7 @@ export default class Slider extends PIXI.Container {
             this.sliderObj.interactive = false
             this.control.interactive = false
             this.control.buttonMode = false
-            this.alpha = .5
+            this.alpha = 0.5
         } else {
             this.interactive = true
             this.sliderObj.interactive = true
@@ -1881,7 +1884,6 @@ export default class Slider extends PIXI.Container {
      * @return {Slider} A reference to the slider for chaining.
      */
     show() {
-
         this.opts.strokeAlpha = 1
         this.opts.fillAlpha = 1
         this.opts.controlStrokeAlpha = 1
@@ -1898,7 +1900,6 @@ export default class Slider extends PIXI.Container {
      * @return {Slider} A reference to the slider for chaining.
      */
     hide() {
-
         this.opts.strokeAlpha = 0
         this.opts.fillAlpha = 0
         this.opts.controlStrokeAlpha = 0
@@ -1922,7 +1923,7 @@ export default class Slider extends PIXI.Container {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_switch.js.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1499,7 +1505,6 @@ import Tooltip from './tooltip.js'
  * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/switch.html|DocTest}
  */
 export default class Switch extends PIXI.Container {
-    
     /**
      * Creates an instance of a Switch.
      *
@@ -1546,51 +1551,54 @@ export default class Switch extends PIXI.Container {
      * @param {boolean} [opts.visible=true] - Is the switch initially visible (property visible)?
      */
     constructor(opts = {}) {
-
         super()
 
         const theme = Theme.fromString(opts.theme)
         this.theme = theme
 
-        this.opts = Object.assign({}, {
+        this.opts = Object.assign(
-            id: PIXI.utils.uid(),
+            {},
-            x: 0,
+            {
-            y: 0,
+                id: PIXI.utils.uid(),
-            width: 44,
+                x: 0,
-            height: 28,
+                y: 0,
-            fill: theme.fill,
+                width: 44,
-            fillAlpha: theme.fillAlpha,
+                height: 28,
-            fillActive: theme.primaryColor,
+                fill: theme.fill,
-            fillActiveAlpha: theme.fillActiveAlpha,
+                fillAlpha: theme.fillAlpha,
-            stroke: theme.stroke,
+                fillActive: theme.primaryColor,
-            strokeWidth: theme.strokeWidth,
+                fillActiveAlpha: theme.fillActiveAlpha,
-            strokeAlpha: theme.strokeAlpha,
+                stroke: theme.stroke,
-            strokeActive: theme.primaryColor,
+                strokeWidth: theme.strokeWidth,
-            strokeActiveWidth: theme.strokeActiveWidth,
+                strokeAlpha: theme.strokeAlpha,
-            strokeActiveAlpha: theme.strokeActiveAlpha,
+                strokeActive: theme.primaryColor,
-            controlFill: theme.stroke,
+                strokeActiveWidth: theme.strokeActiveWidth,
-            controlFillAlpha: theme.strokeAlpha,
+                strokeActiveAlpha: theme.strokeActiveAlpha,
-            controlFillActive: theme.stroke,
+                controlFill: theme.stroke,
-            controlFillActiveAlpha: theme.strokeAlpha,
+                controlFillAlpha: theme.strokeAlpha,
-            controlStroke: theme.stroke,
+                controlFillActive: theme.stroke,
-            controlStrokeWidth: theme.strokeWidth * .8,
+                controlFillActiveAlpha: theme.strokeAlpha,
-            controlStrokeAlpha: theme.strokeAlpha,
+                controlStroke: theme.stroke,
-            controlStrokeActive: theme.stroke,
+                controlStrokeWidth: theme.strokeWidth * 0.8,
-            controlStrokeActiveWidth: theme.strokeActiveWidth * .8,
+                controlStrokeAlpha: theme.strokeAlpha,
-            controlStrokeActiveAlpha: theme.strokeActiveAlpha,
+                controlStrokeActive: theme.stroke,
-            duration: theme.fast,
+                controlStrokeActiveWidth: theme.strokeActiveWidth * 0.8,
-            durationActive: theme.fast,
+                controlStrokeActiveAlpha: theme.strokeActiveAlpha,
-            disabled: false,
+                duration: theme.fast,
-            active: false,
+                durationActive: theme.fast,
-            action: null,
+                disabled: false,
-            actionActive: null,
+                active: false,
-            beforeAction: null,
+                action: null,
-            afterAction: null,
+                actionActive: null,
-            tooltip: null,
+                beforeAction: null,
-            visible: true
+                afterAction: null,
-        }, opts)
+                tooltip: null,
+                visible: true
+            },
+            opts
+        )
 
-        this.opts.controlRadius = this.opts.controlRadius || (this.opts.height / 2)
+        this.opts.controlRadius = this.opts.controlRadius || this.opts.height / 2
         this.opts.controlRadiusActive = this.opts.controlRadiusActive || this.opts.controlRadius
 
         // Validation
@@ -1645,7 +1653,6 @@ export default class Switch extends PIXI.Container {
      * @return {Switch} A reference to the switch for chaining.
      */
     setup() {
-
         // Switch
         //-----------------
         let switchObj = new PIXI.Graphics()
@@ -1668,19 +1675,18 @@ export default class Switch extends PIXI.Container {
         // interaction
         //-----------------
         this.switchObj.on('pointerover', e => {
-            TweenLite.to(this.control, this.theme.fast, {alpha: .83})
+            TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
         })
 
         this.switchObj.on('pointerout', e => {
-            TweenLite.to(this.control, this.theme.fast, {alpha: 1})
+            TweenLite.to(this.control, this.theme.fast, { alpha: 1 })
         })
 
         this.switchObj.on('pointerdown', e => {
-            TweenLite.to(this.control, this.theme.fast, {alpha: .7})
+            TweenLite.to(this.control, this.theme.fast, { alpha: 0.7 })
         })
 
         this.switchObj.on('pointerup', e => {
-
             if (this.opts.beforeAction) {
                 this.opts.beforeAction.call(this, e, this)
             }
@@ -1697,7 +1703,7 @@ export default class Switch extends PIXI.Container {
                 }
             }
 
-            TweenLite.to(this.control, this.theme.fast, {alpha: .83})
+            TweenLite.to(this.control, this.theme.fast, { alpha: 0.83 })
 
             if (this.opts.afterAction) {
                 this.opts.afterAction.call(this, e, this)
@@ -1735,7 +1741,6 @@ export default class Switch extends PIXI.Container {
      * @return {Switch} A reference to the switch for chaining.
      */
     layout() {
-        
         // set position
         //-----------------
         this.position.set(this.opts.x, this.opts.y)
@@ -1754,7 +1759,6 @@ export default class Switch extends PIXI.Container {
      * @return {Switch} A reference to the switch for chaining.
      */
     draw() {
-
         this.switchObj.clear()
         if (this.active) {
             this.switchObj.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha)
@@ -1766,8 +1770,14 @@ export default class Switch extends PIXI.Container {
         this.switchObj.moveTo(this.radius, 0)
         this.switchObj.lineTo(this.opts.width - this.radius, 0)
         this.switchObj.arcTo(this.opts.width, 0, this.opts.width, this.radius, this.radius)
-        this.switchObj.lineTo(this.opts.width, this.radius + 1)                                   // BUGFIX: If not specified, there is a small area without a stroke.
+        this.switchObj.lineTo(this.opts.width, this.radius + 1) // BUGFIX: If not specified, there is a small area without a stroke.
-        this.switchObj.arcTo(this.opts.width, this.opts.height, this.opts.width - this.radius, this.opts.height, this.radius)
+        this.switchObj.arcTo(
+            this.opts.width,
+            this.opts.height,
+            this.opts.width - this.radius,
+            this.opts.height,
+            this.radius
+        )
         this.switchObj.lineTo(this.radius, this.opts.height)
         this.switchObj.arcTo(0, this.opts.height, 0, this.radius, this.radius)
         this.switchObj.arcTo(0, 0, this.radius, 0, this.radius)
@@ -1776,7 +1786,11 @@ export default class Switch extends PIXI.Container {
         // Draw control
         this.control.clear()
         if (this.active) {
-            this.control.lineStyle(this.opts.controlStrokeActiveWidth, this.opts.controlStrokeActive, this.opts.controlStrokeActiveAlpha)
+            this.control.lineStyle(
+                this.opts.controlStrokeActiveWidth,
+                this.opts.controlStrokeActive,
+                this.opts.controlStrokeActiveAlpha
+            )
             this.control.beginFill(this.opts.controlFillActive, this.opts.controlFillActiveAlpha)
             this.control.drawCircle(0, 0, this.opts.controlRadiusActive - 1)
         } else {
@@ -1796,22 +1810,31 @@ export default class Switch extends PIXI.Container {
      * @return {Switch} A reference to the switch for chaining.
      */
     drawAnimated() {
-
         this.switchObj.clear()
         this.switchObj.lineStyle(this.tempAnimated.strokeWidth, this.tempAnimated.stroke, this.tempAnimated.strokeAlpha)
         this.switchObj.beginFill(this.tempAnimated.fill, this.tempAnimated.fillAlpha)
         this.switchObj.moveTo(this.radius, 0)
         this.switchObj.lineTo(this.opts.width - this.radius, 0)
         this.switchObj.arcTo(this.opts.width, 0, this.opts.width, this.radius, this.radius)
-        this.switchObj.lineTo(this.opts.width, this.radius + 1)                                   // BUGFIX: If not specified, there is a small area without a stroke.
+        this.switchObj.lineTo(this.opts.width, this.radius + 1) // BUGFIX: If not specified, there is a small area without a stroke.
-        this.switchObj.arcTo(this.opts.width, this.opts.height, this.opts.width - this.radius, this.opts.height, this.radius)
+        this.switchObj.arcTo(
+            this.opts.width,
+            this.opts.height,
+            this.opts.width - this.radius,
+            this.opts.height,
+            this.radius
+        )
         this.switchObj.lineTo(this.radius, this.opts.height)
         this.switchObj.arcTo(0, this.opts.height, 0, this.radius, this.radius)
         this.switchObj.arcTo(0, 0, this.radius, 0, this.radius)
         this.switchObj.endFill()
 
         this.control.clear()
-        this.control.lineStyle(this.tempAnimated.controlStrokeWidth, this.tempAnimated.controlStroke, this.tempAnimated.controlStrokeAlpha)
+        this.control.lineStyle(
+            this.tempAnimated.controlStrokeWidth,
+            this.tempAnimated.controlStroke,
+            this.tempAnimated.controlStrokeAlpha
+        )
         this.control.beginFill(this.tempAnimated.controlFill, this.tempAnimated.controlFillAlpha)
         this.control.drawCircle(0, 0, this.tempAnimated.controlRadius - 1)
         this.control.endFill()
@@ -1829,12 +1852,10 @@ export default class Switch extends PIXI.Container {
     }
 
     set active(value) {
-
         this._active = value
 
         if (this._active) {
-
+            TweenLite.to(this.control, this.opts.duration, { x: this.xActive })
-            TweenLite.to(this.control, this.opts.duration, {x: this.xActive})
             TweenLite.to(this.tempAnimated, this.opts.duration, {
                 colorProps: {
                     fill: this.opts.fillActive,
@@ -1853,10 +1874,10 @@ export default class Switch extends PIXI.Container {
                 onUpdate: () => this.drawAnimated(),
                 onComplete: () => this.draw()
             })
-
-
         } else {
-            TweenLite.to(this.control, this.opts.durationActive, {x: this.xInactive})
+            TweenLite.to(this.control, this.opts.durationActive, {
+                x: this.xInactive
+            })
             TweenLite.to(this.tempAnimated, this.opts.durationActive, {
                 colorProps: {
                     fill: this.opts.fill,
@@ -1888,14 +1909,13 @@ export default class Switch extends PIXI.Container {
     }
 
     set disabled(value) {
-
         this._disabled = value
 
         if (this._disabled) {
             this.switchObj.interactive = false
             this.switchObj.buttonMode = false
-            this.switchObj.alpha = .5
+            this.switchObj.alpha = 0.5
-            this.control.alpha = .5
+            this.control.alpha = 0.5
         } else {
             this.switchObj.interactive = true
             this.switchObj.buttonMode = true
@@ -1910,7 +1930,6 @@ export default class Switch extends PIXI.Container {
      * @return {Switch} A reference to the switch for chaining.
      */
     show() {
-
         this.opts.strokeAlpha = 1
         this.opts.strokeActiveAlpha = 1
         this.opts.fillAlpha = 1
@@ -1931,7 +1950,6 @@ export default class Switch extends PIXI.Container {
      * @return {Switch} A reference to the switch for chaining.
      */
     hide() {
-
         this.opts.strokeAlpha = 0
         this.opts.strokeActiveAlpha = 0
         this.opts.fillAlpha = 0
@@ -1959,7 +1977,7 @@ export default class Switch extends PIXI.Container {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_theme.js.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1471,7 +1477,6 @@
  * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest}
  */
 export default class Theme {
-
     /**
      * Creates an instance of a Theme.
      *
@@ -1519,54 +1524,91 @@ export default class Theme {
      *     large text.
      * @param {object} [opts.textStyleLargeActive=textStyleLarge + {fill: primaryColor}] - A textstyle object which
      *     is used for large actived text.
+     * @param {number} [opts.textAlpha=Theme.textAlpha] - The alpha value of text.
+     * @param {number} [opts.textActiveAlpha=Theme.textActiveAlpha] - The alpha value of text when activated.
      */
     constructor(opts = {}) {
+        const colorPrimary = opts.primaryColor != null ? opts.primaryColor : 0x5ec7f8 // blue
+        const color1 = opts.color1 != null ? opts.color1 : 0x282828 // black
+        const color2 = opts.color2 != null ? opts.color2 : 0xf6f6f6 // white
 
-        const colorPrimary = opts.primaryColor != null ? opts.primaryColor : 0x5ec7f8               // blue
+        this.opts = Object.assign(
-        const color1 = opts.color1 != null ? opts.color1 : 0x282828                                 // black
+            {},
-        const color2 = opts.color2 != null ? opts.color2 : 0xf6f6f6                                 // white
+            {
-
+                margin: 12,
-        this.opts = Object.assign({}, {
+                padding: 12,
-            margin: 12,
+                radius: 4,
-            padding: 12,
+                fast: 0.25,
-            radius: 4,
+                normal: 0.5,
-            fast: .25,
+                slow: 1,
-            normal: .5,
+                primaryColor: colorPrimary,
-            slow: 1,
+                color1: color1,
-            primaryColor: colorPrimary,
+                color2: color2,
-            color1: color1,
+                fill: color1,
-            color2: color2,
+                fillAlpha: 1,
-            fill: color1,
+                fillActive: color1,
-            fillAlpha: 1,
+                fillActiveAlpha: 1,
-            fillActive: color1,
+                stroke: color2,
-            fillActiveAlpha: 1,
+                strokeWidth: 0.6,
-            stroke: color2,
+                strokeAlpha: 1,
-            strokeWidth: .6,
+                strokeActive: color2,
-            strokeAlpha: 1,
+                strokeActiveWidth: 0.6,
-            strokeActive: color2,
+                strokeActiveAlpha: 1,
-            strokeActiveWidth: .6,
+                textAlpha: 1,
-            strokeActiveAlpha: 1,
+                textActiveAlpha: 1,
-            iconColor: color2,
+                iconColor: color2,
-            iconColorActive: colorPrimary,
+                iconColorActive: colorPrimary,
-            background: color1
+                background: color1
-        }, opts)
+            },
+            opts
+        )
 
         // Set textStyle and variants
-        this.opts.textStyle = Object.assign({}, {
+        this.opts.textStyle = Object.assign(
-            fontFamily: '"Avenir Next", "Open Sans", "Segoe UI", "Roboto", "Helvetica Neue", -apple-system, system-ui, BlinkMacSystemFont, Arial, sans-serif !default',
+            {},
-            fontWeight: '500',
+            {
-            fontSize: 18,
+                fontFamily:
-            fill: color2,
+                    '"Avenir Next", "Open Sans", "Segoe UI", "Roboto", "Helvetica Neue", -apple-system, system-ui, BlinkMacSystemFont, Arial, sans-serif !default',
-            stroke: color1,
+                fontWeight: '500',
-            strokeThickness: 0,
+                fontSize: 18,
-            miterLimit: 1,
+                fill: color2,
-            lineJoin: 'round'
+                stroke: color1,
-        }, this.opts.textStyle)
+                strokeThickness: 0,
-        this.opts.textStyleSmall = Object.assign({}, this.opts.textStyle, {fontSize: this.opts.textStyle.fontSize - 3}, this.opts.textStyleSmall)
+                miterLimit: 1,
-        this.opts.textStyleLarge = Object.assign({}, this.opts.textStyle, {fontSize: this.opts.textStyle.fontSize + 3}, this.opts.textStyleLarge)
+                lineJoin: 'round'
-        this.opts.textStyleActive = Object.assign({}, this.opts.textStyle, {fill: this.opts.primaryColor}, this.opts.textStyleActive)
+            },
-        this.opts.textStyleSmallActive = Object.assign({}, this.opts.textStyleSmall, {fill: this.opts.primaryColor}, this.opts.textStyleSmallActive)
+            this.opts.textStyle
-        this.opts.textStyleLargeActive = Object.assign({}, this.opts.textStyleLarge, {fill: this.opts.primaryColor}, this.opts.textStyleLargeActive)
+        )
+        this.opts.textStyleSmall = Object.assign(
+            {},
+            this.opts.textStyle,
+            { fontSize: this.opts.textStyle.fontSize - 3 },
+            this.opts.textStyleSmall
+        )
+        this.opts.textStyleLarge = Object.assign(
+            {},
+            this.opts.textStyle,
+            { fontSize: this.opts.textStyle.fontSize + 3 },
+            this.opts.textStyleLarge
+        )
+        this.opts.textStyleActive = Object.assign(
+            {},
+            this.opts.textStyle,
+            { fill: this.opts.primaryColor },
+            this.opts.textStyleActive
+        )
+        this.opts.textStyleSmallActive = Object.assign(
+            {},
+            this.opts.textStyleSmall,
+            { fill: this.opts.primaryColor },
+            this.opts.textStyleSmallActive
+        )
+        this.opts.textStyleLargeActive = Object.assign(
+            {},
+            this.opts.textStyleLarge,
+            { fill: this.opts.primaryColor },
+            this.opts.textStyleLargeActive
+        )
 
         Object.assign(this, this.opts)
     }
@@ -1579,7 +1621,6 @@ export default class Theme {
      * @return {Theme} Returns a newly created Theme object.
      */
     static fromString(theme) {
-
         if (theme &amp;&amp; typeof theme === 'object') {
             return theme
         }
@@ -1611,9 +1652,7 @@ export default class Theme {
  * @extends Theme
  * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest}
  */
-export class ThemeDark extends Theme {
+export class ThemeDark extends Theme {}
-
-}
 
 /**
  * Class that represents a PixiJS ThemeLight.
@@ -1633,15 +1672,13 @@ export class ThemeDark extends Theme {
  * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest}
  */
 export class ThemeLight extends Theme {
-
     /**
      * Creates an instance of a ThemeLight.
      *
      * @constructor
      */
     constructor() {
-
+        super({ color1: 0xf6f6f6, color2: 0x282828 })
-        super({color1: 0xf6f6f6, color2: 0x282828})
     }
 }
 
@@ -1663,15 +1700,13 @@ export class ThemeLight extends Theme {
  * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest}
  */
 export class ThemeRed extends Theme {
-
     /**
      * Creates an instance of a ThemeRed.
      *
      * @constructor
      */
     constructor() {
-
+        super({ primaryColor: 0xd92f31 })
-        super({primaryColor: 0xd92f31})
     }
 }
 </code></pre>
@@ -1687,7 +1722,7 @@ export class ThemeRed extends Theme {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_tooltip.js.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1469,7 +1475,6 @@ import AbstractPopup from './abstractpopup.js'
  * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/tooltip.html|DocTest}
  */
 export default class Tooltip extends AbstractPopup {
-    
     /**
      * Creates an instance of a Tooltip.
      *
@@ -1485,19 +1490,22 @@ export default class Tooltip extends AbstractPopup {
      * @param {number} [opts.delay=0] - A delay, after which the tooltip should be opened.
      */
     constructor(opts = {}) {
-        
         const theme = Theme.fromString(opts.theme)
 
-        opts = Object.assign({}, {
+        opts = Object.assign(
-            minWidth: 0,
+            {},
-            minHeight: 0,
+            {
-            padding: theme.padding / 2,
+                minWidth: 0,
-            object: null,
+                minHeight: 0,
-            container: null,
+                padding: theme.padding / 2,
-            offsetLeft: 8,
+                object: null,
-            offsetTop: -8,
+                container: null,
-            delay: 0
+                offsetLeft: 8,
-        }, opts)
+                offsetTop: -8,
+                delay: 0
+            },
+            opts
+        )
 
         opts.container = opts.container || opts.object
 
@@ -1519,7 +1527,6 @@ export default class Tooltip extends AbstractPopup {
      * @return {Tooltip} A reference to the tooltip for chaining.
      */
     setup() {
-
         super.setup()
 
         // bind events this
@@ -1549,7 +1556,6 @@ export default class Tooltip extends AbstractPopup {
         let mouseoverObject = false
 
         object.on('mouseover', e => {
-
             this.timeout = window.setTimeout(() => {
                 mouseoverObject = true
                 this.visible = true
@@ -1584,7 +1590,6 @@ export default class Tooltip extends AbstractPopup {
      * @return {Tooltip} A reference to the tooltip for chaining.
      */
     setPosition(e) {
-
         const position = e.data.getLocalPosition(this.opts.container)
 
         this.x = position.x + this.opts.offsetLeft
@@ -1606,7 +1611,7 @@ export default class Tooltip extends AbstractPopup {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/pixi_volatile.js.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1469,7 +1475,6 @@ import Theme from './theme.js'
  * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/volatile.html|DocTest}
  */
 export default class Volatile {
-    
     /**
      * Creates an instance of a Volatile.
      *
@@ -1486,21 +1491,24 @@ export default class Volatile {
      * @param {boolean} [opts.destroyOnComplete=true] - Should the object be destroyed after the volatile animation?
      */
     constructor(opts = {}) {
-        
         const theme = Theme.fromString(opts.theme)
         this.theme = theme
 
-        this.opts = Object.assign({}, {
+        this.opts = Object.assign(
-            id: PIXI.utils.uid(),
+            {},
-            object: null,
+            {
-            direction: 'top',               // top, right, bottom, left
+                id: PIXI.utils.uid(),
-            onStart: null,
+                object: null,
-            onComplete: null,
+                direction: 'top', // top, right, bottom, left
-            distance: 160,
+                onStart: null,
-            duration: 1.5,
+                onComplete: null,
-            ease: Quad.easeOut,
+                distance: 160,
-            destroyOnComplete: true
+                duration: 1.5,
-        }, opts)
+                ease: Quad.easeOut,
+                destroyOnComplete: true
+            },
+            opts
+        )
 
         this.id = this.opts.id
 
@@ -1530,7 +1538,6 @@ export default class Volatile {
      * @return {Volatile} A reference to the volatile for chaining.
      */
     setup() {
-
         return this
     }
 
@@ -1540,7 +1547,6 @@ export default class Volatile {
      * @return {Volatile} A reference to the volatile for chaining.
      */
     layout() {
-        
         return this
     }
 
@@ -1551,9 +1557,7 @@ export default class Volatile {
      * @return {Volatile} A reference to the volatile for chaining.
      */
     run() {
-
         for (let object of this.objects) {
-
             let x = object.x
             let y = object.y
 
@@ -1584,13 +1588,12 @@ export default class Volatile {
                     }
                 },
                 onComplete: () => {
-                    
                     if (this.opts.onComplete) {
                         this.opts.onComplete.call(object, object)
                     }
 
                     if (this.opts.destroyOnComplete) {
-                        object.destroy({children: true})
+                        object.destroy({ children: true })
                     }
                 }
             })
@@ -1612,7 +1615,7 @@ export default class Volatile {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

doc/out/uitest.js.html

@@ -252,6 +252,10 @@
             
                 <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
             
+                <li class="parent " data-name="ButtonGroup#maxHeight"><a href="ButtonGroup.html#maxHeight">maxHeight</a></li>
+            
+                <li class="parent " data-name="ButtonGroup#maxWidth"><a href="ButtonGroup.html#maxWidth">maxWidth</a></li>
+            
             </ul>
             <ul class="typedefs itemMembers">
             
@@ -263,6 +267,8 @@
             
             <span class="subtitle">Methods</span>
             
+                <li class="parent  " data-name="ButtonGroup#capture"><a href="ButtonGroup.html#capture">capture</a></li>
+            
                 <li class="parent  " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
             
                 <li class="parent  " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
@@ -1464,7 +1470,6 @@
  * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/uitest.html|DocTest}
  */
 export default class UITest {
-
     /**
      * Creates an instance of an UITest.
      *
@@ -1478,19 +1483,28 @@ export default class UITest {
      * @param {number} [opts.defaultInterval] - The interval used when no action is specified for an action.
      */
     constructor(opts = {}) {
-
+        this.opts = Object.assign(
-        this.opts = Object.assign({}, {
+            {},
-            timeScale: 1,
+            {
-            eventType: 'auto',
+                timeScale: 1,
-            debug: false,
+                eventType: 'auto',
-            defaultInterval: null
+                debug: false,
-        }, opts)
+                defaultInterval: null
+            },
+            opts
+        )
 
         // timeline
         //--------------------
-        this._timeline = new TimelineMax(Object.assign({}, {
+        this._timeline = new TimelineMax(
-            paused: true
+            Object.assign(
-        }, this.opts))
+                {},
+                {
+                    paused: true
+                },
+                this.opts
+            )
+        )
         this._timeline.timeScale(this.opts.timeScale)
 
         // eventType
@@ -1592,27 +1606,36 @@ export default class UITest {
      * @param {boolean} [opts.cancelable=true] - Events' cancelable property indicates if the event can be canceled, and therefore prevented as if the event never happened. If the event is not cancelable, then its cancelable property will be false and the event listener cannot stop the event from occurring.
      */
     tap(element, position, timelinePosition, opts = {}) {
-        
         // arguments
         //--------------------
-        [position, timelinePosition, opts] = this.reorderArguments(arguments)
+        ;[position, timelinePosition, opts] = this.reorderArguments(arguments)
         this._timelinePositions.push(timelinePosition)
 
         // debug
         //--------------------
-        if (this.opts.debug) console.log('tap params', {element, position, timelinePosition, opts})
+        if (this.opts.debug)
+            console.log('tap params', {
+                element,
+                position,
+                timelinePosition,
+                opts
+            })
 
         // opts
         //--------------------
-        opts = Object.assign({}, {
+        opts = Object.assign(
-            onStart: null,
+            {},
-            onComplete: null,
+            {
-            eventTypes: this.resolveEvents(['down', 'up']),
+                onStart: null,
-            eventType: null,
+                onComplete: null,
-            context: window,
+                eventTypes: this.resolveEvents(['down', 'up']),
-            bubbles: true,
+                eventType: null,
-            cancelable: true
+                context: window,
-        }, opts)
+                bubbles: true,
+                cancelable: true
+            },
+            opts
+        )
 
         if (opts.eventType) {
             opts.eventTypes = opts.eventType
@@ -1621,62 +1644,66 @@ export default class UITest {
 
         // timeline
         //--------------------
-        this._timeline.addCallback(position => {
+        this._timeline.addCallback(
+            position => {
+                // element
+                //--------------------
+                const elem = Util.extractElement(opts.context, element)
 
-            // element
+                // position
-            //--------------------
+                //--------------------
-            const elem = Util.extractElement(opts.context, element)
+                if (position === null) {
+                    const rect = elem.getBoundingClientRect()
+                    position = [rect.width / 2, rect.height / 2]
+                }
 
-            // position
+                // coords
-            //--------------------
+                //--------------------
-            if (position === null) {
+                const coords = Util.extractPosition(position)
-                const rect = elem.getBoundingClientRect()
+                if (this.opts.debug) console.log('local coords', coords)
-                position = [rect.width / 2, rect.height / 2]
-            }
 
-            // coords
+                // eventTypes
-            //--------------------
+                //--------------------
-            const coords = Util.extractPosition(position)
+                if (opts.eventTypes.length === 1) {
-            if (this.opts.debug) console.log('local coords', coords)
+                    opts.eventTypes.unshift(null)
+                }
 
-            // eventTypes
+                // event opts
-            //--------------------
+                //--------------------
-            if (opts.eventTypes.length === 1) {
+                const eventOpts = {
-                opts.eventTypes.unshift(null)
+                    bubbles: opts.bubbles,
-            }
+                    cancelable: opts.cancelable
+                }
 
-            // event opts
+                if (opts.eventTypes[0]) {
-            //--------------------
+                    // create and dispatch event
-            const eventOpts = {bubbles: opts.bubbles, cancelable: opts.cancelable}
+                    //--------------------
+                    const eventStart = Event.create(elem, coords, opts.eventTypes[0], eventOpts)
+                    if (this.opts.debug) console.log('dispatch event', eventStart)
+                    elem.dispatchEvent(eventStart)
 
-            if (opts.eventTypes[0]) {
+                    // onStart
+                    //--------------------
+                    if (opts.onStart) {
+                        opts.onStart.call(this, eventStart)
+                    }
+                }
 
                 // create and dispatch event
                 //--------------------
-                const eventStart = Event.create(elem, coords, opts.eventTypes[0], eventOpts)
+                const eventComplete = Event.create(elem, coords, opts.eventTypes[1], eventOpts)
-                if (this.opts.debug) console.log('dispatch event', eventStart)
+                if (this.opts.debug) console.log('dispatch event', eventComplete)
-                elem.dispatchEvent(eventStart)
+                elem.dispatchEvent(eventComplete)
 
-                // onStart
+                // onComplete
                 //--------------------
-                if (opts.onStart) {
+                if (opts.onComplete) {
-                    opts.onStart.call(this, eventStart)
+                    opts.onComplete.call(this, eventComplete)
                 }
-            }
+            },
-
+            timelinePosition,
-            // create and dispatch event
+            [position]
-            //--------------------
+        )
-            const eventComplete = Event.create(elem, coords, opts.eventTypes[1], eventOpts)
-            if (this.opts.debug) console.log('dispatch event', eventComplete)
-            elem.dispatchEvent(eventComplete)
-
-            // onComplete
-            //--------------------
-            if (opts.onComplete) {
-                opts.onComplete.call(this, eventComplete)
-            }
-            
-        }, timelinePosition, [position])
 
         this._actions++
 
@@ -1702,103 +1729,114 @@ export default class UITest {
      * @param {boolean} [opts.cancelable=true] - Events' cancelable property indicates if the event can be canceled, and therefore prevented as if the event never happened. If the event is not cancelable, then its cancelable property will be false and the event listener cannot stop the event from occurring.
      */
     pan(element, position, timelinePosition, opts = {}) {
-
         // arguments
         //--------------------
-        [position, timelinePosition, opts] = this.reorderArguments(arguments)
+        ;[position, timelinePosition, opts] = this.reorderArguments(arguments)
         this._timelinePositions.push(timelinePosition)
 
         // debug
         //--------------------
-        if (this.opts.debug) console.log('tap params', {element, position, timelinePosition, opts})
+        if (this.opts.debug)
+            console.log('tap params', {
+                element,
+                position,
+                timelinePosition,
+                opts
+            })
 
         // opts
         //--------------------
-        opts = Object.assign({}, {
+        opts = Object.assign(
-            onStart: null,
+            {},
-            onUpdate: null,
+            {
-            onComplete: null,
+                onStart: null,
-            to: {x: 0, y: 0},
+                onUpdate: null,
-            duration: 1,
+                onComplete: null,
-            ease: Power0.easeNone,
+                to: { x: 0, y: 0 },
-            eventTypes: this.resolveEvents(['down', 'move', 'up']),
+                duration: 1,
-            context: window,
+                ease: Power0.easeNone,
-            bubbles: true,
+                eventTypes: this.resolveEvents(['down', 'move', 'up']),
-            cancelable: true
+                context: window,
-        }, opts)
+                bubbles: true,
+                cancelable: true
+            },
+            opts
+        )
 
         // timeline
         //--------------------
-        this._timeline.addCallback(position => {
+        this._timeline.addCallback(
+            position => {
+                // element
+                //--------------------
+                const elem = Util.extractElement(opts.context, element)
 
-            // element
+                // coords
-            //--------------------
+                //--------------------
-            const elem = Util.extractElement(opts.context, element)
+                const from = Util.extractPosition(position)
 
-            // coords
+                // event opts
-            //--------------------
+                //--------------------
-            const from = Util.extractPosition(position)
+                const eventOpts = {
+                    bubbles: opts.bubbles,
+                    cancelable: opts.cancelable
+                }
 
-            // event opts
+                const gsOpts = {
-            //--------------------
+                    ease: opts.ease,
-            const eventOpts = {bubbles: opts.bubbles, cancelable: opts.cancelable}
+                    onStart: () => {
+                        // create and dispatch event
+                        //--------------------
+                        const event = Event.create(elem, from, opts.eventTypes[0], eventOpts)
+                        if (this.opts.debug) console.log('dispatch event', event)
+                        elem.dispatchEvent(event)
 
-            const gsOpts = {
+                        // onStart
-                ease: opts.ease,
+                        //--------------------
-                onStart: () => {
+                        if (opts.onStart) {
+                            opts.onStart.call(this, event)
+                        }
+                    },
+                    onUpdate: () => {
+                        // create and dispatch event
+                        //--------------------
+                        const event = Event.create(elem, from, opts.eventTypes[1], eventOpts)
+                        if (this.opts.debug) console.log('dispatch event', event)
+                        elem.dispatchEvent(event)
 
-                    // create and dispatch event
+                        // onUpdate
-                    //--------------------
+                        //--------------------
-                    const event = Event.create(elem, from, opts.eventTypes[0], eventOpts)
+                        if (opts.onUpdate) {
-                    if (this.opts.debug) console.log('dispatch event', event)
+                            opts.onUpdate.call(this, event)
-                    elem.dispatchEvent(event)
+                        }
+                    },
+                    onComplete: () => {
+                        // create and dispatch event
+                        //--------------------
+                        const event = Event.create(elem, from, opts.eventTypes[2], eventOpts)
+                        if (this.opts.debug) console.log('dispatch event', event)
+                        elem.dispatchEvent(event)
 
-                    // onStart
+                        // onComplete
-                    //--------------------
+                        //--------------------
-                    if (opts.onStart) {
+                        if (opts.onComplete) {
-                        opts.onStart.call(this, event)
+                            opts.onComplete.call(this, event)
-                    }
+                        }
-                },
-                onUpdate: () => {
-
-                    // create and dispatch event
-                    //--------------------
-                    const event = Event.create(elem, from, opts.eventTypes[1], eventOpts)
-                    if (this.opts.debug) console.log('dispatch event', event)
-                    elem.dispatchEvent(event)
-
-                    // onUpdate
-                    //--------------------
-                    if (opts.onUpdate) {
-                        opts.onUpdate.call(this, event)
-                    }
-                },
-                onComplete: () => {
-
-                    // create and dispatch event
-                    //--------------------
-                    const event = Event.create(elem, from, opts.eventTypes[2], eventOpts)
-                    if (this.opts.debug) console.log('dispatch event', event)
-                    elem.dispatchEvent(event)
-
-                    // onComplete
-                    //--------------------
-                    if (opts.onComplete) {
-                        opts.onComplete.call(this, event)
                     }
                 }
-            }
 
-            // to
+                // to
-            //--------------------
+                //--------------------
-            const object = Util.extractTo(opts)
+                const object = Util.extractTo(opts)
-            Object.assign(gsOpts, object)
+                Object.assign(gsOpts, object)
 
-            // drag animation
+                // drag animation
-            //--------------------
+                //--------------------
-            TweenLite.to(from, opts.duration, gsOpts)
+                TweenLite.to(from, opts.duration, gsOpts)
-
+            },
-        }, timelinePosition, [position])
+            timelinePosition,
+            [position]
+        )
 
         this._actions++
 
@@ -1827,144 +1865,156 @@ export default class UITest {
      * @param {boolean} [opts.cancelable=true] - Events' cancelable property indicates if the event can be canceled, and therefore prevented as if the event never happened. If the event is not cancelable, then its cancelable property will be false and the event listener cannot stop the event from occurring.
      */
     pinch(element, position, timelinePosition, opts = {}) {
-
         // arguments
         //--------------------
-        [position, timelinePosition, opts] = this.reorderArguments(arguments)
+        ;[position, timelinePosition, opts] = this.reorderArguments(arguments)
         this._timelinePositions.push(timelinePosition)
 
         // debug
         //--------------------
-        if (this.opts.debug) console.log('tap params', {element, position, timelinePosition, opts})
+        if (this.opts.debug)
+            console.log('tap params', {
+                element,
+                position,
+                timelinePosition,
+                opts
+            })
 
         // opts
         //--------------------
-        opts = Object.assign({}, {
+        opts = Object.assign(
-            onStart: null,
+            {},
-            onUpdate: null,
+            {
-            onComplete: null,
+                onStart: null,
-            doubleCallbacks: false,
+                onUpdate: null,
-            duration: 1,
+                onComplete: null,
-            distance: 100,
+                doubleCallbacks: false,
-            to: null,
+                duration: 1,
-            bezier: null,
+                distance: 100,
-            ease: Power0.easeNone,
+                to: null,
-            eventTypes: this.resolveEvents(['down', 'move', 'up']),
+                bezier: null,
-            context: window,
+                ease: Power0.easeNone,
-            bubbles: true,
+                eventTypes: this.resolveEvents(['down', 'move', 'up']),
-            cancelable: true
+                context: window,
-        }, opts)
+                bubbles: true,
+                cancelable: true
+            },
+            opts
+        )
 
         // timeline
         //--------------------
-        this._timeline.addCallback(position => {
+        this._timeline.addCallback(
-
+            position => {
-            // element
+                // element
-            //--------------------
+                //--------------------
-            const elem = Util.extractElement(opts.context, element)
+                const elem = Util.extractElement(opts.context, element)
-
-            // from
-            //--------------------
-            let from1 = null
-            let from2 = null
-
-            if (Array.isArray(position) &amp;&amp; !Util.isNumber(position[0])) {
-                from1 = Util.extractPosition(position[0])
-                from2 = Util.extractPosition(position[1])
-            } else {
-                from1 = Util.extractPosition(position)
-                from2 = {x: from1.x, y: from1.y}
-            }
-
-            // to
-            //--------------------
-            let gsOpts1 = {}
-            let gsOpts2 = {}
-
-            if (opts.to || opts.bezier) {
-                [gsOpts1, gsOpts2] = Util.extractMultiTo(opts)
-            } else {
-                const distance = opts.distance != null ? opts.distance : 100
-                gsOpts1.x = from1.x - distance / 2
-                gsOpts1.y = from1.y
-                gsOpts2.x = from2.x + distance / 2
-                gsOpts2.y = from2.y
-            }
-
-            // pointers
-            //--------------------
-            const pointers = new Map()
-            pointers.set(0, {element: from1, gsOpts: gsOpts1})
-            pointers.set(1, {element: from2, gsOpts: gsOpts2})
-
-            // loop
-            //--------------------
-            pointers.forEach((value, key) => {
 
                 // from
                 //--------------------
-                const from = value.element
+                let from1 = null
+                let from2 = null
 
-                // event opts
+                if (Array.isArray(position) &amp;&amp; !Util.isNumber(position[0])) {
-                //--------------------
+                    from1 = Util.extractPosition(position[0])
-                const eventOpts = {bubbles: opts.bubbles, cancelable: opts.cancelable, pointerId: key, isPrimary: key === 0}
+                    from2 = Util.extractPosition(position[1])
-
+                } else {
-                const gsOpts = {
+                    from1 = Util.extractPosition(position)
-                    ease: opts.ease,
+                    from2 = { x: from1.x, y: from1.y }
-                    onStart: () => {
-
-                        // create and dispatch event
-                        //--------------------
-                        const event = Event.create(elem, from, opts.eventTypes[0], eventOpts)
-                        if (this.opts.debug) console.log('dispatch event', event)
-                        elem.dispatchEvent(event)
-
-                        // onStart
-                        //--------------------
-                        if (opts.onStart &amp;&amp; (opts.doubleCallbacks || key === 0)) {
-                            opts.onStart.call(this, event)
-                        }
-                    },
-                    onUpdate: () => {
-
-                        // create and dispatch event
-                        //--------------------
-                        const event = Event.create(elem, from, opts.eventTypes[1], eventOpts)
-                        if (this.opts.debug) console.log('dispatch event', event)
-                        elem.dispatchEvent(event)
-
-                        // onUpdate
-                        //--------------------
-                        if (opts.onUpdate &amp;&amp; (opts.doubleCallbacks || key === 0)) {
-                            opts.onUpdate.call(this, event)
-                        }
-                    },
-                    onComplete: () => {
-
-                        // create and dispatch event
-                        //--------------------
-                        const event = Event.create(elem, from, opts.eventTypes[2], eventOpts)
-                        if (this.opts.debug) console.log('dispatch event', event)
-                        elem.dispatchEvent(event)
-
-                        // onComplete
-                        //--------------------
-                        if (opts.onComplete &amp;&amp; (opts.doubleCallbacks || key === 0)) {
-                            opts.onComplete.call(this, event)
-                        }
-                    }
                 }
 
                 // to
                 //--------------------
-                Object.assign(gsOpts, value.gsOpts)
+                let gsOpts1 = {}
+                let gsOpts2 = {}
 
-                // drag animation
+                if (opts.to || opts.bezier) {
+                    ;[gsOpts1, gsOpts2] = Util.extractMultiTo(opts)
+                } else {
+                    const distance = opts.distance != null ? opts.distance : 100
+                    gsOpts1.x = from1.x - distance / 2
+                    gsOpts1.y = from1.y
+                    gsOpts2.x = from2.x + distance / 2
+                    gsOpts2.y = from2.y
+                }
+
+                // pointers
                 //--------------------
-                TweenLite.to(from, opts.duration, gsOpts)
+                const pointers = new Map()
-            })
+                pointers.set(0, { element: from1, gsOpts: gsOpts1 })
+                pointers.set(1, { element: from2, gsOpts: gsOpts2 })
 
-        }, timelinePosition, [position])
+                // loop
+                //--------------------
+                pointers.forEach((value, key) => {
+                    // from
+                    //--------------------
+                    const from = value.element
+
+                    // event opts
+                    //--------------------
+                    const eventOpts = {
+                        bubbles: opts.bubbles,
+                        cancelable: opts.cancelable,
+                        pointerId: key,
+                        isPrimary: key === 0
+                    }
+
+                    const gsOpts = {
+                        ease: opts.ease,
+                        onStart: () => {
+                            // create and dispatch event
+                            //--------------------
+                            const event = Event.create(elem, from, opts.eventTypes[0], eventOpts)
+                            if (this.opts.debug) console.log('dispatch event', event)
+                            elem.dispatchEvent(event)
+
+                            // onStart
+                            //--------------------
+                            if (opts.onStart &amp;&amp; (opts.doubleCallbacks || key === 0)) {
+                                opts.onStart.call(this, event)
+                            }
+                        },
+                        onUpdate: () => {
+                            // create and dispatch event
+                            //--------------------
+                            const event = Event.create(elem, from, opts.eventTypes[1], eventOpts)
+                            if (this.opts.debug) console.log('dispatch event', event)
+                            elem.dispatchEvent(event)
+
+                            // onUpdate
+                            //--------------------
+                            if (opts.onUpdate &amp;&amp; (opts.doubleCallbacks || key === 0)) {
+                                opts.onUpdate.call(this, event)
+                            }
+                        },
+                        onComplete: () => {
+                            // create and dispatch event
+                            //--------------------
+                            const event = Event.create(elem, from, opts.eventTypes[2], eventOpts)
+                            if (this.opts.debug) console.log('dispatch event', event)
+                            elem.dispatchEvent(event)
+
+                            // onComplete
+                            //--------------------
+                            if (opts.onComplete &amp;&amp; (opts.doubleCallbacks || key === 0)) {
+                                opts.onComplete.call(this, event)
+                            }
+                        }
+                    }
+
+                    // to
+                    //--------------------
+                    Object.assign(gsOpts, value.gsOpts)
+
+                    // drag animation
+                    //--------------------
+                    TweenLite.to(from, opts.duration, gsOpts)
+                })
+            },
+            timelinePosition,
+            [position]
+        )
 
         this._actions++
 
@@ -2015,7 +2065,6 @@ export default class UITest {
      * @returns {array} - Returns an array of the position, the timelinePosition and the opts object.
      */
     reorderArguments(params) {
-
         // first parameter
         //--------------------
         const element = params[0]
@@ -2030,7 +2079,11 @@ export default class UITest {
         //--------------------
         if (Util.isNumber(params[1])) {
             timelinePosition = params[1]
-        } else if (Util.isObject(params[1]) &amp;&amp; !Util.isPixiDisplayObject(params[1]) &amp;&amp; (params[1].x == null || params[1].y == null)) {
+        } else if (
+            Util.isObject(params[1]) &amp;&amp;
+            !Util.isPixiDisplayObject(params[1]) &amp;&amp;
+            (params[1].x == null || params[1].y == null)
+        ) {
             opts = params[1]
         } else if (params[1] != null) {
             position = params[1]
@@ -2058,7 +2111,9 @@ export default class UITest {
 
         if (timelinePosition === null) {
             if (this.opts.defaultInterval === null &amp;&amp; this._actions > 1) {
-                throw new Error('No execution time was specified for this action, and a default interval was not set in the class constructor!')
+                throw new Error(
+                    'No execution time was specified for this action, and a default interval was not set in the class constructor!'
+                )
             }
             timelinePosition = Math.max(...this._timelinePositions) + (this.opts.defaultInterval || 1)
         }
@@ -2077,7 +2132,6 @@ export default class UITest {
      * @param {string[]} events - An array of event types.
      */
     resolveEvents(events) {
-        
         const data = []
 
         if (this.opts.eventType === 'pointer') {
@@ -2128,7 +2182,6 @@ export default class UITest {
  * @class
  */
 class Util {
-
     /**
      * Resolves the element from a specific context.
      *
@@ -2137,7 +2190,6 @@ class Util {
      * @return {HTMLElement|string} element - The HTML element on which the event is to be executed, e.g. button, document, h2, canvas, etc. or an selector string. If a selector has been specified, it is evaluated immediately before the event is called using the querySelector method.
      */
     static extractElement(context, element) {
-
         const cont = Util.isFrame(context) ? context.contentDocument : context.document
         const elem = Util.isString(element) ? cont.querySelector(element) : element
 
@@ -2152,10 +2204,9 @@ class Util {
      * @return {object} - Returns an object with the keys x and y.
      */
     static extractPosition(object) {
-
         // event coords
         //--------------------
-        const position = {x: 0, y: 0}
+        const position = { x: 0, y: 0 }
 
         // get the position
         //--------------------
@@ -2185,11 +2236,9 @@ class Util {
      * @return {object} - Returns an object with the to or bezier keys.
      */
     static extractTo(opts) {
-
         const object = {}
 
         if (opts.bezier) {
-
             let bezier = null
 
             if (Array.isArray(opts.bezier)) {
@@ -2220,13 +2269,10 @@ class Util {
      * @return {object[]} - Returns an array of objects with the keys x and y.
      */
     static extractMultiTo(opts) {
-
         const objects = []
 
         if (opts.bezier) {
-
             opts.bezier.forEach(it => {
-
                 let bezier = null
 
                 if (Array.isArray(it)) {
@@ -2243,9 +2289,7 @@ class Util {
                     bezier
                 })
             })
-
         } else {
-
             opts.to.forEach(it => {
                 const to = Util.extractPosition(it)
                 objects.push({
@@ -2299,7 +2343,11 @@ class Util {
      * @return {boolean} - true if the thing is a PIXI.DisplayObject, otherwise false.
      */
     static isPixiDisplayObject(object) {
-        return typeof object.getBounds === 'function' &amp;&amp; typeof object.renderWebGL === 'function' &amp;&amp; typeof object.setTransform === 'function'
+        return (
+            typeof object.getBounds === 'function' &amp;&amp;
+            typeof object.renderWebGL === 'function' &amp;&amp;
+            typeof object.setTransform === 'function'
+        )
     }
 
     /**
@@ -2326,7 +2374,6 @@ class Util {
  * @class
  */
 class Event {
-
     /**
      * Creates an event object.
      *
@@ -2336,9 +2383,9 @@ class Event {
      * @param {string} type - The type of the event, see https://developer.mozilla.org/de/docs/Web/Events
      * @param {object} opts - An options object. Every paramter of the event object can be overridden, see e.g. https://developer.mozilla.org/de/docs/Web/API/MouseEvent for all the properties.
      */
-    static create(target, position = {x: 0, y: 0}, type = 'pointerup', opts = {}) {
+    static create(target, position = { x: 0, y: 0 }, type = 'pointerup', opts = {}) {
-
+        const rect =
-        const rect = typeof target.getBoundingClientRect === 'function' ? target.getBoundingClientRect() : {x: 0, y: 0}
+            typeof target.getBoundingClientRect === 'function' ? target.getBoundingClientRect() : { x: 0, y: 0 }
 
         // EventInit
         const eventOpts = {
@@ -2355,8 +2402,8 @@ class Event {
 
         // MouseEvent
         const mouseEventOpts = {
-            screenX: window.screenX + target.offsetLeft + position.x,
+            screenX: window.screenX + (target.offsetLeft || 0) + position.x,
-            screenY: window.screenY + target.offsetTop + position.y,
+            screenY: window.screenY + (target.offsetTop || 0) + position.y,
             clientX: rect.x + position.x,
             clientY: rect.y + position.y,
             ctrlKey: false,
@@ -2395,7 +2442,10 @@ class Event {
         }
 
         if (type.startsWith('pointer')) {
-            return new PointerEvent(type, Object.assign({}, eventOpts, uiEventOpts, mouseEventOpts, pointerEventOpts, opts))
+            return new PointerEvent(
+                type,
+                Object.assign({}, eventOpts, uiEventOpts, mouseEventOpts, pointerEventOpts, opts)
+            )
         } else if (type.startsWith('touch')) {
             return new TouchEvent(type, Object.assign({}, eventOpts, uiEventOpts, touchEventOpts, opts))
         } else {
@@ -2416,7 +2466,7 @@ class Event {
 
         <footer class="content-size">
             <div class="footer">
-                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.2</a> on Tue May 14 2019 14:29:52 GMT+0200 (Mitteleuropäische Sommerzeit)
+                Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Oct 15 2019 14:56:00 GMT+0200 (Mitteleuropäische Sommerzeit)
             </div>
         </footer>
     </div>

fonts/material-icon-font/README.md

@@ -0,0 +1,9 @@
+The recommended way to use the Material Icons font is by linking to the web font hosted on Google Fonts:
+
+```html
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet">
+```
+
+Read more in our full usage guide:
+http://google.github.io/material-design-icons/#icon-font-for-the-web

fonts/material-icon-font/codepoints

@@ -0,0 +1,932 @@
+3d_rotation e84d
+ac_unit eb3b
+access_alarm e190
+access_alarms e191
+access_time e192
+accessibility e84e
+accessible e914
+account_balance e84f
+account_balance_wallet e850
+account_box e851
+account_circle e853
+adb e60e
+add e145
+add_a_photo e439
+add_alarm e193
+add_alert e003
+add_box e146
+add_circle e147
+add_circle_outline e148
+add_location e567
+add_shopping_cart e854
+add_to_photos e39d
+add_to_queue e05c
+adjust e39e
+airline_seat_flat e630
+airline_seat_flat_angled e631
+airline_seat_individual_suite e632
+airline_seat_legroom_extra e633
+airline_seat_legroom_normal e634
+airline_seat_legroom_reduced e635
+airline_seat_recline_extra e636
+airline_seat_recline_normal e637
+airplanemode_active e195
+airplanemode_inactive e194
+airplay e055
+airport_shuttle eb3c
+alarm e855
+alarm_add e856
+alarm_off e857
+alarm_on e858
+album e019
+all_inclusive eb3d
+all_out e90b
+android e859
+announcement e85a
+apps e5c3
+archive e149
+arrow_back e5c4
+arrow_downward e5db
+arrow_drop_down e5c5
+arrow_drop_down_circle e5c6
+arrow_drop_up e5c7
+arrow_forward e5c8
+arrow_upward e5d8
+art_track e060
+aspect_ratio e85b
+assessment e85c
+assignment e85d
+assignment_ind e85e
+assignment_late e85f
+assignment_return e860
+assignment_returned e861
+assignment_turned_in e862
+assistant e39f
+assistant_photo e3a0
+attach_file e226
+attach_money e227
+attachment e2bc
+audiotrack e3a1
+autorenew e863
+av_timer e01b
+backspace e14a
+backup e864
+battery_alert e19c
+battery_charging_full e1a3
+battery_full e1a4
+battery_std e1a5
+battery_unknown e1a6
+beach_access eb3e
+beenhere e52d
+block e14b
+bluetooth e1a7
+bluetooth_audio e60f
+bluetooth_connected e1a8
+bluetooth_disabled e1a9
+bluetooth_searching e1aa
+blur_circular e3a2
+blur_linear e3a3
+blur_off e3a4
+blur_on e3a5
+book e865
+bookmark e866
+bookmark_border e867
+border_all e228
+border_bottom e229
+border_clear e22a
+border_color e22b
+border_horizontal e22c
+border_inner e22d
+border_left e22e
+border_outer e22f
+border_right e230
+border_style e231
+border_top e232
+border_vertical e233
+branding_watermark e06b
+brightness_1 e3a6
+brightness_2 e3a7
+brightness_3 e3a8
+brightness_4 e3a9
+brightness_5 e3aa
+brightness_6 e3ab
+brightness_7 e3ac
+brightness_auto e1ab
+brightness_high e1ac
+brightness_low e1ad
+brightness_medium e1ae
+broken_image e3ad
+brush e3ae
+bubble_chart e6dd
+bug_report e868
+build e869
+burst_mode e43c
+business e0af
+business_center eb3f
+cached e86a
+cake e7e9
+call e0b0
+call_end e0b1
+call_made e0b2
+call_merge e0b3
+call_missed e0b4
+call_missed_outgoing e0e4
+call_received e0b5
+call_split e0b6
+call_to_action e06c
+camera e3af
+camera_alt e3b0
+camera_enhance e8fc
+camera_front e3b1
+camera_rear e3b2
+camera_roll e3b3
+cancel e5c9
+card_giftcard e8f6
+card_membership e8f7
+card_travel e8f8
+casino eb40
+cast e307
+cast_connected e308
+center_focus_strong e3b4
+center_focus_weak e3b5
+change_history e86b
+chat e0b7
+chat_bubble e0ca
+chat_bubble_outline e0cb
+check e5ca
+check_box e834
+check_box_outline_blank e835
+check_circle e86c
+chevron_left e5cb
+chevron_right e5cc
+child_care eb41
+child_friendly eb42
+chrome_reader_mode e86d
+class e86e
+clear e14c
+clear_all e0b8
+close e5cd
+closed_caption e01c
+cloud e2bd
+cloud_circle e2be
+cloud_done e2bf
+cloud_download e2c0
+cloud_off e2c1
+cloud_queue e2c2
+cloud_upload e2c3
+code e86f
+collections e3b6
+collections_bookmark e431
+color_lens e3b7
+colorize e3b8
+comment e0b9
+compare e3b9
+compare_arrows e915
+computer e30a
+confirmation_number e638
+contact_mail e0d0
+contact_phone e0cf
+contacts e0ba
+content_copy e14d
+content_cut e14e
+content_paste e14f
+control_point e3ba
+control_point_duplicate e3bb
+copyright e90c
+create e150
+create_new_folder e2cc
+credit_card e870
+crop e3be
+crop_16_9 e3bc
+crop_3_2 e3bd
+crop_5_4 e3bf
+crop_7_5 e3c0
+crop_din e3c1
+crop_free e3c2
+crop_landscape e3c3
+crop_original e3c4
+crop_portrait e3c5
+crop_rotate e437
+crop_square e3c6
+dashboard e871
+data_usage e1af
+date_range e916
+dehaze e3c7
+delete e872
+delete_forever e92b
+delete_sweep e16c
+description e873
+desktop_mac e30b
+desktop_windows e30c
+details e3c8
+developer_board e30d
+developer_mode e1b0
+device_hub e335
+devices e1b1
+devices_other e337
+dialer_sip e0bb
+dialpad e0bc
+directions e52e
+directions_bike e52f
+directions_boat e532
+directions_bus e530
+directions_car e531
+directions_railway e534
+directions_run e566
+directions_subway e533
+directions_transit e535
+directions_walk e536
+disc_full e610
+dns e875
+do_not_disturb e612
+do_not_disturb_alt e611
+do_not_disturb_off e643
+do_not_disturb_on e644
+dock e30e
+domain e7ee
+done e876
+done_all e877
+donut_large e917
+donut_small e918
+drafts e151
+drag_handle e25d
+drive_eta e613
+dvr e1b2
+edit e3c9
+edit_location e568
+eject e8fb
+email e0be
+enhanced_encryption e63f
+equalizer e01d
+error e000
+error_outline e001
+euro_symbol e926
+ev_station e56d
+event e878
+event_available e614
+event_busy e615
+event_note e616
+event_seat e903
+exit_to_app e879
+expand_less e5ce
+expand_more e5cf
+explicit e01e
+explore e87a
+exposure e3ca
+exposure_neg_1 e3cb
+exposure_neg_2 e3cc
+exposure_plus_1 e3cd
+exposure_plus_2 e3ce
+exposure_zero e3cf
+extension e87b
+face e87c
+fast_forward e01f
+fast_rewind e020
+favorite e87d
+favorite_border e87e
+featured_play_list e06d
+featured_video e06e
+feedback e87f
+fiber_dvr e05d
+fiber_manual_record e061
+fiber_new e05e
+fiber_pin e06a
+fiber_smart_record e062
+file_download e2c4
+file_upload e2c6
+filter e3d3
+filter_1 e3d0
+filter_2 e3d1
+filter_3 e3d2
+filter_4 e3d4
+filter_5 e3d5
+filter_6 e3d6
+filter_7 e3d7
+filter_8 e3d8
+filter_9 e3d9
+filter_9_plus e3da
+filter_b_and_w e3db
+filter_center_focus e3dc
+filter_drama e3dd
+filter_frames e3de
+filter_hdr e3df
+filter_list e152
+filter_none e3e0
+filter_tilt_shift e3e2
+filter_vintage e3e3
+find_in_page e880
+find_replace e881
+fingerprint e90d
+first_page e5dc
+fitness_center eb43
+flag e153
+flare e3e4
+flash_auto e3e5
+flash_off e3e6
+flash_on e3e7
+flight e539
+flight_land e904
+flight_takeoff e905
+flip e3e8
+flip_to_back e882
+flip_to_front e883
+folder e2c7
+folder_open e2c8
+folder_shared e2c9
+folder_special e617
+font_download e167
+format_align_center e234
+format_align_justify e235
+format_align_left e236
+format_align_right e237
+format_bold e238
+format_clear e239
+format_color_fill e23a
+format_color_reset e23b
+format_color_text e23c
+format_indent_decrease e23d
+format_indent_increase e23e
+format_italic e23f
+format_line_spacing e240
+format_list_bulleted e241
+format_list_numbered e242
+format_paint e243
+format_quote e244
+format_shapes e25e
+format_size e245
+format_strikethrough e246
+format_textdirection_l_to_r e247
+format_textdirection_r_to_l e248
+format_underlined e249
+forum e0bf
+forward e154
+forward_10 e056
+forward_30 e057
+forward_5 e058
+free_breakfast eb44
+fullscreen e5d0
+fullscreen_exit e5d1
+functions e24a
+g_translate e927
+gamepad e30f
+games e021
+gavel e90e
+gesture e155
+get_app e884
+gif e908
+golf_course eb45
+gps_fixed e1b3
+gps_not_fixed e1b4
+gps_off e1b5
+grade e885
+gradient e3e9
+grain e3ea
+graphic_eq e1b8
+grid_off e3eb
+grid_on e3ec
+group e7ef
+group_add e7f0
+group_work e886
+hd e052
+hdr_off e3ed
+hdr_on e3ee
+hdr_strong e3f1
+hdr_weak e3f2
+headset e310
+headset_mic e311
+healing e3f3
+hearing e023
+help e887
+help_outline e8fd
+high_quality e024
+highlight e25f
+highlight_off e888
+history e889
+home e88a
+hot_tub eb46
+hotel e53a
+hourglass_empty e88b
+hourglass_full e88c
+http e902
+https e88d
+image e3f4
+image_aspect_ratio e3f5
+import_contacts e0e0
+import_export e0c3
+important_devices e912
+inbox e156
+indeterminate_check_box e909
+info e88e
+info_outline e88f
+input e890
+insert_chart e24b
+insert_comment e24c
+insert_drive_file e24d
+insert_emoticon e24e
+insert_invitation e24f
+insert_link e250
+insert_photo e251
+invert_colors e891
+invert_colors_off e0c4
+iso e3f6
+keyboard e312
+keyboard_arrow_down e313
+keyboard_arrow_left e314
+keyboard_arrow_right e315
+keyboard_arrow_up e316
+keyboard_backspace e317
+keyboard_capslock e318
+keyboard_hide e31a
+keyboard_return e31b
+keyboard_tab e31c
+keyboard_voice e31d
+kitchen eb47
+label e892
+label_outline e893
+landscape e3f7
+language e894
+laptop e31e
+laptop_chromebook e31f
+laptop_mac e320
+laptop_windows e321
+last_page e5dd
+launch e895
+layers e53b
+layers_clear e53c
+leak_add e3f8
+leak_remove e3f9
+lens e3fa
+library_add e02e
+library_books e02f
+library_music e030
+lightbulb_outline e90f
+line_style e919
+line_weight e91a
+linear_scale e260
+link e157
+linked_camera e438
+list e896
+live_help e0c6
+live_tv e639
+local_activity e53f
+local_airport e53d
+local_atm e53e
+local_bar e540
+local_cafe e541
+local_car_wash e542
+local_convenience_store e543
+local_dining e556
+local_drink e544
+local_florist e545
+local_gas_station e546
+local_grocery_store e547
+local_hospital e548
+local_hotel e549
+local_laundry_service e54a
+local_library e54b
+local_mall e54c
+local_movies e54d
+local_offer e54e
+local_parking e54f
+local_pharmacy e550
+local_phone e551
+local_pizza e552
+local_play e553
+local_post_office e554
+local_printshop e555
+local_see e557
+local_shipping e558
+local_taxi e559
+location_city e7f1
+location_disabled e1b6
+location_off e0c7
+location_on e0c8
+location_searching e1b7
+lock e897
+lock_open e898
+lock_outline e899
+looks e3fc
+looks_3 e3fb
+looks_4 e3fd
+looks_5 e3fe
+looks_6 e3ff
+looks_one e400
+looks_two e401
+loop e028
+loupe e402
+low_priority e16d
+loyalty e89a
+mail e158
+mail_outline e0e1
+map e55b
+markunread e159
+markunread_mailbox e89b
+memory e322
+menu e5d2
+merge_type e252
+message e0c9
+mic e029
+mic_none e02a
+mic_off e02b
+mms e618
+mode_comment e253
+mode_edit e254
+monetization_on e263
+money_off e25c
+monochrome_photos e403
+mood e7f2
+mood_bad e7f3
+more e619
+more_horiz e5d3
+more_vert e5d4
+motorcycle e91b
+mouse e323
+move_to_inbox e168
+movie e02c
+movie_creation e404
+movie_filter e43a
+multiline_chart e6df
+music_note e405
+music_video e063
+my_location e55c
+nature e406
+nature_people e407
+navigate_before e408
+navigate_next e409
+navigation e55d
+near_me e569
+network_cell e1b9
+network_check e640
+network_locked e61a
+network_wifi e1ba
+new_releases e031
+next_week e16a
+nfc e1bb
+no_encryption e641
+no_sim e0cc
+not_interested e033
+note e06f
+note_add e89c
+notifications e7f4
+notifications_active e7f7
+notifications_none e7f5
+notifications_off e7f6
+notifications_paused e7f8
+offline_pin e90a
+ondemand_video e63a
+opacity e91c
+open_in_browser e89d
+open_in_new e89e
+open_with e89f
+pages e7f9
+pageview e8a0
+palette e40a
+pan_tool e925
+panorama e40b
+panorama_fish_eye e40c
+panorama_horizontal e40d
+panorama_vertical e40e
+panorama_wide_angle e40f
+party_mode e7fa
+pause e034
+pause_circle_filled e035
+pause_circle_outline e036
+payment e8a1
+people e7fb
+people_outline e7fc
+perm_camera_mic e8a2
+perm_contact_calendar e8a3
+perm_data_setting e8a4
+perm_device_information e8a5
+perm_identity e8a6
+perm_media e8a7
+perm_phone_msg e8a8
+perm_scan_wifi e8a9
+person e7fd
+person_add e7fe
+person_outline e7ff
+person_pin e55a
+person_pin_circle e56a
+personal_video e63b
+pets e91d
+phone e0cd
+phone_android e324
+phone_bluetooth_speaker e61b
+phone_forwarded e61c
+phone_in_talk e61d
+phone_iphone e325
+phone_locked e61e
+phone_missed e61f
+phone_paused e620
+phonelink e326
+phonelink_erase e0db
+phonelink_lock e0dc
+phonelink_off e327
+phonelink_ring e0dd
+phonelink_setup e0de
+photo e410
+photo_album e411
+photo_camera e412
+photo_filter e43b
+photo_library e413
+photo_size_select_actual e432
+photo_size_select_large e433
+photo_size_select_small e434
+picture_as_pdf e415
+picture_in_picture e8aa
+picture_in_picture_alt e911
+pie_chart e6c4
+pie_chart_outlined e6c5
+pin_drop e55e
+place e55f
+play_arrow e037
+play_circle_filled e038
+play_circle_outline e039
+play_for_work e906
+playlist_add e03b
+playlist_add_check e065
+playlist_play e05f
+plus_one e800
+poll e801
+polymer e8ab
+pool eb48
+portable_wifi_off e0ce
+portrait e416
+power e63c
+power_input e336
+power_settings_new e8ac
+pregnant_woman e91e
+present_to_all e0df
+print e8ad
+priority_high e645
+public e80b
+publish e255
+query_builder e8ae
+question_answer e8af
+queue e03c
+queue_music e03d
+queue_play_next e066
+radio e03e
+radio_button_checked e837
+radio_button_unchecked e836
+rate_review e560
+receipt e8b0
+recent_actors e03f
+record_voice_over e91f
+redeem e8b1
+redo e15a
+refresh e5d5
+remove e15b
+remove_circle e15c
+remove_circle_outline e15d
+remove_from_queue e067
+remove_red_eye e417
+remove_shopping_cart e928
+reorder e8fe
+repeat e040
+repeat_one e041
+replay e042
+replay_10 e059
+replay_30 e05a
+replay_5 e05b
+reply e15e
+reply_all e15f
+report e160
+report_problem e8b2
+restaurant e56c
+restaurant_menu e561
+restore e8b3
+restore_page e929
+ring_volume e0d1
+room e8b4
+room_service eb49
+rotate_90_degrees_ccw e418
+rotate_left e419
+rotate_right e41a
+rounded_corner e920
+router e328
+rowing e921
+rss_feed e0e5
+rv_hookup e642
+satellite e562
+save e161
+scanner e329
+schedule e8b5
+school e80c
+screen_lock_landscape e1be
+screen_lock_portrait e1bf
+screen_lock_rotation e1c0
+screen_rotation e1c1
+screen_share e0e2
+sd_card e623
+sd_storage e1c2
+search e8b6
+security e32a
+select_all e162
+send e163
+sentiment_dissatisfied e811
+sentiment_neutral e812
+sentiment_satisfied e813
+sentiment_very_dissatisfied e814
+sentiment_very_satisfied e815
+settings e8b8
+settings_applications e8b9
+settings_backup_restore e8ba
+settings_bluetooth e8bb
+settings_brightness e8bd
+settings_cell e8bc
+settings_ethernet e8be
+settings_input_antenna e8bf
+settings_input_component e8c0
+settings_input_composite e8c1
+settings_input_hdmi e8c2
+settings_input_svideo e8c3
+settings_overscan e8c4
+settings_phone e8c5
+settings_power e8c6
+settings_remote e8c7
+settings_system_daydream e1c3
+settings_voice e8c8
+share e80d
+shop e8c9
+shop_two e8ca
+shopping_basket e8cb
+shopping_cart e8cc
+short_text e261
+show_chart e6e1
+shuffle e043
+signal_cellular_4_bar e1c8
+signal_cellular_connected_no_internet_4_bar e1cd
+signal_cellular_no_sim e1ce
+signal_cellular_null e1cf
+signal_cellular_off e1d0
+signal_wifi_4_bar e1d8
+signal_wifi_4_bar_lock e1d9
+signal_wifi_off e1da
+sim_card e32b
+sim_card_alert e624
+skip_next e044
+skip_previous e045
+slideshow e41b
+slow_motion_video e068
+smartphone e32c
+smoke_free eb4a
+smoking_rooms eb4b
+sms e625
+sms_failed e626
+snooze e046
+sort e164
+sort_by_alpha e053
+spa eb4c
+space_bar e256
+speaker e32d
+speaker_group e32e
+speaker_notes e8cd
+speaker_notes_off e92a
+speaker_phone e0d2
+spellcheck e8ce
+star e838
+star_border e83a
+star_half e839
+stars e8d0
+stay_current_landscape e0d3
+stay_current_portrait e0d4
+stay_primary_landscape e0d5
+stay_primary_portrait e0d6
+stop e047
+stop_screen_share e0e3
+storage e1db
+store e8d1
+store_mall_directory e563
+straighten e41c
+streetview e56e
+strikethrough_s e257
+style e41d
+subdirectory_arrow_left e5d9
+subdirectory_arrow_right e5da
+subject e8d2
+subscriptions e064
+subtitles e048
+subway e56f
+supervisor_account e8d3
+surround_sound e049
+swap_calls e0d7
+swap_horiz e8d4
+swap_vert e8d5
+swap_vertical_circle e8d6
+switch_camera e41e
+switch_video e41f
+sync e627
+sync_disabled e628
+sync_problem e629
+system_update e62a
+system_update_alt e8d7
+tab e8d8
+tab_unselected e8d9
+tablet e32f
+tablet_android e330
+tablet_mac e331
+tag_faces e420
+tap_and_play e62b
+terrain e564
+text_fields e262
+text_format e165
+textsms e0d8
+texture e421
+theaters e8da
+thumb_down e8db
+thumb_up e8dc
+thumbs_up_down e8dd
+time_to_leave e62c
+timelapse e422
+timeline e922
+timer e425
+timer_10 e423
+timer_3 e424
+timer_off e426
+title e264
+toc e8de
+today e8df
+toll e8e0
+tonality e427
+touch_app e913
+toys e332
+track_changes e8e1
+traffic e565
+train e570
+tram e571
+transfer_within_a_station e572
+transform e428
+translate e8e2
+trending_down e8e3
+trending_flat e8e4
+trending_up e8e5
+tune e429
+turned_in e8e6
+turned_in_not e8e7
+tv e333
+unarchive e169
+undo e166
+unfold_less e5d6
+unfold_more e5d7
+update e923
+usb e1e0
+verified_user e8e8
+vertical_align_bottom e258
+vertical_align_center e259
+vertical_align_top e25a
+vibration e62d
+video_call e070
+video_label e071
+video_library e04a
+videocam e04b
+videocam_off e04c
+videogame_asset e338
+view_agenda e8e9
+view_array e8ea
+view_carousel e8eb
+view_column e8ec
+view_comfy e42a
+view_compact e42b
+view_day e8ed
+view_headline e8ee
+view_list e8ef
+view_module e8f0
+view_quilt e8f1
+view_stream e8f2
+view_week e8f3
+vignette e435
+visibility e8f4
+visibility_off e8f5
+voice_chat e62e
+voicemail e0d9
+volume_down e04d
+volume_mute e04e
+volume_off e04f
+volume_up e050
+vpn_key e0da
+vpn_lock e62f
+wallpaper e1bc
+warning e002
+watch e334
+watch_later e924
+wb_auto e42c
+wb_cloudy e42d
+wb_incandescent e42e
+wb_iridescent e436
+wb_sunny e430
+wc e63d
+web e051
+web_asset e069
+weekend e16b
+whatshot e80e
+widgets e1bd
+wifi e63e
+wifi_lock e1e1
+wifi_tethering e1e2
+work e8f9
+wrap_text e25b
+youtube_searched_for e8fa
+zoom_in e8ff
+zoom_out e900
+zoom_out_map e56b

fonts/material-icon-font/material-icons.css

@@ -0,0 +1,36 @@
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
+  src: local('Material Icons'),
+       local('MaterialIcons-Regular'),
+       url(MaterialIcons-Regular.woff2) format('woff2'),
+       url(MaterialIcons-Regular.woff) format('woff'),
+       url(MaterialIcons-Regular.ttf) format('truetype');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;  /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}

gulpfile.js

@@ -1,44 +1,72 @@
-const {src, dest, parallel} = require('gulp');
+const { src, dest, parallel } = require('gulp')
-const uglify = require('gulp-uglify');
+const uglify = require('gulp-uglify')
-const rename = require('gulp-rename');
+const rename = require('gulp-rename')
-const concat = require('gulp-concat');
+const concat = require('gulp-concat')
-const replace = require('gulp-replace');
+const replace = require('gulp-replace')
+const prettier = require('gulp-prettier')
 
 function vendors() {
-    return src([
+    return src(
-        './node_modules/optimal-select/dist/optimal-select.js',
+        [
-        './node_modules/hammerjs/hammer.js',
+            './node_modules/optimal-select/dist/optimal-select.js',
-        './node_modules/propagating-hammerjs/propagating.js',
+            './node_modules/hammerjs/hammer.js',
-        './node_modules/pixi.js/dist/pixi.js',
+            './node_modules/propagating-hammerjs/propagating.js',
-        './node_modules/pixi-compressed-textures/lib/crn_decomp.js',
+            './node_modules/pixi.js/dist/pixi.js',
-        './node_modules/pixi-compressed-textures/bin/pixi-compressed-textures.js',
+            './node_modules/pixi-compressed-textures/lib/crn_decomp.js',
-        './node_modules/pixi-filters/dist/pixi-filters.js',
+            './node_modules/pixi-compressed-textures/dist/pixi-compressed-textures.js',
-        './node_modules/pixi-particles/dist/pixi-particles.js',
+            './node_modules/pixi-filters/dist/pixi-filters.js',
-        './node_modules/pixi-projection/dist/pixi-projection.js',
+            './node_modules/pixi-particles/dist/pixi-particles.js',
-        './node_modules/gsap/src/uncompressed/TweenLite.js',
+            './node_modules/pixi-projection/dist/pixi-projection.js',
-        './lib/3rdparty/pixi-ease.js',
+            './node_modules/gsap/src/uncompressed/TweenMax.js',
-        './lib/3rdparty/pixi-viewport.js',
+            './node_modules/gsap/src/uncompressed/TimelineMax.js',
-        './lib/3rdparty/convertPointFromPageToNode.js'
+            './lib/3rdparty/jquery.js',
-    ], {sourcemaps: false})
+            './lib/3rdparty/pixi-ease.js',
+            './lib/3rdparty/pixi-viewport.js',
+            './lib/3rdparty/convertPointFromPageToNode.js',
+            './lib/3rdparty/jquery.hypher.js',
+            './lib/3rdparty/hyphenation/de.js',
+            './lib/3rdparty/hyphenation/en-gb.js'
+        ],
+        { sourcemaps: false }
+    )
         .pipe(concat('iwmlib.3rdparty.js'))
-        .pipe(replace(/^\/\/# sourceMappingURL=.*$/gmi, ''))
+        .pipe(replace(/^\/\/# sourceMappingURL=.*$/gim, ''))
-        .pipe(dest('dist', {sourcemaps: false}))
+        .pipe(dest('dist', { sourcemaps: false }))
-        .pipe(rename({extname: '.min.js'}))
+        .pipe(rename({ extname: '.min.js' }))
         .pipe(uglify())
-        .pipe(dest('dist', {sourcemaps: false}))
+        .pipe(dest('dist', { sourcemaps: false }))
 }
 
 function preload() {
-    return src([
+    return src(['./node_modules/gsap/src/uncompressed/TweenMax.js', './lib/3rdparty/convertPointFromPageToNode.js'], {
-        './node_modules/gsap/src/uncompressed/TweenLite.js',
+        sourcemaps: false
-        './lib/3rdparty/convertPointFromPageToNode.js',
+    })
-    ], {sourcemaps: false})
         .pipe(concat('iwmlib.3rdparty.preload.js'))
-        .pipe(replace(/^\/\/# sourceMappingURL=.*$/gmi, ''))
+        .pipe(replace(/^\/\/# sourceMappingURL=.*$/gim, ''))
-        .pipe(dest('dist', {sourcemaps: false}))
+        .pipe(dest('dist', { sourcemaps: false }))
-        .pipe(rename({extname: '.min.js'}))
+        .pipe(rename({ extname: '.min.js' }))
         .pipe(uglify())
-        .pipe(dest('dist', {sourcemaps: false}))
+        .pipe(dest('dist', { sourcemaps: false }))
 }
 
-exports.default = parallel(vendors, preload);
+function prettify() {
+    return src(
+        ['./lib/*.js', './lib/card/*.js', './lib/pixi/*.js', './lib/pixi/deepzoom/*.js', '!./lib/bootstrap.babel.js'],
+        {
+            base: './lib'
+        }
+    )
+        .pipe(
+            prettier({
+                singleQuote: true,
+                jsxSingleQuote: true,
+                tabWidth: 4,
+                semi: false,
+                printWidth: 120
+            })
+        )
+        .pipe(dest('./lib'))
+}
+
+exports.prettify = prettify
+exports.default = parallel(vendors, preload)

lib/3rdparty/convertPointFromPageToNode.js

@@ -80,4 +80,4 @@
                                     getTransformationMatrix(element))
     }
 
-}())
+}());

lib/3rdparty/gsap/src/bonus-files-for-npm-users/GSDevTools.js

@@ -1,6 +1,6 @@
 /*!
- * VERSION: 0.1.9
+ * VERSION: 0.1.11
- * DATE: 2019-02-07
+ * DATE: 2019-05-16
  * UPDATES AND DOCS AT: http://greensock.com
  *
  * @license Copyright (c) 2008-2019, GreenSock. All rights reserved.
@@ -720,7 +720,7 @@ TweenPlugin.activate([CSSPlugin, AttrPlugin]); // to ensure treeshaking doesn't
 							record("out", outProgress);
 						}
 						startTime = 0;
-						maxDuration = Math.min(1000, vars.maxDuration || 1000, _getClippedDuration(selectedAnimation));
+						maxDuration = vars.maxDuration || Math.min(1000, _getClippedDuration(selectedAnimation));
 						if (selectedAnimation === _recordedRoot || vars.globalSync !== false) {
 							_merge();
 							linkedAnimation = _rootTween;
@@ -1105,7 +1105,7 @@ TweenPlugin.activate([CSSPlugin, AttrPlugin]); // to ensure treeshaking doesn't
 
 
 
-		GSDevTools.version = "0.1.9";
+		GSDevTools.version = "0.1.11";
 		GSDevTools.logOverwrites = false;
 		GSDevTools.globalRecordingTime = 2;
 

lib/3rdparty/gsap/src/bonus-files-for-npm-users/MorphSVGPlugin.js

@@ -1,6 +1,6 @@
 /*!
- * VERSION: 0.9.0
+ * VERSION: 0.9.1
- * DATE: 2019-02-07
+ * DATE: 2019-02-21
  * UPDATES AND DOCS AT: http://greensock.com
  *
  * @license Copyright (c) 2008-2019, GreenSock. All rights reserved.
@@ -903,11 +903,11 @@ import { _gsScope } from "gsap/TweenLite.js";
 			propName: "morphSVG",
 			API: 2,
 			global: true,
-			version: "0.9.0",
+			version: "0.9.1",
 
 			//called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run.
 			init: function(target, value, tween, index) {
-				var cs = window.getComputedStyle(target),
+				var cs = target.nodeType ? window.getComputedStyle(target) : {},
 					fill = cs.fill + "",
 					fillSafe = !(fill === "none" || (fill.match(_numbersExp) || [])[3] === "0" || cs.fillRule === "evenodd"),
 					origins = (value.origin || "50 50").split(","),

lib/3rdparty/gsap/src/bonus-files-for-npm-users/umd/GSDevTools.js

@@ -1,6 +1,6 @@
 /*!
- * VERSION: 0.1.9
+ * VERSION: 0.1.11
- * DATE: 2019-02-07
+ * DATE: 2019-05-16
  * UPDATES AND DOCS AT: http://greensock.com
  *
  * @license Copyright (c) 2008-2019, GreenSock. All rights reserved.
@@ -717,7 +717,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 							record("out", outProgress);
 						}
 						startTime = 0;
-						maxDuration = Math.min(1000, vars.maxDuration || 1000, _getClippedDuration(selectedAnimation));
+						maxDuration = vars.maxDuration || Math.min(1000, _getClippedDuration(selectedAnimation));
 						if (selectedAnimation === _recordedRoot || vars.globalSync !== false) {
 							_merge();
 							linkedAnimation = _rootTween;
@@ -1102,7 +1102,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 
 
 
-		GSDevTools.version = "0.1.9";
+		GSDevTools.version = "0.1.11";
 		GSDevTools.logOverwrites = false;
 		GSDevTools.globalRecordingTime = 2;
 
@@ -2986,7 +2986,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 						if (e && e.target) {
 							_addListener(e.target, "mouseup", onRelease); //we also have to listen directly on the element because some browsers don't bubble up the event to the _doc on elements with contentEditable="true"
 						}
-						isClicking = (isClickable.call(self, e.target) && vars.dragClickables !== false && !force);
+						isClicking = (isClickable.call(self, e.target) && vars.dragClickables === false && !force);
 						if (isClicking) {
 							_addListener(e.target, "change", onRelease); //in some browsers, when you mousedown on a <select> element, no mouseup gets dispatched! So we listen for a "change" event instead.
 							_dispatchEvent(self, "pressInit", "onPressInit");
@@ -3689,7 +3689,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 		p.constructor = Draggable;
 		p.pointerX = p.pointerY = p.startX = p.startY = p.deltaX = p.deltaY = 0;
 		p.isDragging = p.isPressed = false;
-		Draggable.version = "0.17.0";
+		Draggable.version = "0.17.1";
 		Draggable.zIndex = 1000;
 
 		_addListener(_doc, "touchcancel", function() {

lib/3rdparty/gsap/src/bonus-files-for-npm-users/umd/MorphSVGPlugin.js

@@ -1,6 +1,6 @@
 /*!
- * VERSION: 0.9.0
+ * VERSION: 0.9.1
- * DATE: 2019-02-07
+ * DATE: 2019-02-21
  * UPDATES AND DOCS AT: http://greensock.com
  *
  * @license Copyright (c) 2008-2019, GreenSock. All rights reserved.
@@ -906,12 +906,12 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 			propName: "morphSVG",
 			API: 2,
 			global: true,
-			version: "0.9.0",
+			version: "0.9.1",
 			overwriteProps: ["morphSVG"],
 
 			//called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run.
 			init: function(target, value, tween, index) {
-				var cs = window.getComputedStyle(target),
+				var cs = target.nodeType ? window.getComputedStyle(target) : {},
 					fill = cs.fill + "",
 					fillSafe = !(fill === "none" || (fill.match(_numbersExp) || [])[3] === "0" || cs.fillRule === "evenodd"),
 					origins = (value.origin || "50 50").split(","),

lib/3rdparty/gsap/src/esm/BezierPlugin.js

@@ -1,6 +1,6 @@
 /*!
- * VERSION: 1.3.8
+ * VERSION: 1.3.9
- * DATE: 2018-05-30
+ * DATE: 2019-05-17
  * UPDATES AND DOCS AT: http://greensock.com
  *
  * @license Copyright (c) 2008-2019, GreenSock. All rights reserved.
@@ -312,7 +312,7 @@ import { _gsScope } from "./TweenLite.js";
 			BezierPlugin = _gsScope._gsDefine.plugin({
 					propName: "bezier",
 					priority: -1,
-					version: "1.3.8",
+					version: "1.3.9",
 					API: 2,
 					global:true,
 
@@ -389,26 +389,26 @@ import { _gsScope } from "./TweenLite.js";
 							func = this._func,
 							target = this._target,
 							notStart = (v !== this._startRatio),
-							curIndex, inv, i, p, b, t, val, l, lengths, curSeg;
+							curIndex, inv, i, p, b, t, val, l, lengths, curSeg, v1;
 						if (!this._timeRes) {
 							curIndex = (v < 0) ? 0 : (v >= 1) ? segments - 1 : (segments * v) >> 0;
 							t = (v - (curIndex * (1 / segments))) * segments;
 						} else {
 							lengths = this._lengths;
 							curSeg = this._curSeg;
-							v *= this._length;
+							v1 = v * this._length;
 							i = this._li;
 							//find the appropriate segment (if the currently cached one isn't correct)
-							if (v > this._l2 && i < segments - 1) {
+							if (v1 > this._l2 && i < segments - 1) {
 								l = segments - 1;
-								while (i < l && (this._l2 = lengths[++i]) <= v) {	}
+								while (i < l && (this._l2 = lengths[++i]) <= v1) {	}
 								this._l1 = lengths[i-1];
 								this._li = i;
 								this._curSeg = curSeg = this._segments[i];
 								this._s2 = curSeg[(this._s1 = this._si = 0)];
-							} else if (v < this._l1 && i > 0) {
+							} else if (v1 < this._l1 && i > 0) {
-								while (i > 0 && (this._l1 = lengths[--i]) >= v) { }
+								while (i > 0 && (this._l1 = lengths[--i]) >= v1) { }
-								if (i === 0 && v < this._l1) {
+								if (i === 0 && v1 < this._l1) {
 									this._l1 = 0;
 								} else {
 									i++;
@@ -421,16 +421,16 @@ import { _gsScope } from "./TweenLite.js";
 							}
 							curIndex = i;
 							//now find the appropriate sub-segment (we split it into the number of pieces that was defined by "precision" and measured each one)
-							v -= this._l1;
+							v1 -= this._l1;
 							i = this._si;
-							if (v > this._s2 && i < curSeg.length - 1) {
+							if (v1 > this._s2 && i < curSeg.length - 1) {
 								l = curSeg.length - 1;
-								while (i < l && (this._s2 = curSeg[++i]) <= v) {	}
+								while (i < l && (this._s2 = curSeg[++i]) <= v1) {	}
 								this._s1 = curSeg[i-1];
 								this._si = i;
-							} else if (v < this._s1 && i > 0) {
+							} else if (v1 < this._s1 && i > 0) {
-								while (i > 0 && (this._s1 = curSeg[--i]) >= v) {	}
+								while (i > 0 && (this._s1 = curSeg[--i]) >= v1) {	}
-								if (i === 0 && v < this._s1) {
+								if (i === 0 && v1 < this._s1) {
 									this._s1 = 0;
 								} else {
 									i++;
@@ -438,7 +438,7 @@ import { _gsScope } from "./TweenLite.js";
 								this._s2 = curSeg[i];
 								this._si = i;
 							}
-							t = ((i + (v - this._s1) / (this._s2 - this._s1)) * this._prec) || 0;
+							t = (v === 1) ? 1 : ((i + (v1 - this._s1) / (this._s2 - this._s1)) * this._prec) || 0;
 						}
 						inv = 1 - t;
 

lib/3rdparty/gsap/src/esm/CSSPlugin.js

@@ -1,6 +1,6 @@
 /*!
- * VERSION: 2.1.0
+ * VERSION: 2.1.3
- * DATE: 2019-02-15
+ * DATE: 2019-05-17
  * UPDATES AND DOCS AT: http://greensock.com
  *
  * @license Copyright (c) 2008-2019, GreenSock. All rights reserved.
@@ -30,7 +30,7 @@ import TweenLite, { _gsScope, globals, TweenPlugin } from "./TweenLite.js";
 			p = CSSPlugin.prototype = new TweenPlugin("css");
 
 		p.constructor = CSSPlugin;
-		CSSPlugin.version = "2.1.0";
+		CSSPlugin.version = "2.1.3";
 		CSSPlugin.API = 2;
 		CSSPlugin.defaultTransformPerspective = 0;
 		CSSPlugin.defaultSkewType = "compensated";
@@ -42,6 +42,7 @@ import TweenLite, { _gsScope, globals, TweenPlugin } from "./TweenLite.js";
 		var _numExp = /(?:\-|\.|\b)(\d|\.|e\-)+/g,
 			_relNumExp = /(?:\d|\-\d|\.\d|\-\.\d|\+=\d|\-=\d|\+=.\d|\-=\.\d)+/g,
 			_valuesExp = /(?:\+=|\-=|\-|\b)[\d\-\.]+[a-zA-Z0-9]*(?:%|\b)/gi, //finds all the values that begin with numbers or += or -= and then a number. Includes suffixes. We use this to split complex values apart like "1px 5px 20px rgb(255,102,51)"
+			_valuesExpWithCommas = /(?:\+=|\-=|\-|\b)[\d\-\.]+[a-zA-Z0-9]*(?:%|\b),?/gi, //finds all the values that begin with numbers or += or -= and then a number. Includes suffixes. We use this to split complex values apart like "1px 5px 20px rgb(255,102,51)"
 			_NaNExp = /(?![+-]?\d*\.?\d+|[+-]|e[+-]\d+)[^0-9]/g, //also allows scientific notation and doesn't kill the leading -/+ in -= and +=
 			_suffixExp = /(?:\d|\-|\+|=|#|\.)*/g,
 			_opacityExp = /opacity *= *([^)]*)/i,
@@ -63,7 +64,8 @@ import TweenLite, { _gsScope, globals, TweenPlugin } from "./TweenLite.js";
 			_dummyElement = {style:{}},
 			_doc = _gsScope.document || {createElement: function() {return _dummyElement;}},
 			_createElement = function(type, ns) {
-				return (ns && _doc.createElementNS) ? _doc.createElementNS(ns, type) : _doc.createElement(type);
+				var e = _doc.createElementNS ? _doc.createElementNS(ns || "http://www.w3.org/1999/xhtml", type) : _doc.createElement(type);
+				return e.style ? e : _doc.createElement(type); //some environments won't allow access to the element's style when created with a namespace in which case we default to the standard createElement() to work around the issue. Also note that when GSAP is embedded directly inside an SVG file, createElement() won't allow access to the style object in Firefox (see https://greensock.com/forums/topic/20215-problem-using-tweenmax-in-standalone-self-containing-svg-file-err-cannot-set-property-csstext-of-undefined/).
 			},
 			_tempDiv = _createElement("div"),
 			_tempImg = _createElement("img"),
@@ -643,14 +645,14 @@ import TweenLite, { _gsScope, globals, TweenPlugin } from "./TweenLite.js";
 						}
 						return a.join(",");
 					}
-					vals = v.match(_valuesExp) || [];
+					vals = v.match(delim === "," ? _valuesExp : _valuesExpWithCommas) || [];
 					i = vals.length;
 					if (numVals > i--) {
 						while (++i < numVals) {
 							vals[i] = collapsible ? vals[(((i - 1) / 2) | 0)] : dVals[i];
 						}
 					}
-					return pfx + vals.join(delim) + sfx;
+					return ((pfx && v !== "none") ? v.substr(0, v.indexOf(vals[0])) || pfx : pfx) + vals.join(delim) + sfx; //note: prefix might be different, like for clipPath it could start with inset( or polygon(
 				};
 				return formatter;
 			},
@@ -1233,7 +1235,7 @@ import TweenLite, { _gsScope, globals, TweenPlugin } from "./TweenLite.js";
 				//IE and Android stock don't support CSS transforms on SVG elements, so we must write them to the "transform" attribute. We populate this variable in the _parseTransform() method, and only if/when we come across an SVG element
 				var force = _ieVers || (/Android/i.test(_agent) && !_gsScope.chrome),
 					svg, rect, width;
-				if (_doc.createElementNS && !force) { //IE8 and earlier doesn't support SVG anyway
+				if (_doc.createElementNS && _docElement.appendChild && !force) { //IE8 and earlier doesn't support SVG anyway
 					svg = _createSVG("svg", _docElement);
 					rect = _createSVG("rect", svg, {width:100, height:50, x:100});
 					width = rect.getBoundingClientRect().width;
@@ -1351,7 +1353,7 @@ import TweenLite, { _gsScope, globals, TweenPlugin } from "./TweenLite.js";
 					s = (s && s.length === 4) ? [s[0].substr(4), Number(s[2].substr(4)), Number(s[1].substr(4)), s[3].substr(4), (tm.x || 0), (tm.y || 0)].join(",") : "";
 				}
 				isDefault = (!s || s === "none" || s === "matrix(1, 0, 0, 1, 0, 0)");
-				if (_transformProp && isDefault && !e.offsetParent) { //note: if offsetParent is null, that means the element isn't in the normal document flow, like if it has display:none or one of its ancestors has display:none). Firefox returns null for getComputedStyle() if the element is in an iframe that has display:none. https://bugzilla.mozilla.org/show_bug.cgi?id=548397
+				if (_transformProp && isDefault && !e.offsetParent && e !== _docElement) { //note: if offsetParent is null, that means the element isn't in the normal document flow, like if it has display:none or one of its ancestors has display:none). Firefox returns null for getComputedStyle() if the element is in an iframe that has display:none. https://bugzilla.mozilla.org/show_bug.cgi?id=548397
 					//browsers don't report transforms accurately unless the element is in the DOM and has a display value that's not "none". Firefox and Microsoft browsers have a partial bug where they'll report transforms even if display:none BUT not any percentage-based values like translate(-50%, 8px) will be reported as if it's translate(0, 8px).
 					n = style.display;
 					style.display = "block";
@@ -2113,7 +2115,7 @@ import TweenLite, { _gsScope, globals, TweenPlugin } from "./TweenLite.js";
 		}, allowFunc:true, prefix:true});
 
 		_registerComplexSpecialProp("boxShadow", {defaultValue:"0px 0px 0px 0px #999", prefix:true, color:true, multi:true, keyword:"inset"});
-		_registerComplexSpecialProp("clipPath", {defaultValue:"inset(0px)", prefix:true, multi:true, formatter:_getFormatter("inset(0px 0px 0px 0px)", false, true)});
+		_registerComplexSpecialProp("clipPath", {defaultValue:"inset(0%)", prefix:true, multi:true, formatter:_getFormatter("inset(0% 0% 0% 0%)", false, true)});
 
 		_registerComplexSpecialProp("borderRadius", {defaultValue:"0px", parser:function(t, e, p, cssp, pt, plugin) {
 			e = this.format(e);
@@ -2367,7 +2369,9 @@ import TweenLite, { _gsScope, globals, TweenPlugin } from "./TweenLite.js";
 			difData = _cssDif(t, bs, _getAllStyles(t), vars, cnptLookup);
 			t.setAttribute("class", b);
 			pt.data = difData.firstMPT;
-			t.style.cssText = cssText; //we recorded cssText before we swapped classes and ran _getAllStyles() because in cases when a className tween is overwritten, we remove all the related tweening properties from that class change (otherwise class-specific stuff can't override properties we've directly set on the target's style object due to specificity).
+			if (t.style.cssText !== cssText) { //only apply if things change. Otherwise, in cases like a background-image that's pulled dynamically, it could cause a refresh. See https://greensock.com/forums/topic/20368-possible-gsap-bug-switching-classnames-in-chrome/.
+				t.style.cssText = cssText; //we recorded cssText before we swapped classes and ran _getAllStyles() because in cases when a className tween is overwritten, we remove all the related tweening properties from that class change (otherwise class-specific stuff can't override properties we've directly set on the target's style object due to specificity).
+			}
 			pt = pt.xfirst = cssp.parse(t, difData.difs, pt, plugin); //we record the CSSPropTween as the xfirst so that we can handle overwriting propertly (if "className" gets overwritten, we must kill all the properties associated with the className part of the tween, so we can loop through from xfirst to the pt itself)
 			return pt;
 		}});

lib/3rdparty/gsap/src/esm/CSSRulePlugin.js

@@ -1,6 +1,6 @@
 /*!
- * VERSION: 0.6.7
+ * VERSION: 0.6.8
- * DATE: 2018-08-27
+ * DATE: 2019-02-22
  * UPDATES AND DOCS AT: http://greensock.com
  *
  * @license Copyright (c) 2008-2019, GreenSock. All rights reserved.
@@ -27,7 +27,7 @@ _gsScope._gsDefine("plugins.CSSRulePlugin", ["plugins.TweenPlugin","TweenLite","
 
 		p._propName = "cssRule";
 		p.constructor = CSSRulePlugin;
-		CSSRulePlugin.version = "0.6.7";
+		CSSRulePlugin.version = "0.6.8";
 		CSSRulePlugin.API = 2;
 
 		/**
@@ -93,7 +93,12 @@ _gsScope._gsDefine("plugins.CSSRulePlugin", ["plugins.TweenPlugin","TweenLite","
 		// @private gets called every time the tween updates, passing the new ratio (typically a value between 0 and 1, but not always (for example, if an Elastic.easeOut is used, the value can jump above 1 mid-tween). It will always start and 0 and end at 1.
 		p.setRatio = function(v) {
 			_superSetRatio.call(this, v);
-			this._ss.cssText = this._proxy.cssText;
+			var proxy = this._proxy,
+				ss = this._ss,
+				i = proxy.length;
+			while (--i > -1) {
+				ss[proxy[i]] = proxy[proxy[i]];
+			}
 		};
 		
 		

lib/3rdparty/gsap/src/esm/Draggable.js

@@ -1,6 +1,6 @@
 /*!
- * VERSION: 0.17.0
+ * VERSION: 0.17.1
- * DATE: 2019-02-07
+ * DATE: 2019-02-28
  * UPDATES AND DOCS AT: http://greensock.com
  *
  * Requires TweenLite and CSSPlugin version 1.17.0 or later (TweenMax contains both TweenLite and CSSPlugin). ThrowPropsPlugin is required for momentum-based continuation of movement after the mouse/touch is released (ThrowPropsPlugin is a membership benefit of Club GreenSock - http://greensock.com/club/).
@@ -1695,7 +1695,7 @@ import CSSPlugin from "./CSSPlugin.js";
 						if (e && e.target) {
 							_addListener(e.target, "mouseup", onRelease); //we also have to listen directly on the element because some browsers don't bubble up the event to the _doc on elements with contentEditable="true"
 						}
-						isClicking = (isClickable.call(self, e.target) && vars.dragClickables !== false && !force);
+						isClicking = (isClickable.call(self, e.target) && vars.dragClickables === false && !force);
 						if (isClicking) {
 							_addListener(e.target, "change", onRelease); //in some browsers, when you mousedown on a <select> element, no mouseup gets dispatched! So we listen for a "change" event instead.
 							_dispatchEvent(self, "pressInit", "onPressInit");
@@ -2398,7 +2398,7 @@ import CSSPlugin from "./CSSPlugin.js";
 		p.constructor = Draggable;
 		p.pointerX = p.pointerY = p.startX = p.startY = p.deltaX = p.deltaY = 0;
 		p.isDragging = p.isPressed = false;
-		Draggable.version = "0.17.0";
+		Draggable.version = "0.17.1";
 		Draggable.zIndex = 1000;
 
 		_addListener(_doc, "touchcancel", function() {

lib/3rdparty/gsap/src/esm/PixiPlugin.js

@@ -1,6 +1,6 @@
 /*!
- * VERSION: 0.2.1
+ * VERSION: 0.3.0
- * DATE: 2018-05-30
+ * DATE: 2019-05-13
  * UPDATES AND DOCS AT: http://greensock.com
  *
  * @license Copyright (c) 2008-2019, GreenSock. All rights reserved.
@@ -389,13 +389,14 @@ import { _gsScope } from "./TweenLite.js";
         priority: 0,
         API: 2,
 		global: true,
-        version: "0.2.1",
+        version: "0.3.0",
 
         init: function (target, values, tween, index) {
             if (!target instanceof _gsScope.PIXI.DisplayObject) {
                 return false;
             }
-            var context, axis, value, colorMatrix, filter, p, padding, colorSetter, i, data, pt;
+            var isV4 =  _gsScope.PIXI.VERSION.charAt(0) === "4",
+	            context, axis, value, colorMatrix, filter, p, padding, colorSetter, i, data, pt;
             for (p in values) {
                 context = _contexts[p];
                 value = values[p];
@@ -431,12 +432,12 @@ import { _gsScope } from "./TweenLite.js";
 						colorSetter = _buildColorSetter(tween, this);
 					}
 					if ((p === "lineColor" || p === "fillColor") && target instanceof _gsScope.PIXI.Graphics) {
-						data = target.graphicsData;
+						data = (target.geometry || target).graphicsData; //"geometry" was introduced in PIXI version 5
 						i = data.length;
 						while (--i > -1) {
-							_addColorTween(data[i], p, value, colorSetter, this);
+							_addColorTween(isV4 ? data[i] : data[i][p.substr(0, 4) + "Style"], isV4 ? p : "color", value, colorSetter, this);
 						}
-						colorSetter.graphics = target;
+						colorSetter.graphics = target.geometry || target;
 					} else {
 						_addColorTween(target, p, value, colorSetter, this);
 					}
@@ -460,5 +461,8 @@ import { _gsScope } from "./TweenLite.js";
 	PixiPlugin.parseColor = _parseColor;
 	PixiPlugin.formatColors = _formatColors;
 	PixiPlugin.colorStringFilter = _colorStringFilter;
+	PixiPlugin.registerPIXI = function(PIXI) {
+		_gsScope.PIXI = PIXI;
+	};
 
 export { PixiPlugin, PixiPlugin as default };

lib/3rdparty/gsap/src/esm/TimelineLite.js

@@ -1,6 +1,6 @@
 /*!
- * VERSION: 2.1.0
+ * VERSION: 2.1.3
- * DATE: 2019-02-15
+ * DATE: 2019-05-17
  * UPDATES AND DOCS AT: http://greensock.com
  *
  * @license Copyright (c) 2008-2019, GreenSock. All rights reserved.
@@ -70,16 +70,16 @@ _gsScope._gsDefine("TimelineLite", ["core.Animation","core.SimpleTimeline","Twee
 			_defaultImmediateRender = function(tl, toVars, fromVars, defaultFalse) { //default to immediateRender:true unless otherwise set in toVars, fromVars or if defaultFalse is passed in as true
 				var ir = "immediateRender";
 				if (!(ir in toVars)) {
-					toVars[ir] = !(tl._paused || (fromVars && fromVars[ir] === false) || defaultFalse);
+					toVars[ir] = !((fromVars && fromVars[ir] === false) || defaultFalse);
 				}
 				return toVars;
 			},
-			//for distributing values across an array. Can accept a number, a function or (most commonly) a function which can contain the following properties: {base, amount, from, ease, grid, axis, length}. Returns a function that expects the following parameters: index, target, array. Recognizes the following
+			//for distributing values across an array. Can accept a number, a function or (most commonly) a function which can contain the following properties: {base, amount, from, ease, grid, axis, length, each}. Returns a function that expects the following parameters: index, target, array. Recognizes the following
 			_distribute = function(v) {
 				if (typeof(v) === "function") {
 					return v;
 				}
-				var vars = isNaN(v) ? v : {n:1, from:(v < 0) ? ((v = -v) && "end") : 0}, //n:1 is just to indicate v was a number; we leverage that later to set v according to the length we get. If a number is passed in, we treat it like the old stagger value where 0.1, for example, would mean that things would be distributed with 0.1 between each element in the array rather than a total "amount" that's chunked out among them all.
+				var vars = (typeof(v) === "object") ? v : {each:v}, //n:1 is just to indicate v was a number; we leverage that later to set v according to the length we get. If a number is passed in, we treat it like the old stagger value where 0.1, for example, would mean that things would be distributed with 0.1 between each element in the array rather than a total "amount" that's chunked out among them all.
 					ease = vars.ease,
 					from = vars.from || 0,
 					base = vars.base || 0,
@@ -116,15 +116,16 @@ _gsScope._gsDefine("TimelineLite", ["core.Animation","core.SimpleTimeline","Twee
 						}
 						distances.max = max - min;
 						distances.min = min;
-						distances.v = vars.n ? l * (v || 0) : vars.amount;
+						distances.v = l = vars.amount || (vars.each * (wrap > l ? l - 1 : !axis ? Math.max(wrap, l / wrap) : axis === "y" ? l / wrap : wrap)) || 0;
+						distances.b = (l < 0) ? base - l : base;
 					}
 					l = (distances[i] - distances.min) / distances.max;
-					return base + (ease ? ease.getRatio(l) : l) * distances.v;
+					return distances.b + (ease ? ease.getRatio(l) : l) * distances.v;
 				};
 			},
 			p = TimelineLite.prototype = new SimpleTimeline();
 
-		TimelineLite.version = "2.1.0";
+		TimelineLite.version = "2.1.3";
 		TimelineLite.distribute = _distribute;
 		p.constructor = TimelineLite;
 		p.kill()._gc = p._forcingPlayhead = p._hasPause = false;
@@ -441,6 +442,29 @@ _gsScope._gsDefine("TimelineLite", ["core.Animation","core.SimpleTimeline","Twee
 			if (prevTime !== self._time) { //if totalDuration() finds a child with a negative startTime and smoothChildTiming is true, things get shifted around internally so we need to adjust the time accordingly. For example, if a tween starts at -30 we must shift EVERYTHING forward 30 seconds and move this timeline's startTime backward by 30 seconds so that things align with the playhead (no jump).
 				time += self._time - prevTime;
 			}
+			if (self._hasPause && !self._forcingPlayhead && !suppressEvents) {
+				if (time > prevTime) {
+					tween = self._first;
+					while (tween && tween._startTime <= time && !pauseTween) {
+						if (!tween._duration) if (tween.data === "isPause" && !tween.ratio && !(tween._startTime === 0 && self._rawPrevTime === 0)) {
+							pauseTween = tween;
+						}
+						tween = tween._next;
+					}
+				} else {
+					tween = self._last;
+					while (tween && tween._startTime >= time && !pauseTween) {
+						if (!tween._duration) if (tween.data === "isPause" && tween._rawPrevTime > 0) {
+							pauseTween = tween;
+						}
+						tween = tween._prev;
+					}
+				}
+				if (pauseTween) {
+					self._time = self._totalTime = time = pauseTween._startTime;
+					pauseTime = self._startTime + (self._reversed ? self._duration - time : time) / self._timeScale;
+				}
+			}
 			if (time >= totalDur - _tinyNum && time >= 0) { //to work around occasional floating point math artifacts.
 				self._totalTime = self._time = totalDur;
 				if (!self._reversed) if (!self._hasPausedChild()) {
@@ -493,31 +517,6 @@ _gsScope._gsDefine("TimelineLite", ["core.Animation","core.SimpleTimeline","Twee
 				}
 
 			} else {
-
-				if (self._hasPause && !self._forcingPlayhead && !suppressEvents) {
-					if (time >= prevTime) {
-						tween = self._first;
-						while (tween && tween._startTime <= time && !pauseTween) {
-							if (!tween._duration) if (tween.data === "isPause" && !tween.ratio && !(tween._startTime === 0 && self._rawPrevTime === 0)) {
-								pauseTween = tween;
-							}
-							tween = tween._next;
-						}
-					} else {
-						tween = self._last;
-						while (tween && tween._startTime >= time && !pauseTween) {
-							if (!tween._duration) if (tween.data === "isPause" && tween._rawPrevTime > 0) {
-								pauseTween = tween;
-							}
-							tween = tween._prev;
-						}
-					}
-					if (pauseTween) {
-						self._time = self._totalTime = time = pauseTween._startTime;
-						pauseTime = self._startTime + (time / self._timeScale);
-					}
-				}
-
 				self._totalTime = self._time = self._rawPrevTime = time;
 			}
 			if ((self._time === prevTime || !self._first) && !force && !internalForce && !pauseTween) {

lib/3rdparty/gsap/src/esm/TimelineMax.js

@@ -1,6 +1,6 @@
 /*!
- * VERSION: 2.1.0
+ * VERSION: 2.1.3
- * DATE: 2019-02-15
+ * DATE: 2019-05-17
  * UPDATES AND DOCS AT: http://greensock.com
  *
  * @license Copyright (c) 2008-2019, GreenSock. All rights reserved.
@@ -34,7 +34,7 @@ _gsScope._gsDefine("TimelineMax", ["TimelineLite","TweenLite","easing.Ease"], fu
 
 		p.constructor = TimelineMax;
 		p.kill()._gc = false;
-		TimelineMax.version = "2.1.0";
+		TimelineMax.version = "2.1.3";
 
 		p.invalidate = function() {
 			this._yoyo = !!this.vars.yoyo;
@@ -210,35 +210,34 @@ _gsScope._gsDefine("TimelineMax", ["TimelineLite","TweenLite","easing.Ease"], fu
 						}
 					}
 				}
+			}
 
-				if (self._hasPause && !self._forcingPlayhead && !suppressEvents) {
+			if (self._hasPause && !self._forcingPlayhead && !suppressEvents) {
-					time = self._time;
+				time = self._time;
-					if (time >= prevTime || (self._repeat && prevCycle !== self._cycle)) {
+				if (time > prevTime || (self._repeat && prevCycle !== self._cycle)) {
-						tween = self._first;
+					tween = self._first;
-						while (tween && tween._startTime <= time && !pauseTween) {
+					while (tween && tween._startTime <= time && !pauseTween) {
-							if (!tween._duration) if (tween.data === "isPause" && !tween.ratio && !(tween._startTime === 0 && self._rawPrevTime === 0)) {
+						if (!tween._duration) if (tween.data === "isPause" && !tween.ratio && !(tween._startTime === 0 && self._rawPrevTime === 0)) {
-								pauseTween = tween;
+							pauseTween = tween;
-							}
-							tween = tween._next;
-						}
-					} else {
-						tween = self._last;
-						while (tween && tween._startTime >= time && !pauseTween) {
-							if (!tween._duration) if (tween.data === "isPause" && tween._rawPrevTime > 0) {
-								pauseTween = tween;
-							}
-							tween = tween._prev;
 						}
+						tween = tween._next;
 					}
-					if (pauseTween) {
+				} else {
-						pauseTime = self._startTime + (pauseTween._startTime / self._timeScale);
+					tween = self._last;
-						if (pauseTween._startTime < dur) {
+					while (tween && tween._startTime >= time && !pauseTween) {
-							self._time = self._rawPrevTime = time = pauseTween._startTime;
+						if (!tween._duration) if (tween.data === "isPause" && tween._rawPrevTime > 0) {
-							self._totalTime = time + (self._cycle * (self._totalDuration + self._repeatDelay));
+							pauseTween = tween;
 						}
+						tween = tween._prev;
+					}
+				}
+				if (pauseTween) {
+					pauseTime = self._startTime + (self._reversed ? self._duration - pauseTween._startTime : pauseTween._startTime) / self._timeScale;
+					if (pauseTween._startTime < dur) {
+						self._time = self._rawPrevTime = time = pauseTween._startTime;
+						self._totalTime = time + (self._cycle * (self._totalDuration + self._repeatDelay));
 					}
 				}
-
 			}
 
 			if (self._cycle !== prevCycle) if (!self._locked) {
@@ -477,7 +476,7 @@ _gsScope._gsDefine("TimelineMax", ["TimelineLite","TweenLite","easing.Ease"], fu
 			}
 			var duration = this._duration,
 				cycle = this._cycle,
-				cycleDur = cycle * (duration * this._repeatDelay);
+				cycleDur = cycle * (duration + this._repeatDelay);
 			if (value > duration) {
 				value = duration;
 			}

lib/3rdparty/gsap/src/esm/TweenLite.js

@@ -1,6 +1,6 @@
 /*!
- * VERSION: 2.1.0
+ * VERSION: 2.1.3
- * DATE: 2019-02-15
+ * DATE: 2019-05-17
  * UPDATES AND DOCS AT: http://greensock.com
  *
  * @license Copyright (c) 2008-2019, GreenSock. All rights reserved.
@@ -972,7 +972,7 @@ export var TweenLite = (function(window) {
 		p._firstPT = p._targets = p._overwrittenProps = p._startAt = null;
 		p._notifyPluginsOfEnabled = p._lazy = false;
 
-		TweenLite.version = "2.1.0";
+		TweenLite.version = "2.1.3";
 		TweenLite.defaultEase = p._ease = new Ease(null, null, 1, 1);
 		TweenLite.defaultOverwrite = "auto";
 		TweenLite.ticker = _ticker;

lib/3rdparty/gsap/src/esm/TweenMax.js

@@ -1,6 +1,6 @@
 /*!
- * VERSION: 2.1.0
+ * VERSION: 2.1.3
- * DATE: 2019-02-15
+ * DATE: 2019-05-17
  * UPDATES AND DOCS AT: http://greensock.com
  *
  * @license Copyright (c) 2008-2019, GreenSock. All rights reserved.

lib/3rdparty/gsap/src/esm/TweenMaxBase.js

@@ -1,6 +1,6 @@
 /*!
- * VERSION: 2.1.0
+ * VERSION: 2.1.3
- * DATE: 2019-02-15
+ * DATE: 2019-05-17
  * UPDATES AND DOCS AT: http://greensock.com
  *
  * @license Copyright (c) 2008-2019, GreenSock. All rights reserved.
@@ -32,12 +32,12 @@ _gsScope._gsDefine("TweenMax", ["core.Animation","core.SimpleTimeline","TweenLit
 				}
 				delete vars.cycle;
 			},
-			//for distributing values across an array. Can accept a number, a function or (most commonly) a function which can contain the following properties: {base, amount, from, ease, grid, axis, length}. Returns a function that expects the following parameters: index, target, array. Recognizes the following
+			//for distributing values across an array. Can accept a number, a function or (most commonly) a function which can contain the following properties: {base, amount, from, ease, grid, axis, length, each}. Returns a function that expects the following parameters: index, target, array. Recognizes the following
 			_distribute = function(v) {
 				if (typeof(v) === "function") {
 					return v;
 				}
-				var vars = isNaN(v) ? v : {n:1, from:(v < 0) ? ((v = -v) && "end") : 0}, //n:1 is just to indicate v was a number; we leverage that later to set v according to the length we get. If a number is passed in, we treat it like the old stagger value where 0.1, for example, would mean that things would be distributed with 0.1 between each element in the array rather than a total "amount" that's chunked out among them all.
+				var vars = (typeof(v) === "object") ? v : {each:v}, //n:1 is just to indicate v was a number; we leverage that later to set v according to the length we get. If a number is passed in, we treat it like the old stagger value where 0.1, for example, would mean that things would be distributed with 0.1 between each element in the array rather than a total "amount" that's chunked out among them all.
 					ease = vars.ease,
 					from = vars.from || 0,
 					base = vars.base || 0,
@@ -74,10 +74,11 @@ _gsScope._gsDefine("TweenMax", ["core.Animation","core.SimpleTimeline","TweenLit
 						}
 						distances.max = max - min;
 						distances.min = min;
-						distances.v = vars.n ? l * (v || 0) : vars.amount;
+						distances.v = l = vars.amount || (vars.each * (wrap > l ? l - 1 : !axis ? Math.max(wrap, l / wrap) : axis === "y" ? l / wrap : wrap)) || 0;
+						distances.b = (l < 0) ? base - l : base;
 					}
 					l = (distances[i] - distances.min) / distances.max;
-					return base + (ease ? ease.getRatio(l) : l) * distances.v;
+					return distances.b + (ease ? ease.getRatio(l) : l) * distances.v;
 				};
 			},
 			TweenMax = function(target, duration, vars) {
@@ -98,7 +99,7 @@ _gsScope._gsDefine("TweenMax", ["core.Animation","core.SimpleTimeline","TweenLit
 			p = TweenMax.prototype = TweenLite.to({}, 0.1, {}),
 			_blankArray = [];
 
-		TweenMax.version = "2.1.0";
+		TweenMax.version = "2.1.3";
 		p.constructor = TweenMax;
 		p.kill()._gc = false;
 		TweenMax.killTweensOf = TweenMax.killDelayedCallsTo = TweenLite.killTweensOf;
@@ -594,7 +595,7 @@ _gsScope._gsDefine("TweenMax", ["core.Animation","core.SimpleTimeline","TweenLit
 //---- GETTERS / SETTERS ----------------------------------------------------------------------------------------------------------
 
 		p.progress = function(value, suppressEvents) {
-			return (!arguments.length) ? this._time / this.duration() : this.totalTime( this.duration() * ((this._yoyo && (this._cycle & 1) !== 0) ? 1 - value : value) + (this._cycle * (this._duration + this._repeatDelay)), suppressEvents);
+			return (!arguments.length) ? (this.duration() ? this._time / this._duration : this.ratio) : this.totalTime( this.duration() * ((this._yoyo && (this._cycle & 1) !== 0) ? 1 - value : value) + (this._cycle * (this._duration + this._repeatDelay)), suppressEvents);
 		};
 
 		p.totalProgress = function(value, suppressEvents) {
@@ -610,7 +611,7 @@ _gsScope._gsDefine("TweenMax", ["core.Animation","core.SimpleTimeline","TweenLit
 			}
 			var duration = this._duration,
 				cycle = this._cycle,
-				cycleDur = cycle * (duration * this._repeatDelay);
+				cycleDur = cycle * (duration + this._repeatDelay);
 			if (value > duration) {
 				value = duration;
 			}

lib/3rdparty/gsap/src/esm/all.js

@@ -1,6 +1,6 @@
 /*!
- * VERSION: 2.1.0
+ * VERSION: 2.1.3
- * DATE: 2019-02-15
+ * DATE: 2019-05-17
  * UPDATES AND DOCS AT: http://greensock.com
  *
  * @license Copyright (c) 2008-2019, GreenSock. All rights reserved.

lib/3rdparty/gsap/src/esm/index.js

@@ -1,6 +1,6 @@
 /*!
- * VERSION: 2.1.0
+ * VERSION: 2.1.3
- * DATE: 2019-02-07
+ * DATE: 2019-05-17
  * UPDATES AND DOCS AT: http://greensock.com
  *
  * @license Copyright (c) 2008-2019, GreenSock. All rights reserved.

lib/3rdparty/gsap/src/esm/package.json

@@ -1,7 +1,7 @@
 {
     "name": "gsap",
-    "version": "2.1.0",
+    "version": "2.1.3",
-    "description": "GSAP is a JavaScript library for creating high-performance animations that work in **every** major browser (or beyond the browser). No other library delivers such advanced sequencing, reliability, API efficiency, and tight control while solving real-world problems on over 4 million sites. GSAP works around countless browser inconsistencies; your animations 'just work'. Animate CSS properties, SVG, canvas libraries, custom properties of generic objects, colors, strings...pretty much anything! At its core, GSAP is a property manipulator, updating values over time very quickly with extreme accuracy. And it's up to 20x faster than jQuery! See http://greensock.com/why-gsap/ for details about what makes GSAP so special.",
+    "description": "GSAP is a JavaScript library for creating high-performance animations that work in **every** major browser (or beyond the browser). No other library delivers such advanced sequencing, reliability, API efficiency, and tight control while solving real-world problems on over 8 million sites. GSAP works around countless browser inconsistencies; your animations 'just work'. Animate CSS properties, SVG, canvas libraries, custom properties of generic objects, colors, strings...pretty much anything! At its core, GSAP is a property manipulator, updating values over time very quickly with extreme accuracy. And it's up to 20x faster than jQuery! See http://greensock.com/why-gsap/ for details about what makes GSAP so special.",
     "homepage": "https://greensock.com/gsap/",
     "filename": "index.js",
     "module": "index.js",

lib/3rdparty/gsap/src/minified/plugins/CSSRulePlugin.min.js

@@ -1,6 +1,6 @@
 /*!
- * VERSION: 0.6.6
+ * VERSION: 0.6.8
- * DATE: 2018-02-15
+ * DATE: 2018-02-22
  * UPDATES AND DOCS AT: http://greensock.com
  *
  * @license Copyright (c) 2008-2019, GreenSock. All rights reserved.
@@ -9,4 +9,4 @@
  * 
  * @author: Jack Doyle, jack@greensock.com
  */
-var _gsScope="undefined"!=typeof module&&module.exports&&"undefined"!=typeof global?global:this||window;(_gsScope._gsQueue||(_gsScope._gsQueue=[])).push(function(){"use strict";_gsScope._gsDefine("plugins.CSSRulePlugin",["plugins.TweenPlugin","TweenLite","plugins.CSSPlugin"],function(a,b,c){var d=function(){a.call(this,"cssRule"),this._overwriteProps.length=0},e=_gsScope.document,f=c.prototype.setRatio,g=d.prototype=new c;return g._propName="cssRule",g.constructor=d,d.version="0.6.6",d.API=2,d.getRule=function(a){var b,c,d,f,g=e.all?"rules":"cssRules",h=e.styleSheets,i=h.length,j=":"===a.charAt(0);for(a=(j?"":",")+a.split("::").join(":").toLowerCase()+",",j&&(f=[]);--i>-1;){try{if(c=h[i][g],!c)continue;b=c.length}catch(k){console.log(k);continue}for(;--b>-1;)if(d=c[b],d.selectorText&&-1!==(","+d.selectorText.split("::").join(":").toLowerCase()+",").indexOf(a)){if(!j)return d.style;f.push(d.style)}}return f},g._onInitTween=function(a,b,d){if(void 0===a.cssText)return!1;var f=a._gsProxy=a._gsProxy||e.createElement("div");return this._ss=a,this._proxy=f.style,f.style.cssText=a.cssText,c.prototype._onInitTween.call(this,f,b,d),!0},g.setRatio=function(a){f.call(this,a),this._ss.cssText=this._proxy.cssText},a.activate([d]),d},!0)}),_gsScope._gsDefine&&_gsScope._gsQueue.pop()(),function(a){"use strict";var b=function(){return(_gsScope.GreenSockGlobals||_gsScope)[a]};"undefined"!=typeof module&&module.exports?(require("../TweenLite.min.js"),module.exports=b()):"function"==typeof define&&define.amd&&define(["TweenLite"],b)}("CSSRulePlugin");
+var _gsScope="undefined"!=typeof module&&module.exports&&"undefined"!=typeof global?global:this||window;(_gsScope._gsQueue||(_gsScope._gsQueue=[])).push(function(){"use strict";_gsScope._gsDefine("plugins.CSSRulePlugin",["plugins.TweenPlugin","TweenLite","plugins.CSSPlugin"],function(a,b,c){var d=function(){a.call(this,"cssRule"),this._overwriteProps.length=0},e=_gsScope.document,f=c.prototype.setRatio,g=d.prototype=new c;return g._propName="cssRule",g.constructor=d,d.version="0.6.8",d.API=2,d.getRule=function(a){var b,c,d,f,g=e.all?"rules":"cssRules",h=e.styleSheets,i=h.length,j=":"===a.charAt(0);for(a=(j?"":",")+a.split("::").join(":").toLowerCase()+",",j&&(f=[]);--i>-1;){try{if(c=h[i][g],!c)continue;b=c.length}catch(k){console.log(k);continue}for(;--b>-1;)if(d=c[b],d.selectorText&&-1!==(","+d.selectorText.split("::").join(":").toLowerCase()+",").indexOf(a)){if(!j)return d.style;f.push(d.style)}}return f},g._onInitTween=function(a,b,d){if(void 0===a.cssText)return!1;var f=a._gsProxy=a._gsProxy||e.createElement("div");return this._ss=a,this._proxy=f.style,f.style.cssText=a.cssText,c.prototype._onInitTween.call(this,f,b,d),!0},g.setRatio=function(a){f.call(this,a);for(var b=this._proxy,c=this._ss,d=b.length;--d>-1;)c[b[d]]=b[b[d]]},a.activate([d]),d},!0)}),_gsScope._gsDefine&&_gsScope._gsQueue.pop()(),function(a){"use strict";var b=function(){return(_gsScope.GreenSockGlobals||_gsScope)[a]};"undefined"!=typeof module&&module.exports?(require("../TweenLite.min.js"),module.exports=b()):"function"==typeof define&&define.amd&&define(["TweenLite"],b)}("CSSRulePlugin");

lib/3rdparty/gsap/src/uncompressed/TimelineLite.js

@@ -1,6 +1,6 @@
 /*!
- * VERSION: 2.1.0
+ * VERSION: 2.1.3
- * DATE: 2019-02-15
+ * DATE: 2019-05-17
  * UPDATES AND DOCS AT: http://greensock.com
  *
  * @license Copyright (c) 2008-2019, GreenSock. All rights reserved.
@@ -72,16 +72,16 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 			_defaultImmediateRender = function(tl, toVars, fromVars, defaultFalse) { //default to immediateRender:true unless otherwise set in toVars, fromVars or if defaultFalse is passed in as true
 				var ir = "immediateRender";
 				if (!(ir in toVars)) {
-					toVars[ir] = !(tl._paused || (fromVars && fromVars[ir] === false) || defaultFalse);
+					toVars[ir] = !((fromVars && fromVars[ir] === false) || defaultFalse);
 				}
 				return toVars;
 			},
-			//for distributing values across an array. Can accept a number, a function or (most commonly) a function which can contain the following properties: {base, amount, from, ease, grid, axis, length}. Returns a function that expects the following parameters: index, target, array. Recognizes the following
+			//for distributing values across an array. Can accept a number, a function or (most commonly) a function which can contain the following properties: {base, amount, from, ease, grid, axis, length, each}. Returns a function that expects the following parameters: index, target, array. Recognizes the following
 			_distribute = function(v) {
 				if (typeof(v) === "function") {
 					return v;
 				}
-				var vars = isNaN(v) ? v : {n:1, from:(v < 0) ? ((v = -v) && "end") : 0}, //n:1 is just to indicate v was a number; we leverage that later to set v according to the length we get. If a number is passed in, we treat it like the old stagger value where 0.1, for example, would mean that things would be distributed with 0.1 between each element in the array rather than a total "amount" that's chunked out among them all.
+				var vars = (typeof(v) === "object") ? v : {each:v}, //n:1 is just to indicate v was a number; we leverage that later to set v according to the length we get. If a number is passed in, we treat it like the old stagger value where 0.1, for example, would mean that things would be distributed with 0.1 between each element in the array rather than a total "amount" that's chunked out among them all.
 					ease = vars.ease,
 					from = vars.from || 0,
 					base = vars.base || 0,
@@ -118,15 +118,16 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 						}
 						distances.max = max - min;
 						distances.min = min;
-						distances.v = vars.n ? l * (v || 0) : vars.amount;
+						distances.v = l = vars.amount || (vars.each * (wrap > l ? l - 1 : !axis ? Math.max(wrap, l / wrap) : axis === "y" ? l / wrap : wrap)) || 0;
+						distances.b = (l < 0) ? base - l : base;
 					}
 					l = (distances[i] - distances.min) / distances.max;
-					return base + (ease ? ease.getRatio(l) : l) * distances.v;
+					return distances.b + (ease ? ease.getRatio(l) : l) * distances.v;
 				};
 			},
 			p = TimelineLite.prototype = new SimpleTimeline();
 
-		TimelineLite.version = "2.1.0";
+		TimelineLite.version = "2.1.3";
 		TimelineLite.distribute = _distribute;
 		p.constructor = TimelineLite;
 		p.kill()._gc = p._forcingPlayhead = p._hasPause = false;
@@ -443,6 +444,29 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 			if (prevTime !== self._time) { //if totalDuration() finds a child with a negative startTime and smoothChildTiming is true, things get shifted around internally so we need to adjust the time accordingly. For example, if a tween starts at -30 we must shift EVERYTHING forward 30 seconds and move this timeline's startTime backward by 30 seconds so that things align with the playhead (no jump).
 				time += self._time - prevTime;
 			}
+			if (self._hasPause && !self._forcingPlayhead && !suppressEvents) {
+				if (time > prevTime) {
+					tween = self._first;
+					while (tween && tween._startTime <= time && !pauseTween) {
+						if (!tween._duration) if (tween.data === "isPause" && !tween.ratio && !(tween._startTime === 0 && self._rawPrevTime === 0)) {
+							pauseTween = tween;
+						}
+						tween = tween._next;
+					}
+				} else {
+					tween = self._last;
+					while (tween && tween._startTime >= time && !pauseTween) {
+						if (!tween._duration) if (tween.data === "isPause" && tween._rawPrevTime > 0) {
+							pauseTween = tween;
+						}
+						tween = tween._prev;
+					}
+				}
+				if (pauseTween) {
+					self._time = self._totalTime = time = pauseTween._startTime;
+					pauseTime = self._startTime + (self._reversed ? self._duration - time : time) / self._timeScale;
+				}
+			}
 			if (time >= totalDur - _tinyNum && time >= 0) { //to work around occasional floating point math artifacts.
 				self._totalTime = self._time = totalDur;
 				if (!self._reversed) if (!self._hasPausedChild()) {
@@ -495,31 +519,6 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 				}
 
 			} else {
-
-				if (self._hasPause && !self._forcingPlayhead && !suppressEvents) {
-					if (time >= prevTime) {
-						tween = self._first;
-						while (tween && tween._startTime <= time && !pauseTween) {
-							if (!tween._duration) if (tween.data === "isPause" && !tween.ratio && !(tween._startTime === 0 && self._rawPrevTime === 0)) {
-								pauseTween = tween;
-							}
-							tween = tween._next;
-						}
-					} else {
-						tween = self._last;
-						while (tween && tween._startTime >= time && !pauseTween) {
-							if (!tween._duration) if (tween.data === "isPause" && tween._rawPrevTime > 0) {
-								pauseTween = tween;
-							}
-							tween = tween._prev;
-						}
-					}
-					if (pauseTween) {
-						self._time = self._totalTime = time = pauseTween._startTime;
-						pauseTime = self._startTime + (time / self._timeScale);
-					}
-				}
-
 				self._totalTime = self._time = self._rawPrevTime = time;
 			}
 			if ((self._time === prevTime || !self._first) && !force && !internalForce && !pauseTween) {

lib/3rdparty/gsap/src/uncompressed/TimelineMax.js

@@ -1,6 +1,6 @@
 /*!
- * VERSION: 2.1.0
+ * VERSION: 2.1.3
- * DATE: 2019-02-11
+ * DATE: 2019-05-17
  * UPDATES AND DOCS AT: http://greensock.com
  *
  * @license Copyright (c) 2008-2019, GreenSock. All rights reserved.
@@ -35,7 +35,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 			
 		p.constructor = TimelineMax;
 		p.kill()._gc = false;
-		TimelineMax.version = "2.1.0";
+		TimelineMax.version = "2.1.3";
 		
 		p.invalidate = function() {
 			this._yoyo = !!this.vars.yoyo;
@@ -211,35 +211,34 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 						}
 					}
 				}
+			}
 
-				if (self._hasPause && !self._forcingPlayhead && !suppressEvents) {
+			if (self._hasPause && !self._forcingPlayhead && !suppressEvents) {
-					time = self._time;
+				time = self._time;
-					if (time >= prevTime || (self._repeat && prevCycle !== self._cycle)) {
+				if (time > prevTime || (self._repeat && prevCycle !== self._cycle)) {
-						tween = self._first;
+					tween = self._first;
-						while (tween && tween._startTime <= time && !pauseTween) {
+					while (tween && tween._startTime <= time && !pauseTween) {
-							if (!tween._duration) if (tween.data === "isPause" && !tween.ratio && !(tween._startTime === 0 && self._rawPrevTime === 0)) {
+						if (!tween._duration) if (tween.data === "isPause" && !tween.ratio && !(tween._startTime === 0 && self._rawPrevTime === 0)) {
-								pauseTween = tween;
+							pauseTween = tween;
-							}
-							tween = tween._next;
-						}
-					} else {
-						tween = self._last;
-						while (tween && tween._startTime >= time && !pauseTween) {
-							if (!tween._duration) if (tween.data === "isPause" && tween._rawPrevTime > 0) {
-								pauseTween = tween;
-							}
-							tween = tween._prev;
 						}
+						tween = tween._next;
 					}
-					if (pauseTween) {
+				} else {
-						pauseTime = self._startTime + (pauseTween._startTime / self._timeScale);
+					tween = self._last;
-						if (pauseTween._startTime < dur) {
+					while (tween && tween._startTime >= time && !pauseTween) {
-							self._time = self._rawPrevTime = time = pauseTween._startTime;
+						if (!tween._duration) if (tween.data === "isPause" && tween._rawPrevTime > 0) {
-							self._totalTime = time + (self._cycle * (self._totalDuration + self._repeatDelay));
+							pauseTween = tween;
 						}
+						tween = tween._prev;
+					}
+				}
+				if (pauseTween) {
+					pauseTime = self._startTime + (self._reversed ? self._duration - pauseTween._startTime : pauseTween._startTime) / self._timeScale;
+					if (pauseTween._startTime < dur) {
+						self._time = self._rawPrevTime = time = pauseTween._startTime;
+						self._totalTime = time + (self._cycle * (self._totalDuration + self._repeatDelay));
 					}
 				}
-
 			}
 			
 			if (self._cycle !== prevCycle) if (!self._locked) {
@@ -478,7 +477,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 			}
 			var duration = this._duration,
 				cycle = this._cycle,
-				cycleDur = cycle * (duration * this._repeatDelay);
+				cycleDur = cycle * (duration + this._repeatDelay);
 			if (value > duration) {
 				value = duration;
 			}
@@ -589,16 +588,16 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 			_defaultImmediateRender = function(tl, toVars, fromVars, defaultFalse) { //default to immediateRender:true unless otherwise set in toVars, fromVars or if defaultFalse is passed in as true
 				var ir = "immediateRender";
 				if (!(ir in toVars)) {
-					toVars[ir] = !(tl._paused || (fromVars && fromVars[ir] === false) || defaultFalse);
+					toVars[ir] = !((fromVars && fromVars[ir] === false) || defaultFalse);
 				}
 				return toVars;
 			},
-			//for distributing values across an array. Can accept a number, a function or (most commonly) a function which can contain the following properties: {base, amount, from, ease, grid, axis, length}. Returns a function that expects the following parameters: index, target, array. Recognizes the following
+			//for distributing values across an array. Can accept a number, a function or (most commonly) a function which can contain the following properties: {base, amount, from, ease, grid, axis, length, each}. Returns a function that expects the following parameters: index, target, array. Recognizes the following
 			_distribute = function(v) {
 				if (typeof(v) === "function") {
 					return v;
 				}
-				var vars = isNaN(v) ? v : {n:1, from:(v < 0) ? ((v = -v) && "end") : 0}, //n:1 is just to indicate v was a number; we leverage that later to set v according to the length we get. If a number is passed in, we treat it like the old stagger value where 0.1, for example, would mean that things would be distributed with 0.1 between each element in the array rather than a total "amount" that's chunked out among them all.
+				var vars = (typeof(v) === "object") ? v : {each:v}, //n:1 is just to indicate v was a number; we leverage that later to set v according to the length we get. If a number is passed in, we treat it like the old stagger value where 0.1, for example, would mean that things would be distributed with 0.1 between each element in the array rather than a total "amount" that's chunked out among them all.
 					ease = vars.ease,
 					from = vars.from || 0,
 					base = vars.base || 0,
@@ -635,15 +634,16 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 						}
 						distances.max = max - min;
 						distances.min = min;
-						distances.v = vars.n ? l * (v || 0) : vars.amount;
+						distances.v = l = vars.amount || (vars.each * (wrap > l ? l - 1 : !axis ? Math.max(wrap, l / wrap) : axis === "y" ? l / wrap : wrap)) || 0;
+						distances.b = (l < 0) ? base - l : base;
 					}
 					l = (distances[i] - distances.min) / distances.max;
-					return base + (ease ? ease.getRatio(l) : l) * distances.v;
+					return distances.b + (ease ? ease.getRatio(l) : l) * distances.v;
 				};
 			},
 			p = TimelineLite.prototype = new SimpleTimeline();
 
-		TimelineLite.version = "2.1.0";
+		TimelineLite.version = "2.1.3";
 		TimelineLite.distribute = _distribute;
 		p.constructor = TimelineLite;
 		p.kill()._gc = p._forcingPlayhead = p._hasPause = false;
@@ -960,6 +960,29 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 			if (prevTime !== self._time) { //if totalDuration() finds a child with a negative startTime and smoothChildTiming is true, things get shifted around internally so we need to adjust the time accordingly. For example, if a tween starts at -30 we must shift EVERYTHING forward 30 seconds and move this timeline's startTime backward by 30 seconds so that things align with the playhead (no jump).
 				time += self._time - prevTime;
 			}
+			if (self._hasPause && !self._forcingPlayhead && !suppressEvents) {
+				if (time > prevTime) {
+					tween = self._first;
+					while (tween && tween._startTime <= time && !pauseTween) {
+						if (!tween._duration) if (tween.data === "isPause" && !tween.ratio && !(tween._startTime === 0 && self._rawPrevTime === 0)) {
+							pauseTween = tween;
+						}
+						tween = tween._next;
+					}
+				} else {
+					tween = self._last;
+					while (tween && tween._startTime >= time && !pauseTween) {
+						if (!tween._duration) if (tween.data === "isPause" && tween._rawPrevTime > 0) {
+							pauseTween = tween;
+						}
+						tween = tween._prev;
+					}
+				}
+				if (pauseTween) {
+					self._time = self._totalTime = time = pauseTween._startTime;
+					pauseTime = self._startTime + (self._reversed ? self._duration - time : time) / self._timeScale;
+				}
+			}
 			if (time >= totalDur - _tinyNum && time >= 0) { //to work around occasional floating point math artifacts.
 				self._totalTime = self._time = totalDur;
 				if (!self._reversed) if (!self._hasPausedChild()) {
@@ -1012,31 +1035,6 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 				}
 
 			} else {
-
-				if (self._hasPause && !self._forcingPlayhead && !suppressEvents) {
-					if (time >= prevTime) {
-						tween = self._first;
-						while (tween && tween._startTime <= time && !pauseTween) {
-							if (!tween._duration) if (tween.data === "isPause" && !tween.ratio && !(tween._startTime === 0 && self._rawPrevTime === 0)) {
-								pauseTween = tween;
-							}
-							tween = tween._next;
-						}
-					} else {
-						tween = self._last;
-						while (tween && tween._startTime >= time && !pauseTween) {
-							if (!tween._duration) if (tween.data === "isPause" && tween._rawPrevTime > 0) {
-								pauseTween = tween;
-							}
-							tween = tween._prev;
-						}
-					}
-					if (pauseTween) {
-						self._time = self._totalTime = time = pauseTween._startTime;
-						pauseTime = self._startTime + (time / self._timeScale);
-					}
-				}
-
 				self._totalTime = self._time = self._rawPrevTime = time;
 			}
 			if ((self._time === prevTime || !self._first) && !force && !internalForce && !pauseTween) {

lib/3rdparty/gsap/src/uncompressed/TweenLite.js

@@ -1,6 +1,6 @@
 /*!
- * VERSION: 2.1.0
+ * VERSION: 2.1.3
- * DATE: 2019-02-15
+ * DATE: 2019-05-17
  * UPDATES AND DOCS AT: http://greensock.com
  *
  * @license Copyright (c) 2008-2019, GreenSock. All rights reserved.
@@ -963,7 +963,7 @@
 		p._firstPT = p._targets = p._overwrittenProps = p._startAt = null;
 		p._notifyPluginsOfEnabled = p._lazy = false;
 
-		TweenLite.version = "2.1.0";
+		TweenLite.version = "2.1.3";
 		TweenLite.defaultEase = p._ease = new Ease(null, null, 1, 1);
 		TweenLite.defaultOverwrite = "auto";
 		TweenLite.ticker = _ticker;

lib/3rdparty/gsap/src/uncompressed/TweenMax.js

@@ -1,6 +1,6 @@
 /*!
- * VERSION: 2.1.0
+ * VERSION: 2.1.3
- * DATE: 2019-02-15
+ * DATE: 2019-05-17
  * UPDATES AND DOCS AT: http://greensock.com
  * 
  * Includes all of the following: TweenLite, TweenMax, TimelineLite, TimelineMax, EasePack, CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin
@@ -35,12 +35,12 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 				}
 				delete vars.cycle;
 			},
-			//for distributing values across an array. Can accept a number, a function or (most commonly) a function which can contain the following properties: {base, amount, from, ease, grid, axis, length}. Returns a function that expects the following parameters: index, target, array. Recognizes the following
+			//for distributing values across an array. Can accept a number, a function or (most commonly) a function which can contain the following properties: {base, amount, from, ease, grid, axis, length, each}. Returns a function that expects the following parameters: index, target, array. Recognizes the following
 			_distribute = function(v) {
 				if (typeof(v) === "function") {
 					return v;
 				}
-				var vars = isNaN(v) ? v : {n:1, from:(v < 0) ? ((v = -v) && "end") : 0}, //n:1 is just to indicate v was a number; we leverage that later to set v according to the length we get. If a number is passed in, we treat it like the old stagger value where 0.1, for example, would mean that things would be distributed with 0.1 between each element in the array rather than a total "amount" that's chunked out among them all.
+				var vars = (typeof(v) === "object") ? v : {each:v}, //n:1 is just to indicate v was a number; we leverage that later to set v according to the length we get. If a number is passed in, we treat it like the old stagger value where 0.1, for example, would mean that things would be distributed with 0.1 between each element in the array rather than a total "amount" that's chunked out among them all.
 					ease = vars.ease,
 					from = vars.from || 0,
 					base = vars.base || 0,
@@ -77,10 +77,11 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 						}
 						distances.max = max - min;
 						distances.min = min;
-						distances.v = vars.n ? l * (v || 0) : vars.amount;
+						distances.v = l = vars.amount || (vars.each * (wrap > l ? l - 1 : !axis ? Math.max(wrap, l / wrap) : axis === "y" ? l / wrap : wrap)) || 0;
+						distances.b = (l < 0) ? base - l : base;
 					}
 					l = (distances[i] - distances.min) / distances.max;
-					return base + (ease ? ease.getRatio(l) : l) * distances.v;
+					return distances.b + (ease ? ease.getRatio(l) : l) * distances.v;
 				};
 			},
 			TweenMax = function(target, duration, vars) {
@@ -101,7 +102,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 			p = TweenMax.prototype = TweenLite.to({}, 0.1, {}),
 			_blankArray = [];
 
-		TweenMax.version = "2.1.0";
+		TweenMax.version = "2.1.3";
 		p.constructor = TweenMax;
 		p.kill()._gc = false;
 		TweenMax.killTweensOf = TweenMax.killDelayedCallsTo = TweenLite.killTweensOf;
@@ -597,7 +598,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 //---- GETTERS / SETTERS ----------------------------------------------------------------------------------------------------------
 		
 		p.progress = function(value, suppressEvents) {
-			return (!arguments.length) ? this._time / this.duration() : this.totalTime( this.duration() * ((this._yoyo && (this._cycle & 1) !== 0) ? 1 - value : value) + (this._cycle * (this._duration + this._repeatDelay)), suppressEvents);
+			return (!arguments.length) ? (this.duration() ? this._time / this._duration : this.ratio) : this.totalTime( this.duration() * ((this._yoyo && (this._cycle & 1) !== 0) ? 1 - value : value) + (this._cycle * (this._duration + this._repeatDelay)), suppressEvents);
 		};
 		
 		p.totalProgress = function(value, suppressEvents) {
@@ -613,7 +614,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 			}
 			var duration = this._duration,
 				cycle = this._cycle,
-				cycleDur = cycle * (duration * this._repeatDelay);
+				cycleDur = cycle * (duration + this._repeatDelay);
 			if (value > duration) {
 				value = duration;
 			}
@@ -737,16 +738,16 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 			_defaultImmediateRender = function(tl, toVars, fromVars, defaultFalse) { //default to immediateRender:true unless otherwise set in toVars, fromVars or if defaultFalse is passed in as true
 				var ir = "immediateRender";
 				if (!(ir in toVars)) {
-					toVars[ir] = !(tl._paused || (fromVars && fromVars[ir] === false) || defaultFalse);
+					toVars[ir] = !((fromVars && fromVars[ir] === false) || defaultFalse);
 				}
 				return toVars;
 			},
-			//for distributing values across an array. Can accept a number, a function or (most commonly) a function which can contain the following properties: {base, amount, from, ease, grid, axis, length}. Returns a function that expects the following parameters: index, target, array. Recognizes the following
+			//for distributing values across an array. Can accept a number, a function or (most commonly) a function which can contain the following properties: {base, amount, from, ease, grid, axis, length, each}. Returns a function that expects the following parameters: index, target, array. Recognizes the following
 			_distribute = function(v) {
 				if (typeof(v) === "function") {
 					return v;
 				}
-				var vars = isNaN(v) ? v : {n:1, from:(v < 0) ? ((v = -v) && "end") : 0}, //n:1 is just to indicate v was a number; we leverage that later to set v according to the length we get. If a number is passed in, we treat it like the old stagger value where 0.1, for example, would mean that things would be distributed with 0.1 between each element in the array rather than a total "amount" that's chunked out among them all.
+				var vars = (typeof(v) === "object") ? v : {each:v}, //n:1 is just to indicate v was a number; we leverage that later to set v according to the length we get. If a number is passed in, we treat it like the old stagger value where 0.1, for example, would mean that things would be distributed with 0.1 between each element in the array rather than a total "amount" that's chunked out among them all.
 					ease = vars.ease,
 					from = vars.from || 0,
 					base = vars.base || 0,
@@ -783,15 +784,16 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 						}
 						distances.max = max - min;
 						distances.min = min;
-						distances.v = vars.n ? l * (v || 0) : vars.amount;
+						distances.v = l = vars.amount || (vars.each * (wrap > l ? l - 1 : !axis ? Math.max(wrap, l / wrap) : axis === "y" ? l / wrap : wrap)) || 0;
+						distances.b = (l < 0) ? base - l : base;
 					}
 					l = (distances[i] - distances.min) / distances.max;
-					return base + (ease ? ease.getRatio(l) : l) * distances.v;
+					return distances.b + (ease ? ease.getRatio(l) : l) * distances.v;
 				};
 			},
 			p = TimelineLite.prototype = new SimpleTimeline();
 
-		TimelineLite.version = "2.1.0";
+		TimelineLite.version = "2.1.3";
 		TimelineLite.distribute = _distribute;
 		p.constructor = TimelineLite;
 		p.kill()._gc = p._forcingPlayhead = p._hasPause = false;
@@ -1108,6 +1110,29 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 			if (prevTime !== self._time) { //if totalDuration() finds a child with a negative startTime and smoothChildTiming is true, things get shifted around internally so we need to adjust the time accordingly. For example, if a tween starts at -30 we must shift EVERYTHING forward 30 seconds and move this timeline's startTime backward by 30 seconds so that things align with the playhead (no jump).
 				time += self._time - prevTime;
 			}
+			if (self._hasPause && !self._forcingPlayhead && !suppressEvents) {
+				if (time > prevTime) {
+					tween = self._first;
+					while (tween && tween._startTime <= time && !pauseTween) {
+						if (!tween._duration) if (tween.data === "isPause" && !tween.ratio && !(tween._startTime === 0 && self._rawPrevTime === 0)) {
+							pauseTween = tween;
+						}
+						tween = tween._next;
+					}
+				} else {
+					tween = self._last;
+					while (tween && tween._startTime >= time && !pauseTween) {
+						if (!tween._duration) if (tween.data === "isPause" && tween._rawPrevTime > 0) {
+							pauseTween = tween;
+						}
+						tween = tween._prev;
+					}
+				}
+				if (pauseTween) {
+					self._time = self._totalTime = time = pauseTween._startTime;
+					pauseTime = self._startTime + (self._reversed ? self._duration - time : time) / self._timeScale;
+				}
+			}
 			if (time >= totalDur - _tinyNum && time >= 0) { //to work around occasional floating point math artifacts.
 				self._totalTime = self._time = totalDur;
 				if (!self._reversed) if (!self._hasPausedChild()) {
@@ -1160,31 +1185,6 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 				}
 
 			} else {
-
-				if (self._hasPause && !self._forcingPlayhead && !suppressEvents) {
-					if (time >= prevTime) {
-						tween = self._first;
-						while (tween && tween._startTime <= time && !pauseTween) {
-							if (!tween._duration) if (tween.data === "isPause" && !tween.ratio && !(tween._startTime === 0 && self._rawPrevTime === 0)) {
-								pauseTween = tween;
-							}
-							tween = tween._next;
-						}
-					} else {
-						tween = self._last;
-						while (tween && tween._startTime >= time && !pauseTween) {
-							if (!tween._duration) if (tween.data === "isPause" && tween._rawPrevTime > 0) {
-								pauseTween = tween;
-							}
-							tween = tween._prev;
-						}
-					}
-					if (pauseTween) {
-						self._time = self._totalTime = time = pauseTween._startTime;
-						pauseTime = self._startTime + (time / self._timeScale);
-					}
-				}
-
 				self._totalTime = self._time = self._rawPrevTime = time;
 			}
 			if ((self._time === prevTime || !self._first) && !force && !internalForce && !pauseTween) {
@@ -1544,7 +1544,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 
 		p.constructor = TimelineMax;
 		p.kill()._gc = false;
-		TimelineMax.version = "2.1.0";
+		TimelineMax.version = "2.1.3";
 
 		p.invalidate = function() {
 			this._yoyo = !!this.vars.yoyo;
@@ -1720,35 +1720,34 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 						}
 					}
 				}
+			}
 
-				if (self._hasPause && !self._forcingPlayhead && !suppressEvents) {
+			if (self._hasPause && !self._forcingPlayhead && !suppressEvents) {
-					time = self._time;
+				time = self._time;
-					if (time >= prevTime || (self._repeat && prevCycle !== self._cycle)) {
+				if (time > prevTime || (self._repeat && prevCycle !== self._cycle)) {
-						tween = self._first;
+					tween = self._first;
-						while (tween && tween._startTime <= time && !pauseTween) {
+					while (tween && tween._startTime <= time && !pauseTween) {
-							if (!tween._duration) if (tween.data === "isPause" && !tween.ratio && !(tween._startTime === 0 && self._rawPrevTime === 0)) {
+						if (!tween._duration) if (tween.data === "isPause" && !tween.ratio && !(tween._startTime === 0 && self._rawPrevTime === 0)) {
-								pauseTween = tween;
+							pauseTween = tween;
-							}
-							tween = tween._next;
-						}
-					} else {
-						tween = self._last;
-						while (tween && tween._startTime >= time && !pauseTween) {
-							if (!tween._duration) if (tween.data === "isPause" && tween._rawPrevTime > 0) {
-								pauseTween = tween;
-							}
-							tween = tween._prev;
 						}
+						tween = tween._next;
 					}
-					if (pauseTween) {
+				} else {
-						pauseTime = self._startTime + (pauseTween._startTime / self._timeScale);
+					tween = self._last;
-						if (pauseTween._startTime < dur) {
+					while (tween && tween._startTime >= time && !pauseTween) {
-							self._time = self._rawPrevTime = time = pauseTween._startTime;
+						if (!tween._duration) if (tween.data === "isPause" && tween._rawPrevTime > 0) {
-							self._totalTime = time + (self._cycle * (self._totalDuration + self._repeatDelay));
+							pauseTween = tween;
 						}
+						tween = tween._prev;
+					}
+				}
+				if (pauseTween) {
+					pauseTime = self._startTime + (self._reversed ? self._duration - pauseTween._startTime : pauseTween._startTime) / self._timeScale;
+					if (pauseTween._startTime < dur) {
+						self._time = self._rawPrevTime = time = pauseTween._startTime;
+						self._totalTime = time + (self._cycle * (self._totalDuration + self._repeatDelay));
 					}
 				}
-
 			}
 
 			if (self._cycle !== prevCycle) if (!self._locked) {
@@ -1987,7 +1986,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 			}
 			var duration = this._duration,
 				cycle = this._cycle,
-				cycleDur = cycle * (duration * this._repeatDelay);
+				cycleDur = cycle * (duration + this._repeatDelay);
 			if (value > duration) {
 				value = duration;
 			}
@@ -2347,7 +2346,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 			BezierPlugin = _gsScope._gsDefine.plugin({
 					propName: "bezier",
 					priority: -1,
-					version: "1.3.8",
+					version: "1.3.9",
 					API: 2,
 					global:true,
 
@@ -2424,26 +2423,26 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 							func = this._func,
 							target = this._target,
 							notStart = (v !== this._startRatio),
-							curIndex, inv, i, p, b, t, val, l, lengths, curSeg;
+							curIndex, inv, i, p, b, t, val, l, lengths, curSeg, v1;
 						if (!this._timeRes) {
 							curIndex = (v < 0) ? 0 : (v >= 1) ? segments - 1 : (segments * v) >> 0;
 							t = (v - (curIndex * (1 / segments))) * segments;
 						} else {
 							lengths = this._lengths;
 							curSeg = this._curSeg;
-							v *= this._length;
+							v1 = v * this._length;
 							i = this._li;
 							//find the appropriate segment (if the currently cached one isn't correct)
-							if (v > this._l2 && i < segments - 1) {
+							if (v1 > this._l2 && i < segments - 1) {
 								l = segments - 1;
-								while (i < l && (this._l2 = lengths[++i]) <= v) {	}
+								while (i < l && (this._l2 = lengths[++i]) <= v1) {	}
 								this._l1 = lengths[i-1];
 								this._li = i;
 								this._curSeg = curSeg = this._segments[i];
 								this._s2 = curSeg[(this._s1 = this._si = 0)];
-							} else if (v < this._l1 && i > 0) {
+							} else if (v1 < this._l1 && i > 0) {
-								while (i > 0 && (this._l1 = lengths[--i]) >= v) { }
+								while (i > 0 && (this._l1 = lengths[--i]) >= v1) { }
-								if (i === 0 && v < this._l1) {
+								if (i === 0 && v1 < this._l1) {
 									this._l1 = 0;
 								} else {
 									i++;
@@ -2456,16 +2455,16 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 							}
 							curIndex = i;
 							//now find the appropriate sub-segment (we split it into the number of pieces that was defined by "precision" and measured each one)
-							v -= this._l1;
+							v1 -= this._l1;
 							i = this._si;
-							if (v > this._s2 && i < curSeg.length - 1) {
+							if (v1 > this._s2 && i < curSeg.length - 1) {
 								l = curSeg.length - 1;
-								while (i < l && (this._s2 = curSeg[++i]) <= v) {	}
+								while (i < l && (this._s2 = curSeg[++i]) <= v1) {	}
 								this._s1 = curSeg[i-1];
 								this._si = i;
-							} else if (v < this._s1 && i > 0) {
+							} else if (v1 < this._s1 && i > 0) {
-								while (i > 0 && (this._s1 = curSeg[--i]) >= v) {	}
+								while (i > 0 && (this._s1 = curSeg[--i]) >= v1) {	}
-								if (i === 0 && v < this._s1) {
+								if (i === 0 && v1 < this._s1) {
 									this._s1 = 0;
 								} else {
 									i++;
@@ -2473,7 +2472,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 								this._s2 = curSeg[i];
 								this._si = i;
 							}
-							t = ((i + (v - this._s1) / (this._s2 - this._s1)) * this._prec) || 0;
+							t = (v === 1) ? 1 : ((i + (v1 - this._s1) / (this._s2 - this._s1)) * this._prec) || 0;
 						}
 						inv = 1 - t;
 
@@ -2673,7 +2672,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 			p = CSSPlugin.prototype = new TweenPlugin("css");
 
 		p.constructor = CSSPlugin;
-		CSSPlugin.version = "2.1.0";
+		CSSPlugin.version = "2.1.3";
 		CSSPlugin.API = 2;
 		CSSPlugin.defaultTransformPerspective = 0;
 		CSSPlugin.defaultSkewType = "compensated";
@@ -2685,6 +2684,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 		var _numExp = /(?:\-|\.|\b)(\d|\.|e\-)+/g,
 			_relNumExp = /(?:\d|\-\d|\.\d|\-\.\d|\+=\d|\-=\d|\+=.\d|\-=\.\d)+/g,
 			_valuesExp = /(?:\+=|\-=|\-|\b)[\d\-\.]+[a-zA-Z0-9]*(?:%|\b)/gi, //finds all the values that begin with numbers or += or -= and then a number. Includes suffixes. We use this to split complex values apart like "1px 5px 20px rgb(255,102,51)"
+			_valuesExpWithCommas = /(?:\+=|\-=|\-|\b)[\d\-\.]+[a-zA-Z0-9]*(?:%|\b),?/gi, //finds all the values that begin with numbers or += or -= and then a number. Includes suffixes. We use this to split complex values apart like "1px 5px 20px rgb(255,102,51)"
 			_NaNExp = /(?![+-]?\d*\.?\d+|[+-]|e[+-]\d+)[^0-9]/g, //also allows scientific notation and doesn't kill the leading -/+ in -= and +=
 			_suffixExp = /(?:\d|\-|\+|=|#|\.)*/g,
 			_opacityExp = /opacity *= *([^)]*)/i,
@@ -2706,7 +2706,8 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 			_dummyElement = {style:{}},
 			_doc = _gsScope.document || {createElement: function() {return _dummyElement;}},
 			_createElement = function(type, ns) {
-				return (ns && _doc.createElementNS) ? _doc.createElementNS(ns, type) : _doc.createElement(type);
+				var e = _doc.createElementNS ? _doc.createElementNS(ns || "http://www.w3.org/1999/xhtml", type) : _doc.createElement(type);
+				return e.style ? e : _doc.createElement(type); //some environments won't allow access to the element's style when created with a namespace in which case we default to the standard createElement() to work around the issue. Also note that when GSAP is embedded directly inside an SVG file, createElement() won't allow access to the style object in Firefox (see https://greensock.com/forums/topic/20215-problem-using-tweenmax-in-standalone-self-containing-svg-file-err-cannot-set-property-csstext-of-undefined/).
 			},
 			_tempDiv = _createElement("div"),
 			_tempImg = _createElement("img"),
@@ -3286,14 +3287,14 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 						}
 						return a.join(",");
 					}
-					vals = v.match(_valuesExp) || [];
+					vals = v.match(delim === "," ? _valuesExp : _valuesExpWithCommas) || [];
 					i = vals.length;
 					if (numVals > i--) {
 						while (++i < numVals) {
 							vals[i] = collapsible ? vals[(((i - 1) / 2) | 0)] : dVals[i];
 						}
 					}
-					return pfx + vals.join(delim) + sfx;
+					return ((pfx && v !== "none") ? v.substr(0, v.indexOf(vals[0])) || pfx : pfx) + vals.join(delim) + sfx; //note: prefix might be different, like for clipPath it could start with inset( or polygon(
 				};
 				return formatter;
 			},
@@ -3876,7 +3877,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 				//IE and Android stock don't support CSS transforms on SVG elements, so we must write them to the "transform" attribute. We populate this variable in the _parseTransform() method, and only if/when we come across an SVG element
 				var force = _ieVers || (/Android/i.test(_agent) && !_gsScope.chrome),
 					svg, rect, width;
-				if (_doc.createElementNS && !force) { //IE8 and earlier doesn't support SVG anyway
+				if (_doc.createElementNS && _docElement.appendChild && !force) { //IE8 and earlier doesn't support SVG anyway
 					svg = _createSVG("svg", _docElement);
 					rect = _createSVG("rect", svg, {width:100, height:50, x:100});
 					width = rect.getBoundingClientRect().width;
@@ -3994,7 +3995,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 					s = (s && s.length === 4) ? [s[0].substr(4), Number(s[2].substr(4)), Number(s[1].substr(4)), s[3].substr(4), (tm.x || 0), (tm.y || 0)].join(",") : "";
 				}
 				isDefault = (!s || s === "none" || s === "matrix(1, 0, 0, 1, 0, 0)");
-				if (_transformProp && isDefault && !e.offsetParent) { //note: if offsetParent is null, that means the element isn't in the normal document flow, like if it has display:none or one of its ancestors has display:none). Firefox returns null for getComputedStyle() if the element is in an iframe that has display:none. https://bugzilla.mozilla.org/show_bug.cgi?id=548397
+				if (_transformProp && isDefault && !e.offsetParent && e !== _docElement) { //note: if offsetParent is null, that means the element isn't in the normal document flow, like if it has display:none or one of its ancestors has display:none). Firefox returns null for getComputedStyle() if the element is in an iframe that has display:none. https://bugzilla.mozilla.org/show_bug.cgi?id=548397
 					//browsers don't report transforms accurately unless the element is in the DOM and has a display value that's not "none". Firefox and Microsoft browsers have a partial bug where they'll report transforms even if display:none BUT not any percentage-based values like translate(-50%, 8px) will be reported as if it's translate(0, 8px).
 					n = style.display;
 					style.display = "block";
@@ -4756,7 +4757,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 		}, allowFunc:true, prefix:true});
 
 		_registerComplexSpecialProp("boxShadow", {defaultValue:"0px 0px 0px 0px #999", prefix:true, color:true, multi:true, keyword:"inset"});
-		_registerComplexSpecialProp("clipPath", {defaultValue:"inset(0px)", prefix:true, multi:true, formatter:_getFormatter("inset(0px 0px 0px 0px)", false, true)});
+		_registerComplexSpecialProp("clipPath", {defaultValue:"inset(0%)", prefix:true, multi:true, formatter:_getFormatter("inset(0% 0% 0% 0%)", false, true)});
 
 		_registerComplexSpecialProp("borderRadius", {defaultValue:"0px", parser:function(t, e, p, cssp, pt, plugin) {
 			e = this.format(e);
@@ -5010,7 +5011,9 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 			difData = _cssDif(t, bs, _getAllStyles(t), vars, cnptLookup);
 			t.setAttribute("class", b);
 			pt.data = difData.firstMPT;
-			t.style.cssText = cssText; //we recorded cssText before we swapped classes and ran _getAllStyles() because in cases when a className tween is overwritten, we remove all the related tweening properties from that class change (otherwise class-specific stuff can't override properties we've directly set on the target's style object due to specificity).
+			if (t.style.cssText !== cssText) { //only apply if things change. Otherwise, in cases like a background-image that's pulled dynamically, it could cause a refresh. See https://greensock.com/forums/topic/20368-possible-gsap-bug-switching-classnames-in-chrome/.
+				t.style.cssText = cssText; //we recorded cssText before we swapped classes and ran _getAllStyles() because in cases when a className tween is overwritten, we remove all the related tweening properties from that class change (otherwise class-specific stuff can't override properties we've directly set on the target's style object due to specificity).
+			}
 			pt = pt.xfirst = cssp.parse(t, difData.difs, pt, plugin); //we record the CSSPropTween as the xfirst so that we can handle overwriting propertly (if "className" gets overwritten, we must kill all the properties associated with the className part of the tween, so we can loop through from xfirst to the pt itself)
 			return pt;
 		}});
@@ -7120,7 +7123,7 @@ if (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); } //necessary in case Tween
 		p._firstPT = p._targets = p._overwrittenProps = p._startAt = null;
 		p._notifyPluginsOfEnabled = p._lazy = false;
 
-		TweenLite.version = "2.1.0";
+		TweenLite.version = "2.1.3";
 		TweenLite.defaultEase = p._ease = new Ease(null, null, 1, 1);
 		TweenLite.defaultOverwrite = "auto";
 		TweenLite.ticker = _ticker;

lib/3rdparty/gsap/src/uncompressed/plugins/BezierPlugin.js

@@ -1,6 +1,6 @@
 /*!
- * VERSION: 1.3.8
+ * VERSION: 1.3.9
- * DATE: 2018-02-15
+ * DATE: 2019-05-17
  * UPDATES AND DOCS AT: http://greensock.com
  *
  * @license Copyright (c) 2008-2019, GreenSock. All rights reserved.
@@ -315,7 +315,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 			BezierPlugin = _gsScope._gsDefine.plugin({
 					propName: "bezier",
 					priority: -1,
-					version: "1.3.8",
+					version: "1.3.9",
 					API: 2,
 					global:true,
 
@@ -392,26 +392,26 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 							func = this._func,
 							target = this._target,
 							notStart = (v !== this._startRatio),
-							curIndex, inv, i, p, b, t, val, l, lengths, curSeg;
+							curIndex, inv, i, p, b, t, val, l, lengths, curSeg, v1;
 						if (!this._timeRes) {
 							curIndex = (v < 0) ? 0 : (v >= 1) ? segments - 1 : (segments * v) >> 0;
 							t = (v - (curIndex * (1 / segments))) * segments;
 						} else {
 							lengths = this._lengths;
 							curSeg = this._curSeg;
-							v *= this._length;
+							v1 = v * this._length;
 							i = this._li;
 							//find the appropriate segment (if the currently cached one isn't correct)
-							if (v > this._l2 && i < segments - 1) {
+							if (v1 > this._l2 && i < segments - 1) {
 								l = segments - 1;
-								while (i < l && (this._l2 = lengths[++i]) <= v) {	}
+								while (i < l && (this._l2 = lengths[++i]) <= v1) {	}
 								this._l1 = lengths[i-1];
 								this._li = i;
 								this._curSeg = curSeg = this._segments[i];
 								this._s2 = curSeg[(this._s1 = this._si = 0)];
-							} else if (v < this._l1 && i > 0) {
+							} else if (v1 < this._l1 && i > 0) {
-								while (i > 0 && (this._l1 = lengths[--i]) >= v) { }
+								while (i > 0 && (this._l1 = lengths[--i]) >= v1) { }
-								if (i === 0 && v < this._l1) {
+								if (i === 0 && v1 < this._l1) {
 									this._l1 = 0;
 								} else {
 									i++;
@@ -424,16 +424,16 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 							}
 							curIndex = i;
 							//now find the appropriate sub-segment (we split it into the number of pieces that was defined by "precision" and measured each one)
-							v -= this._l1;
+							v1 -= this._l1;
 							i = this._si;
-							if (v > this._s2 && i < curSeg.length - 1) {
+							if (v1 > this._s2 && i < curSeg.length - 1) {
 								l = curSeg.length - 1;
-								while (i < l && (this._s2 = curSeg[++i]) <= v) {	}
+								while (i < l && (this._s2 = curSeg[++i]) <= v1) {	}
 								this._s1 = curSeg[i-1];
 								this._si = i;
-							} else if (v < this._s1 && i > 0) {
+							} else if (v1 < this._s1 && i > 0) {
-								while (i > 0 && (this._s1 = curSeg[--i]) >= v) {	}
+								while (i > 0 && (this._s1 = curSeg[--i]) >= v1) {	}
-								if (i === 0 && v < this._s1) {
+								if (i === 0 && v1 < this._s1) {
 									this._s1 = 0;
 								} else {
 									i++;
@@ -441,7 +441,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 								this._s2 = curSeg[i];
 								this._si = i;
 							}
-							t = ((i + (v - this._s1) / (this._s2 - this._s1)) * this._prec) || 0;
+							t = (v === 1) ? 1 : ((i + (v1 - this._s1) / (this._s2 - this._s1)) * this._prec) || 0;
 						}
 						inv = 1 - t;
 

lib/3rdparty/gsap/src/uncompressed/plugins/CSSPlugin.js

@@ -1,6 +1,6 @@
 /*!
- * VERSION: 2.1.0
+ * VERSION: 2.1.3
- * DATE: 2019-02-15
+ * DATE: 2019-05-17
  * UPDATES AND DOCS AT: http://greensock.com
  *
  * @license Copyright (c) 2008-2019, GreenSock. All rights reserved.
@@ -32,7 +32,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 			p = CSSPlugin.prototype = new TweenPlugin("css");
 
 		p.constructor = CSSPlugin;
-		CSSPlugin.version = "2.1.0";
+		CSSPlugin.version = "2.1.3";
 		CSSPlugin.API = 2;
 		CSSPlugin.defaultTransformPerspective = 0;
 		CSSPlugin.defaultSkewType = "compensated";
@@ -44,6 +44,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 		var _numExp = /(?:\-|\.|\b)(\d|\.|e\-)+/g,
 			_relNumExp = /(?:\d|\-\d|\.\d|\-\.\d|\+=\d|\-=\d|\+=.\d|\-=\.\d)+/g,
 			_valuesExp = /(?:\+=|\-=|\-|\b)[\d\-\.]+[a-zA-Z0-9]*(?:%|\b)/gi, //finds all the values that begin with numbers or += or -= and then a number. Includes suffixes. We use this to split complex values apart like "1px 5px 20px rgb(255,102,51)"
+			_valuesExpWithCommas = /(?:\+=|\-=|\-|\b)[\d\-\.]+[a-zA-Z0-9]*(?:%|\b),?/gi, //finds all the values that begin with numbers or += or -= and then a number. Includes suffixes. We use this to split complex values apart like "1px 5px 20px rgb(255,102,51)"
 			_NaNExp = /(?![+-]?\d*\.?\d+|[+-]|e[+-]\d+)[^0-9]/g, //also allows scientific notation and doesn't kill the leading -/+ in -= and +=
 			_suffixExp = /(?:\d|\-|\+|=|#|\.)*/g,
 			_opacityExp = /opacity *= *([^)]*)/i,
@@ -65,7 +66,8 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 			_dummyElement = {style:{}},
 			_doc = _gsScope.document || {createElement: function() {return _dummyElement;}},
 			_createElement = function(type, ns) {
-				return (ns && _doc.createElementNS) ? _doc.createElementNS(ns, type) : _doc.createElement(type);
+				var e = _doc.createElementNS ? _doc.createElementNS(ns || "http://www.w3.org/1999/xhtml", type) : _doc.createElement(type);
+				return e.style ? e : _doc.createElement(type); //some environments won't allow access to the element's style when created with a namespace in which case we default to the standard createElement() to work around the issue. Also note that when GSAP is embedded directly inside an SVG file, createElement() won't allow access to the style object in Firefox (see https://greensock.com/forums/topic/20215-problem-using-tweenmax-in-standalone-self-containing-svg-file-err-cannot-set-property-csstext-of-undefined/).
 			},
 			_tempDiv = _createElement("div"),
 			_tempImg = _createElement("img"),
@@ -645,14 +647,14 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 						}
 						return a.join(",");
 					}
-					vals = v.match(_valuesExp) || [];
+					vals = v.match(delim === "," ? _valuesExp : _valuesExpWithCommas) || [];
 					i = vals.length;
 					if (numVals > i--) {
 						while (++i < numVals) {
 							vals[i] = collapsible ? vals[(((i - 1) / 2) | 0)] : dVals[i];
 						}
 					}
-					return pfx + vals.join(delim) + sfx;
+					return ((pfx && v !== "none") ? v.substr(0, v.indexOf(vals[0])) || pfx : pfx) + vals.join(delim) + sfx; //note: prefix might be different, like for clipPath it could start with inset( or polygon(
 				};
 				return formatter;
 			},
@@ -1235,7 +1237,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 				//IE and Android stock don't support CSS transforms on SVG elements, so we must write them to the "transform" attribute. We populate this variable in the _parseTransform() method, and only if/when we come across an SVG element
 				var force = _ieVers || (/Android/i.test(_agent) && !_gsScope.chrome),
 					svg, rect, width;
-				if (_doc.createElementNS && !force) { //IE8 and earlier doesn't support SVG anyway
+				if (_doc.createElementNS && _docElement.appendChild && !force) { //IE8 and earlier doesn't support SVG anyway
 					svg = _createSVG("svg", _docElement);
 					rect = _createSVG("rect", svg, {width:100, height:50, x:100});
 					width = rect.getBoundingClientRect().width;
@@ -1353,7 +1355,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 					s = (s && s.length === 4) ? [s[0].substr(4), Number(s[2].substr(4)), Number(s[1].substr(4)), s[3].substr(4), (tm.x || 0), (tm.y || 0)].join(",") : "";
 				}
 				isDefault = (!s || s === "none" || s === "matrix(1, 0, 0, 1, 0, 0)");
-				if (_transformProp && isDefault && !e.offsetParent) { //note: if offsetParent is null, that means the element isn't in the normal document flow, like if it has display:none or one of its ancestors has display:none). Firefox returns null for getComputedStyle() if the element is in an iframe that has display:none. https://bugzilla.mozilla.org/show_bug.cgi?id=548397
+				if (_transformProp && isDefault && !e.offsetParent && e !== _docElement) { //note: if offsetParent is null, that means the element isn't in the normal document flow, like if it has display:none or one of its ancestors has display:none). Firefox returns null for getComputedStyle() if the element is in an iframe that has display:none. https://bugzilla.mozilla.org/show_bug.cgi?id=548397
 					//browsers don't report transforms accurately unless the element is in the DOM and has a display value that's not "none". Firefox and Microsoft browsers have a partial bug where they'll report transforms even if display:none BUT not any percentage-based values like translate(-50%, 8px) will be reported as if it's translate(0, 8px).
 					n = style.display;
 					style.display = "block";
@@ -2115,7 +2117,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 		}, allowFunc:true, prefix:true});
 
 		_registerComplexSpecialProp("boxShadow", {defaultValue:"0px 0px 0px 0px #999", prefix:true, color:true, multi:true, keyword:"inset"});
-		_registerComplexSpecialProp("clipPath", {defaultValue:"inset(0px)", prefix:true, multi:true, formatter:_getFormatter("inset(0px 0px 0px 0px)", false, true)});
+		_registerComplexSpecialProp("clipPath", {defaultValue:"inset(0%)", prefix:true, multi:true, formatter:_getFormatter("inset(0% 0% 0% 0%)", false, true)});
 
 		_registerComplexSpecialProp("borderRadius", {defaultValue:"0px", parser:function(t, e, p, cssp, pt, plugin) {
 			e = this.format(e);
@@ -2369,7 +2371,9 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 			difData = _cssDif(t, bs, _getAllStyles(t), vars, cnptLookup);
 			t.setAttribute("class", b);
 			pt.data = difData.firstMPT;
-			t.style.cssText = cssText; //we recorded cssText before we swapped classes and ran _getAllStyles() because in cases when a className tween is overwritten, we remove all the related tweening properties from that class change (otherwise class-specific stuff can't override properties we've directly set on the target's style object due to specificity).
+			if (t.style.cssText !== cssText) { //only apply if things change. Otherwise, in cases like a background-image that's pulled dynamically, it could cause a refresh. See https://greensock.com/forums/topic/20368-possible-gsap-bug-switching-classnames-in-chrome/.
+				t.style.cssText = cssText; //we recorded cssText before we swapped classes and ran _getAllStyles() because in cases when a className tween is overwritten, we remove all the related tweening properties from that class change (otherwise class-specific stuff can't override properties we've directly set on the target's style object due to specificity).
+			}
 			pt = pt.xfirst = cssp.parse(t, difData.difs, pt, plugin); //we record the CSSPropTween as the xfirst so that we can handle overwriting propertly (if "className" gets overwritten, we must kill all the properties associated with the className part of the tween, so we can loop through from xfirst to the pt itself)
 			return pt;
 		}});

lib/3rdparty/gsap/src/uncompressed/plugins/CSSRulePlugin.js

@@ -1,6 +1,6 @@
 /*!
- * VERSION: 0.6.6
+ * VERSION: 0.6.8
- * DATE: 2018-02-15
+ * DATE: 2018-02-22
  * UPDATES AND DOCS AT: http://greensock.com
  *
  * @license Copyright (c) 2008-2019, GreenSock. All rights reserved.
@@ -28,7 +28,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 
 		p._propName = "cssRule";
 		p.constructor = CSSRulePlugin;
-		CSSRulePlugin.version = "0.6.6";
+		CSSRulePlugin.version = "0.6.8";
 		CSSRulePlugin.API = 2;
 
 		/**
@@ -94,7 +94,12 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 		// @private gets called every time the tween updates, passing the new ratio (typically a value between 0 and 1, but not always (for example, if an Elastic.easeOut is used, the value can jump above 1 mid-tween). It will always start and 0 and end at 1.
 		p.setRatio = function(v) {
 			_superSetRatio.call(this, v);
-			this._ss.cssText = this._proxy.cssText;
+			var proxy = this._proxy,
+				ss = this._ss,
+				i = proxy.length;
+			while (--i > -1) {
+				ss[proxy[i]] = proxy[proxy[i]];
+			}
 		};
 		
 		

lib/3rdparty/gsap/src/uncompressed/plugins/MorphSVGPlugin.js

@@ -1,6 +1,6 @@
 /*!
- * VERSION: 0.9.0
+ * VERSION: 0.9.1
- * DATE: 2019-02-07
+ * DATE: 2019-02-21
  * UPDATES AND DOCS AT: http://greensock.com
  *
  * @license Copyright (c) 2008-2019, GreenSock. All rights reserved.
@@ -906,12 +906,12 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 			propName: "morphSVG",
 			API: 2,
 			global: true,
-			version: "0.9.0",
+			version: "0.9.1",
 			overwriteProps: ["morphSVG"],
 
 			//called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run.
 			init: function(target, value, tween, index) {
-				var cs = window.getComputedStyle(target),
+				var cs = target.nodeType ? window.getComputedStyle(target) : {},
 					fill = cs.fill + "",
 					fillSafe = !(fill === "none" || (fill.match(_numbersExp) || [])[3] === "0" || cs.fillRule === "evenodd"),
 					origins = (value.origin || "50 50").split(","),

lib/3rdparty/gsap/src/uncompressed/plugins/PixiPlugin.js

@@ -1,6 +1,6 @@
 /*!
- * VERSION: 0.2.1
+ * VERSION: 0.3.0
- * DATE: 2018-02-15
+ * DATE: 2019-05-13
  * UPDATES AND DOCS AT: http://greensock.com
  *
  * @license Copyright (c) 2008-2019, GreenSock. All rights reserved.
@@ -389,13 +389,14 @@ var _gsScope = (typeof module !== "undefined" && module.exports && typeof global
         priority: 0,
         API: 2,
 		global: true,
-        version: "0.2.1",
+        version: "0.3.0",
 
         init: function (target, values, tween, index) {
             if (!target instanceof _gsScope.PIXI.DisplayObject) {
                 return false;
             }
-            var context, axis, value, colorMatrix, filter, p, padding, colorSetter, i, data, pt;
+            var isV4 =  _gsScope.PIXI.VERSION.charAt(0) === "4",
+	            context, axis, value, colorMatrix, filter, p, padding, colorSetter, i, data, pt;
             for (p in values) {
                 context = _contexts[p];
                 value = values[p];
@@ -431,12 +432,12 @@ var _gsScope = (typeof module !== "undefined" && module.exports && typeof global
 						colorSetter = _buildColorSetter(tween, this);
 					}
 					if ((p === "lineColor" || p === "fillColor") && target instanceof _gsScope.PIXI.Graphics) {
-						data = target.graphicsData;
+						data = (target.geometry || target).graphicsData; //"geometry" was introduced in PIXI version 5
 						i = data.length;
 						while (--i > -1) {
-							_addColorTween(data[i], p, value, colorSetter, this);
+							_addColorTween(isV4 ? data[i] : data[i][p.substr(0, 4) + "Style"], isV4 ? p : "color", value, colorSetter, this);
 						}
-						colorSetter.graphics = target;
+						colorSetter.graphics = target.geometry || target;
 					} else {
 						_addColorTween(target, p, value, colorSetter, this);
 					}
@@ -460,6 +461,9 @@ var _gsScope = (typeof module !== "undefined" && module.exports && typeof global
 	PixiPlugin.parseColor = _parseColor;
 	PixiPlugin.formatColors = _formatColors;
 	PixiPlugin.colorStringFilter = _colorStringFilter;
+	PixiPlugin.registerPIXI = function(PIXI) {
+		_gsScope.PIXI = PIXI;
+	};
 
 
 }); if (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); }

lib/3rdparty/gsap/src/uncompressed/utils/Draggable.js

@@ -1,6 +1,6 @@
 /*!
- * VERSION: 0.17.0
+ * VERSION: 0.17.1
- * DATE: 2019-02-12
+ * DATE: 2019-02-28
  * UPDATES AND DOCS AT: http://greensock.com
  *
  * Requires TweenLite and CSSPlugin version 1.17.0 or later (TweenMax contains both TweenLite and CSSPlugin). ThrowPropsPlugin is required for momentum-based continuation of movement after the mouse/touch is released (ThrowPropsPlugin is a membership benefit of Club GreenSock - http://greensock.com/club/).
@@ -1696,7 +1696,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 						if (e && e.target) {
 							_addListener(e.target, "mouseup", onRelease); //we also have to listen directly on the element because some browsers don't bubble up the event to the _doc on elements with contentEditable="true"
 						}
-						isClicking = (isClickable.call(self, e.target) && vars.dragClickables !== false && !force);
+						isClicking = (isClickable.call(self, e.target) && vars.dragClickables === false && !force);
 						if (isClicking) {
 							_addListener(e.target, "change", onRelease); //in some browsers, when you mousedown on a <select> element, no mouseup gets dispatched! So we listen for a "change" event instead.
 							_dispatchEvent(self, "pressInit", "onPressInit");
@@ -2399,7 +2399,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 		p.constructor = Draggable;
 		p.pointerX = p.pointerY = p.startX = p.startY = p.deltaX = p.deltaY = 0;
 		p.isDragging = p.isPressed = false;
-		Draggable.version = "0.17.0";
+		Draggable.version = "0.17.1";
 		Draggable.zIndex = 1000;
 
 		_addListener(_doc, "touchcancel", function() {

lib/3rdparty/gsap/src/uncompressed/utils/GSDevTools.js

@@ -1,6 +1,6 @@
 /*!
- * VERSION: 0.1.9
+ * VERSION: 0.1.11
- * DATE: 2019-02-07
+ * DATE: 2019-05-16
  * UPDATES AND DOCS AT: http://greensock.com
  *
  * @license Copyright (c) 2008-2019, GreenSock. All rights reserved.
@@ -717,7 +717,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 							record("out", outProgress);
 						}
 						startTime = 0;
-						maxDuration = Math.min(1000, vars.maxDuration || 1000, _getClippedDuration(selectedAnimation));
+						maxDuration = vars.maxDuration || Math.min(1000, _getClippedDuration(selectedAnimation));
 						if (selectedAnimation === _recordedRoot || vars.globalSync !== false) {
 							_merge();
 							linkedAnimation = _rootTween;
@@ -1102,7 +1102,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 
 
 
-		GSDevTools.version = "0.1.9";
+		GSDevTools.version = "0.1.11";
 		GSDevTools.logOverwrites = false;
 		GSDevTools.globalRecordingTime = 2;
 
@@ -2986,7 +2986,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 						if (e && e.target) {
 							_addListener(e.target, "mouseup", onRelease); //we also have to listen directly on the element because some browsers don't bubble up the event to the _doc on elements with contentEditable="true"
 						}
-						isClicking = (isClickable.call(self, e.target) && vars.dragClickables !== false && !force);
+						isClicking = (isClickable.call(self, e.target) && vars.dragClickables === false && !force);
 						if (isClicking) {
 							_addListener(e.target, "change", onRelease); //in some browsers, when you mousedown on a <select> element, no mouseup gets dispatched! So we listen for a "change" event instead.
 							_dispatchEvent(self, "pressInit", "onPressInit");
@@ -3689,7 +3689,7 @@ var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(globa
 		p.constructor = Draggable;
 		p.pointerX = p.pointerY = p.startX = p.startY = p.deltaX = p.deltaY = 0;
 		p.isDragging = p.isPressed = false;
-		Draggable.version = "0.17.0";
+		Draggable.version = "0.17.1";
 		Draggable.zIndex = 1000;
 
 		_addListener(_doc, "touchcancel", function() {

lib/3rdparty/hyphenation/fr.js

@@ -0,0 +1,40 @@
+(function () {
+
+var module = {
+    exports: null
+};
+
+// The french hyphenation patterns are retrieved from
+// http://tug_org/svn/texhyphen/trunk/collaboration/repository/hyphenator/
+module.exports = {
+	'id': 'fr',
+	'leftmin': 2,
+	'rightmin': 3,
+	'patterns': {
+		2 : "1ç1j1q",
+		3 : "1gè’â41zu1zo1zi1zè1zé1ze1za’y4_y41wu1wo1wi1we1wa1vy1vû1vu1vô1vo1vî1vi1vê1vè1vé1ve1vâ1va’û4_û4’u4_u41ba1bâ1ty1be1bé1bè1bê1tû1tu1tô1bi1bî1to1tî1ti1tê1tè1té1te1tà1tâ1ta1bo1bô1sy1sû1su1sœ1bu1bû1by2’21ca1câ1sô1ce1cé1cè1cê1so1sî1si1sê1sè1sé1se1sâ1sa1ry1rû1ru1rô1ro1rî1ri1rê1rè1ré1re1râ1ra’a41py1pû1pu1pô1po1pî1pi1pê1pè1pé1pe1pâ1pa_ô41ci1cî’ô4’o4_o41nyn1x1nû1nu1nœ1nô1no1nî1ni1nê1nè1né1ne1nâ1co1cô1na1my1mû1mu1mœ1mô1mo1mî1mi1cœ1mê1mè1mé1me1mâ1ma1ly1lû1lu1lô1lo1lî1li1lê1lè1cu1cû1cy1lé1d’1da1dâ1le1là1de1dé1dè1dê1lâ1la1ky1kû1ku1kô1ko1kî1ki1kê1kè1ké1ke1kâ1ka2jk_a4’î4_î4’i4_i41hy1hû1hu1hô1ho1hî1hi1hê1hè1hé1he1hâ1ha1gy1gû1gu1gô1go1gî1gi1gê_â41gé1ge1gâ1ga1fy1di1dî1fû1fu1fô1fo’e41fî1fi1fê1fè1do1dô1fé1fe1fâ1fa’è41du1dû1dy_è4’é4_é4’ê4_ê4_e41zy",
+		4 : "1f2lab2h2ckg2ckp2cksd1s22ckb4ck_1c2k2chw4ze_4ne_2ckt1c2lad2hm1s22cht2chsch2r2chp4pe_1t2r1p2h_ph44ph_ph2l2phnph2r2phs1d2r2pht2chn4fe_2chm1p2l1p2r4me_1w2rch2l2chg1c2r2chb4ch_1f2r4le_4re_4de_f1s21k2r4we_1r2h_kh44kh_1k2h4ke_1c2h_ch44ge_4je_4se_1v2r_sh41s2h4ve_4sh_2shm2shr2shs4ce_il2l1b2r4be_1b2l4he_4te__th41t2h4th_g1s21g2r2thl1g2l2thm2thnth2r1g2n2ths2ckf",
+		5 : "2ck3h4rhe_4kes_4wes_4res_4cke_éd2hi4vre_4jes_4tre_4zes_4ges_4des_i1oxy4gle_d1d2h_cul44gne_4fre_o1d2l_sch44nes_4les_4gre_1s2ch_réu24sch_4the_1g2hy4gue_2schs4cle_1g2ho1g2hi1g2he4ses_4tes_1g2ha4ves_4she_4che_4cre_4ces_t1t2l4hes_l1s2t4bes_4ble__con4xil3lco1ap4que_vil3l4fle_co1arco1exco1enco1auco1axco1ef4pes_co1é2per3h4mes__pe4r4bre_4pre_4phe_1p2né4ple__dé2smil3llil3lhil3l4dre_cil3lgil3l4fes_",
+		6 : "’in1o2rcil4l4phre_4dres_l3lioni1algi2fent_émil4l4phle_rmil4l4ples_4phes_1p2neuextra14pres_y1asthpé2nul2xent__mé2sa2pent_y1algi4chre_1m2nès4bres_1p2tèr1p2tér4chle_’en1o24fles_oxy1a2avil4l_en1o24ques_uvil4lco1a2d4bles__in1a2’in1a21s2por_cons4_bi1u2’as2ta_in1e2’in1e2_in1é2’in1é21s2lov1s2lavco1acq2cent__as2ta_co1o24ches_hémi1é_in2er’in2er2s3homo1ioni_in1i2’in1i22went_4shes__ré1a2_ré1é2_ré1e2_ré2el_in1o2ucil4lco1accu2s3tr_ré2er_ré2èr4cles_2vent__ré1i22sent_2tent_2gent__ré1o24gues__re1s24sche_4thes_’en1a2e2s3ch4gres_1s2cop2lent__en1a22nent__in1u2’in1u24gnes_4cres_wa2g3n4fres_4tres_4gles_1octet_dé1o2_dé1io4thre__bi1au2jent__dé1a22zent_4vres_2dent_4ckes_4rhes__dy2s3sub1s22kent_2rent_2bent_3d2hal",
+		7 : "a2g3nos3d2houdé3rent__dé3s2t_dé3s2pé3dent_2r3heur2r3hydri1s2tat2frent_io1a2ctla2w3re’in2u3l_in2u3l2crent_’in2uit_in2uit1s2caph1s2clér_ré2ussi2s3ché_re2s3t_re2s3s4sches_é3cent__seu2le’in2ond_in2ond’in2i3t_in2i3t’in2i3q_ré2aux_in2i3q2shent__di1alduni1a2x’in2ept2flent__in2eptuni1o2v2brent_co2nurb2chent_2quent_1s2perm1s2phèr_ma2c3kuevil4l1s2phér1s2piel1s2tein1s2tigm4chles_1s2tock1s2tyle1p2sych_pro1é2_ma2r1x_stil3lpusil3libril3lcyril3l_pré1s2thril3l_mé3san_pré1u2_mé2s1i_pré1o2_pré1i2piril3lpupil3lâ2ment__pré1e2_pré1é2_pré2au_pré1a22prent_2vrent_supero2_di1e2npoly1u2è2ment_poly1s2poly1o2poly1i2poly1è2poly1é2poly1e2poly1a2supe4r1capil3l2plent_armil5lsemil4lmil4letvacil4l_di2s3h3ph2tis2dlent_a2s3tro4phres_l2ment_i1è2drei1arthr2drent_4phles_supers2ô2ment_extra2i2phent_su3r2ah_su2r3hextra2chypo1u21alcool_per1u2_per1o2_per1i2_per1é2hypo1s2_per1a2hypo1o2hypo1i2hypo1é2_pen2tahypo1e2hypo1a2y1s2tome2s3cophyperu2hype4r1hypers2hypero21m2némohyperi21m2nési4chres_a1è2drehyperé2hypere2hypera2’oua1ou_oua1ouo1s2tomo1s2timo1s2tato1s2tasomni1s2tung2s3_dé3s2c2blent__bio1a2télé1e2télé1i22clent_télé1s22guent_1é2nerg2grent_2trent__dé2s1œ2t3heuro1è2dre2gnent_2glent_4thres__bi1a2t1é2drie_bi1a2c_i2g3nin3s2at_’i2g3ni2ckent__i2g3né’ab3réa’i2g3né_ab3réa_per1e2",
+		8 : "_ma2l1ap_dy2s1u2_dy2s1o2_dy2s1i2n3s2ats__dy2s1a2distil3l1é2lectrinstil3l1s2trophe2n1i2vro2b3long1s2tomos_ae3s4ch’ae3s4ch_eu2r1a2ombud2s3’eu2r1a2_mono1s2_mono1u2o1s2téro_mono1o2eu1s2tato1s2tradfritil3la2l1algi_mono1i2_mono1é2_ovi1s2c’ovi1s2c_mono1e2_mono1a2co1assocpaléo1é2boutil3l1s2piros_ré2i3fi_pa2n1ischevil4l1s2patiaca3ou3t2_di1a2cé_para1s2_pa2r3héco1assur_su2b1é2tu2ment_su2ment__su2b1in_su2b3lupapil3lire3pent_’inte4r3_su2b1urab3sent__su2b1a2di2s3cophu2ment_fu2ment__intera2au2ment_as2ment_or2ment_’intera2_intere2pé1r2é2q_péri1os_péri1s2ja3cent__anti1a2_péri1u2’anti1a2er2ment__anti1e2ac3cent_ar2ment_to2ment_’intere2ré3gent_papil3leom2ment_’anti1e2photo1s2_anti1é2_interé2’anti1é2_anti1s2’anti1s23ph2talé’interé2ri2ment__interi2’interi2mi2ment_apo2s3tri2s3chio_pluri1ai2s3chia_intero2’intero2_inte4r3po1astre_interu2’interu2_inters2ai2ment_’inters2papil3la_tri1o2n_su2r1a2_pon2tet_pos2t3h_dés2a3mes3cent__pos2t3r_post1s2_tri1a2tta2ment__tri1a2nra2ment_is3cent__su2r1e2_tri1a2cfa2ment_da2ment__su3r2et_su2r1é2_mé2s1es_mé2g1oh_su2r1of_su2r1ox_re3s4ty_re3s4tu_ma2l1oc’a2g3nat_dé2s1é2_ma2l1entachy1a2_pud1d2ltchin3t2_re3s4trtran2s3p_bi2s1a2tran2s3hhémo1p2té3quent__a2g3nat_dé2s1i2télé1o2bo2g3nosiradio1a2télé1o2ppu2g3nacru3lent__sta2g3nre3lent__ré2a3le_di1a2mi",
+		9 : "_ré2a3lit_dé3s2o3lthermo1s2_dé3s2ist_dé3s2i3rmit3tent_éni3tent__do3lent__ré2a3lisopu3lent__pa3tent__re2s3cap_la3tent__co2o3lie_re2s3cou_re2s3cri_ma2g3num_re2s3pir_dé3s2i3dco2g3nititran2s1a2tran2s1o2_dé3s2exu_re3s4tab_re3s4tag_dé3s2ert_re3s4tat_re3s4tén_re3s4tér_re3s4tim_re3s4tip_re3s4toc_re3s4toptran2s1u2_no2n1obs_ma2l1a2v_ma2l1int_prou3d2hpro2s3tativa3lent__ta3lent__rétro1a2_pro1s2cé_ma2l1o2dcci3dent__pa3rent__su2r1int_su2r1inf_su2r1i2mtor3rent_cur3rent__mé2s1u2stri3dent__dé3s2orm_su3r2ell_ar3dent__su3r2eaupru3dent__pré2a3lacla2ment__su3r2a3t_pos2t1o2_pos2t1inqua2ment_ter3gent_ser3gent_rai3ment_abî2ment_éci2ment_’ar3gent__ar3gent_rin3gent_tan3gent_éli2ment_ani2ment_’apo2s3ta_apo2s3tavélo1s2kivol2t1amp_dé3s2orp_dé2s1u2n_péri2s3ssesqui1a2’ana3s4trfir2ment_écu2ment_ser3pent_pré3sent_’ar3pent__ar3pent_’in1s2tab_in1s2tab’in2o3cul_in2o3culplu2ment_bou2ment_’in2exora_in2exora_su2b3linbru2ment__su3b2é3r_milli1am’in2effab_in2effab’in2augur_di1a2cid_in2augur_pa2n1opt’in2a3nit_in2a3nit1informat_ana3s4trvanil3lis_di1a2tom_su3b2altvanil3linstéréo1s2_pa2n1a2fo1s2tratuépi2s3cop_ci2s1alp1s2tructu1é2lément1é2driquepapil3lomllu2ment_",
+		10 : "1s2tandardimmi3nent__émi3nent_imma3nent_réma3nent_épi3s4cope_in2i3miti’in2i3miti_res3sent_moye2n1â2gréti3cent__dé3s2a3crmon2t3réalinno3cent__mono1ï2dé_pa2n1a2méimpu3dent__pa2n1a2ra_amino1a2c’amino1a2c_pa2n1o2phinci3dent__ser3ment_appa3rent_déca3dent__dacryo1a2_dé3s2astr_re4s5trin_dé3s2é3gr_péri2s3ta_sar3ment__dé3s2oufr_re3s4tandchro2ment__com3ment__re2s3quil_re2s3pons_gem2ment__re2s3pect_re2s3ciso_dé3s2i3gn_dé3s2i3ligram2ment__dé3s2invo_re2s3cisitran3s2act’anti2enneindo3lent__sou3vent_indi3gent_dili3gent_flam2ment_impo3tent_inso3lent_esti2ment_’on3guent__on3guent_inti2ment__dé3s2o3défécu3lent_veni2ment_reli2ment_vidi2ment_chlo2r3é2tpu2g3nablechlo2r3a2cryth2ment_o2g3nomonicarê2ment__méta1s2ta_ma2l1aisé_macro1s2célo3quent_tran3s2ats_anti2enne",
+		11 : "_contre1s2cperti3nent_conti3nent__ma2l1a2dro_in2é3lucta_psycho1a2n_dé3s2o3pil’in2é3luctaperma3nent__in2é3narratesta3ment__su2b3liminrésur3gent_’in2é3narraimmis4cent__pro2g3nathchien3dent_sporu4lent_dissi3dent_corpu3lent_archi1é2pissubli2ment_indul3gent_confi3dent__syn2g3nathtrucu3lent_détri3ment_nutri3ment_succu3lent_turbu3lent__pa2r1a2che_pa2r1a2chèfichu3ment_entre3gent_conni3vent_mécon3tent_compé3tent__re4s5trict_dé3s2i3nen_re2s3plend1a2nesthésislalo2ment__dé3s2ensib_re4s5trein_phalan3s2tabsti3nent_",
+		12 : "polyva3lent_équiva4lent_monova3lent_amalga2ment_omnipo3tent__ma2l1a2dreséquipo3tent__dé3s2a3tellproémi3nent_contin3gent_munifi3cent__ma2g3nicideo1s2trictionsurémi3nent_préémi3nent__bai2se3main",
+		13 : "acquies4cent_intelli3gent_tempéra3ment_transpa3rent__ma2g3nificatantifer3ment_",
+		14 : "privatdo3cent_diaphrag2ment_privatdo3zent_ventripo3tent__contre3maître",
+		15 : "grandilo3quent_",
+		16 : "_chè2vre3feuille"
+	}
+};
+var h = new window['Hypher'](module.exports);
+
+if (typeof module.exports.id === 'string') {
+    module.exports.id = [module.exports.id];
+}
+
+for (var i = 0; i < module.exports.id.length; i += 1) {
+  window['Hypher']['languages'][module.exports.id[i]] = h;
+}
+}());

lib/3rdparty/jquery.hypher.js

@@ -0,0 +1,216 @@
+(function () {
+
+var module = {
+    exports: null
+};
+/**
+ * @constructor
+ * @param {!{patterns: !Object, leftmin: !number, rightmin: !number}} language The language pattern file. Compatible with Hyphenator.js.
+ */
+function Hypher(language) {
+    var exceptions = [],
+        i = 0;
+    /**
+     * @type {!Hypher.TrieNode}
+     */
+    this.trie = this.createTrie(language['patterns']);
+
+    /**
+     * @type {!number}
+     * @const
+     */
+    this.leftMin = language['leftmin'];
+
+    /**
+     * @type {!number}
+     * @const
+     */
+    this.rightMin = language['rightmin'];
+
+    /**
+     * @type {!Object.<string, !Array.<string>>}
+     */
+    this.exceptions = {};
+
+    if (language['exceptions']) {
+        exceptions = language['exceptions'].split(/,\s?/g);
+
+        for (; i < exceptions.length; i += 1) {
+            this.exceptions[exceptions[i].replace(/\u2027/g, '').toLowerCase()] = new RegExp('(' + exceptions[i].split('\u2027').join(')(') + ')', 'i');
+        }
+    }
+}
+
+/**
+ * @typedef {{_points: !Array.<number>}}
+ */
+Hypher.TrieNode;
+
+/**
+ * Creates a trie from a language pattern.
+ * @private
+ * @param {!Object} patternObject An object with language patterns.
+ * @return {!Hypher.TrieNode} An object trie.
+ */
+Hypher.prototype.createTrie = function (patternObject) {
+    var size = 0,
+        i = 0,
+        c = 0,
+        p = 0,
+        chars = null,
+        points = null,
+        codePoint = null,
+        t = null,
+        tree = {
+            _points: []
+        },
+        patterns;
+
+    for (size in patternObject) {
+        if (patternObject.hasOwnProperty(size)) {
+            patterns = patternObject[size].match(new RegExp('.{1,' + (+size) + '}', 'g'));
+
+            for (i = 0; i < patterns.length; i += 1) {
+                chars = patterns[i].replace(/[0-9]/g, '').split('');
+                points = patterns[i].split(/\D/);
+                t = tree;
+
+                for (c = 0; c < chars.length; c += 1) {
+                    codePoint = chars[c].charCodeAt(0);
+
+                    if (!t[codePoint]) {
+                        t[codePoint] = {};
+                    }
+                    t = t[codePoint];
+                }
+
+                t._points = [];
+
+                for (p = 0; p < points.length; p += 1) {
+                    t._points[p] = points[p] || 0;
+                }
+            }
+        }
+    }
+    return tree;
+};
+
+/**
+ * Hyphenates a text.
+ *
+ * @param {!string} str The text to hyphenate.
+ * @return {!string} The same text with soft hyphens inserted in the right positions.
+ */
+Hypher.prototype.hyphenateText = function (str, minLength) {
+    minLength = minLength || 4;
+
+    // Regexp("\b", "g") splits on word boundaries,
+    // compound separators and ZWNJ so we don't need
+    // any special cases for those characters. Unfortunately
+    // it does not support unicode word boundaries, so
+    // we implement it manually.
+    var words = str.split(/([a-zA-Z0-9_\u0027\u00DF-\u00EA\u00EC-\u00EF\u00F1-\u00F6\u00F8-\u00FD\u0101\u0103\u0105\u0107\u0109\u010D\u010F\u0111\u0113\u0117\u0119\u011B\u011D\u011F\u0123\u0125\u012B\u012F\u0131\u0135\u0137\u013C\u013E\u0142\u0144\u0146\u0148\u0151\u0153\u0155\u0159\u015B\u015D\u015F\u0161\u0165\u016B\u016D\u016F\u0171\u0173\u017A\u017C\u017E\u017F\u0219\u021B\u02BC\u0390\u03AC-\u03CE\u03F2\u0401\u0410-\u044F\u0451\u0454\u0456\u0457\u045E\u0491\u0531-\u0556\u0561-\u0587\u0902\u0903\u0905-\u090B\u090E-\u0910\u0912\u0914-\u0928\u092A-\u0939\u093E-\u0943\u0946-\u0948\u094A-\u094D\u0982\u0983\u0985-\u098B\u098F\u0990\u0994-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BE-\u09C3\u09C7\u09C8\u09CB-\u09CD\u09D7\u0A02\u0A03\u0A05-\u0A0A\u0A0F\u0A10\u0A14-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A3E-\u0A42\u0A47\u0A48\u0A4B-\u0A4D\u0A82\u0A83\u0A85-\u0A8B\u0A8F\u0A90\u0A94-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABE-\u0AC3\u0AC7\u0AC8\u0ACB-\u0ACD\u0B02\u0B03\u0B05-\u0B0B\u0B0F\u0B10\u0B14-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3E-\u0B43\u0B47\u0B48\u0B4B-\u0B4D\u0B57\u0B82\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB5\u0BB7-\u0BB9\u0BBE-\u0BC2\u0BC6-\u0BC8\u0BCA-\u0BCD\u0BD7\u0C02\u0C03\u0C05-\u0C0B\u0C0E-\u0C10\u0C12\u0C14-\u0C28\u0C2A-\u0C33\u0C35-\u0C39\u0C3E-\u0C43\u0C46-\u0C48\u0C4A-\u0C4D\u0C82\u0C83\u0C85-\u0C8B\u0C8E-\u0C90\u0C92\u0C94-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBE-\u0CC3\u0CC6-\u0CC8\u0CCA-\u0CCD\u0D02\u0D03\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D28\u0D2A-\u0D39\u0D3E-\u0D43\u0D46-\u0D48\u0D4A-\u0D4D\u0D57\u0D60\u0D61\u0D7A-\u0D7F\u1F00-\u1F07\u1F10-\u1F15\u1F20-\u1F27\u1F30-\u1F37\u1F40-\u1F45\u1F50-\u1F57\u1F60-\u1F67\u1F70-\u1F7D\u1F80-\u1F87\u1F90-\u1F97\u1FA0-\u1FA7\u1FB2-\u1FB4\u1FB6\u1FB7\u1FBD\u1FBF\u1FC2-\u1FC4\u1FC6\u1FC7\u1FD2\u1FD3\u1FD6\u1FD7\u1FE2-\u1FE7\u1FF2-\u1FF4\u1FF6\u1FF7\u200D\u2019]+)/g);
+
+    for (var i = 0; i < words.length; i += 1) {
+        if (words[i].indexOf('/') !== -1) {
+            // Don't insert a zero width space if the slash is at the beginning or end
+            // of the text, or right after or before a space.
+            if (i !== 0 && i !== words.length - 1 && !(/\s+\/|\/\s+/.test(words[i]))) {
+                words[i] += '\u200B';
+            }
+        } else if (words[i].length > minLength) {
+            words[i] = this.hyphenate(words[i]).join('\u00AD');
+        }
+    }
+    return words.join('');
+};
+
+/**
+ * Hyphenates a word.
+ *
+ * @param {!string} word The word to hyphenate
+ * @return {!Array.<!string>} An array of word fragments indicating valid hyphenation points.
+ */
+Hypher.prototype.hyphenate = function (word) {
+    var characters,
+        characterPoints = [],
+        originalCharacters,
+        i,
+        j,
+        k,
+        node,
+        points = [],
+        wordLength,
+        lowerCaseWord = word.toLowerCase(),
+        nodePoints,
+        nodePointsLength,
+        m = Math.max,
+        trie = this.trie,
+        result = [''];
+
+    if (this.exceptions.hasOwnProperty(lowerCaseWord)) {
+        return word.match(this.exceptions[lowerCaseWord]).slice(1);
+    }
+
+    if (word.indexOf('\u00AD') !== -1) {
+        return [word];
+    }
+
+    word = '_' + word + '_';
+
+    characters = word.toLowerCase().split('');
+    originalCharacters = word.split('');
+    wordLength = characters.length;
+
+    for (i = 0; i < wordLength; i += 1) {
+        points[i] = 0;
+        characterPoints[i] = characters[i].charCodeAt(0);
+    }
+
+    for (i = 0; i < wordLength; i += 1) {
+        node = trie;
+        for (j = i; j < wordLength; j += 1) {
+            node = node[characterPoints[j]];
+
+            if (node) {
+                nodePoints = node._points;
+                if (nodePoints) {
+                    for (k = 0, nodePointsLength = nodePoints.length; k < nodePointsLength; k += 1) {
+                        points[i + k] = m(points[i + k], nodePoints[k]);
+                    }
+                }
+            } else {
+                break;
+            }
+        }
+    }
+
+    for (i = 1; i < wordLength - 1; i += 1) {
+        if (i > this.leftMin && i < (wordLength - this.rightMin) && points[i] % 2) {
+            result.push(originalCharacters[i]);
+        } else {
+            result[result.length - 1] += originalCharacters[i];
+        }
+    }
+
+    return result;
+};
+
+module.exports = Hypher;
+window['Hypher'] = module.exports;
+
+window['Hypher']['languages'] = {};
+}());(function ($) {
+    $.fn.hyphenate = function (language) {
+        if (window['Hypher']['languages'][language]) {
+            return this.each(function () {
+                var i = 0, len = this.childNodes.length;
+                for (; i < len; i += 1) {
+                    if (this.childNodes[i].nodeType === 3) {
+                        this.childNodes[i].nodeValue = window['Hypher']['languages'][language].hyphenateText(this.childNodes[i].nodeValue);
+                    }
+                }
+            });
+        }
+    };
+}(jQuery));

lib/app.html

@@ -1,55 +1,54 @@
 <!doctype html>
 <html lang="en">
+
 <head>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <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="./3rdparty/highlight/styles/default.css">
-	<link rel="stylesheet" href="../css/doctest.css">
+    <link rel="stylesheet" href="../css/doctest.css">
-	<script src="../lib/3rdparty/highlight/highlight.pack.js"></script>
+    <script src="./3rdparty/highlight/highlight.pack.js"></script>
-    <script src="all.js"></script>
+    <script src="../dist/iwmlib.js"></script>
-  <!--   <script type="text/javascript" src="interface.js"></script> -->
+    <!--   <script type="text/javascript" src="interface.js"></script> -->
 </head>
-<body onload="Doctest.run()" >
+
-<h1>
+<body onload="Doctest.run()">
-	Application
+    <h1>
-</h1>
+        Application
-<p>
+    </h1>
-    IWM Browser Applications follow a common three phase pattern, shared by
+    <p>
-    many programming environments as diverse as Processing, Arduino, Intern, etc.
+        IWM Browser Applications follow a common three phase pattern, shared by many programming environments as diverse as Processing, Arduino, Intern, etc.
-    <ul>
+        <ul>
-        <li>Instantiate: Initialize the application, in this case a singleton and it's instance variables</li>
+            <li>Instantiate: Initialize the application, in this case a singleton and it's instance variables</li>
-        <li>Setup: Build more complex parts of the application, by loading data, creating the UI...</li>
+            <li>Setup: Build more complex parts of the application, by loading data, creating the UI...</li>
-        <li>Run: Enter and run the main loop of the application.</li>
+            <li>Run: Enter and run the main loop of the application.</li>
-    </ul>
+        </ul>
-    This pattern is reflected by the IApp Interface:
+        This pattern is reflected by the IApp Interface:
-</p>
+    </p>
     <pre><code class="js">
 class IApp extends Interface {
     setup() { return this }
     run() { return this }
 }
 </code></pre>
-<p>In practice the pattern may be more complex, because the setup phase can only be entered
+    <p>In practice the pattern may be more complex, because the setup phase can only be entered after loading things, a main loop cannot be entered because requirements are not met, etc. But the basic structure is always the same:
-after loading things, a main loop cannot be entered because requirements are not met, etc.
+    </p>
-But the basic structure is always the same:
+    <script type="module" class="doctest">
-</p>
+        console.log("Innerhalb script type=module") 
-<script type="module" class="doctest">
+        import App from "./app.js" 
-    console.log("Innerhalb script type=module")
+        const app = new App() 
-    import App from "./app.js"
+        app.setup()
-    const app = new App()
+        app.run()
-    app.setup()
+        window.app = app
-    app.run()
+    </script>
-    window.app = app
+    <p>The setup and run methods can also be chained:
-</script>
+    </p>
-<p>The setup and run methods can also be chained:
+    <script type="module" class="doctest">
-</p>
+        app.setup().run()
-<script type="module" class="doctest">
+    </script>
-    app.setup().run()
-</script>
 
-<h2>
+    <h2>
-References
+        References
-</h2>
+    </h2>
-<ul>
+    <ul>
-    <li><a href="https://theintern.github.io/intern/#common-config">Intern. Software testing for humans</a></li>
+        <li><a href="https://theintern.github.io/intern/#common-config">Intern. Software testing for humans</a></li>
- </ul>
+    </ul>
 </body>

lib/app.js

@@ -9,16 +9,20 @@ export class IApp extends Interface {
     /** Build the app by registering event handlers,
      *   adding DOM elements, instanciating templates, etc...
      */
-    setup() { return this }
+    setup() {
+        return this
+    }
 
     /** Run the application by starting a main loop, ...
      */
-    run() { return this }
+    run() {
+        return this
+    }
 }
 
 export default class App extends Object {
     /** Override this method to build your app.
-    */
+     */
     setup() {
         return this
     }
@@ -48,8 +52,7 @@ export default class App extends Object {
             this.allTests()
             var end = performance.now()
             return ['ok', end - start]
-        }
+        } catch (e) {
-        catch(e) {
             console.trace()
             return ['Tests failed', e.message]
         }

lib/bootstrap.babel.js

@@ -1,175 +1,275 @@
-'use strict';
+'use strict'
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _createClass = (function() {
+    function defineProperties(target, props) {
+        for (var i = 0; i < props.length; i++) {
+            var descriptor = props[i]
+            descriptor.enumerable = descriptor.enumerable || false
+            descriptor.configurable = true
+            if ('value' in descriptor) descriptor.writable = true
+            Object.defineProperty(target, descriptor.key, descriptor)
+        }
+    }
+    return function(Constructor, protoProps, staticProps) {
+        if (protoProps) defineProperties(Constructor.prototype, protoProps)
+        if (staticProps) defineProperties(Constructor, staticProps)
+        return Constructor
+    }
+})()
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+        throw new TypeError('Cannot call a class as a function')
+    }
+}
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+function _possibleConstructorReturn(self, call) {
+    if (!self) {
+        throw new ReferenceError(
+            "this hasn't been initialised - super() hasn't been called"
+        )
+    }
+    return call && (typeof call === 'object' || typeof call === 'function')
+        ? call
+        : self
+}
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _inherits(subClass, superClass) {
+    if (typeof superClass !== 'function' && superClass !== null) {
+        throw new TypeError(
+            'Super expression must either be null or a function, not ' +
+                typeof superClass
+        )
+    }
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+        constructor: {
+            value: subClass,
+            enumerable: false,
+            writable: true,
+            configurable: true
+        }
+    })
+    if (superClass)
+        Object.setPrototypeOf
+            ? Object.setPrototypeOf(subClass, superClass)
+            : (subClass.__proto__ = superClass)
+}
 
-var Bootstrap = function (_Object) {
+var Bootstrap = (function(_Object) {
-    _inherits(Bootstrap, _Object);
+    _inherits(Bootstrap, _Object)
 
     function Bootstrap() {
-        _classCallCheck(this, Bootstrap);
+        _classCallCheck(this, Bootstrap)
 
-        return _possibleConstructorReturn(this, (Bootstrap.__proto__ || Object.getPrototypeOf(Bootstrap)).apply(this, arguments));
+        return _possibleConstructorReturn(
+            this,
+            (Bootstrap.__proto__ || Object.getPrototypeOf(Bootstrap)).apply(
+                this,
+                arguments
+            )
+        )
     }
 
-    _createClass(Bootstrap, null, [{
+    _createClass(Bootstrap, null, [
-        key: 'import',
+        {
-        value: function _import(src) {
+            key: 'import',
-            var _this2 = this;
+            value: function _import(src) {
+                var _this2 = this
 
-            var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+                var callback =
+                    arguments.length > 1 && arguments[1] !== undefined
+                        ? arguments[1]
+                        : null
 
-            if (src.endsWith('babel.js')) {
+                if (src.endsWith('babel.js')) {
-                this.load(this.baseUrl + '/3rdparty/polyfills/babel-polyfill.js', function () {
+                    this.load(
-                    _this2.load(src, null, null);
+                        this.baseUrl + '/3rdparty/polyfills/babel-polyfill.js',
-                }, null);
+                        function() {
-            } else if (this.isModernSafari || this.isModernChrome) {
+                            _this2.load(src, null, null)
-                this.load(src, callback);
+                        },
-            } else {
+                        null
-                this.load(this.baseUrl + '/3rdparty/systemjs/system.js', function () {
+                    )
-                    SystemJS.config(_this2.systemjsConfig);
+                } else if (this.isModernSafari || this.isModernChrome) {
-                    SystemJS.import(src);
+                    this.load(src, callback)
-                }, 'script');
+                } else {
-            }
+                    this.load(
-        }
+                        this.baseUrl + '/3rdparty/systemjs/system.js',
-    }, {
+                        function() {
-        key: 'load',
+                            SystemJS.config(_this2.systemjsConfig)
-        value: function load(src, callback) {
+                            SystemJS.import(src)
-            var _this3 = this;
+                        },
-
+                        'script'
-            var type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'module';
+                    )
-
-            var script = document.createElement('script');
-            if (type === 'module') {
-                script.setAttribute('type', 'module');
-                script.setAttribute('crossorigin', 'use-credentials');
-            }
-            script.onload = function () {
-                if (callback) {
-                    callback.call(_this3, script);
-                }
-            };
-            script.src = src;
-            document.head.appendChild(script);
-        }
-    }, {
-        key: 'require',
-        value: function require(src) {
-            console.log('Dummy require');
-        }
-    }, {
-        key: 'renderFont',
-        value: function renderFont() {
-            var font = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'Open Sans';
-            var _arr = [300, 400, 600, 700, 800];
-
-            for (var _i = 0; _i < _arr.length; _i++) {
-                var weight = _arr[_i];var _arr2 = ['normal', 'italic'];
-
-                for (var _i2 = 0; _i2 < _arr2.length; _i2++) {
-                    var style = _arr2[_i2];
-                    var p = document.createElement('p');
-                    p.innerHTML = '.';
-                    document.body.appendChild(p);
-                    p.setAttribute('style', 'font-family: \'' + font + '\'; font-weight: ' + weight + '; font-style: \'' + style + '\'; position: absolute; top: -10000px;');
                 }
             }
-        }
+        },
-    }, {
+        {
-        key: 'isSafari',
+            key: 'load',
-        get: function get() {
+            value: function load(src, callback) {
-            return (/Safari/.test(navigator.userAgent) && /Apple Computer, Inc/.test(navigator.vendor)
+                var _this3 = this
-            );
-        }
-    }, {
-        key: 'isModernSafari',
-        get: function get() {
-            if (!this.isSafari) return false;
-            var agent = navigator.appVersion;
-            var offset = agent.indexOf('Version');
-            if (offset != -1) {
-                var version = parseFloat(agent.substring(offset + 8));
-                return version >= 10.1;
-            }
-            return false;
-        }
-    }, {
-        key: 'isChrome',
-        get: function get() {
-            var isChromium = window.chrome;
-            var winNav = window.navigator;
-            var vendorName = winNav.vendor;
-            var isOpera = winNav.userAgent.indexOf('OPR') > -1;
-            var isIEedge = winNav.userAgent.indexOf('Edge') > -1;
-            var isIOSChrome = winNav.userAgent.match('CriOS');
 
-            if (isIOSChrome) {
+                var type =
-                return true;
+                    arguments.length > 2 && arguments[2] !== undefined
-            } else if (isChromium !== null && isChromium !== undefined && vendorName === 'Google Inc.' && isOpera == false && isIEedge == false) {
+                        ? arguments[2]
-                return true;
+                        : 'module'
-            } else {
-                return false;
-            }
-        }
-    }, {
-        key: 'isModernChrome',
-        get: function get() {
-            if (!this.isChrome) {
-                return false;
-            }
-            var raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);
-            var version = raw ? parseInt(raw[2], 10) : false;
-            return version > 62;
-        }
-    }, {
-        key: 'systemjsConfig',
-        get: function get() {
 
-            var baseUrl = this.baseUrl;
+                var script = document.createElement('script')
+                if (type === 'module') {
+                    script.setAttribute('type', 'module')
+                    script.setAttribute('crossorigin', 'use-credentials')
+                }
+                script.onload = function() {
+                    if (callback) {
+                        callback.call(_this3, script)
+                    }
+                }
+                script.src = src
+                document.head.appendChild(script)
+            }
+        },
+        {
+            key: 'require',
+            value: function require(src) {
+                console.log('Dummy require')
+            }
+        },
+        {
+            key: 'renderFont',
+            value: function renderFont() {
+                var font =
+                    arguments.length > 0 && arguments[0] !== undefined
+                        ? arguments[0]
+                        : 'Open Sans'
+                var _arr = [300, 400, 600, 700, 800]
 
-            return {
+                for (var _i = 0; _i < _arr.length; _i++) {
-                baseURL: baseUrl,
+                    var weight = _arr[_i]
-                map: {
+                    var _arr2 = ['normal', 'italic']
-                    'plugin-babel': baseUrl + '/3rdparty/systemjs/plugin-babel.js',
+
-                    'systemjs-babel-build': baseUrl + '/3rdparty/systemjs/systemjs-babel-browser.js'
+                    for (var _i2 = 0; _i2 < _arr2.length; _i2++) {
-                },
+                        var style = _arr2[_i2]
-                transpiler: 'plugin-babel',
+                        var p = document.createElement('p')
-                meta: {
+                        p.innerHTML = '.'
-                    '*.js': {
+                        document.body.appendChild(p)
-                        authorization: true,
+                        p.setAttribute(
-                        babelOptions: {
+                            'style',
-                            es2015: false
+                            "font-family: '" +
+                                font +
+                                "'; font-weight: " +
+                                weight +
+                                "; font-style: '" +
+                                style +
+                                "'; position: absolute; top: -10000px;"
+                        )
+                    }
+                }
+            }
+        },
+        {
+            key: 'isSafari',
+            get: function get() {
+                return (
+                    /Safari/.test(navigator.userAgent) &&
+                    /Apple Computer, Inc/.test(navigator.vendor)
+                )
+            }
+        },
+        {
+            key: 'isModernSafari',
+            get: function get() {
+                if (!this.isSafari) return false
+                var agent = navigator.appVersion
+                var offset = agent.indexOf('Version')
+                if (offset != -1) {
+                    var version = parseFloat(agent.substring(offset + 8))
+                    return version >= 10.1
+                }
+                return false
+            }
+        },
+        {
+            key: 'isChrome',
+            get: function get() {
+                var isChromium = window.chrome
+                var winNav = window.navigator
+                var vendorName = winNav.vendor
+                var isOpera = winNav.userAgent.indexOf('OPR') > -1
+                var isIEedge = winNav.userAgent.indexOf('Edge') > -1
+                var isIOSChrome = winNav.userAgent.match('CriOS')
+
+                if (isIOSChrome) {
+                    return true
+                } else if (
+                    isChromium !== null &&
+                    isChromium !== undefined &&
+                    vendorName === 'Google Inc.' &&
+                    isOpera == false &&
+                    isIEedge == false
+                ) {
+                    return true
+                } else {
+                    return false
+                }
+            }
+        },
+        {
+            key: 'isModernChrome',
+            get: function get() {
+                if (!this.isChrome) {
+                    return false
+                }
+                var raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)
+                var version = raw ? parseInt(raw[2], 10) : false
+                return version > 62
+            }
+        },
+        {
+            key: 'systemjsConfig',
+            get: function get() {
+                var baseUrl = this.baseUrl
+
+                return {
+                    baseURL: baseUrl,
+                    map: {
+                        'plugin-babel':
+                            baseUrl + '/3rdparty/systemjs/plugin-babel.js',
+                        'systemjs-babel-build':
+                            baseUrl +
+                            '/3rdparty/systemjs/systemjs-babel-browser.js'
+                    },
+                    transpiler: 'plugin-babel',
+                    meta: {
+                        '*.js': {
+                            authorization: true,
+                            babelOptions: {
+                                es2015: false
+                            }
                         }
                     }
                 }
-            };
-        }
-    }, {
-        key: 'baseUrl',
-        get: function get() {
-
-            var baseUrl = './';
-            var scripts = document.getElementsByTagName('script');
-
-            for (var i = 0; i < scripts.length; i++) {
-                var script = scripts[i];
-                var src = script.getAttribute('src');
-                var re = /\/bootstrap(.babel)?\.js$/;
-                if (re.test(src)) {
-                    baseUrl = src.replace(re, '');
-                }
             }
+        },
+        {
+            key: 'baseUrl',
+            get: function get() {
+                var baseUrl = './'
+                var scripts = document.getElementsByTagName('script')
 
-            return baseUrl;
+                for (var i = 0; i < scripts.length; i++) {
+                    var script = scripts[i]
+                    var src = script.getAttribute('src')
+                    var re = /\/bootstrap(.babel)?\.js$/
+                    if (re.test(src)) {
+                        baseUrl = src.replace(re, '')
+                    }
+                }
+
+                return baseUrl
+            }
         }
-    }]);
+    ])
 
-    return Bootstrap;
+    return Bootstrap
-}(Object);
+})(Object)
 
-window.Bootstrap = Bootstrap;
+window.Bootstrap = Bootstrap

lib/bootstrap.js

@@ -1,13 +1,10 @@
-
 class Bootstrap extends Object {
-
     static get isSafari() {
         return /Safari/.test(navigator.userAgent) && /Apple Computer, Inc/.test(navigator.vendor)
     }
 
     static get isModernSafari() {
-        if (!this.isSafari)
+        if (!this.isSafari) return false
-            return false
         let agent = navigator.appVersion
         let offset = agent.indexOf('Version')
         if (offset != -1) {
@@ -27,7 +24,13 @@ class Bootstrap extends Object {
 
         if (isIOSChrome) {
             return true
-        } else if (isChromium !== null && isChromium !== undefined && vendorName === 'Google Inc.' && isOpera == false && isIEedge == false) {
+        } else if (
+            isChromium !== null &&
+            isChromium !== undefined &&
+            vendorName === 'Google Inc.' &&
+            isOpera == false &&
+            isIEedge == false
+        ) {
             return true
         } else {
             return false
@@ -45,7 +48,6 @@ class Bootstrap extends Object {
     }
 
     static get isFirefox() {
-
         if (window.navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
             return true
         }
@@ -54,7 +56,6 @@ class Bootstrap extends Object {
     }
 
     static get isModernFirefox() {
-
         if (!this.isFirefox) {
             return false
         }
@@ -67,26 +68,31 @@ class Bootstrap extends Object {
 
     static import(src, callback = null) {
         if (src.endsWith('babel.js')) {
-            this.load(this.baseUrl + '/3rdparty/polyfills/babel-polyfill.js',
+            this.load(
+                this.baseUrl + '/3rdparty/polyfills/babel-polyfill.js',
                 () => {
                     this.load(src, callback, null)
                 },
-                null)
+                null
-        }
+            )
-        else if (this.isModernSafari || this.isModernChrome || this.isModernFirefox) {
+        } else if (this.isModernSafari || this.isModernChrome || this.isModernFirefox) {
             this.load(src, callback)
         } else {
-            this.load(this.baseUrl + '/3rdparty/systemjs/system.js', () => {
+            this.load(
-                SystemJS.config(this.systemjsConfig)
+                this.baseUrl + '/3rdparty/systemjs/system.js',
-                let promise = SystemJS.import(src)
+                () => {
-                if (promise) {
+                    SystemJS.config(this.systemjsConfig)
-                    promise.then(() => {
+                    let promise = SystemJS.import(src)
-                        if (callback) {
+                    if (promise) {
-                            callback.call(this)
+                        promise.then(() => {
-                        }
+                            if (callback) {
-                    })
+                                callback.call(this)
-                }
+                            }
-            }, 'script')
+                        })
+                    }
+                },
+                'script'
+            )
         }
     }
 
@@ -110,7 +116,6 @@ class Bootstrap extends Object {
     }
 
     static get systemjsConfig() {
-
         const baseUrl = this.baseUrl
 
         return {
@@ -132,7 +137,6 @@ class Bootstrap extends Object {
     }
 
     static get baseUrl() {
-
         let baseUrl = './'
         let scripts = document.getElementsByTagName('script')
 
@@ -154,7 +158,10 @@ class Bootstrap extends Object {
                 let p = document.createElement('p')
                 p.innerHTML = '.'
                 document.body.appendChild(p)
-                p.setAttribute('style', `font-family: '${font}'; font-weight: ${weight}; font-style: '${style}'; position: absolute; top: -10000px;`)
+                p.setAttribute(
+                    'style',
+                    `font-family: '${font}'; font-weight: ${weight}; font-style: '${style}'; position: absolute; top: -10000px;`
+                )
             }
         }
     }

lib/bundle.js

@@ -2,22 +2,65 @@ import App from './app.js'
 import Doctest from './doctest.js'
 import Errors from './errors.js'
 import Events from './events.js'
-import {DOMFlip, DOMFlippable, CardLoader, PDFLoader, ImageLoader, FrameLoader, HTMLLoader} from './flippable.js'
+import { DOMFlip, DOMFlippable, CardLoader, PDFLoader, ImageLoader, FrameLoader, HTMLLoader } from './flippable.js'
 import Index from './index.js'
 import Interface from './interface.js'
+import Logging from './logging.js'
 import Poppable from './poppable.js'
 import PopupMenu from './popupmenu.js'
 import Popup from './popup.js'
-import {IApp} from './app.js'
+import { IApp } from './app.js'
-import {Capabilities, CapabilitiesTests} from './capabilities.js'
+import { Capabilities, CapabilitiesTests } from './capabilities.js'
-import {EventRecorder} from './events.js'
+import { EventRecorder } from './events.js'
-import {FrameContainer, FrameTarget} from './frames.js'
+import { FrameContainer, FrameTarget } from './frames.js'
-import {Inspect} from './inspect.js'
+import { Inspect } from './inspect.js'
-import {PointMap, InteractionPoints, Interaction, IInteractionTarget, InteractionDelta, InteractionMapper, InteractionDelegate, IInteractionMapperTarget} from './interaction.js'
+import {
-import {ResizeEvent, DOMScatterContainer, AbstractScatter, DOMScatter, ScatterEvent, BaseEvent} from './scatter.js'
+    PointMap,
-import {Cycle, Colors, Elements, Angle, Dates, Points, Polygon, Rect, Sets, Strings, isEmpty, getId, lerp, debounce, randomInt, randomFloat} from './utils.js'
+    InteractionPoints,
+    Interaction,
+    IInteractionTarget,
+    InteractionDelta,
+    InteractionMapper,
+    InteractionDelegate,
+    IInteractionMapperTarget
+} from './interaction.js'
+import {
+    ITapDelegate,
+    ResizeEvent,
+    DOMScatterContainer,
+    AbstractScatter,
+    DOMScatter,
+    ScatterEvent,
+    BaseEvent
+} from './scatter.js'
+import {
+    Cycle,
+    Colors,
+    Elements,
+    Angle,
+    Dates,
+    Points,
+    Polygon,
+    Rect,
+    Sets,
+    Strings,
+    isEmpty,
+    getId,
+    lerp,
+    debounce,
+    randomInt,
+    randomFloat,
+    LowPassFilter
+} from './utils.js'
 import UITest from './uitest.js'
 
+import Card from './card/card.js'
+import CardWrapper from './card/wrapper.js'
+import Highlight from './card/highlight.js'
+import ScatterCard from './card/scatter.js'
+import { CardPlugin, CardPluginBase } from './card/plugin.js'
+import Theme from './card/theme.js'
+
 /* Needed to ensure that rollup.js includes class definitions and the classes
 are visible inside doctests.
 */
@@ -52,6 +95,7 @@ window.FrameTarget = FrameTarget
 window.IApp = IApp
 window.IInteractionMapperTarget = IInteractionMapperTarget
 window.IInteractionTarget = IInteractionTarget
+window.ITapDelegate = ITapDelegate
 window.Index = Index
 window.Inspect = Inspect
 window.Interaction = Interaction
@@ -60,6 +104,8 @@ window.InteractionDelta = InteractionDelta
 window.InteractionMapper = InteractionMapper
 window.InteractionPoints = InteractionPoints
 window.Interface = Interface
+window.Logging = Logging
+window.LowPassFilter = LowPassFilter
 window.PointMap = PointMap
 window.Rect = Rect
 window.Points = Points
@@ -78,3 +124,11 @@ window.lerp = lerp
 window.debounce = debounce
 window.randomInt = randomInt
 window.randomFloat = randomFloat
+
+window.CardWrapper = CardWrapper
+window.Card = Card
+window.CardPlugin = CardPlugin
+window.CardPluginBase = CardPluginBase
+window.ScatterCard = ScatterCard
+window.Highlight = Highlight
+window.Theme = Theme

lib/capabilities.html

@@ -3,10 +3,10 @@
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>Doctests Capabilities</title>
-    <link rel="stylesheet" href="../lib/3rdparty/highlight/styles/default.css">
+    <link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
     <link rel="stylesheet" href="../css/doctest.css">
-    <script src="../lib/3rdparty/highlight/highlight.pack.js"></script>
+    <script src="./3rdparty/highlight/highlight.pack.js"></script>
-    <script type="text/javascript" src="all.js"></script>
+    <script type="text/javascript" src="../dist/iwmlib.js"></script>
 </head>
 <body onload="Doctest.run(); CapabilitiesTests.testAll()">
 <main>

lib/capabilities.js

@@ -1,7 +1,6 @@
 /** Report capabilities with guaranteed values.
  */
 export class Capabilities {
-
     /** Returns the browser userAgent.
     @return {string}
     */
@@ -14,7 +13,7 @@ export class Capabilities {
     @return {boolean}
     */
     static get isMobile() {
-        return (/Mobi/.test(navigator.userAgent))
+        return /Mobi/.test(navigator.userAgent)
     }
 
     /** Tests whether the app is running on a iOS device.
@@ -22,7 +21,7 @@ export class Capabilities {
     @return {boolean}
     */
     static get isIOS() {
-        return (/iPad|iPhone|iPod/.test(navigator.userAgent)) && !window.MSStream
+        return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream
     }
 
     /** Tests whether the app is running in a Safari environment.
@@ -31,16 +30,40 @@ export class Capabilities {
     @return {boolean}
     */
     static get isSafari() {
-        return navigator.vendor && navigator.vendor.indexOf('Apple') > -1 && navigator.userAgent && !navigator.userAgent.match('CriOS')
+        return (
+            navigator.vendor &&
+            navigator.vendor.indexOf('Apple') > -1 &&
+            navigator.userAgent &&
+            !navigator.userAgent.match('CriOS')
+        )
     }
 
     /**
      * Distincts if the app is running inside electron or not.
      *
-     * source: https://discuss.atom.io/t/detect-electron-or-web-page-running/33180/3
+     * source: https://github.com/cheton/is-electron
      */
     static get isElectron() {
-        return typeof process != 'undefined' && process.versions && process.versions.electron !== undefined
+        // Renderer process
+        if (typeof window !== 'undefined' && typeof window.process === 'object' && window.process.type === 'renderer') {
+            return true
+        }
+
+        // Main process
+        if (typeof process !== 'undefined' && typeof process.versions === 'object' && !!process.versions.electron) {
+            return true
+        }
+
+        // Detect the user agent when the `nodeIntegration` option is set to true
+        if (
+            typeof navigator === 'object' &&
+            typeof navigator.userAgent === 'string' &&
+            navigator.userAgent.indexOf('Electron') >= 0
+        ) {
+            return true
+        }
+
+        return false
     }
 
     /** Returns the display resolution. Necessary for retina displays.
@@ -54,52 +77,54 @@ export class Capabilities {
     @return {boolean}
     */
     static get isMultiTouchTable() {
-        return Capabilities.devicePixelRatio > 2 && Capabilities.isMobile === false && /Windows/i.test(Capabilities.userAgent)
+        return (
+            Capabilities.devicePixelRatio > 2 &&
+            Capabilities.isMobile === false &&
+            /Windows/i.test(Capabilities.userAgent)
+        )
     }
 
     /** Returns true if mouse events are supported
     @return {boolean}
     */
     static supportsMouseEvents() {
-        return typeof(window.MouseEvent) != 'undefined'
+        return typeof window.MouseEvent != 'undefined'
     }
 
     /** Returns true if touch events are supported
     @return {boolean}
     */
     static supportsTouchEvents() {
-        return typeof(window.TouchEvent) != 'undefined'
+        return typeof window.TouchEvent != 'undefined'
     }
 
     /** Returns true if pointer events are supported
     @return {boolean}
     */
     static supportsPointerEvents() {
-        return typeof(window.PointerEvent) != 'undefined'
+        return typeof window.PointerEvent != 'undefined'
     }
 
     /** Returns true if DOM templates are supported
     @return {boolean}
     */
     static supportsTemplate() {
-        return 'content' in document.createElement('template');
+        return 'content' in document.createElement('template')
     }
 }
 
 /** Basic tests for Capabilities.
  */
 export class CapabilitiesTests {
-
     static testConfirm() {
         let bool = confirm('Please confirm')
-        document.getElementById('demo').innerHTML = (bool) ? 'Confirmed' : 'Not confirmed'
+        document.getElementById('demo').innerHTML = bool ? 'Confirmed' : 'Not confirmed'
     }
 
     static testPrompt() {
         let person = prompt('Please enter your name', 'Harry Potter')
         if (person != null) {
-            demo.innerHTML =
+            demo.innerHTML = 'Hello ' + person + '! How are you today?'
-            'Hello ' + person + '! How are you today?'
         }
     }
 

lib/card/highlight.js

@@ -0,0 +1,382 @@
+/* eslint-disable no-console */
+
+let _HighlightEnabled = true
+let _CircleIds = 0
+
+/** Helper method to round values with one digit precision */
+function round(value) {
+    return Math.round(parseFloat(value) * 10) / 10
+}
+
+/**
+ * A namespace with static functions to expand and shrink highlighted image regions.
+ * Assumes an SVG image with the following structure:
+ *
+ * <svg viewbox="0 0 100 100">
+ *       <!-- The defs section must be defined and cannot be generated in JavaScript -->
+ *      <defs>
+ *      </defs>
+ *       <image width="100" height="100" xlink:href="../assets/chess.jpg"/>
+ *        <circle onclick="Highlight.animateZoom(event)" cx="47" cy="18" r="8" stroke-width="0.5" />
+ *       <circle onclick="Highlight.animateZoom(event)" cx="60" cy="67" r="8" stroke-width="0.5" />
+ *   </svg>
+ *
+ * The SVG root element should use a viewbox with 0 0 100 100 to ensure that the positions and size of the
+ * circles can be represented in percent.
+ *
+ * @class Highlight
+ * @extends {Object}
+ */
+export default class Highlight extends Object {
+    static disableAnimations() {
+        _HighlightEnabled = false
+        let expanded = document.querySelectorAll('.' + Highlight.expandedClass)
+        for (let obj of expanded) {
+            this.shrink(obj)
+        }
+    }
+
+    static enableAnimations() {
+        _HighlightEnabled = true
+    }
+
+    static removeAnimations(svgRoot) {
+        let expanded = svgRoot.querySelectorAll('.' + Highlight.expandedClass)
+        for (let obj of expanded) {
+            TweenLite.set(obj, { scale: 1 })
+            obj.classList.remove('zooming')
+            obj.classList.remove(Highlight.expandedClass)
+        }
+        let defs = svgRoot.querySelector('defs')
+        while (defs.firstChild) {
+            defs.firstChild.remove()
+        }
+        let maskImages = svgRoot.querySelectorAll('.addedImage')
+        for (let m of maskImages) {
+            m.remove()
+        }
+        let circles = svgRoot.querySelectorAll('circle')
+        for (let circle of circles) {
+            if (circle.classList.length == 0) {
+                circle.removeAttribute('class')
+            }
+            if (circle.hasAttribute('id') && circle.getAttribute('id').startsWith('@@')) {
+                circle.removeAttribute('id')
+            }
+            circle.removeAttribute('data-svg-origin')
+            circle.removeAttribute('transform')
+            circle.removeAttribute('style')
+            let cx = circle.getAttribute('cx')
+            let cy = circle.getAttribute('cy')
+            let r = circle.getAttribute('r')
+            circle.setAttribute('cx', round(cx))
+            circle.setAttribute('cy', round(cy))
+            circle.setAttribute('r', round(r))
+        }
+    }
+
+    static expand(obj, { scale = 2, duration = 3, stroke = 2, onComplete = null } = {}) {
+        if (obj == null) return
+        //console.log("expand")
+        obj.classList.add('zooming')
+        TweenLite.to(obj, duration, {
+            scale: scale,
+            onUpdate: () => {
+                let scale = obj._gsTransform.scaleX
+                obj.setAttribute('stroke-width', stroke / scale)
+            },
+            onComplete: () => {
+                console.log('expand complete')
+                obj.classList.remove('zooming')
+                obj.classList.add(Highlight.expandedClass)
+                obj.setAttribute('stroke-width', stroke / scale)
+                if (onComplete) onComplete()
+            }
+        })
+    }
+
+    static shrink(obj, { duration = 0.5, stroke = 2 } = {}) {
+        //console.log("shrink")
+        if (obj == null) return
+        obj.classList.add('zooming')
+        TweenLite.to(obj, duration, {
+            scale: 1,
+            onUpdate: () => {
+                let scale = obj._gsTransform.scaleX
+                obj.setAttribute('stroke-width', stroke / scale)
+            },
+            onComplete: () => {
+                //console.log("shrink complete")
+                obj.classList.remove('zooming')
+                obj.classList.remove(Highlight.expandedClass)
+                obj.setAttribute('stroke-width', stroke)
+            }
+        })
+    }
+
+    static animateCircle(target, callback) {
+        console.log('ANIMATE CIRCLE', this)
+        // ** DEBUG OUTPUTS **
+
+        let circle = target
+        // We need a unique id to ensure correspondence between circle, mask, and maskImage
+        if (!circle.hasAttribute('id')) {
+            _CircleIds += 1
+            circle.setAttribute('id', '@@' + _CircleIds)
+        }
+        let id = circle.getAttribute('id')
+        TweenLite.set(circle, { transformOrigin: '50% 50%' })
+        /*if (circle.classList.contains('zooming')) {
+            console.log("already zooming")
+            return
+        }*/
+
+        let svgRoot = circle.closest('svg')
+        let circleGroup = circle.parentNode
+        let image = svgRoot.querySelector('image')
+
+        let stroke = parseFloat(circleGroup.getAttribute('stroke-width') || 6)
+
+        let defs = svgRoot.querySelector('defs')
+        if (defs == null) {
+            defs = document.createElementNS(svgRoot, 'defs')
+            svgRoot.insertBefore(defs, image)
+        }
+
+        // // We need direct children, therefore we cannot use querySelectorAll
+        let maskImageId = 'maskImage' + id
+        let maskImage = svgRoot.getElementById(maskImageId)
+
+        if (circle.classList.contains(Highlight.expandedClass)) {
+            if (!circle.classList.contains('zooming')) {
+                this.shrink(circle, { stroke })
+                this.shrink(maskImage, { stroke })
+                return
+            }
+            //console.log("animate called while zooming out -> expand")
+        } else if (circle.classList.contains('zooming')) {
+            //console.log("animate called while zooming in -> shrink")
+            this.shrink(circle, { stroke })
+            this.shrink(maskImage, { stroke })
+            return
+        }
+        let circles = Array.from(circleGroup.children).filter(e => e.tagName == 'circle')
+        for (let c of circles) {
+            //console.log("shrinking all circles")
+            this.shrink(c, { stroke })
+        }
+        let maskImages = circleGroup.querySelectorAll('.addedImage')
+        for (let m of maskImages) {
+            this.shrink(m, { stroke })
+        }
+
+        Highlight._createSVGMask(svgRoot, image, id)
+
+        // TweenLite.set(maskImage, { transformOrigin: `${tx}% ${ty}%` })
+
+        this.expand(circle, { stroke, onComplete: callback })
+        this.expand(maskImage)
+
+        return false
+    }
+
+    static openHighlight(target, { animation = 0.5, scale = 2, onExpanded = null } = {}) {
+        if (Highlight._isExpanded(target)) {
+            console.log('Target is already expanded!')
+            return
+        } else {
+            let targetId = target.getAttribute('id')
+            if (targetId && targetId.startsWith('@@')) {
+                let id = targetId.slice(2)
+                const imageId = '#maskImage' + id
+                const parent = target.parentNode
+                if (parent != null) {
+                    let image = parent.querySelector(imageId)
+                    if (image) {
+                        this._bringToFront(image)
+                    } else console.error('Could not find corresponding image element.')
+                } else console.log('Element was no parent:', target)
+            }
+            this._bringToFront(target)
+            let svgRoot = target.closest('svg')
+            if (svgRoot == null) {
+                return
+            }
+            let image = svgRoot.querySelector('image')
+
+            // eslint-disable-next-line no-unused-vars
+            let [mask, maskImage] = Highlight._getSVGMask(target, {
+                svgRoot,
+                image
+            })
+            let center = Highlight._calculateCenterRelativeTo(target, image)
+            console.log('_calculateCenterRelativeTo', center)
+            TweenLite.set(maskImage, {
+                transformOrigin: `${center.x} ${center.y}`
+            })
+            TweenLite.set(target, { transformOrigin: '50% 50%' })
+
+            TweenLite.to([target, maskImage], animation, {
+                scale,
+                onComplete: onExpanded
+            })
+
+            target.classList.add(Highlight.expandedClass)
+        }
+    }
+
+    static toggleHighlight(node) {
+        console.log('toggleHighlight', Highlight._isExpanded(node))
+        if (Highlight._isExpanded(node)) {
+            Highlight.closeHighlight(node)
+        } else {
+            Highlight.openHighlight(node)
+        }
+    }
+
+    static _bringToFront(target) {
+        const parent = target.parentNode
+        if (target && parent) {
+            parent.removeChild(target)
+            parent.appendChild(target)
+        } else console.error('Could not bring to front. Either no target or no parent.', target, parent)
+    }
+
+    static _getSVGMask(circle, { svgRoot = null, image = null } = {}) {
+        const id = this._retrieveId(circle)
+        const maskId = 'mask' + id
+        const maskImageId = 'maskImage' + id
+
+        if (!svgRoot) svgRoot = circle.closest('svg')
+
+        let mask = svgRoot.getElementById(maskId)
+        let maskImage = svgRoot.getElementById(maskImageId)
+
+        if (!mask || !maskImage)
+            [mask, maskImage] = Highlight._createSVGMask(circle, {
+                svgRoot,
+                image,
+                id
+            })
+
+        return [mask, maskImage]
+    }
+
+    /**
+     * Creates an SVG mask for a provided svgElement.
+     *
+     * @static
+     * @param {SVGElement} element - Element that should be masked.
+     * @param {object} opts - Optional parameters to avoid unnecessary fetching of elements.
+     * @param {SVGElement} opts.svgRoot - The root <svg> element of the element.
+     * @param {SVGImageElement} opts.image - The image that is used in the mask.
+     * @param {number} opts.id - The id of the mask.
+     * @returns
+     * @memberof Highlight
+     */
+    static _createSVGMask(element, { svgRoot = null, image = null, id = null } = {}) {
+        // We can fetch these values here, but it's more efficient to
+        // simply pass them in, as it's likely they were already retrieved beforehand.
+        if (svgRoot == null) svgRoot = element.closest('svg')
+        if (image == null) image = svgRoot.querySelector('image')
+        if (id == null) id = this._retrieveId(element)
+
+        let svg = 'http://www.w3.org/2000/svg'
+        let xlink = 'http://www.w3.org/1999/xlink'
+
+        let svgGroup = element.parentNode
+
+        let src = image.getAttributeNS(xlink, 'href')
+
+        let maskId = 'mask' + id
+        let maskImageId = 'maskImage' + id
+        let mask = svgRoot.getElementById(maskId)
+        let maskImage = svgRoot.getElementById(maskImageId)
+
+        let defs = svgRoot.querySelector('defs')
+        if (defs == null) {
+            defs = document.createElementNS(svgRoot, 'defs')
+            svgRoot.insertBefore(defs, image)
+        }
+
+        if (mask == null) {
+            mask = document.createElementNS(svg, 'mask')
+            mask.setAttribute('id', maskId)
+            let maskCircle = element.cloneNode(true)
+            mask.appendChild(maskCircle)
+            defs.appendChild(mask)
+        }
+
+        let bbox = svgRoot.getElementsByTagName('image')[0].getBBox()
+        let width = bbox.width
+        let height = bbox.height
+
+        if (maskImage == null) {
+            maskImage = document.createElementNS(svg, 'image')
+            maskImage.style.pointerEvents = 'none'
+            maskImage.setAttribute('id', maskImageId)
+            maskImage.setAttributeNS(xlink, 'href', src)
+            maskImage.setAttribute('width', width)
+            maskImage.setAttribute('height', height)
+            maskImage.setAttribute('class', 'addedImage')
+            svgGroup.insertBefore(maskImage, element) // image.nextSibling)
+            TweenLite.set(maskImage, { scale: 1 })
+            maskImage.style.mask = 'url(#' + maskId + ')'
+        }
+
+        svgGroup.appendChild(maskImage)
+        // svgGroup.appendChild(element)
+
+        return [mask, maskImage]
+    }
+
+    static _calculateCenterRelativeTo(target, image) {
+        let bbox = image.getBBox()
+        let width = bbox.width
+        let height = bbox.height
+        let cx = target.getAttribute('cx')
+        let cy = target.getAttribute('cy')
+        let x = cx.endsWith('%') ? cx : round((cx / width) * 100) + '%'
+        let y = cy.endsWith('%') ? cy : round((cy / height) * 100) + '%'
+        return { x, y }
+    }
+
+    static _isExpanded(target) {
+        return target.classList.contains(Highlight.expandedClass)
+    }
+
+    static closeHighlight(target, { animation = 0.5 } = {}) {
+        target.classList.remove(Highlight.expandedClass)
+        // eslint-disable-next-line no-unused-vars
+        let [mask, maskImage] = Highlight._getSVGMask(target)
+        console.log('Close Highlight', maskImage)
+        TweenLite.to([target, maskImage], animation, {
+            scale: 1
+        })
+    }
+
+    static animate(event) {
+        if (!_HighlightEnabled) return
+
+        event.stopPropagation()
+        Highlight.animateCircle(event.target)
+
+        return false
+    }
+
+    static _retrieveId(target) {
+        let id = target.getAttribute('id')
+        // We need a unique id to ensure correspondence between circle, mask, and maskImage
+        if (!id) {
+            _CircleIds += 1
+            target.setAttribute('id', '@@' + _CircleIds)
+            id = _CircleIds
+        } else {
+            id = parseInt(id.substring(2))
+        }
+
+        return id
+    }
+}
+
+Highlight.expandedClass = 'expanded'

lib/card/index.html

@@ -0,0 +1,125 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>Doctests Cards</title>
+    <link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
+    <link rel="stylesheet" href="../../css/doctest.css">
+    <link rel="stylesheet" href="../../css/highlight.css">
+    <link rel="stylesheet" href="../../css/popup.css">
+    <script src="../3rdparty/highlight/highlight.pack.js"></script>
+    <script src="../../dist/iwmlib.js"></script>
+    <script src="../../dist/iwmlib.3rdparty.js"></script>
+</head>
+
+<body onload="Doctest.run();">
+    <h1>
+        Cards
+    </h1>
+    <p>
+        Cards implement a central UI metaphor for multiuser applications. They allow users to explore information spaces
+        independently from each other. Most of the time a card lives within a scatter and can be moved, rotated, and
+        scaled.
+        The scatter and it's interaction mapper are also responsible to detect and distinguish tap events form other
+        interactions.
+        But in preview programs and editors this is not necessary. Therefore we provide a central CardWrapper class that
+        turns any DOM node into a card.
+    </p>
+    <p>
+        The wrapper's main task is to handle tap events and trigger the corresponding actions. There are three main
+        ways to define these actions.
+        <ol>
+            <li>Define onclick handlers in HTML and SVG, e.g. <code>&lt;a onclick="alert(1)"&gt;link&lt;a&gt;</code>
+            </li>
+            <li>Use onTap with a DOM node as event target, e.g. <code>wrapper.onTap(node, event => {})</code></li>
+            <li>Use onTap with a CSS selector, e.g. <code>wrapper.onTap('.link', event => {})</code></li>
+            </li>
+        </ol>
+        The order in which these possibilities are testet is 1, 2, 3.
+    </p>
+    <p>
+        Note that the objects can also be actived by clicking nearby and not directly on the DOM node.
+        This solves a major problem on large tabletops with a parallaxis in the display.
+    </p>
+    <div class="interactive grayBorder" style="position: relative;">
+        <article id="demoCardWithOnClick"
+            style="position: relative; left: 0%; padding: 16px; margin: 16px; border: 1px solid gray; width: 320px; height: 240px;">
+            <h1 style="color: gray;">A Demo Card with onclick</h1>
+            <figure style="position: relative;">
+                <img width="75%" src="../examples/women.jpeg">
+                <svg class="overlayBase" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"
+                    viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
+                    <circle cx="35" cy="50" r="35" class="highlight" onclick="alert('Highlight clicked')" stroke="white"
+                        fill="transparent" stroke-width="1" />
+                </svg>
+            </figure>
+            <p>Lorem ipsum <a class="link" style="color:blue;" onclick="alert('Link clicked')">dolor</a> sit amet,
+                consetetur sadipscing elitr.</p>
+        </article>
+
+        <article id="demoCardWithSelector"
+            style="position: absolute; left: 50%; top: 0%; padding: 16px; margin: 16px; border: 1px solid gray; width: 320px; height: 240px;">
+            <div class="info-card" style="text-align: center">
+                    <h1 style="color: gray;">A Demo Card with selectors</h1>
+
+                    <!-- Grr... The viewBox must reflect the width & height, using 0, 0, 100,
+                        100 leads to blank spaces -->
+                    <svg class="overlayBase" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 268 188"
+                        style="width: 180px;" preserveAspectRatio="xMidYMid meet">
+                        <defs>
+                        </defs>
+                        <image xlink:href="../examples/king.jpeg" x="0" y="0" height="188" width="268" />
+                        <g>
+                            <circle xlink:href="./popup.html"  cx="50%" cy="30%" r="25%" class="highlight" stroke="white" fill="transparent"
+                                stroke-width="4" />
+                        </g>
+        
+                    </svg>
+        
+                    <p>Lorem ipsum <a class="link" href="javascript:alert('Link clicked via href')"
+                            style="color:blue;">dolor</a> sit
+                        amet,
+                        consetetur sadipscing elitr.</p>
+            </div>
+            
+        </article>
+
+    </div>
+
+    <script class="doctest">
+
+        Doctest.expect(ITapDelegate.implementedBy(CardWrapper), true)
+
+        const wrapper1 = new CardWrapper(demoCardWithOnClick)
+        wrapper1.handleClicksAsTaps()
+
+        const wrapper2 = new CardWrapper(demoCardWithSelector)
+        wrapper2.handleClicksAsTaps()
+        wrapper2.onTap('circle', (event, node) => {
+            Card.loadHighlightPopup(event, node)
+        })
+        
+        wrapper2.onTap('a', event => {
+            alert('a clicked')
+        })
+    </script>
+
+    <h2>
+        Using Cards within Scatters
+    </h2>
+    <p>Cards can be used within scatters. Since the <code>CardWrapper</code> implements the <code>ITapDelegate</code>
+        protocol they can simply
+        be attached to a DOMScatter object. See the <a href="../scatter.html">Scatter Doctest</a>.
+    </p>
+    <div class="interactive grayBorder" style="position: relative;">
+    </div>
+
+    <h2>
+        References
+    </h2>
+    <ul>
+        <li><a href="https://uicookies.com/css-card-design/">30 Visually Stunning CSS Cards Inspirations For Every Type
+                Of Websites 2019</a></li>
+    </ul>
+</body>

lib/card/plugin.js

@@ -0,0 +1,612 @@
+export var CardPlugin = CardPlugin || {}
+
+export class CardPluginBase {
+    apply(context) {
+        this.context = context
+        if (this.verify(context)) {
+            this.append(context)
+            console.log('Plugin ' + this.name + ' was verified successfully.')
+            return true
+        } else console.error('Could not verify module ' + this.name + '.')
+        return false
+    }
+
+    get name() {
+        return this.constructor.name
+    }
+
+    verify(context) {
+        let funcs = this._getVerificationFunctions(context)
+        for (let func of funcs) {
+            if (!func()) return false
+        }
+        return true
+    }
+
+    _verifyElementsExist(context, ...selectors) {
+        let missing = []
+
+        for (let selector of selectors) {
+            let requiredElement = context.querySelector(selector)
+            if (requiredElement == null) {
+                missing.push(selector)
+            }
+        }
+        const valid = missing.length == 0
+        if (!valid) console.error('Elements were missing: ', missing.join(', '))
+        return valid
+    }
+
+    /**
+     *  Appends the Plugin to the context.
+     *
+     * @memberof CardPlugin
+     */
+    append(context) {
+        console.error(
+            'Call of abstract method CardPlugin.prototype.append(context). Plugins need to overwrite the append method!'
+        )
+    }
+
+    _getVerificationFunctions(context) {
+        return [this._verifyContext.bind(this, context), this._verifyRequirements.bind(this, context)]
+    }
+
+    _verifyContext(context) {
+        if (!(context instanceof HTMLElement)) {
+            console.error('Context is not of type HTML Element.', context)
+            return false
+        } else return true
+    }
+
+    _verifyRequirements(context) {
+        let requirements = this._collectAllRequirements()
+        let missing = []
+
+        requirements.forEach(module => {
+            if (context.modules.indexOf(module.name) == -1) {
+                missing.push(module.name)
+            }
+        })
+
+        const valid = missing.length == 0
+        if (!valid)
+            console.error(
+                "Could not apply module '" +
+                    this.name +
+                    "'. Following modules are required but were missing: " +
+                    missing.join(',')
+            )
+        else console.log('All requirements were met! Well done!')
+        return valid
+    }
+
+    _collectAllRequirements() {
+        let requirements = []
+        let klass = this.__proto__
+        while (klass) {
+            if (klass.require != null) {
+                requirements = requirements.concat(klass.require)
+            }
+            klass = klass.__proto__
+        }
+        return requirements
+    }
+
+    /**
+     * Called when the card is removed.
+     * Can be used to cleanup the plugin.
+     *
+     * @memberof CardPluginBase
+     */
+    remove() {}
+}
+
+CardPlugin.LightBox = class LightBox extends CardPluginBase {
+    constructor(className, style = {}) {
+        super()
+        this.className = className
+        this.style = style
+    }
+
+    append(context) {
+        let wrapper = document.createElement('div')
+        wrapper.className = this.className
+
+        Object.assign(
+            wrapper.style,
+            {
+                zIndex: 1000,
+                // backgroundColor: "black",
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%'
+            },
+            this.style,
+            {
+                display: 'none',
+                position: 'absolute'
+            }
+        )
+
+        context.appendChild(wrapper)
+    }
+}
+
+/**
+ * The Enlargeable Overlay module allows the user to click on the thumbnail image,
+ * and the images gets enlarged inside the card.
+ *
+ * @class EnlargeableThumbnail
+ * @extends {CardPlugin}
+ */
+CardPlugin.EnlargeableThumbnail = class EnlargeableThumbnail extends CardPluginBase {
+    constructor(
+        wrapperSelector,
+        overlaySelector = null,
+        { zoomAnimationDuration = 0.4, fadeAnimationDuration = 0.4, interactionType = 'tap' } = {}
+    ) {
+        super()
+        this.wrapperSelector = wrapperSelector
+        this.overlaySelector = overlaySelector
+
+        this.zoomAnimationDuration = zoomAnimationDuration
+        this.fadeAnimationDuration = fadeAnimationDuration
+        this.interactionType = interactionType
+    }
+    get require() {
+        return [CardPlugin.LightBox]
+    }
+
+    _getVerificationFunctions(context) {
+        let arr = super._getVerificationFunctions(context)
+        let funcs = [this._verifyElementsExist.bind(this, context, this.wrapperSelector, this.overlaySelector)]
+        return arr.concat(funcs)
+    }
+
+    append(context) {
+        let source = this._retrieveSource(context)
+        this.setupEnlargeableThumbnail(context, source)
+    }
+
+    /**
+     * Get the preview image.
+     *
+     * It depends on the fact, that the thumbnail image is in the same directory
+     *
+     *
+     * @param {*} context
+     * @returns
+     * @memberof EnlargeableThumbnail
+     */
+    _retrieveSource(context) {
+        let img = context.querySelector(this.wrapperSelector + ' img')
+        let src = img.getAttribute('src')
+        let parts = src.split('/')
+        parts.pop()
+        parts.push(parts[parts.length - 1])
+        let imagePath = parts.join('/') + '.jpg'
+        return imagePath
+    }
+
+    setupEnlargeableThumbnail(context, src) {
+        let wrapper = context.querySelector(this.wrapperSelector)
+        let overlay = context.querySelector(this.overlaySelector)
+
+        let icon = document.createElement('div')
+        icon.className = 'button corner-button bottom-right icon zoom'
+        wrapper.appendChild(icon)
+
+        Object.assign(wrapper.style, {
+            cursor: 'pointer'
+        })
+
+        InteractionMapper.on(this.interactionType, wrapper, () => {
+            this.openThumbnailDetail(context, src)
+        })
+
+        InteractionMapper.on(this.interactionType, overlay, () => {
+            this.closeThumnailDetail(context)
+        })
+    }
+
+    openThumbnailDetail(context, src) {
+        let overlay = context.querySelector('.img-overlay')
+        overlay.innerHTML = ''
+        let source = context.querySelector(this.wrapperSelector)
+        let sourceStyle = window.getComputedStyle(source)
+        let imageWrapper = source.cloneNode(true)
+        let image = imageWrapper.querySelector('img')
+
+        Object.assign(imageWrapper.style, {
+            maxWidth: 'none',
+            maxHeight: 'none'
+        })
+
+        Object.assign(image.style, {
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover'
+        })
+
+        this._replaceIcon(imageWrapper)
+
+        image.onload = () => {
+            let header = context.querySelector('header')
+            let headerStlye = window.getComputedStyle(header)
+
+            /**
+             * First the maxFillRatio is considered.
+             * It describes how much the image is allowed to exceed the context element.
+             */
+            const maxFillRatio = 1.5
+
+            /**
+             * The minor side should not exceed the height of the context window.
+             */
+            const maxMinorSize =
+                context.offsetHeight - 2 * parseInt(headerStlye.paddingTop) - 2 * parseInt(headerStlye.marginTop)
+
+            const max = {
+                width: context.offsetWidth * maxFillRatio,
+                height: context.offsetHeight * maxFillRatio
+            }
+
+            let majorSide
+            let minorSide
+            const _width = { name: 'width', axis: 'x' }
+            const _height = { name: 'height', axis: 'y' }
+            if (image.naturalHeight > image.naturalWidth) {
+                majorSide = _height
+                minorSide = _width
+            } else {
+                majorSide = _width
+                minorSide = _height
+            }
+
+            function capitalize(string) {
+                return string.charAt(0).toUpperCase() + string.slice(1)
+            }
+            function getImageSize(side) {
+                return image['natural' + capitalize(side.name)]
+            }
+
+            const majorImageSize = getImageSize(majorSide)
+            // const minorImageSize = getImageSize(minorSide)
+
+            let ratio = getImageSize(minorSide) / getImageSize(majorSide)
+            let size = majorImageSize > max[majorSide.name] ? max[majorSide.name] : majorImageSize
+
+            if (size * ratio > maxMinorSize) {
+                size = maxMinorSize / ratio
+            }
+
+            let targetDimensions = {
+                width: 0,
+                height: 0
+            }
+
+            let position = Points.fromPageToNode(context, Points.fromNodeToPage(source, { x: 0, y: 0 }))
+
+            let targetOffset = {
+                x: 0,
+                y: 0
+            }
+
+            targetDimensions[majorSide.name] = size
+            targetDimensions[minorSide.name] = size * ratio
+
+            targetOffset[majorSide.axis] =
+                (context['offset' + capitalize(majorSide.name)] - targetDimensions[majorSide.name]) / 2
+            targetOffset[minorSide.axis] =
+                (context['offset' + capitalize(minorSide.name)] - targetDimensions[minorSide.name]) / 2
+
+            overlay.appendChild(imageWrapper)
+
+            TweenMax.set(imageWrapper, {
+                left: 0,
+                top: 0,
+                x: position.x,
+                y: position.y,
+                position: 'absolute',
+                width: parseInt(sourceStyle.width),
+                height: parseInt(sourceStyle.height)
+            })
+
+            TweenMax.set(overlay, {
+                display: 'flex',
+                autoAlpha: 0
+            })
+
+            TweenMax.to(imageWrapper, this.zoomAnimationDuration, {
+                x: targetOffset.x,
+                y: targetOffset.y,
+                width: targetDimensions.width,
+                height: targetDimensions.height
+            })
+            TweenMax.to(overlay, this.fadeAnimationTime, {
+                autoAlpha: 1
+            })
+        }
+
+        image.src = src
+    }
+
+    _replaceIcon(clone) {
+        let zoomIcon = clone.querySelector('.icon.zoom')
+        zoomIcon.classList.remove('zoom')
+        zoomIcon.classList.add('close')
+    }
+
+    getBorderHeight(style) {
+        const borderWidth = parseInt(style.borderTopWidth) + parseInt(style.borderBottomWidth)
+        const padding = parseInt(style.paddingTop) + parseInt(style.paddingBottom)
+        return parseInt(style.width) + borderWidth + padding
+    }
+
+    getBorderWidth(style) {
+        const borderWidth = parseInt(style.borderLeftWidth) + parseInt(style.borderRightWidth)
+        const padding = parseInt(style.paddingLeft) + parseInt(style.paddingRight)
+        return parseInt(style.width) + borderWidth + padding
+    }
+
+    closeThumnailDetail(context) {
+        let overlay = context.querySelector('.img-overlay')
+
+        let timeline = new TimelineLite()
+
+        timeline
+            .to(overlay, this.fadeAnimationDuration, {
+                autoAlpha: 0
+            })
+            .set(overlay, {
+                display: 'none'
+            })
+    }
+}
+
+CardPlugin.Ui = class UiPlugin extends CardPluginBase {
+    constructor(className, parent = null) {
+        super()
+        this.parent = parent
+        this.className = className
+    }
+
+    _getVerificationFunctions(context) {
+        let arr = super._getVerificationFunctions(context)
+        let func = [this._doesParentExist.bind(this, context, this.parent)]
+        return arr.concat(func)
+    }
+
+    _doesParentExist(context, parent) {
+        if (parent == null) return true
+        let valid = context.querySelector(parent) != null
+        if (!valid) console.error('Could not find parent on context.', context, parent)
+        return valid
+    }
+
+    append(context) {
+        parent = this.parent == null ? context : context.querySelector(this.parent).appendChild(container)
+        let container = document.createElement('div')
+        container.className = this.className
+        parent.appendChild(container)
+    }
+}
+
+CardPlugin.Speech = class SpeechPlugin extends CardPluginBase {
+    constructor(parentSelector, className, interactionType = 'tap') {
+        super()
+        this.className = className
+        this.parentSelector = parentSelector
+        this.interactionType = interactionType
+
+        // We directly overwriting the function with a version that has a binded
+        // reference to itself. Doing so provides an easy and reliable way to remove
+        // the event listener using this function. -  SO
+        this._domWasChanged = this._domWasChanged.bind(this)
+
+        /* 
+        Speech doesn't stop when page is navigated.
+        Therefore we do it manually here.
+        */
+        window.addEventListener('beforeunload', () => {
+            window.speechSynthesis.cancel()
+        })
+
+        // Binding the function beforehand ensures, that the end function is always the same.
+        this._end = this._end.bind(this)
+
+        this._setupUtterance()
+        this.utterance.addEventListener('end', event => {
+            this._end()
+        })
+    }
+
+    get require() {
+        return [CardPlugin.Ui]
+    }
+
+    subcardChanged(closed) {
+        if (this.cardActive) {
+            this._updateText(closed)
+        }
+    }
+
+    get cardActive() {
+        return this.activeUtterance == this.utterance
+    }
+
+    _updateText(ignoreSubcard = false) {
+        let node = this.context
+        let subcard = node.querySelector('.mainview > .subcard')
+
+        if (ignoreSubcard) {
+            if (subcard != null) {
+                let clone = node.cloneNode(true)
+                let clonedSubcard = clone.querySelector('.mainview > .subcard')
+                clonedSubcard.parentNode.removeChild(clonedSubcard)
+                node = clone
+            }
+        } else {
+            if (subcard) {
+                let clone = subcard.cloneNode(true)
+                clone.querySelectorAll('figure').forEach(figure => {
+                    figure.parentNode.removeChild(figure)
+                })
+
+                node = clone
+            }
+        }
+
+        let id = this.context.getAttribute('data-id')
+        let src = this.context.getAttribute('data-source')
+        let subcardSource = null
+        if (subcard != null) {
+            subcardSource = subcard.getAttribute('data-source')
+        }
+
+        if (!window.speechSynthesis.speaking) {
+            this._start(node)
+            Logging.log(`Started speech on card: id:${id} - source: ${src} - subcard: ${subcardSource}`)
+        } else if (this.cardActive && this._sameText(node)) {
+            Logging.log(`Stopped speech on card: id:${id} - source: ${src} - subcard: ${subcardSource}`)
+            this._stop()
+        } else {
+            Logging.log(`Updated Text on card: id:${id} - source: ${src} - subcard: ${subcardSource}`)
+            this._stop()
+                .then(() => {
+                    this._start(node)
+                })
+                .catch(console.error)
+        }
+    }
+
+    _sameText(node) {
+        return this.utterance.text == this._cleanupText(node)
+    }
+
+    _setupUtterance() {
+        this.utterance = new SpeechSynthesisUtterance()
+        this.utterance.lang = 'de-DE'
+    }
+
+    get require() {
+        return [CardPlugin.Ui]
+    }
+
+    remove() {
+        this.button = null
+        this._stopThisSpeechIfPlaying()
+        this.context.removeEventListener('DOMNodeRemoved', this._domWasChanged)
+        super.remove()
+    }
+
+    append(context) {
+        let container = context.querySelector(this.parentSelector)
+        this.button = document.createElement('div')
+        this.button.className = 'icon button ' + this.className
+        container.appendChild(this.button)
+
+        InteractionMapper.on(this.interactionType, this.button, () => {
+            this.speak()
+        })
+
+        context.addEventListener('DOMNodeRemoved', this._domWasChanged)
+    }
+
+    /**
+     * Don't remember why this was required - SO 20-11-2019
+     */
+    _domWasChanged(event) {
+        if (event.target == this.context) this._stopThisSpeechIfPlaying()
+    }
+
+    /**
+     * Stops the module if it is set in the context.
+     */
+    _stopThisSpeechIfPlaying() {
+        if (this.context == null || this.context['lastSpeechNode'] == window.speechSynthesis['speechPluginNode']) {
+            this._stop()
+        }
+    }
+
+    _isSameNode(node) {
+        return this.currentText == node.textContent
+    }
+
+    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
+     */
+
+        this._updateText()
+    }
+
+    async _stop() {
+        return new Promise(resolve => {
+            if (this.activeUtterance) {
+                this.activeUtterance.addEventListener('end', resolve, {
+                    once: true
+                })
+            }
+
+            window.speechSynthesis.cancel()
+        })
+    }
+
+    get activeUtterance() {
+        return window.speechSynthesis['speechPluginUtterance']
+    }
+
+    _end() {
+        window.speechSynthesis['speechPluginNode'] = null
+        window.speechSynthesis['speechPluginUtterance'] = null
+        this._deactivateButton()
+        this.context.classList.remove('speech-plugin-is-reading')
+    }
+
+    _start(node) {
+        window.speechSynthesis.cancel()
+
+        window.speechSynthesis['speechPluginUtterance'] = this.utterance
+        window.speechSynthesis['speechPluginNode'] = node
+        this.context['lastSpeechNode'] = node
+
+        let cleanText = this._cleanupText(node)
+        this.utterance.text = cleanText
+        window.speechSynthesis.speak(this.utterance)
+        this._activateButton()
+
+        this.context.classList.add('speech-plugin-is-reading')
+    }
+
+    closed() {}
+
+    _cleanupText(node) {
+        let text = node.textContent
+        text = this._removeShy(text)
+        return text
+    }
+
+    _removeShy(text) {
+        return text.replace(/\u00AD/g, '')
+    }
+
+    _activateButton() {
+        if (this.button) this.button.classList.add('active')
+    }
+    _deactivateButton() {
+        if (this.button) this.button.classList.remove('active')
+    }
+}

lib/card/popup.html

@@ -0,0 +1,10 @@
+<div class="popupHtml">
+
+    <h1>
+        Popup
+    </h1>
+    <p>
+        Lorem ipsum...
+    </p>
+
+</div>

lib/card/scatter.js

@@ -0,0 +1,162 @@
+import Card from './card.js'
+
+/**
+ * Extends the card with scatter functionality.
+ *
+ * @class ScatterCard
+ */
+export default class ScatterCard extends Card {
+    /**
+     * TODO: Find a more suitable name.
+     * Adjusts the HTML to work in the new context.
+     *
+     * @static
+     * @param {*} domElement
+     * @param {*} htmlString
+     * @param {*} basePath
+     * @param {*} [opts={}]
+     * @memberof ScatterCard
+     */
+    static setup(context, htmlString, { basePath = './', modules = [] } = {}) {
+        if (typeof context.scatter == 'undefined') {
+            console.error(
+                "You need to wrap the context inside a DOMScatter before executing the ScatterCard's setup function."
+            )
+        }
+
+        /**
+         *  This is required for the callback functions to work properly
+         */
+        window.ScatterCard = ScatterCard
+
+        context.classList.add('info-card')
+
+        this.relativePath = basePath
+        htmlString = this._adjustRelativeLinks(htmlString)
+
+        let parser = new DOMParser()
+        let html = parser.parseFromString(htmlString, 'text/html')
+
+        /**
+         * Conflicts with the FindTarget method of the Abstract scatter.
+         */
+        this._replaceAttributes(context, html, 'onclick', this._replaceCallback)
+
+        let content = html.querySelector('.mainview')
+        context.appendChild(content)
+
+        super.setup(context, modules)
+        return context
+    }
+
+    /**
+     * Creates a scatter for the card and applies the card to it,
+     *
+     * @static
+     * @param {*} html
+     * @param {*} scatterContainer
+     * @param {string} [basePath=""]
+     * @param {*} [opts={}]
+     * @returns
+     * @memberof ScatterCard
+     */
+    static createCardScatter(html, scatterContainer, { basePath = './', modules = [] } = {}) {
+        let element = document.createElement('div')
+
+        scatterContainer.element.appendChild(element)
+        new DOMScatter(element, scatterContainer, {
+            width: 1400,
+            height: 1200
+        })
+
+        this.setup(element, html, {
+            basePath,
+            modules
+        })
+        return element
+    }
+
+    /**
+     * Closes but NOT removes the scatter element.
+     *
+     * The remove must be called separately, it may be used in the close callback
+     * of the scatter.
+     */
+    static close(context) {
+        if (typeof context.scatter != 'undefined') context.scatter.close()
+        else {
+            console.error('Expected a scatter element to close!', this)
+        }
+
+        // Card.close(context)
+
+        // if (context['scatter']) {
+        //     console.error('CLOSED CARD')
+        //     context.scatter.close()
+        // } else {
+        //     console.error('Expected a scatter element to close!', this)
+        // }
+    }
+
+    /**
+     * Cleans up the card.
+     *
+     * @static
+     * @override
+     * @memberof ScatterCard
+     */
+    static remove(context) {
+        if (context['scatter']) {
+            context.scatter = null
+        } else {
+            console.error('Expected a scatter element to remove!', this)
+        }
+
+        Card.remove(context)
+    }
+
+    /**
+     *Utility function to create a fully functional card scatter.
+     *
+     * @static
+     * @param {*} scatterContainer
+     * @param {*} path
+     * @param {string} [basePath="."]
+     * @param {*} opts
+     * @returns
+     * @memberof CardScatter
+     */
+    static loadAndCreateScatterCard(scatterContainer, item, { basePath = '../', modules = [] } = {}) {
+        console.log(basePath)
+        return new Promise((resolve, reject) => {
+            let url = basePath + '/' + item + '/index.html'
+            console.log('Loading', url)
+            this.loadHTML(url)
+                .then(html => {
+                    console.log('Received', html)
+                    let element = this.createCardScatter(html, scatterContainer, {
+                        basePath,
+                        modules
+                    })
+                    resolve(element)
+                })
+                .catch(e => reject(e))
+        })
+    }
+
+    static _setLanguage(context, language) {
+        context.language = language
+    }
+
+    static _getLanguage(context) {
+        return context.language
+    }
+}
+
+ScatterCard.selectedLanguage = 0
+ScatterCard.languages = ['Deutsch', 'English']
+ScatterCard.languageTags = {
+    Deutsch: 'de',
+    English: 'en'
+}
+ScatterCard.scatterContainer = null

lib/card/test/example/01/01.xml

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<data>
+<header>
+	<!-- Thumbnail of artwork with 512px large side -->
+	<thumbnail>01/thumbnail.jpg</thumbnail>
+	<!-- <artist> </artist>-->
+	<title>Das Rathaus</title>
+	<!-- <misc>erbaut 1435</misc>-->
+	<description> 
+		 Das Rathaus ist das wichtigste Gebäude auf dem Marktplatz. Mit dem Bau wurde 1435 begonnen, seitdem wurde es immer wieder verändert, sodass es Merkmale vieler Baustile vom Spätmittelalter bis zum 21. Jahrhundert aufweist. Die auffällige Fassadengestaltung stammt aus dem 19. Jahrhundert.
+	</description>
+</header>
+
+<card src="01/01_baugeschichte.xml"/>
+
+<card src="01/01_funktiondamals.xml"/>
+
+<card src="01/01_funktionheute.xml"/>
+
+<card src="01/01_besonderheiten.xml"/>
+
+<card src="01/01_besonderheiten2.xml"/>
+
+<card src="01/01_besonderheiten3.xml"/>
+</data>

lib/card/test/example/01/01_baugeschichte.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html><html lang="en"><head>
+    <meta charset="utf-8">
+    <title data-innerhtml="title">Article with 50% Columns</title>
+    <link rel="stylesheet" href="../_theme/css/bulma.css">
+    <link rel="stylesheet" href="../_theme/css/card.css">
+    <link rel="stylesheet" href="../_theme/css/article.css">
+    <link rel="stylesheet" href="../_theme/css/highlight.css">
+    <link rel="stylesheet" href="../_theme/css/popup.css">
+    <!-- disable zooming -->
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
+    <script src="../_theme/js/all.js"></script>
+    <script src="../_theme/js/3rdparty/all.js"></script>
+    <script src="../_theme/js/card.js"></script>
+    <script src="../_theme/js/highlight.js"></script>
+
+    
+</head>
+
+<body>
+    <article>
+        <div class="columns">
+            <div class="column content" data-link="Popup" tabindex=""><h2 contenteditable="false">Tübingen wird Stadt</h2> <p contenteditable="false" data-link="Popup">Bereits 1191 wurden in Tübingen Kaufleute erwähnt – ein Beweis für einen Handelsplatz und der erste Schritt hin zur Stadt. Schon damals dürfte Tübingen städtischen Charakter besessen haben, es wurde jedoch erst 1231 urkundlich als Stadt erwähnt. Das daraufhin erstarkte städtische Selbstbewusstsein und die erhebliche Wirtschaftskraft Tübingens ebneten den Weg für den Bau eines Rathauses, das in mehreren Bauphasen errichtet wurde.</p><h2 contenteditable="false">Bauphasen</h2> <p contenteditable="false" data-link="Popup">1435 	Erster Rathausbau</p> <p contenteditable="false" data-link="Popup">1495		Erweiterung um ein Stockwerk</p> <p contenteditable="false" data-link="Popup">1510/11	Einbau der  <a href="../01/astronomischeuhr.html" data-highlight-id="" onclick="Card.loadPopup(event)">Astronomischen Uhr</a></p> <p contenteditable="false" data-link="Popup">1543		Erster Rathausanbau an der Haaggasse</p> <p contenteditable="false" data-link="Popup">1598		Einbau des  <a href="../01/ziergiebel.html" data-highlight-id="" onclick="Card.loadPopup(event)">Ziergiebels</a></p> <p contenteditable="false" data-link="Popup">1692		Erneute Renovierung</p> <p contenteditable="false" data-link="Popup">1876/77	Anbringung der  <a href="../01/vorderheutigenfassade.html" data-highlight-id="" onclick="Card.loadPopup(event)">heutigen Fassade</a></p> <p contenteditable="false" data-link="Popup">1910		Erneuerung des Anbaus an der Haaggasse</p> <p contenteditable="false" data-link="Popup">1965		Grundlegende Sanierungen</p> <p contenteditable="false" data-link="Popup">2016		Grundlegende Sanierungen</p></div>
+            <div class="column content" data-link="Popup" tabindex=""><div class="zoomable-wrapper column" ondragstart="Card.dragStart(event)">
+        <figure style="display: block;" class="zoomable singlefig" id="zoomable1">
+            <div style="position:relative;" class="svg-wrapper">
+                <svg draggable="false" class="mainimg" onclick="Card.openPopupOrZoomable(event)" viewBox="0 0 345 387.5" width="345" height="387.5" contenteditable="false">
+                    <!-- The defs section must be defined and cannot be generated in JavaScript-->
+                    <defs></defs>
+                    <image width="345" height="387.5" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../01/rathauszweigeschossig.png"></image>
+                    <g stroke-width="3"></g>
+                </svg>
+                <div class="icon button corner-button bottom-right zoom zoomable-icon" onclick="Card.openZoomable(event)"></div>
+            </div>
+            <figcaption contenteditable="false" class="cap">Erster Rathausbau 15. Jh.</figcaption>
+            <figcaption contenteditable="false" class="zoomcap">Rekonstruktion des Rathauses im 15. Jahrhundert, Stadtarchiv Tübingen</figcaption>
+        </figure>
+    </div><h2 contenteditable="false">Der erste Rathausbau</h2> <p contenteditable="false" data-link="Popup">Um am Marktplatz ein großes  <a href="../glossar/rathaus.html" data-highlight-id="" onclick="Card.loadPopup(event)">Rathaus</a>  zu errichten, wurden dort wohl mehrere staatliche Bürgerhäuser abgerissen. Der erste Rathausbau 1435 war ein  <a href="../glossar/fachwerk.html" data-highlight-id="" onclick="Card.loadPopup(event)">Fachwerkbau</a>  mit drei Markthallen im Erdgeschoss und zwei Obergeschossen (siehe Abbildung). Im Erdgeschoss waren Verkaufsstände von Bäckern und Metzgern untergebracht, die sich bis dahin ohne Überdachung im Süden des Platzes befanden. Die Obergeschosse boten Raum für eine Verkaufshalle, die auch für Versammlungen und Feiern benutzt wurde, das Stadtgericht, das bis dahin ebenfalls auf dem Platz „direkt unter den Wolken“ tagte, sowie den Stadtrat.</p></div>
+        </div>
+    </article>
+
+
+</body></html>

lib/card/test/example/01/01_baugeschichte.xml

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<card type="artist">
+<!-- <card type="thema"> -->
+<!-- <card type="details"> -->
+<!-- <card type="leben des kunstwerks"> -->
+<!-- <card type="komposition"> -->
+<!-- <card type="licht und farbe"> -->
+<!-- <card type="extra info"> -->
+	<h1>Das wichtigste &lt;br/&gt;städtische Gebäude</h1>
+	<preview>
+		<text>
+			 Nach 200 Jahren &lt;br/&gt;endlich ein Rathaus
+		</text>
+	</preview>
+	
+	<content template="1">
+		<column>
+			<text><![CDATA[
+				<h2>Tübingen wird Stadt</h2>
+				<p>Bereits 1191 wurden in Tübingen Kaufleute erwähnt – ein Beweis für einen Handelsplatz und der erste Schritt hin zur Stadt. Schon damals dürfte Tübingen städtischen Charakter besessen haben, es wurde jedoch erst 1231 urkundlich als Stadt erwähnt. Das daraufhin erstarkte städtische Selbstbewusstsein und die erhebliche Wirtschaftskraft Tübingens ebneten den Weg für den Bau eines Rathauses, das in mehreren Bauphasen errichtet wurde.</p>
+			]]></text>
+		
+			
+		<text><![CDATA[
+		<h2>Bauphasen</h2>
+		<p>1435 	Erster Rathausbau</p>
+		<p>1495		Erweiterung um ein Stockwerk</p>
+		<p>1510/11	Einbau der <a href="01/astronomischeuhr.xml" >Astronomischen Uhr</a></p>
+		<p>1543		Erster Rathausanbau an der Haaggasse</p>
+		<p>1598		Einbau des <a href="01/ziergiebel.xml" >Ziergiebels</a> </p>
+		<p>1692		Erneute Renovierung</p>
+		<p>1876/77	Anbringung der <a href="01/vorderheutigenfassade.xml" >heutigen Fassade</a></p>
+		<p>1910		Erneuerung des Anbaus an der Haaggasse</p>
+		<p>1965		Grundlegende Sanierungen</p>
+		<p>2016		Grundlegende Sanierungen</p>
+
+			]]></text>
+	
+			
+			
+		</column>
+		<column>
+		
+			<img src="01/rathauszweigeschossig.png"  maxHeight="310" caption="Erster Rathausbau 15. Jh." allowZoom="true" zoomCaption="Rekonstruktion des Rathauses im 15. Jahrhundert, Stadtarchiv Tübingen"/>
+			
+		<text><![CDATA[
+				<h2>Der erste Rathausbau</h2>
+				<p>Um am Marktplatz ein großes <a href="glossar/rathaus.xml" >Rathaus</a> zu errichten, wurden dort wohl mehrere staatliche Bürgerhäuser abgerissen. Der erste Rathausbau 1435 war ein <a href="glossar/fachwerk.xml" >Fachwerkbau</a> mit drei Markthallen im Erdgeschoss und zwei Obergeschossen (siehe Abbildung). Im Erdgeschoss waren Verkaufsstände von Bäckern und Metzgern untergebracht, die sich bis dahin ohne Überdachung im Süden des Platzes befanden. Die Obergeschosse boten Raum für eine Verkaufshalle, die auch für Versammlungen und Feiern benutzt wurde, das Stadtgericht, das bis dahin ebenfalls auf dem Platz „direkt unter den Wolken“ tagte, sowie den Stadtrat.</p>
+			]]></text>	
+		
+			
+		
+		</column>
+	</content>
+</card>

lib/card/test/example/01/01_besonderheiten.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html><html lang="en"><head>
+    <meta charset="utf-8">
+    <title data-innerhtml="title">Article with 50% Columns</title>
+    <link rel="stylesheet" href="../_theme/css/bulma.css">
+    <link rel="stylesheet" href="../_theme/css/card.css">
+    <link rel="stylesheet" href="../_theme/css/article.css">
+    <link rel="stylesheet" href="../_theme/css/highlight.css">
+    <link rel="stylesheet" href="../_theme/css/popup.css">
+    <!-- disable zooming -->
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
+    <script src="../_theme/js/all.js"></script>
+    <script src="../_theme/js/3rdparty/all.js"></script>
+    <script src="../_theme/js/card.js"></script>
+    <script src="../_theme/js/highlight.js"></script>
+
+    
+</head>
+
+<body>
+    <article>
+        <div class="columns">
+            <div class="column content" data-link="Popup" tabindex=""><h2 contenteditable="false">Die drei Schichten der Fassade</h2> <p contenteditable="false" data-link="Popup">Unter der heutigen Bemalung der Rathausfassade (siehe Abbildung) liegen  <a href="../01/malschichten.html" data-highlight-id="" onclick="Card.loadPopup(event)">zwei ältere Malschichten</a>: eine einfache Ausfüllung der Fachwerkfelder und darüber eine <a href="../01/grisaillemalerei.html" data-highlight-id="" onclick="Card.loadPopup(event)">Grisaillemalerei</a>. Sein heutiges Aussehen erhielt das Rathaus 1876 zum 400. Universitätsjubiläum. Nach Entwürfen des Stuttgarter Hochschulprofessors Konrad Dollinger wurde die Fassade von Ludwig Lesker mit <a href="../glossar/sgraffittomalerei.html" data-highlight-id="" onclick="Card.loadPopup(event)">Sgraffittomalerei</a>  im Neorenaissance-Stil versehen. Die aufwändige Gestaltung erinnert in Farben und Ornamentik vor allem an das 16. Jahrhundert, eine Blütezeit der Stadt und der Universität.</p>	<div style="height: undefinedpx">&nbsp;</div><div class="zoomable-wrapper column" ondragstart="Card.dragStart(event)">
+        <figure style="display: block;" class="zoomable singlefig" id="zoomable1">
+            <div style="position:relative;" class="svg-wrapper">
+                <svg draggable="false" class="mainimg" onclick="Card.openPopupOrZoomable(event)" viewBox="0 0 594 337.5" width="594" height="337.5" contenteditable="false">
+                    <!-- The defs section must be defined and cannot be generated in JavaScript-->
+                    <defs></defs>
+                    <image width="594" height="337.5" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../01/fassadeneu.jpg"></image>
+                    <g stroke-width="3"><circle xlink:href="../01/eberhardfassade.html" data-highlight-id="01.fassadeneu.jpg.h1" onclick="Card.loadHighlightPopup(event)" cx="320" cy="62" r="59"></circle>
+<circle xlink:href="../01/breuning.html" data-highlight-id="01.fassadeneu.jpg.h2" onclick="Card.loadHighlightPopup(event)" cx="48" cy="199" r="30"></circle>
+<circle xlink:href="../01/osiander.html" data-highlight-id="01.fassadeneu.jpg.h3" onclick="Card.loadHighlightPopup(event)" cx="155" cy="199" r="30"></circle>
+<circle xlink:href="../01/dann.html" data-highlight-id="01.fassadeneu.jpg.h4" onclick="Card.loadHighlightPopup(event)" cx="250" cy="199" r="30"></circle>
+<circle xlink:href="../01/huber.html" data-highlight-id="01.fassadeneu.jpg.h5" onclick="Card.loadHighlightPopup(event)" cx="348" cy="199" r="30"></circle>
+<circle xlink:href="../01/cotta.html" data-highlight-id="01.fassadeneu.jpg.h6" onclick="Card.loadHighlightPopup(event)" cx="446" cy="199" r="30"></circle>
+<circle xlink:href="../01/uhland.html" data-highlight-id="01.fassadeneu.jpg.h7" onclick="Card.loadHighlightPopup(event)" cx="541" cy="199" r="30"></circle>
+<circle xlink:href="../01/gerechtigkeit.html" data-highlight-id="01.fassadeneu.jpg.h8" onclick="Card.loadHighlightPopup(event)" cx="106" cy="275" r="42"></circle>
+<circle xlink:href="../01/wohlstand.html" data-highlight-id="01.fassadeneu.jpg.h9" onclick="Card.loadHighlightPopup(event)" cx="211" cy="275" r="42"></circle>
+<circle xlink:href="../01/wissenschaft.html" data-highlight-id="01.fassadeneu.jpg.h10" onclick="Card.loadHighlightPopup(event)" cx="490" cy="275" r="42"></circle></g>
+                </svg>
+                <div class="icon button corner-button bottom-right zoom zoomable-icon" onclick="Card.openZoomable(event)"></div>
+            </div>
+            <figcaption contenteditable="false" class="cap">Die Fassade des Rathauses</figcaption>
+            <figcaption contenteditable="false" class="zoomcap">Die Fassade des Rathauses, Foto: Christoph Jäckle</figcaption>
+        </figure>
+    </div></div>
+            <div class="column content" data-link="Popup" tabindex=""><h2 contenteditable="false">Mutige Männer, allegorische Frauen</h2> <p contenteditable="false" data-link="Popup"><a href="../01/eberhardfassade.html" data-highlight-id="01.fassadeneu.jpg.h1" onclick="Card.loadPopup(event)">Graf Eberhard im Bart</a>, der Gründer der Universität, der für seine Verdienste um die politische Einheit Württembergs in den Herzogsstand erhoben wurde, ist im obersten Geschoss abgebildet. Er wacht als echter Ritter über Stadt und Bürger, das Herzogsschwert und die Gründungsurkunde der Universität in den Händen.</p> <p contenteditable="false" data-link="Popup">Unter ihm sind in sechs Medaillons Porträts wichtiger Männer der Tübinger Stadtgeschichte zu sehen, die sich alle in besonderer Weise um bürgerliche Rechte und Freiheiten verdient gemacht hatten, wie sie bereits im  <a href="../glossar/tuebingervertrag.html" data-highlight-id="" onclick="Card.loadPopup(event)">Tübinger Vertrag</a>  von 1514 festgelegt wurden. Es handelt sich um den Vogt  <a href="../01/breuning.html" data-highlight-id="01.fassadeneu.jpg.h2" onclick="Card.loadPopup(event)">Konrad Breuning</a>, den Diplomaten <a href="../01/osiander.html" data-highlight-id="01.fassadeneu.jpg.h3" onclick="Card.loadPopup(event)">Johannes Osiander</a>, den Bürgermeister <a href="../01/dann.html" data-highlight-id="01.fassadeneu.jpg.h4" onclick="Card.loadPopup(event)">Jakob Heinrich Dann</a>, den Oberamtmann <a href="../01/huber.html" data-highlight-id="01.fassadeneu.jpg.h5" onclick="Card.loadPopup(event)">Johann Ludwig Huber</a>, den Verleger <a href="../01/cotta.html" data-highlight-id="01.fassadeneu.jpg.h6" onclick="Card.loadPopup(event)">Johann Friedrich Cotta</a>  und den Politiker  <a href="../01/uhland.html" data-highlight-id="01.fassadeneu.jpg.h7" onclick="Card.loadPopup(event)">Ludwig Uhland</a>.</p> <p contenteditable="false" data-link="Popup">Die drei allegorischen Frauenfiguren im untersten Stock symbolisieren die  <a href="../01/gerechtigkeit.html" data-highlight-id="01.fassadeneu.jpg.h8" onclick="Card.loadPopup(event)">Gerechtigkeit</a>, den <a href="../01/wohlstand.html" data-highlight-id="01.fassadeneu.jpg.h9" onclick="Card.loadPopup(event)">wirtschaftlichen Wohlstand</a>  und die  <a href="../01/wissenschaft.html" data-highlight-id="01.fassadeneu.jpg.h10" onclick="Card.loadPopup(event)">Wissenschaft</a>. Während die ersten beiden allgemein städtisch­bürgerliche Tugenden verkörpern, betont die dritte den Charakter Tübingens als Universitätsstadt.</p></div>
+        </div>
+    </article>
+
+
+</body></html>

lib/card/test/example/01/01_besonderheiten.xml

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<!-- <card type="artist"> -->
+<!-- <card type="thema"> -->
+<card type="details">
+<!-- <card type="leben des kunstwerks"> -->
+<!-- <card type="komposition"> -->
+<!-- <card type="licht und farbe"> -->
+<!-- <card type="extra info"> -->
+	<h1>Fassadenmalerei</h1>
+	<preview>
+		<text>
+		Fassade aus  &lt;br/&gt;Geist und Politik
+		</text>
+	</preview>
+	
+	<content template="1">
+		<column>
+			<text><![CDATA[
+				<h2>Die drei Schichten der Fassade</h2>
+				<p>Unter der heutigen Bemalung der Rathausfassade (siehe Abbildung) liegen <a href="01/malschichten.xml">zwei ältere Malschichten</a>: eine einfache Ausfüllung der Fachwerkfelder und darüber eine <a href="01/grisaillemalerei.xml">Grisaillemalerei</a>. Sein heutiges Aussehen erhielt das Rathaus 1876 zum 400. Universitätsjubiläum. Nach Entwürfen des Stuttgarter Hochschulprofessors Konrad Dollinger wurde die Fassade von Ludwig Lesker mit <a href="glossar/sgraffittomalerei.xml" >Sgraffittomalerei</a> im Neorenaissance-Stil versehen. Die aufwändige Gestaltung erinnert in Farben und Ornamentik vor allem an das 16. Jahrhundert, eine Blütezeit der Stadt und der Universität.</p>
+			]]></text>
+			<space lines="1"/>
+			<img src="01/fassadeneu.jpg" maxHeight="270" caption="Die Fassade des Rathauses" allowZoom="true" zoomCaption="Die Fassade des Rathauses, Foto: Christoph Jäckle">
+			<highlight x="0.44" y="0.01" radius="0.1" href="01/eberhardfassade.xml" id="01.fassadeneu.jpg.h1"/>
+			<highlight x="0.03" y="0.5" radius="0.05" href="01/breuning.xml" id="01.fassadeneu.jpg.h2"/>
+			<highlight x="0.21" y="0.5" radius="0.05" href="01/osiander.xml" id="01.fassadeneu.jpg.h3"/>
+			<highlight x="0.37" y="0.5" radius="0.05" href="01/dann.xml" id="01.fassadeneu.jpg.h4"/>
+			<highlight x="0.535" y="0.5" radius="0.05" href="01/huber.xml" id="01.fassadeneu.jpg.h5"/>
+			<highlight x="0.7" y="0.5" radius="0.05" href="01/cotta.xml" id="01.fassadeneu.jpg.h6"/>
+			<highlight x="0.86" y="0.5" radius="0.05" href="01/uhland.xml" id="01.fassadeneu.jpg.h7"/>
+			<highlight x="0.107" y="0.69" radius="0.07" href="01/gerechtigkeit.xml" id="01.fassadeneu.jpg.h8"/>
+			<highlight x="0.285" y="0.69" radius="0.07" href="01/wohlstand.xml" id="01.fassadeneu.jpg.h9"/>
+			<highlight x="0.754" y="0.69" radius="0.07" href="01/wissenschaft.xml" id="01.fassadeneu.jpg.h10"/>
+			 </img>
+		</column>
+			<column>
+				 <text><![CDATA[
+				<h2>Mutige Männer, allegorische Frauen</h2>
+				<p><a href="01/eberhardfassade.xml" imageHighlightId="01.fassadeneu.jpg.h1">Graf Eberhard im Bart</a>, der Gründer der Universität, der für seine Verdienste um die politische Einheit Württembergs in den Herzogsstand erhoben wurde, ist im obersten Geschoss abgebildet. Er wacht als echter Ritter über Stadt und Bürger, das Herzogsschwert und die Gründungsurkunde der Universität in den Händen.</p>
+				<p>Unter ihm sind in sechs Medaillons Porträts wichtiger Männer der Tübinger Stadtgeschichte zu sehen, die sich alle in besonderer Weise um bürgerliche Rechte und Freiheiten verdient gemacht hatten, wie sie bereits im <a href="glossar/tuebingervertrag.xml">Tübinger Vertrag</a> von 1514 festgelegt wurden. Es handelt sich um den Vogt <a href="01/breuning.xml" imageHighlightId="01.fassadeneu.jpg.h2">Konrad Breuning</a>, den Diplomaten <a href="01/osiander.xml" imageHighlightId="01.fassadeneu.jpg.h3">Johannes Osiander</a>, den Bürgermeister <a href="01/dann.xml" imageHighlightId="01.fassadeneu.jpg.h4">Jakob Heinrich Dann</a>, den Oberamtmann <a href="01/huber.xml" imageHighlightId="01.fassadeneu.jpg.h5">Johann Ludwig Huber</a>, den Verleger <a href="01/cotta.xml" imageHighlightId="01.fassadeneu.jpg.h6">Johann Friedrich Cotta</a> und den Politiker <a href="01/uhland.xml" imageHighlightId="01.fassadeneu.jpg.h7">Ludwig Uhland</a>.</p> 
+				<p>Die drei allegorischen Frauenfiguren im untersten Stock symbolisieren die <a href="01/gerechtigkeit.xml" imageHighlightId="01.fassadeneu.jpg.h8">Gerechtigkeit</a>, den <a href="01/wohlstand.xml" imageHighlightId="01.fassadeneu.jpg.h9">wirtschaftlichen Wohlstand</a> und die <a href="01/wissenschaft.xml" imageHighlightId="01.fassadeneu.jpg.h10">Wissenschaft</a>. Während die ersten beiden allgemein städtisch-bürgerliche Tugenden verkörpern, betont die dritte den Charakter Tübingens als Universitätsstadt.</p>
+			]]></text>
+		</column>
+		
+	</content>
+</card>

lib/card/test/example/01/01_besonderheiten2.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html><html lang="en"><head>
+    <meta charset="utf-8">
+    <title data-innerhtml="title">Article with 50% Columns</title>
+    <link rel="stylesheet" href="../_theme/css/bulma.css">
+    <link rel="stylesheet" href="../_theme/css/card.css">
+    <link rel="stylesheet" href="../_theme/css/article.css">
+    <link rel="stylesheet" href="../_theme/css/highlight.css">
+    <link rel="stylesheet" href="../_theme/css/popup.css">
+    <!-- disable zooming -->
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
+    <script src="../_theme/js/all.js"></script>
+    <script src="../_theme/js/3rdparty/all.js"></script>
+    <script src="../_theme/js/card.js"></script>
+    <script src="../_theme/js/highlight.js"></script>
+
+    
+</head>
+
+<body>
+    <article>
+        <div class="columns">
+            <div class="column content" data-link="Popup" tabindex=""><h2 contenteditable="false">Wer ist das Rebmännle am Rathaus?</h2> <p contenteditable="false" data-link="Popup">Die kleine Skulptur „Rebmännle“, die um 1600 an der  <a href="../01/rebmaennle.html" data-highlight-id="" onclick="Card.loadPopup(event)">Südostecke des Rathauses</a>  angebracht wurde, stellt eindeutig eine unbekleidete weibliche Figur dar (siehe Abbildung). Sie tanzt auf einer  <a href="../01/weintraube.html" data-highlight-id="01.rebmaennleneu.jpg.h1" onclick="Card.loadPopup(event)">vollen Weintraube</a>, um ihren Körper ist eine <a href="../01/girlandeausweinblaettern.html" data-highlight-id="01.rebmaennleneu.jpg.h2" onclick="Card.loadPopup(event)">Girlande aus Weinblättern</a>  geschlungen und ihr nach hinten geworfener  <a href="../01/umhang.html" data-highlight-id="01.rebmaennleneu.jpg.h4" onclick="Card.loadPopup(event)">Umhang</a>  erinnert an ein Weinblatt. Es handelt sich um eine Frau aus dem Gefolge des Weingottes  <a href="../glossar/bacchus.html" data-highlight-id="" onclick="Card.loadPopup(event)">Bacchus</a>, eine sogenannte Bacchantin. Die Platzierung an der prominenten Stelle soll die Bedeutung des Weinbaus für Tübingen symbolisieren.</p>	<div style="height: undefinedpx">&nbsp;</div><h2 contenteditable="false">Nackte Frau im öffentlichen Raum</h2> <p contenteditable="false" data-link="Popup">Um 1600 konnte nur eine Figur aus der antiken Mythologie nackt im öffentlichen Raum aufgestellt werden, ohne Scham und Anstand zu verletzen. Zudem bot das Personal der antiken Götterwelt den Künstlern der frühen Neuzeit zum ersten Mal die Möglichkeit, nackte Figuren zu repräsentieren. Das Aussehen des „Rebmännles“ mit den stämmigen Beinen, dem üppigen Bauch und dem lachenden Gesicht entspricht der Vorstellung von  <a href="../01/schoenheitsideal.html" data-highlight-id="" onclick="Card.loadPopup(event)">weiblicher Schönheit</a>  zwischen Renaissance und Frühbarock.</p></div>
+            <div class="column content" data-link="Popup" tabindex=""><div class="zoomable-wrapper column" ondragstart="Card.dragStart(event)">
+        <figure style="display: block;" class="zoomable singlefig" id="zoomable1">
+            <div style="position:relative;" class="svg-wrapper">
+                <svg draggable="false" class="mainimg" onclick="Card.openPopupOrZoomable(event)" viewBox="0 0 467 875" width="467" height="875" contenteditable="false">
+                    <!-- The defs section must be defined and cannot be generated in JavaScript-->
+                    <defs></defs>
+                    <image width="467" height="875" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../01/rebmaennleneu.jpg"></image>
+                    <g stroke-width="3"><circle xlink:href="../01/weintraube.html" data-highlight-id="01.rebmaennleneu.jpg.h1" onclick="Card.loadHighlightPopup(event)" cx="228" cy="767" r="93"></circle>
+<circle xlink:href="../01/umhang.html" data-highlight-id="01.rebmaennleneu.jpg.h4" onclick="Card.loadHighlightPopup(event)" cx="182" cy="68" r="42"></circle>
+<circle xlink:href="../01/girlandeausweinblaettern.html" data-highlight-id="01.rebmaennleneu.jpg.h2" onclick="Card.loadHighlightPopup(event)" cx="243" cy="406" r="56"></circle></g>
+                </svg>
+                <div class="icon button corner-button bottom-right zoom zoomable-icon" onclick="Card.openZoomable(event)"></div>
+            </div>
+            <figcaption contenteditable="false" class="cap">Tübinger Rebmännle</figcaption>
+            <figcaption contenteditable="false" class="zoomcap">Tübinger Rebmännle, Foto: Rose Hajdu, Stadtarchiv Tübingen</figcaption>
+        </figure>
+    </div></div>
+        </div>
+    </article>
+
+
+</body></html>

lib/card/test/example/01/01_besonderheiten2.xml

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<!-- <card type="artist"> -->
+<!-- <card type="thema"> -->
+<card type="details">
+<!-- <card type="leben des kunstwerks"> -->
+<!-- <card type="komposition"> -->
+<!-- <card type="licht und farbe"> -->
+<!-- <card type="extra info"> -->
+	<h1>Tübinger Rebmännle</h1>
+	<preview>
+		<text>
+		Eine unbekleidete Frau?
+		</text>
+	</preview>
+	<content template="1">
+		<column>
+			<text><![CDATA[
+				<h2>Wer ist das Rebmännle am Rathaus?</h2>
+				<p>Die kleine Skulptur „Rebmännle“, die um 1600 an der <a href="01/rebmaennle.xml" >Südostecke des Rathauses</a> angebracht wurde, stellt eindeutig eine unbekleidete weibliche Figur dar (siehe Abbildung). Sie tanzt auf einer <a href="01/weintraube.xml" imageHighlightId="01.rebmaennleneu.jpg.h1">vollen Weintraube</a>, um ihren Körper ist eine <a href="01/girlandeausweinblaettern.xml" imageHighlightId="01.rebmaennleneu.jpg.h2">Girlande aus Weinblättern</a> geschlungen und ihr nach hinten geworfener <a href="01/umhang.xml" imageHighlightId="01.rebmaennleneu.jpg.h4">Umhang</a> erinnert an ein Weinblatt. Es handelt sich um eine Frau aus dem Gefolge des Weingottes <a href="glossar/bacchus.xml">Bacchus</a>, eine sogenannte Bacchantin. Die Platzierung an der prominenten Stelle soll die Bedeutung des Weinbaus für Tübingen symbolisieren.</p> 
+				]]></text>
+				<space lines="2"/>
+				<text><![CDATA[
+				<h2>Nackte Frau im öffentlichen Raum</h2>
+				<p>Um 1600 konnte nur eine Figur aus der antiken Mythologie nackt im öffentlichen Raum aufgestellt werden, ohne Scham und Anstand zu verletzen. Zudem bot das Personal der antiken Götterwelt den Künstlern der frühen Neuzeit zum ersten Mal die Möglichkeit, nackte Figuren zu repräsentieren. Das Aussehen des „Rebmännles“ mit den stämmigen Beinen, dem üppigen Bauch und dem lachenden Gesicht entspricht der Vorstellung von <a href="01/schoenheitsideal.xml" >weiblicher Schönheit</a> zwischen Renaissance und Frühbarock.</p>
+				]]></text>
+				<!-- <text><![CDATA[
+				<h2>Symbol des Tübinger Weinbaus</h2>
+				<p>Die Platzierung an der prominenten Stelle soll die Bedeutung des Weinbaus für Tübingen symbolisieren. Um 1600 konnte eigentlich nur eine Figur aus der antiken Mythologie nackt im öffentlichen Raum aufgestellt werden, ohne Scham und Anstand zu ver-letzen. Zudem bot das Personal der antiken Götter-welt den Künstlern der frühen Neuzeit auch neue Möglichkeiten künstlerischen Ausdrucks, wie sie bei den Heiligenfiguren des Mittelalters kaum möglich gewesen waren: An der Bacchantin fallen die stäm-migen Beine, der üppige Bauch und das lachende Gesicht als besonders <a href="01/lebensnahundrealistisch.xml" >lebensnah und realistisch</a> auf.</p>
+				]]></text> -->
+				
+	</column>
+	<column>
+	
+		<img src="01/rebmaennleneu.jpg"  maxHeight="700" caption="Tübinger Rebmännle" allowZoom="true" zoomCaption="Tübinger Rebmännle, Foto: Rose Hajdu, Stadtarchiv Tübingen">
+		<highlight x="0.29" y="0.77" radius="0.2" href="01/weintraube.xml" id="01.rebmaennleneu.jpg.h1"/>
+		<highlight x="0.3" y="0.03" radius="0.09" href="01/umhang.xml" id="01.rebmaennleneu.jpg.h4"/>
+		<!-- <highlight x="0.39" y="0.12" radius="0.12" href="01/gesicht.xml" id="01.rebmaennle2.jpg.h3"/> -->
+		<highlight x="0.4" y="0.4" radius="0.12" href="01/girlandeausweinblaettern.xml" id="01.rebmaennleneu.jpg.h2"/>
+		</img>
+	</column>
+	</content>
+</card>

lib/card/test/example/01/01_besonderheiten3.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html><html lang="en"><head>
+    <meta charset="utf-8">
+    <title data-innerhtml="title">Article with 50% Columns</title>
+    <link rel="stylesheet" href="../_theme/css/bulma.css">
+    <link rel="stylesheet" href="../_theme/css/card.css">
+    <link rel="stylesheet" href="../_theme/css/article.css">
+    <link rel="stylesheet" href="../_theme/css/highlight.css">
+    <link rel="stylesheet" href="../_theme/css/popup.css">
+    <!-- disable zooming -->
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
+    <script src="../_theme/js/all.js"></script>
+    <script src="../_theme/js/3rdparty/all.js"></script>
+    <script src="../_theme/js/card.js"></script>
+    <script src="../_theme/js/highlight.js"></script>
+
+    
+</head>
+
+<body>
+    <article>
+        <div class="columns">
+            <div class="column content" data-link="Popup" tabindex=""><h2 contenteditable="false">500 Jahre schwäbische Qualitätsarbeit</h2> <p contenteditable="false" data-link="Popup">Die  <a href="../01/astronomischeuhr.html" data-highlight-id="" onclick="Card.loadPopup(event)">Astronomische Uhr</a>  im  <a href="../01/ziergiebel2.html" data-highlight-id="" onclick="Card.loadPopup(event)">Ziergiebel</a>  des Rathauses ist ein Meisterwerk der Technik (siehe Abbildung). Sie wurde 1511 mit großer Wahrscheinlichkeit von  <a href="../glossar/stoefflerjohannes.html" data-highlight-id="" onclick="Card.loadPopup(event)">Johannes Stöffler</a>  entworfen und wohl von einem ortsansässigen Schmid gebaut. Sie gehört zu einem Ensemble von fünf Uhren im und am Rathaus, von denen vier die Zeit anzeigen. Sie ist nicht nur die älteste Uhr weltweit, die Sonnen- und Mondfinsternisse mit einem Drachenzeiger anzeigen kann, sondern läuft auch heute noch so präzise, dass sie nur alle zwanzig Jahre neu justiert werden muss.</p><div class="zoomable-wrapper column" ondragstart="Card.dragStart(event)">
+        <figure style="display: block;" class="zoomable singlefig" id="zoomable1">
+            <div style="position:relative;" class="svg-wrapper">
+                <svg draggable="false" class="mainimg" onclick="Card.openPopupOrZoomable(event)" viewBox="0 0 496 500" width="496" height="500" contenteditable="false">
+                    <!-- The defs section must be defined and cannot be generated in JavaScript-->
+                    <defs></defs>
+                    <image width="496" height="500" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../01/astronomischeuhrneu.jpg"></image>
+                    <g stroke-width="3"><circle xlink:href="../01/mondphasen.html" data-highlight-id="01.astronomischeuhrneu.jpg.h1" onclick="Card.loadHighlightPopup(event)" cx="248" cy="94" r="60"></circle>
+<circle xlink:href="../01/tierkreis.html" data-highlight-id="01.astronomischeuhrneu.jpg.h2" onclick="Card.loadHighlightPopup(event)" cx="129" cy="290" r="35"></circle>
+<circle xlink:href="../01/sonnenzeiger.html" data-highlight-id="01.astronomischeuhrneu.jpg.h3" onclick="Card.loadHighlightPopup(event)" cx="323" cy="335" r="30"></circle>
+<circle xlink:href="../01/mondzeiger.html" data-highlight-id="01.astronomischeuhrneu.jpg.h4" onclick="Card.loadHighlightPopup(event)" cx="214" cy="240" r="30"></circle>
+<circle xlink:href="../01/drachenzeiger.html" data-highlight-id="01.astronomischeuhrneu.jpg.h5" onclick="Card.loadHighlightPopup(event)" cx="293" cy="265" r="30"></circle></g>
+                </svg>
+                <div class="icon button corner-button bottom-right zoom zoomable-icon" onclick="Card.openZoomable(event)"></div>
+            </div>
+            <figcaption contenteditable="false" class="cap">Die Astronomische Uhr</figcaption>
+            <figcaption contenteditable="false" class="zoomcap">Die Astronomische Uhr im Ziergiebel des Rathauses, Foto: Christoph Jäckle</figcaption>
+        </figure>
+    </div></div>
+            <div class="column content" data-link="Popup" tabindex=""><h2 contenteditable="false">Was zeigt die Uhr an?</h2> <p contenteditable="false" data-link="Popup">Die Astronomische Uhr besteht aus 
+				einer  <a href="../01/mondphasen.html" data-highlight-id="01.astronomischeuhrneu.jpg.h1" onclick="Card.loadPopup(event)">Mondphasenanzeige</a>  und einem  <a href="../01/astronomischeszifferblatt.html" data-highlight-id="" onclick="Card.loadPopup(event)">astronomischen Zifferblatt</a>  mit einem  <a href="../01/tierkreis.html" data-highlight-id="01.astronomischeuhrneu.jpg.h2" onclick="Card.loadPopup(event)">Tierkreis</a>. Die Uhr besitzt drei Zeiger. Der <a href="../01/sonnenzeiger.html" data-highlight-id="01.astronomischeuhrneu.jpg.h3" onclick="Card.loadPopup(event)">Sonnenzeiger</a>  bewegt sich ein „knappes“ Grad pro Tag, da 360 Grad in 365 Tagen durchlaufen werden. Er zeigt das aktuelle Tierkreiszeichen an. Der  <a href="../01/mondzeiger.html" data-highlight-id="01.astronomischeuhrneu.jpg.h4" onclick="Card.loadPopup(event)">Mondzeiger</a>  zeigt die scheinbare Position des Mondes zur Position der Sonne an. Er benötigt für einen vollen Umlauf 27 Tage, 7 Stunden, 43 Minuten (Siderischer Mondmonat). Da aber in dieser Zeit auch der Sonnenzeiger weitergelaufen ist, benötigt der Mondzeiger noch etwas länger um erneut über das Sonnen- bzw. -Sternsymbol des Sonnenzeigers zu laufen. Daraus resultiert eine Zeitspanne von 29 Tagen, 12 Stunden und 44 Minuten, welche dann dem synodischen Mondmonat von Vollmond zu Vollmond entspricht. Am langsamsten ist der  <a href="../01/drachenzeiger.html" data-highlight-id="01.astronomischeuhrneu.jpg.h5" onclick="Card.loadPopup(event)">Drachenzeiger</a>, der in 18 Jahren und 224 Tagen einmal gegen den Uhrzeigersinn läuft. Kommen nun Sonnen-, Mond- und Drachenzeiger zur Deckung, so findet irgendwo auf der Erde eine Mond- oder Sonnenfinsternis statt. Im Durchschnitt wiederholt sich dieses Ereignis etwa viermal im Jahr.</p> <p contenteditable="false" data-link="Popup">Die Uhr war mehr als nur ein raffiniertes technisches Spielzeug: Sie steht auch für einen selbstbewussten Umgang naturwissenschaftlichen Fragen zu einer Zeit in der sich langsam die Astronomie als Wissenschaft von der mythologischen Astrologie trennte.</p></div>
+        </div>
+    </article>
+
+
+</body></html>

lib/card/test/example/01/01_besonderheiten3.xml

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<!-- <card type="artist"> -->
+<!-- <card type="thema"> -->
+<card type="details">
+<!-- <card type="leben des kunstwerks"> -->
+<!-- <card type="komposition"> -->
+<!-- <card type="licht und farbe"> -->
+<!-- <card type="extra info"> -->
+	<h1>Die Astronomische Uhr</h1>
+	<preview>
+		<text>
+		Revolutionäres &lt;br/&gt;Meisterwerk der Technik
+		</text>
+	</preview>
+	
+
+
+	<content template="1">
+		<column>
+			<text><![CDATA[
+				<h2>500 Jahre schwäbische Qualitätsarbeit </h2>
+				<p>Die <a href="01/astronomischeuhr.xml" >Astronomische Uhr</a> im <a href="01/ziergiebel2.xml">Ziergiebel</a> des Rathauses ist ein Meisterwerk der Technik (siehe Abbildung). Sie wurde 1511 mit großer Wahrscheinlichkeit von <a href="glossar/stoefflerjohannes.xml">Johannes Stöffler</a> entworfen und wohl von einem ortsansässigen Schmid gebaut. Sie gehört zu einem Ensemble von fünf Uhren im und am Rathaus, von denen vier die Zeit anzeigen. Sie ist nicht nur die älteste Uhr weltweit, die Sonnen- und Mondfinsternisse mit einem Drachenzeiger anzeigen kann, sondern läuft auch heute noch so präzise, dass sie nur alle zwanzig Jahre neu justiert werden muss.</p>
+			]]></text>
+
+			<img src="01/astronomischeuhrneu.jpg" maxHeight="400" caption="Die Astronomische Uhr" allowZoom="true" zoomCaption="Die Astronomische Uhr im Ziergiebel des Rathauses, Foto: Christoph Jäckle">
+			<highlight x="0.38" y="0.068" radius="0.12" href="01/mondphasen.xml" id="01.astronomischeuhrneu.jpg.h1"/>
+			<highlight x="0.19" y="0.51" radius="0.07" href="01/tierkreis.xml" id="01.astronomischeuhrneu.jpg.h2"/>
+			<highlight x="0.59" y="0.61" radius="0.06" href="01/sonnenzeiger.xml" id="01.astronomischeuhrneu.jpg.h3"/>
+			<highlight x="0.37" y="0.42" radius="0.06" href="01/mondzeiger.xml" id="01.astronomischeuhrneu.jpg.h4"/>
+			<highlight x="0.53" y="0.47" radius="0.06" href="01/drachenzeiger.xml" id="01.astronomischeuhrneu.jpg.h5"/>
+			</img>
+		</column>
+		<column>
+			<text><![CDATA[
+				<h2>Was zeigt die Uhr an?</h2>
+				<p>Die Astronomische Uhr besteht aus 
+				einer <a href="01/mondphasen.xml" imageHighlightId="01.astronomischeuhrneu.jpg.h1">Mondphasenanzeige</a> und einem <a href="01/astronomischeszifferblatt.xml">astronomischen Zifferblatt</a> mit einem <a href="01/tierkreis.xml" imageHighlightId="01.astronomischeuhrneu.jpg.h2">Tierkreis</a>. Die Uhr besitzt drei Zeiger. Der <a href="01/sonnenzeiger.xml" imageHighlightId="01.astronomischeuhrneu.jpg.h3" >Sonnenzeiger</a> bewegt sich ein „knappes“ Grad pro Tag, da 360 Grad in 365 Tagen durchlaufen werden. Er zeigt das aktuelle Tierkreiszeichen an. Der <a href="01/mondzeiger.xml" imageHighlightId="01.astronomischeuhrneu.jpg.h4">Mondzeiger</a> zeigt die scheinbare Position des Mondes zur Position der Sonne an. Er benötigt für einen vollen Umlauf 27 Tage, 7 Stunden, 43 Minuten (Siderischer Mondmonat). Da aber in dieser Zeit auch der Sonnenzeiger weitergelaufen ist, benötigt der Mondzeiger noch etwas länger um erneut über das Sonnen- bzw. -Sternsymbol des Sonnenzeigers zu laufen. Daraus resultiert eine Zeitspanne von 29 Tagen, 12 Stunden und 44 Minuten, welche dann dem synodischen Mondmonat von Vollmond zu Vollmond entspricht. Am langsamsten ist der <a href="01/drachenzeiger.xml" imageHighlightId="01.astronomischeuhrneu.jpg.h5">Drachenzeiger</a>, der in 18 Jahren und 224 Tagen einmal gegen den Uhrzeigersinn läuft. Kommen nun Sonnen-, Mond- und Drachenzeiger zur Deckung, so findet irgendwo auf der Erde eine Mond- oder Sonnenfinsternis statt. Im Durchschnitt wiederholt sich dieses Ereignis etwa viermal im Jahr.</p>
+				<p>Die Uhr war mehr als nur ein raffiniertes technisches Spielzeug: Sie steht auch für einen selbstbewussten Umgang naturwissenschaftlichen Fragen zu einer Zeit in der sich langsam die Astronomie als Wissenschaft von der mythologischen Astrologie trennte.</p>
+			]]></text>
+			
+		</column>
+	</content>
+</card>

lib/card/test/example/01/01_funktiondamals.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html><html lang="en"><head>
+    <meta charset="utf-8">
+    <title data-innerhtml="title">Article with 50% Columns</title>
+    <link rel="stylesheet" href="../_theme/css/bulma.css">
+    <link rel="stylesheet" href="../_theme/css/card.css">
+    <link rel="stylesheet" href="../_theme/css/article.css">
+    <link rel="stylesheet" href="../_theme/css/highlight.css">
+    <link rel="stylesheet" href="../_theme/css/popup.css">
+    <!-- disable zooming -->
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
+    <script src="../_theme/js/all.js"></script>
+    <script src="../_theme/js/3rdparty/all.js"></script>
+    <script src="../_theme/js/card.js"></script>
+    <script src="../_theme/js/highlight.js"></script>
+
+    
+</head>
+
+<body>
+    <article>
+        <div class="columns">
+            <div class="column content" data-link="Popup" tabindex=""><h2 contenteditable="false">Erdgeschoss: Handel und Lager</h2> <p contenteditable="false" data-link="Popup">Das Rathaus war vom Marktplatz und von der Haaggasse aus zugänglich. Im Erdgeschoss befanden sich drei etwa gleich große Hallen. Im linken Bereich waren die Metzger untergebracht, die dort ihre Fleischbänke unterhielten. Im mittleren Raum verkauften Bäcker ihre Waren. Rechts erkennt man einen Torbogen für eine Durchfahrt in die Rathausgasse. 1543 wurde ein Salzhaus angebaut, unter dem ein geräumiger Keller zusätzlich Lagerplatz für Wein bot, der vom  <a href="../01/spital.html" data-highlight-id="" onclick="Card.loadPopup(event)">Spital</a>  hier eingelagert wurde.</p><h2 contenteditable="false">1. Geschoss: Ein Saal für Gerber und Bürgerschaft</h2> <p contenteditable="false" data-link="Popup">Im ersten Geschoss nutzten die Gerber den Saal, in dem heute der Gemeinderat tagt, zum Verkauf von Leder. Die  <a href="../01/lederbuehne.html" data-highlight-id="" onclick="Card.loadPopup(event)">„Lederbühne“</a>  diente gleichzeitig der Tübinger Bürgerschaft als Festsaal.</p><h2 contenteditable="false">2. Geschoss: Gericht und Rat der Stadt</h2> <p contenteditable="false" data-link="Popup">Stadtgericht und Rat tagten im zweiten Geschoss. Im ehemaligen Sitzungssaal, der heute als Trauzimmer genutzt wird, ist noch die bemalte  <a href="../01/holzvertaefelung.html" data-highlight-id="" onclick="Card.loadPopup(event)">Holzvertäfelung</a>  erhalten. Der repräsentative Empfangsraum, der sogenannte  <a href="../01/oehrn.html" data-highlight-id="" onclick="Card.loadPopup(event)">Öhrn</a>, wurde 1596 von <a href="../glossar/zueberlinjakob.html" data-highlight-id="" onclick="Card.loadPopup(event)">Jakob Züberlin</a>  mit  <a href="../01/grisaillemalerei.html" data-highlight-id="" onclick="Card.loadPopup(event)">Grisaillemalereien</a>  nach Vorlagen von Tobias Stimmer ausgestattet (siehe Abbildung). Die  <a href="../01/motive.html" data-highlight-id="" onclick="Card.loadPopup(event)">Motive</a>  haben alle mit Recht und Gerechtigkeit zu tun.</p></div>
+            <div class="column content" data-link="Popup" tabindex=""><h2 contenteditable="false">3. Geschoss: Hofgericht des Landes</h2> <p contenteditable="false" data-link="Popup">Im dritten Geschoss des Rathauses, das 1495 aufgestockt worden war, fanden von 1514 bis 1806 die Sitzungen des Hofgerichts in dem sogenannten  <a href="../01/hofgerichtssaal.html" data-highlight-id="" onclick="Card.loadPopup(event)">Hofgerichtssaal</a>  statt. Das Hofgericht war im Mittelalter und in der Frühen Neuzeit das höchste Gericht des Landes Württemberg. Es tagte immer dort, wo sich der Graf oder Herzog gera­de aufhielt, wo er „Hof hielt“. Im Zuge des  <a href="../glossar/tuebingervertrag.html" data-highlight-id="" onclick="Card.loadPopup(event)">Tübinger Vertrags</a>  von 1514 wurde das württembergische Hofgericht nach Tübingen verlegt.</p>	<div style="height: undefinedpx">&nbsp;</div><div class="zoomable-wrapper column" ondragstart="Card.dragStart(event)">
+        <figure style="display: block;" class="zoomable singlefig" id="zoomable1">
+            <div style="position:relative;" class="svg-wrapper">
+                <svg draggable="false" class="mainimg" onclick="Card.openPopupOrZoomable(event)" viewBox="0 0 584 537.5" width="584" height="537.5" contenteditable="false">
+                    <!-- The defs section must be defined and cannot be generated in JavaScript-->
+                    <defs></defs>
+                    <image width="584" height="537.5" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../01/oehrn2.jpg"></image>
+                    <g stroke-width="3"></g>
+                </svg>
+                <div class="icon button corner-button bottom-right zoom zoomable-icon" onclick="Card.openZoomable(event)"></div>
+            </div>
+            <figcaption contenteditable="false" class="cap">Der Öhrn mit Grisaillemalereien</figcaption>
+            <figcaption contenteditable="false" class="zoomcap">Der Öhrn im Rathaus, Basketballer aus Aix-en-Provence, Foto: Alfred Göhner, 1966, Stadtarchiv Tübingen</figcaption>
+        </figure>
+    </div></div>
+        </div>
+    </article>
+
+
+</body></html>

lib/card/test/example/01/01_funktiondamals.xml

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<!-- <card type="artist"> -->
+<card type="thema">
+<!-- <card type="details"> -->
+<!-- <card type="leben des kunstwerks"> -->
+<!-- <card type="komposition"> -->
+<!-- <card type="licht und farbe"> -->
+<!-- <card type="extra info"> -->
+	<h1>Alles unter einem Dach</h1>
+	<preview>
+		<text>
+			Räte, Richter, Händler &lt;br/&gt; und Halunken
+		</text>
+	</preview>
+	
+	<content template="1">
+		<column>
+			<text><![CDATA[
+			    <h2>Erdgeschoss: Handel und Lager</h2>
+				<p>Das Rathaus war vom Marktplatz und von der Haaggasse aus zugänglich. Im Erdgeschoss befanden sich drei etwa gleich große Hallen. Im linken Bereich waren die Metzger untergebracht, die dort ihre Fleischbänke unterhielten. Im mittleren Raum verkauften Bäcker ihre Waren. Rechts erkennt man einen Torbogen für eine Durchfahrt in die Rathausgasse. 1543 wurde ein Salzhaus angebaut, unter dem ein geräumiger Keller zusätzlich Lagerplatz für Wein bot, der vom <a href="01/spital.xml">Spital</a> hier eingelagert wurde.</p>
+			]]></text>
+			<text><![CDATA[
+				<h2>1. Geschoss: Ein Saal für Gerber und Bürgerschaft</h2>
+				<p>Im ersten Geschoss nutzten die Gerber den Saal, in dem heute der Gemeinderat tagt, zum Verkauf von Leder. Die <a href="01/lederbuehne.xml">„Lederbühne“</a> diente gleichzeitig der Tübinger Bürgerschaft als Festsaal.</p>
+			]]></text>
+			<text><![CDATA[
+				<h2>2. Geschoss: Gericht und Rat der Stadt</h2>
+				<p>Stadtgericht und Rat tagten im zweiten Geschoss. Im ehemaligen Sitzungssaal, der heute als Trauzimmer genutzt wird, ist noch die bemalte <a href="01/holzvertaefelung.xml">Holzvertäfelung</a> erhalten. Der repräsentative Empfangsraum, der sogenannte <a href="01/oehrn.xml">Öhrn</a>, wurde 1596 von <a href="glossar/zueberlinjakob.xml" >Jakob Züberlin</a> mit <a href="01/grisaillemalerei.xml">Grisaillemalereien</a> nach Vorlagen von Tobias Stimmer ausgestattet (siehe Abbildung). Die <a href="01/motive.xml" >Motive</a> haben alle mit Recht und Gerechtigkeit zu tun. </p>
+			]]></text>
+		</column>
+		<column>
+		<text><![CDATA[
+				<h2>3. Geschoss: Hofgericht des Landes</h2>
+				<p>Im dritten Geschoss des Rathauses, das 1495 aufgestockt worden war, fanden von 1514 bis 1806 die Sitzungen des Hofgerichts in dem sogenannten <a href="01/hofgerichtssaal.xml" >Hofgerichtssaal</a> statt. Das Hofgericht war im Mittelalter und in der Frühen Neuzeit das höchste Gericht des Landes Württemberg. Es tagte immer dort, wo sich der Graf oder Herzog gera-de aufhielt, wo er „Hof hielt“. Im Zuge des <a href="glossar/tuebingervertrag.xml">Tübinger Vertrags</a> von 1514 wurde das württembergische Hofgericht nach Tübingen verlegt.</p>
+			]]></text>
+			<space lines="1"/>
+		<img src="01/oehrn2.jpg" maxHeight="430" caption="Der Öhrn mit Grisaillemalereien" allowZoom="true" zoomCaption="Der Öhrn im Rathaus, Basketballer aus Aix-en-Provence, Foto: Alfred Göhner, 1966, Stadtarchiv Tübingen"/> 
+
+		</column>
+	</content>
+</card>

lib/card/test/example/01/01_funktionheute.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html><html lang="en"><head>
+    <meta charset="utf-8">
+    <title data-innerhtml="title">Article with 50% Columns</title>
+    <link rel="stylesheet" href="../_theme/css/bulma.css">
+    <link rel="stylesheet" href="../_theme/css/card.css">
+    <link rel="stylesheet" href="../_theme/css/article.css">
+    <link rel="stylesheet" href="../_theme/css/highlight.css">
+    <link rel="stylesheet" href="../_theme/css/popup.css">
+    <!-- disable zooming -->
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
+    <script src="../_theme/js/all.js"></script>
+    <script src="../_theme/js/3rdparty/all.js"></script>
+    <script src="../_theme/js/card.js"></script>
+    <script src="../_theme/js/highlight.js"></script>
+
+    
+</head>
+
+<body>
+    <article>
+        <div class="columns">
+            <div class="column content" data-link="Popup" tabindex=""><h2 contenteditable="false">Zentrum der Stadtpolitik</h2> <p contenteditable="false" data-link="Popup">Das Rathaus ist noch heute das Zentrum für Stadtpolitik und -verwaltung. Im Ratssaal im ersten Obergeschoss tagt der Gemeinderat (siehe Abbildung). In der ehemaligen Großen Gerichtsstube im zweiten Obergeschoss befindet sich das Trauzimmer, das Amtszimmer des Oberbürgermeisters in der ehemaligen Kleinen Gerichtsstube. Sie wurde 1760 neu ausgebaut und mit Rokokodekor versehen. Außer einem weiteren Besprechungsraum im ehemaligen Hofgerichtssaal im dritten Obergeschoss, sind unter anderem Büros der städtischen Verwaltung untergebracht.</p>	<div style="height: undefinedpx">&nbsp;</div><h2 contenteditable="false">Wohin mit der Stadtarchiv?</h2> <p contenteditable="false" data-link="Popup">Das Stadtarchiv war auch bis 2012 im Dachgeschoss und im Rathausanbau untergebracht. Seine umfangreichen Bestände an historischen Dokumenten belasteten nicht nur die Fachwerkkonstruktion des Rathauses, sondern waren auch in Gefahr, bei einem Brand vernichtet zu werden. Während der Restaurierungsmaßnahmen 2012 bis 2016 zog das Archiv in das hinter dem Rathaus stehenden Breuninghaus um. Langfristig ist ein Umzug auf das Gelände des ehemaligen Güterbahnhofs geplant.</p></div>
+            <div class="column content" data-link="Popup" tabindex=""><h2 contenteditable="false">Restaurierung 2012-2016</h2> <p contenteditable="false" data-link="Popup">Auslöser für die letzte Restaurierung waren, neben veralteter Haustechnik, Brandschutz und unzeitgemäßen Büro- und Besprechungsräumen, vor allem statische Probleme.</p> <p contenteditable="false" data-link="Popup">Bei der Sanierung kamen sensationelle Entdeckungen im Eingangsbereich zu Tage: Eine einheitliche Halle im Erdgeschoss gab es nie. Stattdessen befanden sich dort drei kleine Hallen zum Verkauf von Brot, Salz und Fleisch. An der Stütze neben dem Eingang zum Treppenhaus ist noch der Ansatz eines Brustriegels sichtbar, der die Halle abgeteilt hat. In der nördlichen Halle fand man an den Deckenbalken noch  <a href="../01/baeckerzeichenneu.html" data-highlight-id="" onclick="Card.loadPopup(event)">Zeichen der Bäcker</a>. Die nördliche, bräunlich verputzte Außenwand ist das älteste Bauteil des Rathauses.</p><div class="zoomable-wrapper column" ondragstart="Card.dragStart(event)">
+        <figure style="display: block;" class="zoomable singlefig" id="zoomable1">
+            <div style="position:relative;" class="svg-wrapper">
+                <svg draggable="false" class="mainimg" onclick="Card.openPopupOrZoomable(event)" viewBox="0 0 581 387.5" width="581" height="387.5" contenteditable="false">
+                    <!-- The defs section must be defined and cannot be generated in JavaScript-->
+                    <defs></defs>
+                    <image width="581" height="387.5" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../01/ratssaalneu.jpg"></image>
+                    <g stroke-width="3"></g>
+                </svg>
+                <div class="icon button corner-button bottom-right zoom zoomable-icon" onclick="Card.openZoomable(event)"></div>
+            </div>
+            <figcaption contenteditable="false" class="cap">Ratssaal im ersten Obergeschoss</figcaption>
+            <figcaption contenteditable="false" class="zoomcap">Ratssaal nach der Sanierung des Rathauses, Foto: Universitätsstadt Tübingen</figcaption>
+        </figure>
+    </div></div>
+        </div>
+    </article>
+
+
+</body></html>

lib/card/test/example/01/01_funktionheute.xml

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<!-- <card type="artist"> -->
+<card type="thema">
+<!-- <card type="details"> -->
+<!-- <card type="leben des kunstwerks"> -->
+<!-- <card type="komposition"> -->
+<!-- <card type="licht und farbe"> -->
+<!-- <card type="extra info"> -->
+		<h1>Im Wandel der Zeit</h1>
+	<preview>
+		<text>
+			Was ist geblieben – &lt;br/&gt;was hat sich verändert?
+		</text>
+	</preview>
+
+	<content template="1">
+		<column>
+			<text><![CDATA[
+			<h2>Zentrum der Stadtpolitik</h2>
+				<p>Das Rathaus ist noch heute das Zentrum für Stadtpolitik und -verwaltung. Im Ratssaal im ersten Obergeschoss tagt der Gemeinderat (siehe Abbildung). In der ehemaligen Großen Gerichtsstube im zweiten Obergeschoss befindet sich das Trauzimmer, das Amtszimmer des Oberbürgermeisters in der ehemaligen Kleinen Gerichtsstube. Sie wurde 1760 neu ausgebaut und mit Rokokodekor versehen. Außer einem weiteren Besprechungsraum im ehemaligen Hofgerichtssaal im dritten Obergeschoss, sind unter anderem Büros der städtischen Verwaltung untergebracht.</p>
+			]]></text>	
+			<space lines="2"/>
+			<text><![CDATA[
+			<h2>Wohin mit der Stadtarchiv?</h2>
+				<p>Das Stadtarchiv war auch bis 2012 im Dachgeschoss und im Rathausanbau untergebracht. Seine umfangreichen Bestände an historischen Dokumenten belasteten nicht nur die Fachwerkkonstruktion des Rathauses, sondern waren auch in Gefahr, bei einem Brand vernichtet zu werden. Während der Restaurierungsmaßnahmen 2012 bis 2016 zog das Archiv in das hinter dem Rathaus stehenden Breuninghaus um. Langfristig ist ein Umzug auf das Gelände des ehemaligen Güterbahnhofs geplant.</p>
+			]]></text>	
+		
+			
+		</column>
+		<column>
+	<text><![CDATA[
+	<h2>Restaurierung 2012-2016</h2>
+	 				<p>Auslöser für die letzte Restaurierung waren, neben veralteter Haustechnik, Brandschutz und unzeitgemäßen Büro- und Besprechungsräumen, vor allem statische Probleme.</p>
+					<p>Bei der Sanierung kamen sensationelle Entdeckungen im Eingangsbereich zu Tage: Eine einheitliche Halle im Erdgeschoss gab es nie. Stattdessen befanden sich dort drei kleine Hallen zum Verkauf von Brot, Salz und Fleisch. An der Stütze neben dem Eingang zum Treppenhaus ist noch der Ansatz eines Brustriegels sichtbar, der die Halle abgeteilt hat. In der nördlichen Halle fand man an den Deckenbalken noch <a href="01/baeckerzeichenneu.xml" >Zeichen der Bäcker</a>. Die nördliche, bräunlich verputzte Außenwand ist das älteste Bauteil des Rathauses.</p> 
+			]]></text>
+		    <img src="01/ratssaalneu.jpg" maxHeight="310" caption="Ratssaal im ersten Obergeschoss" allowZoom="true" zoomCaption="Ratssaal nach der Sanierung des Rathauses, Foto: Universitätsstadt Tübingen"/>
+		
+			
+		
+		</column>
+	</content>
+</card>

lib/card/test/example/01/astronomischeszifferblatt.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html><html lang="en"><head>
+    <meta charset="utf-8">
+    <title data-innerhtml="title">Popup</title>
+    <link rel="stylesheet" href="../_theme/css/bulma.css">
+    <link rel="stylesheet" href="../_theme/css/card.css">
+    <link rel="stylesheet" href="../_theme/css/article.css">
+    <link rel="stylesheet" href="../_theme/css/highlight.css">
+    <link rel="stylesheet" href="../_theme/css/popup.css">
+    <!-- disable zooming -->
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
+    <script src="../_theme/js/all.js"></script>
+    <script src="../_theme/js/3rdparty/all.js"></script>
+    <script src="../_theme/js/card.js"></script>
+    <script src="../_theme/js/highlight.js"></script>
+</head>
+
+<body>
+    <!-- IMPORTANT: Deleted style overwrite here which set a rigid width. -->
+    <div class="popupHtml" tabindex=""><img contenteditable="false" src="../01/astronomischeszifferblattneu.jpg"><p contenteditable="false" data-link="Popup"><span>Das astronomische Zifferblatt, Foto: Christoph Jäckle</span></p><p contenteditable="false" data-link="Popup"><span>Das astronomische Zifferblatt zeigt Jahreszeiten, Tag- und Nachtlängen sowie andere astromische Ereignisse. Das originale Zifferblatt mit dem Tierkreiszeichen von 1511 war nach erheblichen Wetterschäden unbrauchbar. Deswegen wurde es beim Umsetzen der Uhr vom ersten Geschoss in den Ziergiebel im Jahr 1849 wahrscheinlich außer Betrieb genommen, aber weiterhin auf dem Dachboden des Rathauses aufbewahrt. Dieses ursprüngliche Zifferblatt (siehe Abbildung unten) befindet sich im Stadtmuseum Tübingen und kann dort in der Dauerausstellung besichtigt werden.</span></p><img contenteditable="false" src="../01/urspruenglicheszifferblattneu.jpg"><p contenteditable="false" data-link="Popup"><span>Das ursprüngliche Zifferblatt der Astronomischen Uhr, Foto: Stadtmuseum Tübingen</span></p></div>
+
+
+</body></html>

lib/card/test/example/01/astronomischeszifferblatt.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<content>
+<img src="01/astronomischeszifferblattneu.jpg" caption=" "/>
+	<text><![CDATA[
+		<p><span class="popuptext">Das astronomische Zifferblatt, Foto: Christoph Jäckle</span></p>
+	]]></text>
+	<text><![CDATA[
+		<p><span class="popuptext">Das astronomische Zifferblatt zeigt Jahreszeiten, Tag- und Nachtlängen sowie andere astromische Ereignisse. Das originale Zifferblatt mit dem Tierkreiszeichen von 1511 war nach erheblichen Wetterschäden unbrauchbar. Deswegen wurde es beim Umsetzen der Uhr vom ersten Geschoss in den Ziergiebel im Jahr 1849 wahrscheinlich außer Betrieb genommen, aber weiterhin auf dem Dachboden des Rathauses aufbewahrt. Dieses ursprüngliche Zifferblatt (siehe Abbildung unten) befindet sich im Stadtmuseum Tübingen und kann dort in der Dauerausstellung besichtigt werden.</span></p>
+	]]></text>
+	<img src="01/urspruenglicheszifferblattneu.jpg" caption=" "/>
+	<text><![CDATA[
+		<p><span class="popuptext">Das ursprüngliche Zifferblatt der Astronomischen Uhr, Foto: Stadtmuseum Tübingen</span></p>
+	]]></text>
+	
+</content>

lib/card/test/example/01/astronomischeuhr.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html><html lang="en"><head>
+    <meta charset="utf-8">
+    <title data-innerhtml="title">Popup</title>
+    <link rel="stylesheet" href="../_theme/css/bulma.css">
+    <link rel="stylesheet" href="../_theme/css/card.css">
+    <link rel="stylesheet" href="../_theme/css/article.css">
+    <link rel="stylesheet" href="../_theme/css/highlight.css">
+    <link rel="stylesheet" href="../_theme/css/popup.css">
+    <!-- disable zooming -->
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
+    <script src="../_theme/js/all.js"></script>
+    <script src="../_theme/js/3rdparty/all.js"></script>
+    <script src="../_theme/js/card.js"></script>
+    <script src="../_theme/js/highlight.js"></script>
+</head>
+
+<body>
+    <!-- IMPORTANT: Deleted style overwrite here which set a rigid width. -->
+    <div class="popupHtml" tabindex=""><p contenteditable="false" data-link="Popup"><span>Eine astronomische Uhr ist eine mechanische Uhr, die astronomische Gegebenheiten anzeigt, wie die Position von Sonne und Mond im Tierkreis, die Mondphasen oder die Planetenstellungen. Astronomische Uhren wurden seit dem späten Mittelalter als monumentale Uhren an Türmen oder Rathäusern angebracht.</span></p><img contenteditable="false" src="../01/uhrfrueher.jpg"><p contenteditable="false" data-link="Popup"><span>Die Astronomische Uhr des Tübinger Rathauses, 1826, Foto: Deutsches Literatuarchiv Marbach</span></p><p contenteditable="false" data-link="Popup"><span>Die Astronomische Uhr des Tübinger Rathauses war vorher im ersten Geschoss über dem Haupteingang neben der Rathauskanzel angebracht und wurde erst 1849 in den Ziergiebel versetzt.</span></p></div>
+
+
+</body></html>

lib/card/test/example/01/astronomischeuhr.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<content>
+
+	<text><![CDATA[
+		<p><span class="popuptext">Eine astronomische Uhr ist eine mechanische Uhr, die astronomische Gegebenheiten anzeigt, wie die Position von Sonne und Mond im Tierkreis, die Mondphasen oder die Planetenstellungen. Astronomische Uhren wurden seit dem späten Mittelalter als monumentale Uhren an Türmen oder Rathäusern angebracht.</span></p>
+	]]></text>
+	<img src="01/uhrfrueher.jpg"/>
+	<text><![CDATA[
+		<p><span class="popuptext">Die Astronomische Uhr des Tübinger Rathauses, 1826, Foto: Deutsches Literatuarchiv Marbach</span></p>
+	]]></text> 
+	<text><![CDATA[
+		<p><span class="popuptext">Die Astronomische Uhr des Tübinger Rathauses war vorher im ersten Geschoss über dem Haupteingang neben der Rathauskanzel angebracht und wurde erst 1849 in den Ziergiebel versetzt.</span></p>
+	]]></text>	
+	
+</content>

lib/card/test/example/01/baeckerzeichenneu.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html><html lang="en"><head>
+    <meta charset="utf-8">
+    <title data-innerhtml="title">Popup</title>
+    <link rel="stylesheet" href="../_theme/css/bulma.css">
+    <link rel="stylesheet" href="../_theme/css/card.css">
+    <link rel="stylesheet" href="../_theme/css/article.css">
+    <link rel="stylesheet" href="../_theme/css/highlight.css">
+    <link rel="stylesheet" href="../_theme/css/popup.css">
+    <!-- disable zooming -->
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
+    <script src="../_theme/js/all.js"></script>
+    <script src="../_theme/js/3rdparty/all.js"></script>
+    <script src="../_theme/js/card.js"></script>
+    <script src="../_theme/js/highlight.js"></script>
+</head>
+
+<body>
+    <!-- IMPORTANT: Deleted style overwrite here which set a rigid width. -->
+    <div class="popupHtml" tabindex=""><img contenteditable="false" src="../01/baeckerzeichenneu.jpg"><p contenteditable="false" data-link="Popup"><span>Bäckerzeichen im Rathaus, Brezel mit gekreuztem Backschieber, EG, eingeritzt in einem Balken an der Decke, Foto und Bearbeitung: Tilmann Marstaller</span></p></div>
+
+
+</body></html>

lib/card/test/example/01/baeckerzeichenneu.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<content>
+<img src="01/baeckerzeichenneu.jpg" caption=" "/>
+<text><![CDATA[
+		<p><span class="popuptext">Bäckerzeichen im Rathaus, Brezel mit gekreuztem Backschieber, EG, eingeritzt in einem Balken an der Decke, Foto und Bearbeitung: Tilmann Marstaller</span></p>
+	]]></text>
+
+</content>

lib/card/test/example/01/breuning.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html><html lang="en"><head>
+    <meta charset="utf-8">
+    <title data-innerhtml="title">Popup</title>
+    <link rel="stylesheet" href="../_theme/css/bulma.css">
+    <link rel="stylesheet" href="../_theme/css/card.css">
+    <link rel="stylesheet" href="../_theme/css/article.css">
+    <link rel="stylesheet" href="../_theme/css/highlight.css">
+    <link rel="stylesheet" href="../_theme/css/popup.css">
+    <!-- disable zooming -->
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
+    <script src="../_theme/js/all.js"></script>
+    <script src="../_theme/js/3rdparty/all.js"></script>
+    <script src="../_theme/js/card.js"></script>
+    <script src="../_theme/js/highlight.js"></script>
+</head>
+
+<body>
+    <!-- IMPORTANT: Deleted style overwrite here which set a rigid width. -->
+    <div class="popupHtml" tabindex=""><img contenteditable="false" src="../01/breuningneu.jpg"><p contenteditable="false" data-link="Popup"><span>Konrad Breuning (1440 – 1517) gehörte zu einer einflussreichen Tübinger Familie und bekleidete eine Reihe wichtiger politischer Ämter, unter anderem war er Tübinger Vogt und Mitglied des Hofgerichts. Als Kaiser Maximilian den völlig unfähigen Herzog Eberhard II. absetzte, gehörte Breuning als früherer Berater und Vertrauter von Eberhard im Bart zu dem Zwischenregiment, das solange eingerichtet wurde, bis Herzog Ulrich alt genug war, um die Regierungsgeschäfte zu übernehmen. Als Ulrich angesichts der Bauernaufstände vom „Armen Konrad“ 1514 einen Landtag in Tübingen einberief, leitete Breuning die Verhandlungen. Es gelang ihm für das Bürgertum weit reichende politische Mitspracherechte und weitere Privilegien auszuhandeln. 1517 ließ ihn Herzog Ulrich wegen vermeintlichen Hochverrats hinrichten.</span></p></div>
+
+
+</body></html>

lib/card/test/example/01/breuning.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<content>
+	<img src="01/breuningneu.jpg" caption=" "/>
+
+	<text><![CDATA[
+		<p><span class="popuptext">Konrad Breuning (1440 – 1517) gehörte zu einer einflussreichen Tübinger Familie und bekleidete eine Reihe wichtiger politischer Ämter, unter anderem war er Tübinger Vogt und Mitglied des Hofgerichts. Als Kaiser Maximilian den völlig unfähigen Herzog Eberhard II. absetzte, gehörte Breuning als früherer Berater und Vertrauter von Eberhard im Bart zu dem Zwischenregiment, das solange eingerichtet wurde, bis Herzog Ulrich alt genug war, um die Regierungsgeschäfte zu übernehmen. Als Ulrich angesichts der Bauernaufstände vom „Armen Konrad“ 1514 einen Landtag in Tübingen einberief, leitete Breuning die Verhandlungen. Es gelang ihm für das Bürgertum weit reichende politische Mitspracherechte und weitere Privilegien auszuhandeln. 1517 ließ ihn Herzog Ulrich wegen vermeintlichen Hochverrats hinrichten.</span></p>
+	]]></text>
+</content>

lib/card/test/example/01/cotta.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html><html lang="en"><head>
+    <meta charset="utf-8">
+    <title data-innerhtml="title">Popup</title>
+    <link rel="stylesheet" href="../_theme/css/bulma.css">
+    <link rel="stylesheet" href="../_theme/css/card.css">
+    <link rel="stylesheet" href="../_theme/css/article.css">
+    <link rel="stylesheet" href="../_theme/css/highlight.css">
+    <link rel="stylesheet" href="../_theme/css/popup.css">
+    <!-- disable zooming -->
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
+    <script src="../_theme/js/all.js"></script>
+    <script src="../_theme/js/3rdparty/all.js"></script>
+    <script src="../_theme/js/card.js"></script>
+    <script src="../_theme/js/highlight.js"></script>
+</head>
+
+<body>
+    <!-- IMPORTANT: Deleted style overwrite here which set a rigid width. -->
+    <div class="popupHtml" tabindex=""><img contenteditable="false" src="../01/cottaneu.jpg"><p contenteditable="false" data-link="Popup"><span>Johann Friedrich Cotta (1764 in Stuttgart – 1832 in Stuttgart) betrieb in Tübingen einen der größten europäischen Verlage, gründete die erste überregionale Tageszeitung in Deutschland, erfand das Taschenbuch und setzte sich für Pressefreiheit und Urheberrecht ein. Als Landtagsabgeordneter machte er sich für die Freiheiten des Tübinger Vertrags stark.</span></p></div>
+
+
+</body></html>