Now calling 'this' to allow overloading of methods.
This commit is contained in:
parent
6445ab3f57
commit
6ab63eb32c
@ -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
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user