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

69
dist/iwmlib.js vendored
View File

@ -2480,6 +2480,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')
} }
} }
@ -2683,6 +2685,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)
} }
} }
} }
@ -7602,6 +7606,8 @@
/** To avoid problems with relative URL paths, we use inline data URI to load svg icons. */ /** 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 * A class that collects static methods to maintain the states and parts of
* EyeVisit like cards. * EyeVisit like cards.
@ -8225,6 +8231,23 @@
return requestedSame 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. * 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 * @returns {bool} false - Returns false to prevent default click action
* @memberof Card * @memberof Card
*/ */
static loadHighlightPopup(event) { static loadHighlightPopup(event, node=null) {
if (this.debug) console.log('Load Highlight Popup: ', event); if (this.debug) console.log('Card.loadHighlightPopup', event, node);
let node; if (node == null) {
if (event.firstTarget) { if (event.firstTarget) {
node = event.firstTarget; node = event.firstTarget;
} else { } else {
node = event.target; node = event.target;
}
} }
let context = this.getContext(node); let context = this.getContext(node);
event.stopPropagation(); event.stopPropagation();
@ -8259,27 +8284,29 @@
animation: Card.highlightAnimation, animation: Card.highlightAnimation,
onExpanded: () => { onExpanded: () => {
// We assume it's always a circle. This may break, when other svg shapes are used. // 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 As the popup is appended directly to the card. We have to
transform the location from the subcard-/svg-space to the transform the location from the subcard-/svg-space to the
card space. card space.
*/ */
let svgRoot = node.closest('svg'); // let svgRoot = node.closest('svg')
let svgPoint = svgRoot.createSVGPoint(); let svgPoint = svgRoot.createSVGPoint();
svgPoint.x = position.x; svgPoint.x = position.x;
svgPoint.y = position.y - radius; svgPoint.y = position.y;
let matrix = node.getCTM(); let matrix = node.getCTM();
let point = svgPoint.matrixTransform(matrix); 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 local = Points.fromPageToNode(context, global);
let overlay = document.createElement('div'); let overlay = document.createElement('div');
@ -8290,7 +8317,7 @@
// we could load the data while the circle is animating. // we could load the data while the circle is animating.
// but for simplicity it's just done here for now. // but for simplicity it's just done here for now.
// TODO: Adjust to load while animating (Problem: Unload when cancelled). // TODO: Adjust to load while animating (Problem: Unload when cancelled).
console.log(src); console.log("loadHighlightPopup", src, position, local);
this._loadPopupContent(src) this._loadPopupContent(src)
.then(content => { .then(content => {
this._openPopup(context, src, local, content, { this._openPopup(context, src, local, content, {
@ -8985,6 +9012,16 @@
if (this.dynamicHeight) { if (this.dynamicHeight) {
article.appendChild(iconClone); 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. // Use the 'tap' event for closing.
// Otherwise the subcard cannot be closed, // Otherwise the subcard cannot be closed,
// when another subcard is touched. // when another subcard is touched.

4
dist/iwmlib.pixi.js vendored
View File

@ -6011,6 +6011,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')
} }
} }
@ -6214,6 +6216,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)
} }
} }
} }

53
lib/card/card.js
View File

@ -645,6 +645,23 @@ export default class Card {
return requestedSame 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. * 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 * @returns {bool} false - Returns false to prevent default click action
* @memberof Card * @memberof Card
*/ */
static loadHighlightPopup(event) { static loadHighlightPopup(event, node=null) {
if (this.debug) console.log('Load Highlight Popup: ', event) if (this.debug) console.log('Card.loadHighlightPopup', event, node)
let node if (node == null) {
if (event.firstTarget) { if (event.firstTarget) {
node = event.firstTarget node = event.firstTarget
} else { } else {
node = event.target node = event.target
}
} }
let context = this.getContext(node) let context = this.getContext(node)
event.stopPropagation() event.stopPropagation()
@ -679,27 +698,29 @@ export default class Card {
animation: Card.highlightAnimation, animation: Card.highlightAnimation,
onExpanded: () => { onExpanded: () => {
// We assume it's always a circle. This may break, when other svg shapes are used. // 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 As the popup is appended directly to the card. We have to
transform the location from the subcard-/svg-space to the transform the location from the subcard-/svg-space to the
card space. card space.
*/ */
let svgRoot = node.closest('svg') // let svgRoot = node.closest('svg')
let svgPoint = svgRoot.createSVGPoint() let svgPoint = svgRoot.createSVGPoint()
svgPoint.x = position.x svgPoint.x = position.x
svgPoint.y = position.y - radius svgPoint.y = position.y
let matrix = node.getCTM() let matrix = node.getCTM()
let point = svgPoint.matrixTransform(matrix) 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 local = Points.fromPageToNode(context, global)
let overlay = document.createElement('div') let overlay = document.createElement('div')
@ -710,7 +731,7 @@ export default class Card {
// we could load the data while the circle is animating. // we could load the data while the circle is animating.
// but for simplicity it's just done here for now. // but for simplicity it's just done here for now.
// TODO: Adjust to load while animating (Problem: Unload when cancelled). // TODO: Adjust to load while animating (Problem: Unload when cancelled).
console.log(src) console.log("loadHighlightPopup", src, position, local)
this._loadPopupContent(src) this._loadPopupContent(src)
.then(content => { .then(content => {
this._openPopup(context, src, local, content, { this._openPopup(context, src, local, content, {

6
lib/card/index.html
View File

@ -71,7 +71,7 @@
</defs> </defs>
<image xlink:href="../examples/king.jpeg" x="0" y="0" height="188" width="268" /> <image xlink:href="../examples/king.jpeg" x="0" y="0" height="188" width="268" />
<g> <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" /> stroke-width="4" />
</g> </g>
@ -96,8 +96,8 @@
const wrapper2 = new CardWrapper(demoCardWithSelector) const wrapper2 = new CardWrapper(demoCardWithSelector)
wrapper2.handleClicksAsTaps() wrapper2.handleClicksAsTaps()
wrapper2.onTap('circle', event => { wrapper2.onTap('circle', (event, node) => {
Card.loadHighlightPopup(event) Card.loadHighlightPopup(event, node)
}) })
wrapper2.onTap('a', event => { wrapper2.onTap('a', event => {