Improved card API.

lib/card/card.js

@@ -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
-        if (event.firstTarget) {
-            node = event.firstTarget
-        } else {
-            node = event.target
+    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,27 +698,29 @@ 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
                     transform the location from the subcard-/svg-space to the
                     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, {

lib/card/index.html

@@ -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 => {