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

Now calling 'this' to allow overloading of methods.

Browse Source
This commit is contained in:
Severin Opel 2020-04-21 12:43:55 +02:00
parent 6445ab3f57
commit 6ab63eb32c
1 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
lib/card/highlight.js
View File

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