Added event parameter to PopupMenu perform.

This commit is contained in:
Uwe Oestermeier 2020-08-04 17:35:15 +02:00
parent 6ab63eb32c
commit 47b178fbc1
3 changed files with 60 additions and 45 deletions

87
dist/iwmlib.js vendored
View File

@ -2589,6 +2589,8 @@
onMouseWheel(event) {
if (this.capture(event) && this.target.onMouseWheel) {
this.target.onMouseWheel(event);
} else {
//console.warn('Target has no onMouseWheel callback')
}
}
@ -2794,6 +2796,8 @@
}
if (this.target.onMouseWheel) {
this.target.onMouseWheel(event);
} else {
//console.warn('Target has no onMouseWheel callback', this.target)
}
}
}
@ -4955,13 +4959,15 @@
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.open('GET', this.src, false);
xhr.onload = e => {
domNode.innerHTML = this.prepare(xhr.response);
this.addedNode = domNode.firstElementChild;
let { width, height } = this.size(this.addedNode);
if (width) this.wantedWidth = width || this.wantedWidth;
if (height) this.wantedHeight = height || this.wantedHeight;
resolve(this);
xhr.onreadystatechange = e => {
if (xhr.readyState == 4) {
domNode.innerHTML = this.prepare(xhr.response);
this.addedNode = domNode.firstElementChild;
let { width, height } = this.size(this.addedNode);
if (width) this.wantedWidth = width || this.wantedWidth;
if (height) this.wantedHeight = height || this.wantedHeight;
resolve(this);
}
};
xhr.onerror = e => {
reject(this);
@ -6635,10 +6641,10 @@
Elements$1.addClass(item, 'popupMenuItem');
this.items[key] = item;
item.onclick = event => {
this.perform(key);
this.perform(event, key);
};
item.ontap = event => {
this.perform(key);
this.perform(event, key);
};
item.onmouseover = event => {
this.over(event, key);
@ -6657,15 +6663,16 @@
}
/** Execute a menu command.
* @param {object} event - The trigger event.
* @param {string} key - The selected key.
*/
perform(key) {
perform(event, key) {
let func = this.commands[key];
if (this.autoClose) {
this.close();
}
setTimeout(() => {
func.call();
func.call(event, key);
}, 20);
}
@ -7998,7 +8005,7 @@
class Highlight extends Object {
static disableAnimations() {
_HighlightEnabled = false;
let expanded = document.querySelectorAll('.' + Highlight.expandedClass);
let expanded = document.querySelectorAll('.' + this.expandedClass);
for (let obj of expanded) {
this.shrink(obj);
}
@ -8009,11 +8016,11 @@
}
static removeAnimations(svgRoot) {
let expanded = svgRoot.querySelectorAll('.' + Highlight.expandedClass);
let expanded = svgRoot.querySelectorAll('.' + this.expandedClass);
for (let obj of expanded) {
TweenLite.set(obj, { scale: 1 });
obj.classList.remove('zooming');
obj.classList.remove(Highlight.expandedClass);
obj.classList.remove(this.expandedClass);
}
let defs = svgRoot.querySelector('defs');
while (defs.firstChild) {
@ -8045,7 +8052,7 @@
static expand(obj, { scale = SCALE, duration = 3, stroke = 2, onComplete = null } = {}) {
if (obj == null) return
//console.log("expand")
//console.log("expand")
obj.classList.add('zooming');
TweenLite.to(obj, duration, {
scale,
@ -8056,7 +8063,7 @@
onComplete: () => {
console.log('expand complete');
obj.classList.remove('zooming');
obj.classList.add(Highlight.expandedClass);
obj.classList.add(this.expandedClass);
obj.setAttribute('stroke-width', stroke / scale);
if (onComplete) onComplete();
}
@ -8076,7 +8083,7 @@
onComplete: () => {
//console.log("shrink complete")
obj.classList.remove('zooming');
obj.classList.remove(Highlight.expandedClass);
obj.classList.remove(this.expandedClass);
obj.setAttribute('stroke-width', stroke);
}
});
@ -8084,17 +8091,17 @@
static animateCircle(target, callback) {
console.log('ANIMATE CIRCLE', this);
// ** DEBUG OUTPUTS **
// ** DEBUG OUTPUTS **
let circle = target;
// We need a unique id to ensure correspondence between circle, mask, and maskImage
// 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')) {
/*if (circle.classList.contains('zooming')) {
console.log("already zooming")
return
}*/
@ -8115,7 +8122,7 @@
let maskImageId = 'maskImage' + id;
let maskImage = svgRoot.getElementById(maskImageId);
if (circle.classList.contains(Highlight.expandedClass)) {
if (circle.classList.contains(this.expandedClass)) {
if (!circle.classList.contains('zooming')) {
this.shrink(circle, { stroke });
this.shrink(maskImage, { stroke });
@ -8138,7 +8145,7 @@
this.shrink(m, { stroke });
}
Highlight._createSVGMask(svgRoot, image, id);
this._createSVGMask(svgRoot, image, id);
// TweenLite.set(maskImage, { transformOrigin: `${tx}% ${ty}%` })
@ -8149,7 +8156,7 @@
}
static openHighlight(target, { animation = 0.5, scale = SCALE, onExpanded = null } = {}) {
if (Highlight._isExpanded(target)) {
if (this._isExpanded(target)) {
console.log('Target is already expanded!');
return
} else {
@ -8173,11 +8180,11 @@
let image = svgRoot.querySelector('image');
// eslint-disable-next-line no-unused-vars
let [mask, maskImage] = Highlight._getSVGMask(target, {
let [mask, maskImage] = this._getSVGMask(target, {
svgRoot,
image
});
let center = Highlight._calculateCenterRelativeTo(target, image);
let center = this._calculateCenterRelativeTo(target, image);
console.log('_calculateCenterRelativeTo', center);
TweenLite.set(maskImage, {
transformOrigin: `${center.x} ${center.y}`
@ -8189,16 +8196,16 @@
onComplete: onExpanded
});
target.classList.add(Highlight.expandedClass);
target.classList.add(this.expandedClass);
}
}
static toggleHighlight(node) {
console.log('toggleHighlight', Highlight._isExpanded(node));
if (Highlight._isExpanded(node)) {
Highlight.closeHighlight(node);
static toggleHighlight(node, options = {}) {
console.log('toggleHighlight', this._isExpanded(node));
if (this._isExpanded(node)) {
this.closeHighlight(node, options);
} else {
Highlight.openHighlight(node);
this.openHighlight(node, options);
}
}
@ -8221,7 +8228,7 @@
let maskImage = svgRoot.getElementById(maskImageId);
if (!mask || !maskImage)
[mask, maskImage] = Highlight._createSVGMask(circle, {
[mask, maskImage] = this._createSVGMask(circle, {
svgRoot,
image,
id
@ -8293,7 +8300,7 @@
}
svgGroup.appendChild(maskImage);
// svgGroup.appendChild(element)
// svgGroup.appendChild(element)
return [mask, maskImage]
}
@ -8310,14 +8317,14 @@
}
static _isExpanded(target) {
return target.classList.contains(Highlight.expandedClass)
return target.classList.contains(this.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);
target.classList.remove(this.expandedClass);
// eslint-disable-next-line no-unused-vars
let [mask, maskImage] = this._getSVGMask(target);
// console.log('Close Highlight', maskImage)
TweenLite.to([target, maskImage], animation, {
scale: 1
});
@ -8327,14 +8334,14 @@
if (!_HighlightEnabled) return
event.stopPropagation();
Highlight.animateCircle(event.target);
this.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
// We need a unique id to ensure correspondence between circle, mask, and maskImage
if (!id) {
_CircleIds += 1;
target.setAttribute('id', '@@' + _CircleIds);

9
dist/iwmlib.pixi.js vendored
View File

@ -6127,6 +6127,8 @@
onMouseWheel(event) {
if (this.capture(event) && this.target.onMouseWheel) {
this.target.onMouseWheel(event);
} else {
//console.warn('Target has no onMouseWheel callback')
}
}
@ -6332,6 +6334,8 @@
}
if (this.target.onMouseWheel) {
this.target.onMouseWheel(event);
} else {
//console.warn('Target has no onMouseWheel callback', this.target)
}
}
}
@ -16881,7 +16885,10 @@
* that is either passed or null.
*/
if (listeners == null) ; else if (Array.isArray(listeners)) this.listeners = listeners;
if (listeners == null) {
// Null is a valid value as the EventHandler assumes no listener is passed on purpose.
// This is useful, when a default parameter is passed as null.
} else if (Array.isArray(listeners)) this.listeners = listeners;
else if (typeof listeners == 'function') {
this.listeners = [];
this.add(listeners);

View File

@ -83,10 +83,10 @@ export default class PopupMenu extends Popup {
Elements.addClass(item, 'popupMenuItem')
this.items[key] = item
item.onclick = event => {
this.perform(key)
this.perform(event, key)
}
item.ontap = event => {
this.perform(key)
this.perform(event, key)
}
item.onmouseover = event => {
this.over(event, key)
@ -105,15 +105,16 @@ export default class PopupMenu extends Popup {
}
/** Execute a menu command.
* @param {object} event - The trigger event.
* @param {string} key - The selected key.
*/
perform(key) {
perform(event, key) {
let func = this.commands[key]
if (this.autoClose) {
this.close()
}
setTimeout(() => {
func.call()
func.call(event, key)
}, 20)
}