From e2ea89cc0b3f35be32f628055faa1b09d7d0a45f Mon Sep 17 00:00:00 2001
From: Sebastian Kupke
Date: Tue, 15 Oct 2019 14:56:24 +0200
Subject: [PATCH] Added textAlpha and textActiveAlpha to Button and
ButtonGroup.
---
dist/iwmlib.js | 133 +++++++++---------
dist/iwmlib.pixi.js | 29 ++--
doc/out/AbstractPopup.html | 2 +-
doc/out/Badge.html | 2 +-
doc/out/BlurFilter.html | 2 +-
doc/out/Button.html | 84 ++++++++++-
doc/out/ButtonGroup.html | 84 ++++++++++-
doc/out/DeepZoomImage.html | 2 +-
doc/out/DeepZoomInfo.html | 2 +-
doc/out/Flippable.html | 2 +-
doc/out/FontInfo.html | 2 +-
doc/out/Hypenate.html | 2 +-
doc/out/InteractivePopup.html | 2 +-
...beledGraphics.exports.LabeledGraphics.html | 2 +-
doc/out/LabeledGraphics.html | 2 +-
doc/out/List.html | 2 +-
doc/out/Message.html | 2 +-
doc/out/MessageInteractivePopup.html | 2 +-
doc/out/MessageMessageInteractivePopup.html | 2 +-
doc/out/Modal.html | 2 +-
doc/out/ModalInteractivePopup.html | 2 +-
doc/out/ModalModalInteractivePopup.html | 2 +-
doc/out/PIXIApp.html | 2 +-
doc/out/Popup.html | 2 +-
doc/out/PopupInteractivePopup.html | 2 +-
doc/out/PopupMenu.html | 2 +-
doc/out/PopupMenuPopupInteractivePopup.html | 2 +-
...pupMenuPopupMenuPopupInteractivePopup.html | 2 +-
...nuPopupMenuPopupPopupInteractivePopup.html | 2 +-
.../PopupMenuPopupPopupInteractivePopup.html | 2 +-
doc/out/PopupPopupInteractivePopup.html | 2 +-
doc/out/Progress.html | 2 +-
doc/out/Scrollview.html | 2 +-
doc/out/Slider.html | 2 +-
doc/out/Switch.html | 2 +-
doc/out/TextLabel.TextLabel.html | 2 +-
doc/out/Theme.html | 78 +++++++++-
doc/out/ThemeDark.html | 4 +-
doc/out/ThemeLight.html | 4 +-
doc/out/ThemeRed.html | 4 +-
doc/out/TileQuadNode.html | 2 +-
doc/out/Tooltip.html | 2 +-
doc/out/UITest.html | 2 +-
doc/out/Volatile.html | 2 +-
doc/out/global.html | 2 +-
doc/out/index.html | 2 +-
doc/out/pixi_abstractpopup.js.html | 2 +-
doc/out/pixi_app.js.html | 2 +-
doc/out/pixi_badge.js.html | 2 +-
doc/out/pixi_blurfilter.js.html | 2 +-
doc/out/pixi_button.js.html | 8 +-
doc/out/pixi_buttongroup.js.html | 8 +-
doc/out/pixi_deepzoom_image.js.html | 2 +-
doc/out/pixi_flippable.js.html | 2 +-
doc/out/pixi_labeledgraphics.js.html | 2 +-
doc/out/pixi_list.js.html | 2 +-
doc/out/pixi_message.js.html | 2 +-
doc/out/pixi_modal.js.html | 2 +-
doc/out/pixi_popup.js.html | 2 +-
doc/out/pixi_popupmenu.js.html | 2 +-
doc/out/pixi_progress.js.html | 2 +-
doc/out/pixi_scrollview.js.html | 2 +-
doc/out/pixi_slider.js.html | 2 +-
doc/out/pixi_switch.js.html | 2 +-
doc/out/pixi_theme.js.html | 6 +-
doc/out/pixi_tooltip.js.html | 2 +-
doc/out/pixi_volatile.js.html | 2 +-
doc/out/uitest.js.html | 2 +-
lib/pixi/button.html | 4 +-
lib/pixi/button.js | 6 +
lib/pixi/buttongroup.html | 25 ++++
lib/pixi/buttongroup.js | 6 +
lib/pixi/theme.js | 4 +
73 files changed, 440 insertions(+), 161 deletions(-)
diff --git a/dist/iwmlib.js b/dist/iwmlib.js
index 55f6414..4d2024d 100644
--- a/dist/iwmlib.js
+++ b/dist/iwmlib.js
@@ -508,19 +508,6 @@
static toLine(event) {
return `${event.type} #${event.target.id} ${event.clientX} ${event.clientY}`
- let result = event.type;
- let selector = this.selector(event.target);
- result += ' selector: ' + selector;
- if (event.target != document.querySelector(selector)) console.log('Cannot resolve', selector);
- let keys = ['layerX', 'layerY', 'pageX', 'pageY', 'clientX', 'clientY'];
- for (let key of keys) {
- try {
- result += ' ' + key + ':' + event[key];
- } catch (e) {
- console.log('Invalid key: ' + key);
- }
- }
- return result
}
static compareExtractedWithSimulated() {
@@ -8245,7 +8232,7 @@
*/
class Card {
static setup(context, modules = []) {
- console.log('Setup Card...', modules);
+ if (this.debug) console.log('Setup Card...', modules);
/**
* This is required for the callback functions to work properly.
@@ -8269,28 +8256,55 @@
});
}
+ /**
+ * Removes the context and all registered components of the card.
+ *
+ * @static
+ * @param {DOMElement} context - The DOMElement representing the card.
+ * @memberof Card
+ */
static remove(context) {
+ //Remove all modules that are registered to the context.
for (let module of Object.values(context.module)) {
const moduleHasRemoveFunction = typeof module.remove === 'function';
- if (moduleHasRemoveFunction) module.remove();
+ if (moduleHasRemoveFunction) {
+ module.remove();
+ }
+ }
+
+ // Remove the context itself.
+ if (context.parentNode != null) {
+ context.parentNode.removeChild(context);
+ } else {
+ console.warn('Tried removing card but it has already been removed.');
}
}
+ /**
+ * Closes the card when an event happens on the card.
+ * Either the card is removed or the onClose callback is called.
+ *
+ * NOTE: Make sure to remove the card manually, when using the onClose callback!
+ *
+ * INFO: I just revisited this function and was wondering, why it takes the event as
+ * parameter instead of the context. The problem is that the card template defines
+ * the functions inside the HTML. When loaded, the HTML attributes need to be adjusted
+ * and the functions are overwritten. Using during the post processing step withing the postProcessResponseText function.
+ *
+ * @static
+ * @param {Event} event - event triggered on the car
+ * @memberof Card
+ */
static close(event) {
let context = this.getContext(event.target);
- if (context.onClose != null) {
- context.onClose();
- } else {
- this.remove(context);
+ if (context) {
+ if (context.onClose != null) {
+ context.onClose();
+ } else {
+ this.remove(context);
+ }
}
-
- // console.error("Remove")
- // let context = this.getContext(event.target)
-
- // if (context) {
- // this.remove(context)
- // } else console.error('Could not find context!', event.target)
}
/**
@@ -8324,21 +8338,6 @@
context.onClose = null;
}
- /**
- *
- *
- * @static
- * @param {*} event
- * @memberof Card
- */
- static remove(context) {
- if (context.parentNode != null) {
- context.parentNode.removeChild(context);
- } else {
- console.error('Tried removing card but it was already removed.');
- }
- }
-
/**
* Replaces a set of attributes using a provided function.
*
@@ -8462,7 +8461,7 @@
*/
return html.replace(
/<\s*(a|video|img|image|circle)\s(.*?)(xlink:href|href|src)\s*=\s*["'](\..*?)["']\s*(.*?)>/g,
- function(data) {
+ function() {
let path = that._getRelativePath(arguments[4]);
const tag = `<${arguments[1]} ${arguments[2]} ${arguments[3]}="${path}" ${arguments[5]}>`;
/* if (that.debug) */ console.log('Adjusted: ', tag);
@@ -8719,7 +8718,7 @@
popup.placeAt(position);
- InteractionMapper.on(this.interactionType, popup.element, e => {
+ InteractionMapper.on(this.interactionType, popup.element, () => {
this._cleanup(context);
});
@@ -8736,6 +8735,9 @@
return promise
}
+ /**
+ * LEGACY but this may be required still for the editor
+ */
static _overlayCleanup(context, overlay) {
/**
* The cleanup functionality is now covered by the _cleanup function.
@@ -8890,7 +8892,7 @@
*/
static _activateCorrespondingHighlights(context, node, parent) {
let highlightId = node.getAttribute('data-highlight-id');
- // console.log("Request Highlight: " + highlightId)
+ if (this.debug) console.log('Request Highlight: ' + highlightId);
let correspondingHighlights = [];
if (highlightId) {
@@ -8946,7 +8948,7 @@
}
static _calculateCenterRelativeTo(target, image) {
- console.log('_calculateCenterRelativeTo', target, image);
+ // console.log('_calculateCenterRelativeTo', target, image)
let bbox = image.getBBox();
let width = bbox.width;
let height = bbox.height;
@@ -8957,7 +8959,7 @@
let x = cx.endsWith('%') ? (parseFloat(cx) / 100) * width : cx;
let y = cy.endsWith('%') ? (parseFloat(cy) / 100) * height : cx;
- console.log({ x, y, width, height, radius });
+ // console.log({ x, y, width, height, radius })
return { x, y }
}
@@ -9004,8 +9006,6 @@
let radius = parseFloat(node.getAttribute('r'));
let svgRoot = node.closest('svg');
- let image = svgRoot.querySelector('image');
- //let position = Card._calculateCenterRelativeTo(node, image)
/*
As the popup is appended directly to the card. We have to
@@ -9036,7 +9036,7 @@
.then(content => {
this._openPopup(context, src, local, content, {
highlight: node,
- closeCommand: (popup, callback) => {
+ closeCommand: popup => {
this._overlayCleanup(context, overlay);
popup.remove();
}
@@ -9071,7 +9071,7 @@
let content = { html: html.body.innerHTML, selector };
resolve(content);
} else {
- reject(` Popup request failed (Code: ${xhr.status}): Could not load resource: ${src}`);
+ reject(` Popup request failed (Code: ${xhr.status}): Could not load resource: ${source}`);
}
}
};
@@ -9247,7 +9247,7 @@
// It's just an indicator that an action is possible. The click must be
// captured from the whole subcard.
- InteractionMapper.on(this.interactionType, zoomedFig, event => {
+ InteractionMapper.on(this.interactionType, zoomedFig, () => {
this._cleanup(wrapper);
});
@@ -9363,7 +9363,7 @@
iconClone.src = iconClone.src.replace('info.svg', 'close.svg');
iconClone.style.zIndex = 1000;
iconClone.classList.add('zoomed-icon');
- iconClone.onclick = event => {
+ iconClone.onclick = () => {
zoomIcon.style.display = savedDisplay;
iconClone.remove();
zoomIcon.setAttribute('onclick', savedOnClick);
@@ -9401,7 +9401,7 @@
}
}
};
- zoomable.onmouseup = event => {
+ zoomable.onmouseup = () => {
zoomable.dragging = false;
};
@@ -9511,7 +9511,7 @@
/* Removes the 'default' cleanup on the card */
clone.removeAttribute('onclick');
- InteractionMapper.on(this.interactionType, clone, event => {
+ InteractionMapper.on(this.interactionType, clone, () => {
this._cleanup(context);
});
@@ -9561,7 +9561,6 @@
};
if (this.dynamicHeight) {
- let targetHeight = subcardContent.offsetHeight;
subcardContent.classList.add('dynamic-height');
/**
* Scale the content from 100% to it's target size.
@@ -9569,6 +9568,8 @@
// TweenLite.set(subcardContent, {
// height: "100%"
// })
+ //
+ // let targetHeight = subcardContent.offsetHeight
// TweenLite.to(subcardContent, Card.animation.articleTransition, {
// height: targetHeight + "px"
// })
@@ -9641,7 +9642,6 @@
if (iconClone.tagName == 'img') {
iconClone.src = iconClone.src.replace('info.svg', 'close.svg');
}
- //console.log("ICON: ", iconClone)
iconClone.classList.remove('info');
iconClone.classList.add('close', 'view-button', 'transparent-background');
@@ -9694,7 +9694,7 @@
clonedSubcard,
clonedArticle,
- { eventElements = [], src = null } = []
+ { src = null } = []
) {
let indexbox = context.querySelector('.mainview');
let padding = parseInt(this.css(indexbox, 'padding'));
@@ -9717,7 +9717,7 @@
let strparts = src.split('/');
let cardID = strparts[strparts.length - 2];
let cardName = strparts[strparts.length - 1];
- strparts = card.className.split(' ');
+ strparts = context.className.split(' ');
let cardType = strparts[1];
let msg = 'Card: ' + cardID + ': closeTopic: ' + cardType + ', ' + cardName;
console.log('Logging:', msg);
@@ -9746,9 +9746,10 @@
};
if (this.dynamicHeight) {
- TweenLite.to(subcardContent, this.animation.articleTransition, {
- height: '100%'
- });
+ console.error('Dynamic height is not implemented yet.');
+ // TweenLite.to(subcardContent, this.animation.articleTransition, {
+ // height: '100%'
+ // })
}
let maxWidth = this.css(subcard, 'max-width');
@@ -9829,14 +9830,14 @@
* @memberof Card
*/
static openIndexCard(event, src) {
- console.log('openIndexCard', src);
+ if (this.debug) console.log('openIndexCard', src);
/*
* Called by the expandIndexCard(...)
*/
let target = event.target;
const saveCallback = url => {
let handler = `Card.openIndexCard(event, '${url}')`;
- console.log('File has changed', target, handler);
+ if (this.debug) console.log('File has changed', target, handler);
//TODO If this is required, it should be accessing the interaction type.
target.setAttribute('onclick', handler);
@@ -10192,7 +10193,7 @@
}
static _subcardChanged(context, closed = false) {
- for (let [key, module] of Object.entries(context.module)) {
+ for (let module of Object.values(context.module)) {
if (module.subcardChanged) {
module.subcardChanged(closed);
}
@@ -10249,7 +10250,7 @@
}
/**
- * Unregisters all events on the infocard.
+ * Unregister all events on the infocard.
*
*
* @static
@@ -10263,7 +10264,7 @@
}
Card.id = 0;
- Card.debug = true;
+ Card.debug = false;
Card._relativePath = '';
Card.scatterContainer = null;
Card.interactionType = 'tap';
diff --git a/dist/iwmlib.pixi.js b/dist/iwmlib.pixi.js
index 09cd33d..f255d3c 100644
--- a/dist/iwmlib.pixi.js
+++ b/dist/iwmlib.pixi.js
@@ -81,6 +81,8 @@
* 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
@@ -109,6 +111,8 @@
strokeActive: color2,
strokeActiveWidth: 0.6,
strokeActiveAlpha: 1,
+ textAlpha: 1,
+ textActiveAlpha: 1,
iconColor: color2,
iconColorActive: colorPrimary,
background: color1
@@ -1331,19 +1335,6 @@
static toLine(event) {
return `${event.type} #${event.target.id} ${event.clientX} ${event.clientY}`
- let result = event.type;
- let selector = this.selector(event.target);
- result += ' selector: ' + selector;
- if (event.target != document.querySelector(selector)) console.log('Cannot resolve', selector);
- let keys = ['layerX', 'layerY', 'pageX', 'pageY', 'clientX', 'clientY'];
- for (let key of keys) {
- try {
- result += ' ' + key + ':' + event[key];
- } catch (e) {
- console.log('Invalid key: ' + key);
- }
- }
- return result
}
static compareExtractedWithSimulated() {
@@ -2311,6 +2302,8 @@
* 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
@@ -2368,6 +2361,8 @@
strokeActiveAlpha: theme.strokeActiveAlpha,
textStyle: {},
textStyleActive: {},
+ textAlpha: theme.textAlpha,
+ textActiveAlpha: theme.textActiveAlpha,
style: 'default',
radius: theme.radius,
disabled: false,
@@ -2796,10 +2791,12 @@
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;
}
}
@@ -3006,6 +3003,8 @@
* 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
@@ -3056,6 +3055,8 @@
strokeActiveAlpha: theme.strokeActiveAlpha,
textStyle: {},
textStyleActive: {},
+ textAlpha: theme.textAlpha,
+ textActiveAlpha: theme.textActiveAlpha,
style: 'default',
radius: theme.radius,
disabled: null,
@@ -3134,6 +3135,8 @@
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) {
diff --git a/doc/out/AbstractPopup.html b/doc/out/AbstractPopup.html
index 072ec74..952c4f8 100644
--- a/doc/out/AbstractPopup.html
+++ b/doc/out/AbstractPopup.html
@@ -2918,7 +2918,7 @@ a string, a number or a PIXI.Text object.
diff --git a/doc/out/Badge.html b/doc/out/Badge.html
index 66ee8ff..1429c70 100644
--- a/doc/out/Badge.html
+++ b/doc/out/Badge.html
@@ -2374,7 +2374,7 @@ a string, a number or a PIXI.Text object.
diff --git a/doc/out/BlurFilter.html b/doc/out/BlurFilter.html
index 5cb0e61..7dccb87 100644
--- a/doc/out/BlurFilter.html
+++ b/doc/out/BlurFilter.html
@@ -1798,7 +1798,7 @@ app.scene.filters = [blurFilter]
diff --git a/doc/out/Button.html b/doc/out/Button.html
index a4569c1..269d87b 100644
--- a/doc/out/Button.html
+++ b/doc/out/Button.html
@@ -1471,7 +1471,7 @@
@@ -2467,6 +2467,78 @@ button is activated. See PIXI.TextStyle for possible options.
+
+
+ textAlpha |
+
+
+
+
+
+number
+
+
+
+ |
+
+
+
+
+ Theme.textAlpha
+
+ |
+
+
+
+
+
+ optional
+
+
+
+
+
+ The alpha value of the text. |
+
+
+
+
+
+
+ textActiveAlpha |
+
+
+
+
+
+number
+
+
+
+ |
+
+
+
+
+ Theme.textActiveAlpha
+
+ |
+
+
+
+
+
+ optional
+
+
+
+
+
+ The alpha value of the text when activated. |
+
+
+
+
style |
@@ -3375,7 +3447,7 @@ the tint property of the icon sprite.
@@ -3499,7 +3571,7 @@ the tint property of the icon sprite.
@@ -3604,7 +3676,7 @@ the tint property of the icon sprite.
@@ -3709,7 +3781,7 @@ the tint property of the icon sprite.
@@ -3816,7 +3888,7 @@ the tint property of the icon sprite.
diff --git a/doc/out/ButtonGroup.html b/doc/out/ButtonGroup.html
index df749cb..364838e 100644
--- a/doc/out/ButtonGroup.html
+++ b/doc/out/ButtonGroup.html
@@ -1471,7 +1471,7 @@
@@ -2571,6 +2571,78 @@ button is activated. See PIXI.TextStyle for possible options.
+
+
+ textAlpha |
+
+
+
+
+
+number
+
+
+
+ |
+
+
+
+
+ Theme.textAlpha
+
+ |
+
+
+
+
+
+ optional
+
+
+
+
+
+ Button: The alpha value of the text. |
+
+
+
+
+
+
+ textActiveAlpha |
+
+
+
+
+
+number
+
+
+
+ |
+
+
+
+
+ Theme.textActiveAlpha
+
+ |
+
+
+
+
+
+ optional
+
+
+
+
+
+ Button: The alpha value of the text when activated. |
+
+
+
+
style |
@@ -3137,7 +3209,7 @@ app.scene.addChild(buttonGroup)
@@ -3261,7 +3333,7 @@ app.scene.addChild(buttonGroup)
@@ -3366,7 +3438,7 @@ app.scene.addChild(buttonGroup)
@@ -3471,7 +3543,7 @@ app.scene.addChild(buttonGroup)
@@ -3578,7 +3650,7 @@ app.scene.addChild(buttonGroup)
diff --git a/doc/out/DeepZoomImage.html b/doc/out/DeepZoomImage.html
index fe3380f..9ce1772 100644
--- a/doc/out/DeepZoomImage.html
+++ b/doc/out/DeepZoomImage.html
@@ -5096,7 +5096,7 @@ i.e. after loading a single tile
diff --git a/doc/out/DeepZoomInfo.html b/doc/out/DeepZoomInfo.html
index cfce512..2604e01 100644
--- a/doc/out/DeepZoomInfo.html
+++ b/doc/out/DeepZoomInfo.html
@@ -2609,7 +2609,7 @@ on completion.
diff --git a/doc/out/Flippable.html b/doc/out/Flippable.html
index 717337d..a42d993 100644
--- a/doc/out/Flippable.html
+++ b/doc/out/Flippable.html
@@ -2512,7 +2512,7 @@ front.on('click', event => flippable.toggle())
diff --git a/doc/out/FontInfo.html b/doc/out/FontInfo.html
index a05cce5..9d53ea8 100644
--- a/doc/out/FontInfo.html
+++ b/doc/out/FontInfo.html
@@ -1559,7 +1559,7 @@
diff --git a/doc/out/Hypenate.html b/doc/out/Hypenate.html
index 2afb923..2f42111 100644
--- a/doc/out/Hypenate.html
+++ b/doc/out/Hypenate.html
@@ -1761,7 +1761,7 @@
diff --git a/doc/out/InteractivePopup.html b/doc/out/InteractivePopup.html
index c83a037..54db595 100644
--- a/doc/out/InteractivePopup.html
+++ b/doc/out/InteractivePopup.html
@@ -2343,7 +2343,7 @@ a string, a number or a PIXI.Text object.
diff --git a/doc/out/LabeledGraphics.exports.LabeledGraphics.html b/doc/out/LabeledGraphics.exports.LabeledGraphics.html
index cdcd441..c43d97a 100644
--- a/doc/out/LabeledGraphics.exports.LabeledGraphics.html
+++ b/doc/out/LabeledGraphics.exports.LabeledGraphics.html
@@ -1561,7 +1561,7 @@
diff --git a/doc/out/LabeledGraphics.html b/doc/out/LabeledGraphics.html
index a434afb..b5596e3 100644
--- a/doc/out/LabeledGraphics.html
+++ b/doc/out/LabeledGraphics.html
@@ -2626,7 +2626,7 @@ than wanted
diff --git a/doc/out/List.html b/doc/out/List.html
index 728b66f..691b501 100644
--- a/doc/out/List.html
+++ b/doc/out/List.html
@@ -2585,7 +2585,7 @@ app.scene.addChild(list)
diff --git a/doc/out/Message.html b/doc/out/Message.html
index 4d49272..17418af 100644
--- a/doc/out/Message.html
+++ b/doc/out/Message.html
@@ -2441,7 +2441,7 @@ a string, a number or a PIXI.Text object.
diff --git a/doc/out/MessageInteractivePopup.html b/doc/out/MessageInteractivePopup.html
index e02297a..0ffe7c2 100644
--- a/doc/out/MessageInteractivePopup.html
+++ b/doc/out/MessageInteractivePopup.html
@@ -1789,7 +1789,7 @@ like Popup, Message...
diff --git a/doc/out/MessageMessageInteractivePopup.html b/doc/out/MessageMessageInteractivePopup.html
index 4d36f23..49e1601 100644
--- a/doc/out/MessageMessageInteractivePopup.html
+++ b/doc/out/MessageMessageInteractivePopup.html
@@ -1789,7 +1789,7 @@ like Popup, Message...
diff --git a/doc/out/Modal.html b/doc/out/Modal.html
index f79795a..a716c7d 100644
--- a/doc/out/Modal.html
+++ b/doc/out/Modal.html
@@ -2342,7 +2342,7 @@ a string or a PIXI.Text object.
diff --git a/doc/out/ModalInteractivePopup.html b/doc/out/ModalInteractivePopup.html
index 019958d..57d8c70 100644
--- a/doc/out/ModalInteractivePopup.html
+++ b/doc/out/ModalInteractivePopup.html
@@ -1789,7 +1789,7 @@ like Popup, Message...
diff --git a/doc/out/ModalModalInteractivePopup.html b/doc/out/ModalModalInteractivePopup.html
index 650e04f..ff978ae 100644
--- a/doc/out/ModalModalInteractivePopup.html
+++ b/doc/out/ModalModalInteractivePopup.html
@@ -1789,7 +1789,7 @@ like Popup, Message...
diff --git a/doc/out/PIXIApp.html b/doc/out/PIXIApp.html
index 7eae6c7..16e0e55 100644
--- a/doc/out/PIXIApp.html
+++ b/doc/out/PIXIApp.html
@@ -5743,7 +5743,7 @@ rejected with an error.
diff --git a/doc/out/Popup.html b/doc/out/Popup.html
index ae04830..1e140f3 100644
--- a/doc/out/Popup.html
+++ b/doc/out/Popup.html
@@ -2336,7 +2336,7 @@ a string, a number or a PIXI.Text object.
diff --git a/doc/out/PopupInteractivePopup.html b/doc/out/PopupInteractivePopup.html
index b02e044..2e93264 100644
--- a/doc/out/PopupInteractivePopup.html
+++ b/doc/out/PopupInteractivePopup.html
@@ -1789,7 +1789,7 @@ like Popup, Message...
diff --git a/doc/out/PopupMenu.html b/doc/out/PopupMenu.html
index c53169c..69819b3 100644
--- a/doc/out/PopupMenu.html
+++ b/doc/out/PopupMenu.html
@@ -2390,7 +2390,7 @@ a string, a number or a PIXI.Text object.
diff --git a/doc/out/PopupMenuPopupInteractivePopup.html b/doc/out/PopupMenuPopupInteractivePopup.html
index 03ac19e..580e21e 100644
--- a/doc/out/PopupMenuPopupInteractivePopup.html
+++ b/doc/out/PopupMenuPopupInteractivePopup.html
@@ -1789,7 +1789,7 @@ like Popup, Message...
diff --git a/doc/out/PopupMenuPopupMenuPopupInteractivePopup.html b/doc/out/PopupMenuPopupMenuPopupInteractivePopup.html
index b1af2b1..6d3825a 100644
--- a/doc/out/PopupMenuPopupMenuPopupInteractivePopup.html
+++ b/doc/out/PopupMenuPopupMenuPopupInteractivePopup.html
@@ -1789,7 +1789,7 @@ like Popup, Message...
diff --git a/doc/out/PopupMenuPopupMenuPopupPopupInteractivePopup.html b/doc/out/PopupMenuPopupMenuPopupPopupInteractivePopup.html
index 1940cf7..f703e01 100644
--- a/doc/out/PopupMenuPopupMenuPopupPopupInteractivePopup.html
+++ b/doc/out/PopupMenuPopupMenuPopupPopupInteractivePopup.html
@@ -1789,7 +1789,7 @@ like Popup, Message...
diff --git a/doc/out/PopupMenuPopupPopupInteractivePopup.html b/doc/out/PopupMenuPopupPopupInteractivePopup.html
index f48b4e6..340aacb 100644
--- a/doc/out/PopupMenuPopupPopupInteractivePopup.html
+++ b/doc/out/PopupMenuPopupPopupInteractivePopup.html
@@ -1789,7 +1789,7 @@ like Popup, Message...
diff --git a/doc/out/PopupPopupInteractivePopup.html b/doc/out/PopupPopupInteractivePopup.html
index 819c1fa..3968066 100644
--- a/doc/out/PopupPopupInteractivePopup.html
+++ b/doc/out/PopupPopupInteractivePopup.html
@@ -1789,7 +1789,7 @@ like Popup, Message...
diff --git a/doc/out/Progress.html b/doc/out/Progress.html
index d78c378..98ad555 100644
--- a/doc/out/Progress.html
+++ b/doc/out/Progress.html
@@ -2875,7 +2875,7 @@ app.scene.addChild(progress)
diff --git a/doc/out/Scrollview.html b/doc/out/Scrollview.html
index c6106b2..ccfb9f6 100644
--- a/doc/out/Scrollview.html
+++ b/doc/out/Scrollview.html
@@ -1707,7 +1707,7 @@ app.loader
diff --git a/doc/out/Slider.html b/doc/out/Slider.html
index 0c40b3e..cef8b45 100644
--- a/doc/out/Slider.html
+++ b/doc/out/Slider.html
@@ -2966,7 +2966,7 @@ app.scene.addChild(slider)
diff --git a/doc/out/Switch.html b/doc/out/Switch.html
index 4305ddc..1d73de9 100644
--- a/doc/out/Switch.html
+++ b/doc/out/Switch.html
@@ -3396,7 +3396,7 @@ app.scene.addChild(switch1)
diff --git a/doc/out/TextLabel.TextLabel.html b/doc/out/TextLabel.TextLabel.html
index 8d1c737..bddde53 100644
--- a/doc/out/TextLabel.TextLabel.html
+++ b/doc/out/TextLabel.TextLabel.html
@@ -1690,7 +1690,7 @@
diff --git a/doc/out/Theme.html b/doc/out/Theme.html
index 8a8d700..31e5b60 100644
--- a/doc/out/Theme.html
+++ b/doc/out/Theme.html
@@ -1471,7 +1471,7 @@
@@ -2884,6 +2884,78 @@ is used for large actived text.
+
+
+
+ textAlpha |
+
+
+
+
+
+number
+
+
+
+ |
+
+
+
+
+ Theme.textAlpha
+
+ |
+
+
+
+
+
+ optional
+
+
+
+
+
+ The alpha value of text. |
+
+
+
+
+
+
+ textActiveAlpha |
+
+
+
+
+
+number
+
+
+
+ |
+
+
+
+
+ Theme.textActiveAlpha
+
+ |
+
+
+
+
+
+ optional
+
+
+
+
+
+ The alpha value of text when activated. |
+
+
+
@@ -3005,7 +3077,7 @@ const app = new PIXIApp({
@@ -3165,7 +3237,7 @@ const app = new PIXIApp({
diff --git a/doc/out/ThemeDark.html b/doc/out/ThemeDark.html
index b106cc9..0c33ad7 100644
--- a/doc/out/ThemeDark.html
+++ b/doc/out/ThemeDark.html
@@ -1471,7 +1471,7 @@
@@ -1586,7 +1586,7 @@ const app = new PIXIApp({
diff --git a/doc/out/ThemeLight.html b/doc/out/ThemeLight.html
index d383b36..16206ed 100644
--- a/doc/out/ThemeLight.html
+++ b/doc/out/ThemeLight.html
@@ -1472,7 +1472,7 @@ The color1 is set to 0xf6f6f6, color2 to 0x282828.
@@ -1598,7 +1598,7 @@ const app = new PIXIApp({
diff --git a/doc/out/ThemeRed.html b/doc/out/ThemeRed.html
index b2ab865..903e5c3 100644
--- a/doc/out/ThemeRed.html
+++ b/doc/out/ThemeRed.html
@@ -1472,7 +1472,7 @@ The primaryColor is set to 0xd92f31.
@@ -1598,7 +1598,7 @@ const app = new PIXIApp({
diff --git a/doc/out/TileQuadNode.html b/doc/out/TileQuadNode.html
index 5dafb89..e46f7e7 100644
--- a/doc/out/TileQuadNode.html
+++ b/doc/out/TileQuadNode.html
@@ -2050,7 +2050,7 @@ an indicator of tiles to free.
diff --git a/doc/out/Tooltip.html b/doc/out/Tooltip.html
index 4c4e7d1..4a764b8 100644
--- a/doc/out/Tooltip.html
+++ b/doc/out/Tooltip.html
@@ -2512,7 +2512,7 @@ a string, a number or a PIXI.Text object.
diff --git a/doc/out/UITest.html b/doc/out/UITest.html
index b215e59..6e74ce9 100644
--- a/doc/out/UITest.html
+++ b/doc/out/UITest.html
@@ -4183,7 +4183,7 @@ test.start()
diff --git a/doc/out/Volatile.html b/doc/out/Volatile.html
index f9809a8..3377785 100644
--- a/doc/out/Volatile.html
+++ b/doc/out/Volatile.html
@@ -2099,7 +2099,7 @@ app.scene.addChild(button)
diff --git a/doc/out/global.html b/doc/out/global.html
index 888c8cd..37eef3d 100644
--- a/doc/out/global.html
+++ b/doc/out/global.html
@@ -3320,7 +3320,7 @@
diff --git a/doc/out/index.html b/doc/out/index.html
index 55f6208..503a256 100644
--- a/doc/out/index.html
+++ b/doc/out/index.html
@@ -1485,7 +1485,7 @@
diff --git a/doc/out/pixi_abstractpopup.js.html b/doc/out/pixi_abstractpopup.js.html
index 4c9f0a0..2ad910b 100644
--- a/doc/out/pixi_abstractpopup.js.html
+++ b/doc/out/pixi_abstractpopup.js.html
@@ -1808,7 +1808,7 @@ export default class AbstractPopup extends PIXI.Graphics {
diff --git a/doc/out/pixi_app.js.html b/doc/out/pixi_app.js.html
index e2bf574..5b71f5f 100644
--- a/doc/out/pixi_app.js.html
+++ b/doc/out/pixi_app.js.html
@@ -2188,7 +2188,7 @@ class FpsDisplay extends PIXI.Graphics {
diff --git a/doc/out/pixi_badge.js.html b/doc/out/pixi_badge.js.html
index a740967..2e41aab 100644
--- a/doc/out/pixi_badge.js.html
+++ b/doc/out/pixi_badge.js.html
@@ -1569,7 +1569,7 @@ export default class Badge extends AbstractPopup {
diff --git a/doc/out/pixi_blurfilter.js.html b/doc/out/pixi_blurfilter.js.html
index 56c9696..7420b92 100644
--- a/doc/out/pixi_blurfilter.js.html
+++ b/doc/out/pixi_blurfilter.js.html
@@ -1733,7 +1733,7 @@ class TiltShiftYFilter extends TiltShiftAxisFilter {
diff --git a/doc/out/pixi_button.js.html b/doc/out/pixi_button.js.html
index 1e1163a..5f142ae 100644
--- a/doc/out/pixi_button.js.html
+++ b/doc/out/pixi_button.js.html
@@ -1527,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
@@ -1584,6 +1586,8 @@ export default class Button extends PIXI.Container {
strokeActiveAlpha: theme.strokeActiveAlpha,
textStyle: {},
textStyleActive: {},
+ textAlpha: theme.textAlpha,
+ textActiveAlpha: theme.textActiveAlpha,
style: 'default',
radius: theme.radius,
disabled: false,
@@ -2012,10 +2016,12 @@ export default class Button extends PIXI.Container {
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
}
}
@@ -2171,7 +2177,7 @@ export default class Button extends PIXI.Container {
diff --git a/doc/out/pixi_buttongroup.js.html b/doc/out/pixi_buttongroup.js.html
index e146e01..5182eec 100644
--- a/doc/out/pixi_buttongroup.js.html
+++ b/doc/out/pixi_buttongroup.js.html
@@ -1511,6 +1511,8 @@ export default class ButtonGroup extends PIXI.Container {
* 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
@@ -1561,6 +1563,8 @@ export default class ButtonGroup extends PIXI.Container {
strokeActiveAlpha: theme.strokeActiveAlpha,
textStyle: {},
textStyleActive: {},
+ textAlpha: theme.textAlpha,
+ textActiveAlpha: theme.textActiveAlpha,
style: 'default',
radius: theme.radius,
disabled: null,
@@ -1639,6 +1643,8 @@ export default class ButtonGroup extends PIXI.Container {
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) {
@@ -2174,7 +2180,7 @@ export default class ButtonGroup extends PIXI.Container {
diff --git a/doc/out/pixi_deepzoom_image.js.html b/doc/out/pixi_deepzoom_image.js.html
index 876727c..ad33630 100644
--- a/doc/out/pixi_deepzoom_image.js.html
+++ b/doc/out/pixi_deepzoom_image.js.html
@@ -2512,7 +2512,7 @@ export class DeepZoomImage extends PIXI.Container {
diff --git a/doc/out/pixi_flippable.js.html b/doc/out/pixi_flippable.js.html
index ccccffa..4cfe37e 100644
--- a/doc/out/pixi_flippable.js.html
+++ b/doc/out/pixi_flippable.js.html
@@ -1906,7 +1906,7 @@ export default class Flippable extends PIXI.projection.Camera3d {
diff --git a/doc/out/pixi_labeledgraphics.js.html b/doc/out/pixi_labeledgraphics.js.html
index f832b38..2146719 100644
--- a/doc/out/pixi_labeledgraphics.js.html
+++ b/doc/out/pixi_labeledgraphics.js.html
@@ -1855,7 +1855,7 @@ export class BitmapLabeledGraphics extends LabeledGraphics {
diff --git a/doc/out/pixi_list.js.html b/doc/out/pixi_list.js.html
index c2b3d34..d87dd33 100644
--- a/doc/out/pixi_list.js.html
+++ b/doc/out/pixi_list.js.html
@@ -1834,7 +1834,7 @@ export default class List extends PIXI.Container {
diff --git a/doc/out/pixi_message.js.html b/doc/out/pixi_message.js.html
index a5f19bc..f350309 100644
--- a/doc/out/pixi_message.js.html
+++ b/doc/out/pixi_message.js.html
@@ -1583,7 +1583,7 @@ export default class Message extends InteractivePopup {
diff --git a/doc/out/pixi_modal.js.html b/doc/out/pixi_modal.js.html
index 616bf22..c418ca2 100644
--- a/doc/out/pixi_modal.js.html
+++ b/doc/out/pixi_modal.js.html
@@ -1664,7 +1664,7 @@ export default class Modal extends PIXI.Container {
diff --git a/doc/out/pixi_popup.js.html b/doc/out/pixi_popup.js.html
index 906daad..f42a9b9 100644
--- a/doc/out/pixi_popup.js.html
+++ b/doc/out/pixi_popup.js.html
@@ -1674,7 +1674,7 @@ export default class Popup extends InteractivePopup {
diff --git a/doc/out/pixi_popupmenu.js.html b/doc/out/pixi_popupmenu.js.html
index 1871c53..e091df9 100644
--- a/doc/out/pixi_popupmenu.js.html
+++ b/doc/out/pixi_popupmenu.js.html
@@ -1577,7 +1577,7 @@ export default class PopupMenu extends Popup {
diff --git a/doc/out/pixi_progress.js.html b/doc/out/pixi_progress.js.html
index 1830228..7b20d5b 100644
--- a/doc/out/pixi_progress.js.html
+++ b/doc/out/pixi_progress.js.html
@@ -1759,7 +1759,7 @@ export default class Progress extends PIXI.Container {
diff --git a/doc/out/pixi_scrollview.js.html b/doc/out/pixi_scrollview.js.html
index f83a6f2..ff7383a 100644
--- a/doc/out/pixi_scrollview.js.html
+++ b/doc/out/pixi_scrollview.js.html
@@ -1518,7 +1518,7 @@ export default class Scrollview extends Scrollbox {
diff --git a/doc/out/pixi_slider.js.html b/doc/out/pixi_slider.js.html
index e029f37..d24baea 100644
--- a/doc/out/pixi_slider.js.html
+++ b/doc/out/pixi_slider.js.html
@@ -1923,7 +1923,7 @@ export default class Slider extends PIXI.Container {
diff --git a/doc/out/pixi_switch.js.html b/doc/out/pixi_switch.js.html
index 1fee27e..4819347 100644
--- a/doc/out/pixi_switch.js.html
+++ b/doc/out/pixi_switch.js.html
@@ -1977,7 +1977,7 @@ export default class Switch extends PIXI.Container {
diff --git a/doc/out/pixi_theme.js.html b/doc/out/pixi_theme.js.html
index 1c92061..3f0773e 100644
--- a/doc/out/pixi_theme.js.html
+++ b/doc/out/pixi_theme.js.html
@@ -1524,6 +1524,8 @@ 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
@@ -1552,6 +1554,8 @@ export default class Theme {
strokeActive: color2,
strokeActiveWidth: 0.6,
strokeActiveAlpha: 1,
+ textAlpha: 1,
+ textActiveAlpha: 1,
iconColor: color2,
iconColorActive: colorPrimary,
background: color1
@@ -1718,7 +1722,7 @@ export class ThemeRed extends Theme {
diff --git a/doc/out/pixi_tooltip.js.html b/doc/out/pixi_tooltip.js.html
index 057a7f0..905b624 100644
--- a/doc/out/pixi_tooltip.js.html
+++ b/doc/out/pixi_tooltip.js.html
@@ -1611,7 +1611,7 @@ export default class Tooltip extends AbstractPopup {
diff --git a/doc/out/pixi_volatile.js.html b/doc/out/pixi_volatile.js.html
index 327d844..95642b6 100644
--- a/doc/out/pixi_volatile.js.html
+++ b/doc/out/pixi_volatile.js.html
@@ -1615,7 +1615,7 @@ export default class Volatile {
diff --git a/doc/out/uitest.js.html b/doc/out/uitest.js.html
index d9e855a..5cc5ea4 100644
--- a/doc/out/uitest.js.html
+++ b/doc/out/uitest.js.html
@@ -2466,7 +2466,7 @@ class Event {
diff --git a/lib/pixi/button.html b/lib/pixi/button.html
index 49d9f65..0812949 100644
--- a/lib/pixi/button.html
+++ b/lib/pixi/button.html
@@ -317,7 +317,9 @@ const button26 = new Button({
strokeActive: 0x28a745,
textStyleActive: {
fill: 0x28a745
- }
+ },
+ textAlpha: .2,
+ textActiveAlpha: .6
})
app.scene.addChild(button1, button2, button3, button4, button5, button6)
diff --git a/lib/pixi/button.js b/lib/pixi/button.js
index ba322c0..3200451 100644
--- a/lib/pixi/button.js
+++ b/lib/pixi/button.js
@@ -81,6 +81,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
@@ -138,6 +140,8 @@ export default class Button extends PIXI.Container {
strokeActiveAlpha: theme.strokeActiveAlpha,
textStyle: {},
textStyleActive: {},
+ textAlpha: theme.textAlpha,
+ textActiveAlpha: theme.textActiveAlpha,
style: 'default',
radius: theme.radius,
disabled: false,
@@ -566,10 +570,12 @@ export default class Button extends PIXI.Container {
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
}
}
diff --git a/lib/pixi/buttongroup.html b/lib/pixi/buttongroup.html
index 3c8c872..93c5b36 100644
--- a/lib/pixi/buttongroup.html
+++ b/lib/pixi/buttongroup.html
@@ -339,12 +339,37 @@ const buttonGroup19 = new ButtonGroup({
app
})
+const buttonGroup20 = new ButtonGroup({
+ x: 10,
+ y: 1520,
+ type: 'checkbox',
+ buttons: [
+ {label: 'one'},
+ {label: 'two'},
+ {label: 'three'}
+ ],
+ textAlpha: .7,
+ textActiveAlpha: .2
+})
+
+const buttonGroup21 = new ButtonGroup({
+ x: 300,
+ y: 1520,
+ type: 'checkbox',
+ buttons: [
+ {label: 'eins', textAlpha: 1, textActiveAlpha: .2},
+ {label: 'zwei', textAlpha: .2, textActiveAlpha: 1},
+ {label: 'drei'}
+ ]
+})
+
app.scene.addChild(buttonGroup1, buttonGroup2, buttonGroup3)
app.scene.addChild(buttonGroup4)
app.scene.addChild(buttonGroup5, buttonGroup6)
app.scene.addChild(buttonGroup7, buttonGroup8)
app.scene.addChild(buttonGroup9, buttonGroup10, buttonGroup11, buttonGroup12, buttonGroup13)
app.scene.addChild(buttonGroup14, buttonGroup15, buttonGroup16, buttonGroup17, buttonGroup18, buttonGroup19)
+app.scene.addChild(buttonGroup20, buttonGroup21)