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

Improved card API.

Browse Source
This commit is contained in:
Uwe Oestermeier 2019-08-01 19:34:32 +02:00
parent e9f1246e0a
commit 488c1807d6
4 changed files with 97 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
dist/iwmlib.js vendored
View File

@ -2480,6 +2480,8 @@
onMouseWheel(event) {
if (this.capture(event) && this.target.onMouseWheel) {
this.target.onMouseWheel(event);
} else {
//console.warn('Target has no onMouseWheel callback')
}
}
@ -2683,6 +2685,8 @@
}
if (this.target.onMouseWheel) {
this.target.onMouseWheel(event);
} else {
//console.warn('Target has no onMouseWheel callback', this.target)
}
}
}
@ -7602,6 +7606,8 @@
/** To avoid problems with relative URL paths, we use inline data URI to load svg icons. */
const enableNearestNeighborTaps = false;
/**
* A class that collects static methods to maintain the states and parts of
* EyeVisit like cards.
@ -8225,6 +8231,23 @@
return requestedSame
}
static _calculateCenterRelativeTo(target, image) {
console.log("_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 r = target.getAttribute('r');
let radius = r.endsWith('%') ? (parseFloat(r) / 100) * width : parseFloat(r);
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});
return { x, y }
}
/**
* Opens a popup for a highlight. Typically used as a onlick handler of a link.
*
@ -8233,14 +8256,16 @@
* @returns {bool} false - Returns false to prevent default click action
* @memberof Card
*/
static loadHighlightPopup(event) {
if (this.debug) console.log('Load Highlight Popup: ', event);
let node;
static loadHighlightPopup(event, node=null) {
if (this.debug) console.log('Card.loadHighlightPopup', event, node);
if (node == null) {
if (event.firstTarget) {
node = event.firstTarget;
} else {
node = event.target;
}
}
let context = this.getContext(node);
event.stopPropagation();
@ -8259,11 +8284,11 @@
animation: Card.highlightAnimation,
onExpanded: () => {
// We assume it's always a circle. This may break, when other svg shapes are used.
let x = node.getAttribute('cx');
let y = node.getAttribute('cy');
let position = { x, y };
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
@ -8271,15 +8296,17 @@
card space.
*/
let svgRoot = node.closest('svg');
// let svgRoot = node.closest('svg')
let svgPoint = svgRoot.createSVGPoint();
svgPoint.x = position.x;
svgPoint.y = position.y - radius;
svgPoint.y = position.y;
let matrix = node.getCTM();
let point = svgPoint.matrixTransform(matrix);
let global = Points.fromNodeToPage(node.closest('div'), point);
let closestDiv = node.closest('div');
console.log("closestDiv", closestDiv, point);
let global = Points.fromNodeToPage(closestDiv, point);
let local = Points.fromPageToNode(context, global);
let overlay = document.createElement('div');
@ -8290,7 +8317,7 @@
// we could load the data while the circle is animating.
// but for simplicity it's just done here for now.
// TODO: Adjust to load while animating (Problem: Unload when cancelled).
console.log(src);
console.log("loadHighlightPopup", src, position, local);
this._loadPopupContent(src)
.then(content => {
this._openPopup(context, src, local, content, {
@ -8985,6 +9012,16 @@
if (this.dynamicHeight) {
article.appendChild(iconClone);
}
if (enableNearestNeighborTaps) {
//look for nearby popups on tap
InteractionMapper.on('tap', indexbox, () => {
console.log('Tap handler called', editable);
if (!editable) {
this.findNearbyPopups(event, card);
}
});
}
// Use the 'tap' event for closing.
// Otherwise the subcard cannot be closed,
// when another subcard is touched.

4
dist/iwmlib.pixi.js vendored
View File

@ -6011,6 +6011,8 @@
onMouseWheel(event) {
if (this.capture(event) && this.target.onMouseWheel) {
this.target.onMouseWheel(event);
} else {
//console.warn('Target has no onMouseWheel callback')
}
}
@ -6214,6 +6216,8 @@
}
if (this.target.onMouseWheel) {
this.target.onMouseWheel(event);
} else {
//console.warn('Target has no onMouseWheel callback', this.target)
}
}
}

43
lib/card/card.js
View File

@ -645,6 +645,23 @@ export default class Card {
return requestedSame
}
static _calculateCenterRelativeTo(target, image) {
console.log("_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 r = target.getAttribute('r')
let radius = r.endsWith('%') ? (parseFloat(r) / 100) * width : parseFloat(r)
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})
return { x, y }
}
/**
* Opens a popup for a highlight. Typically used as a onlick handler of a link.
*
@ -653,14 +670,16 @@ export default class Card {
* @returns {bool} false - Returns false to prevent default click action
* @memberof Card
*/
static loadHighlightPopup(event) {
if (this.debug) console.log('Load Highlight Popup: ', event)
let node
static loadHighlightPopup(event, node=null) {
if (this.debug) console.log('Card.loadHighlightPopup', event, node)
if (node == null) {
if (event.firstTarget) {
node = event.firstTarget
} else {
node = event.target
}
}
let context = this.getContext(node)
event.stopPropagation()
@ -679,11 +698,11 @@ export default class Card {
animation: Card.highlightAnimation,
onExpanded: () => {
// We assume it's always a circle. This may break, when other svg shapes are used.
let x = node.getAttribute('cx')
let y = node.getAttribute('cy')
let position = { x, y }
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
@ -691,15 +710,17 @@ export default class Card {
card space.
*/
let svgRoot = node.closest('svg')
// let svgRoot = node.closest('svg')
let svgPoint = svgRoot.createSVGPoint()
svgPoint.x = position.x
svgPoint.y = position.y - radius
svgPoint.y = position.y
let matrix = node.getCTM()
let point = svgPoint.matrixTransform(matrix)
let global = Points.fromNodeToPage(node.closest('div'), point)
let closestDiv = node.closest('div')
console.log("closestDiv", closestDiv, point)
let global = Points.fromNodeToPage(closestDiv, point)
let local = Points.fromPageToNode(context, global)
let overlay = document.createElement('div')
@ -710,7 +731,7 @@ export default class Card {
// we could load the data while the circle is animating.
// but for simplicity it's just done here for now.
// TODO: Adjust to load while animating (Problem: Unload when cancelled).
console.log(src)
console.log("loadHighlightPopup", src, position, local)
this._loadPopupContent(src)
.then(content => {
this._openPopup(context, src, local, content, {

6
lib/card/index.html
View File

@ -71,7 +71,7 @@
</defs>
<image xlink:href="../examples/king.jpeg" x="0" y="0" height="188" width="268" />
<g>
<circle xlink:href="./popup.html" cx="145" cy="60" r="50" class="highlight" stroke="white" fill="transparent"
<circle xlink:href="./popup.html" cx="50%" cy="30%" r="25%" class="highlight" stroke="white" fill="transparent"
stroke-width="4" />
</g>
@ -96,8 +96,8 @@
const wrapper2 = new CardWrapper(demoCardWithSelector)
wrapper2.handleClicksAsTaps()
wrapper2.onTap('circle', event => {
Card.loadHighlightPopup(event)
wrapper2.onTap('circle', (event, node) => {
Card.loadHighlightPopup(event, node)
})
wrapper2.onTap('a', event => {