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

Added event parameter to PopupMenu perform.

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
dist/iwmlib.js vendored
View File

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

9
dist/iwmlib.pixi.js vendored
View File

@ -6127,6 +6127,8 @@
onMouseWheel(event) { onMouseWheel(event) {
if (this.capture(event) && this.target.onMouseWheel) { if (this.capture(event) && this.target.onMouseWheel) {
this.target.onMouseWheel(event); this.target.onMouseWheel(event);
} else {
//console.warn('Target has no onMouseWheel callback')
} }
} }
@ -6332,6 +6334,8 @@
} }
if (this.target.onMouseWheel) { if (this.target.onMouseWheel) {
this.target.onMouseWheel(event); this.target.onMouseWheel(event);
} else {
//console.warn('Target has no onMouseWheel callback', this.target)
} }
} }
} }
@ -16881,7 +16885,10 @@
* that is either passed or null. * 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') { else if (typeof listeners == 'function') {
this.listeners = []; this.listeners = [];
this.add(listeners); this.add(listeners);

9
lib/popupmenu.js
View File

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