From 6ab63eb32c9c4d0606f8329b76ce8b587f234af6 Mon Sep 17 00:00:00 2001
From: Severin Opel <severin.opel@outlook.com>
Date: Tue, 21 Apr 2020 12:43:55 +0200
Subject: [PATCH] Now calling 'this' to allow overloading of methods.

---
 lib/card/highlight.js | 40 ++++++++++++++++++++--------------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/lib/card/highlight.js b/lib/card/highlight.js
index 0950512..f4391d9 100644
--- a/lib/card/highlight.js
+++ b/lib/card/highlight.js
@@ -33,7 +33,7 @@ const SCALE = 1.5
 export default class Highlight extends Object {
     static disableAnimations() {
         _HighlightEnabled = false
-        let expanded = document.querySelectorAll('.' + Highlight.expandedClass)
+        let expanded = document.querySelectorAll('.' + this.expandedClass)
         for (let obj of expanded) {
             this.shrink(obj)
         }
@@ -44,11 +44,11 @@ export default class Highlight extends Object {
     }
 
     static removeAnimations(svgRoot) {
-        let expanded = svgRoot.querySelectorAll('.' + Highlight.expandedClass)
+        let expanded = svgRoot.querySelectorAll('.' + this.expandedClass)
         for (let obj of expanded) {
             TweenLite.set(obj, { scale: 1 })
             obj.classList.remove('zooming')
-            obj.classList.remove(Highlight.expandedClass)
+            obj.classList.remove(this.expandedClass)
         }
         let defs = svgRoot.querySelector('defs')
         while (defs.firstChild) {
@@ -91,7 +91,7 @@ export default class Highlight extends Object {
             onComplete: () => {
                 console.log('expand complete')
                 obj.classList.remove('zooming')
-                obj.classList.add(Highlight.expandedClass)
+                obj.classList.add(this.expandedClass)
                 obj.setAttribute('stroke-width', stroke / scale)
                 if (onComplete) onComplete()
             }
@@ -111,7 +111,7 @@ export default class Highlight extends Object {
             onComplete: () => {
                 //console.log("shrink complete")
                 obj.classList.remove('zooming')
-                obj.classList.remove(Highlight.expandedClass)
+                obj.classList.remove(this.expandedClass)
                 obj.setAttribute('stroke-width', stroke)
             }
         })
@@ -150,7 +150,7 @@ export default class Highlight extends Object {
         let maskImageId = 'maskImage' + id
         let maskImage = svgRoot.getElementById(maskImageId)
 
-        if (circle.classList.contains(Highlight.expandedClass)) {
+        if (circle.classList.contains(this.expandedClass)) {
             if (!circle.classList.contains('zooming')) {
                 this.shrink(circle, { stroke })
                 this.shrink(maskImage, { stroke })
@@ -173,7 +173,7 @@ export default class Highlight extends Object {
             this.shrink(m, { stroke })
         }
 
-        Highlight._createSVGMask(svgRoot, image, id)
+        this._createSVGMask(svgRoot, image, id)
 
         // TweenLite.set(maskImage, { transformOrigin: `${tx}% ${ty}%` })
 
@@ -184,7 +184,7 @@ export default class Highlight extends Object {
     }
 
     static openHighlight(target, { animation = 0.5, scale = SCALE, onExpanded = null } = {}) {
-        if (Highlight._isExpanded(target)) {
+        if (this._isExpanded(target)) {
             console.log('Target is already expanded!')
             return
         } else {
@@ -208,11 +208,11 @@ export default class Highlight extends Object {
             let image = svgRoot.querySelector('image')
 
             // eslint-disable-next-line no-unused-vars
-            let [mask, maskImage] = Highlight._getSVGMask(target, {
+            let [mask, maskImage] = this._getSVGMask(target, {
                 svgRoot,
                 image
             })
-            let center = Highlight._calculateCenterRelativeTo(target, image)
+            let center = this._calculateCenterRelativeTo(target, image)
             console.log('_calculateCenterRelativeTo', center)
             TweenLite.set(maskImage, {
                 transformOrigin: `${center.x} ${center.y}`
@@ -224,16 +224,16 @@ export default class Highlight extends Object {
                 onComplete: onExpanded
             })
 
-            target.classList.add(Highlight.expandedClass)
+            target.classList.add(this.expandedClass)
         }
     }
 
     static toggleHighlight(node, options = {}) {
-        console.log('toggleHighlight', Highlight._isExpanded(node))
-        if (Highlight._isExpanded(node)) {
-            Highlight.closeHighlight(node, options)
+        console.log('toggleHighlight', this._isExpanded(node))
+        if (this._isExpanded(node)) {
+            this.closeHighlight(node, options)
         } else {
-            Highlight.openHighlight(node, options)
+            this.openHighlight(node, options)
         }
     }
 
@@ -256,7 +256,7 @@ export default class Highlight extends Object {
         let maskImage = svgRoot.getElementById(maskImageId)
 
         if (!mask || !maskImage)
-            [mask, maskImage] = Highlight._createSVGMask(circle, {
+            [mask, maskImage] = this._createSVGMask(circle, {
                 svgRoot,
                 image,
                 id
@@ -345,13 +345,13 @@ export default class Highlight extends Object {
     }
 
     static _isExpanded(target) {
-        return target.classList.contains(Highlight.expandedClass)
+        return target.classList.contains(this.expandedClass)
     }
 
     static closeHighlight(target, { animation = 0.5 } = {}) {
-        target.classList.remove(Highlight.expandedClass)
+        target.classList.remove(this.expandedClass)
         // eslint-disable-next-line no-unused-vars
-        let [mask, maskImage] = Highlight._getSVGMask(target)
+        let [mask, maskImage] = this._getSVGMask(target)
         // console.log('Close Highlight', maskImage)
         TweenLite.to([target, maskImage], animation, {
             scale: 1
@@ -362,7 +362,7 @@ export default class Highlight extends Object {
         if (!_HighlightEnabled) return
 
         event.stopPropagation()
-        Highlight.animateCircle(event.target)
+        this.animateCircle(event.target)
 
         return false
     }