Fixed problem of popups showing up directly centered on highlights instead of over it.

lib/card/highlight.js

@@ -22,7 +22,7 @@ function round(value) {
  *   </svg>
  *
  * The SVG root element should use a viewbox with 0 0 100 100 to ensure that the positions and size of the
- * circles can be represnted in percent.
+ * circles can be represented in percent.
  *
  * @class Highlight
  * @extends {Object}
@@ -30,7 +30,7 @@ function round(value) {
 export default class Highlight extends Object {
     static disableAnimations() {
         _HighlightEnabled = false
-        let expanded = document.querySelectorAll('.expanded')
+        let expanded = document.querySelectorAll('.' + Highlight.expandedClass)
         for (let obj of expanded) {
             this.shrink(obj)
         }
@@ -41,11 +41,11 @@ export default class Highlight extends Object {
     }
 
     static removeAnimations(svgRoot) {
-        let expanded = svgRoot.querySelectorAll('.expanded')
+        let expanded = svgRoot.querySelectorAll('.' + Highlight.expandedClass)
         for (let obj of expanded) {
             TweenLite.set(obj, { scale: 1 })
             obj.classList.remove('zooming')
-            obj.classList.remove('expanded')
+            obj.classList.remove(Highlight.expandedClass)
         }
         let defs = svgRoot.querySelector('defs')
         while (defs.firstChild) {
@@ -88,7 +88,7 @@ export default class Highlight extends Object {
             onComplete: () => {
                 console.log('expand complete')
                 obj.classList.remove('zooming')
-                obj.classList.add('expanded')
+                obj.classList.add(Highlight.expandedClass)
                 obj.setAttribute('stroke-width', stroke / scale)
                 if (onComplete) onComplete()
             }
@@ -108,7 +108,7 @@ export default class Highlight extends Object {
             onComplete: () => {
                 //console.log("shrink complete")
                 obj.classList.remove('zooming')
-                obj.classList.remove('expanded')
+                obj.classList.remove(Highlight.expandedClass)
                 obj.setAttribute('stroke-width', stroke)
             }
         })
@@ -147,7 +147,7 @@ export default class Highlight extends Object {
         let maskImageId = 'maskImage' + id
         let maskImage = svgRoot.getElementById(maskImageId)
 
-        if (circle.classList.contains('expanded')) {
+        if (circle.classList.contains(Highlight.expandedClass)) {
             if (!circle.classList.contains('zooming')) {
                 this.shrink(circle, { stroke })
                 this.shrink(maskImage, { stroke })
@@ -221,7 +221,7 @@ export default class Highlight extends Object {
                 onComplete: onExpanded
             })
 
-            target.classList.add('expanded')
+            target.classList.add(Highlight.expandedClass)
         }
     }