IWMBrowser/iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity

Added textAlpha and textActiveAlpha to Button and ButtonGroup.

Browse Source
This commit is contained in:
Sebastian Kupke
2019-10-15 14:56:24 +02:00
parent e50ea6af31
commit e2ea89cc0b
73 changed files with 440 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/iwmlib.js
Vendored
+67 -66
View File
@@ -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';
dist/iwmlib.pixi.js
Vendored
+16 -13
View File
@@ -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) {