Added options object to toggle function.

This commit is contained in:
Severin Opel 2020-04-14 12:14:40 +02:00
parent 70031d3bfa
commit 129672eb0f

View File

@ -80,7 +80,7 @@ export default class Highlight extends Object {
static expand(obj, { scale = SCALE, duration = 3, stroke = 2, onComplete = null } = {}) { static expand(obj, { scale = SCALE, duration = 3, stroke = 2, onComplete = null } = {}) {
if (obj == null) return if (obj == null) return
//console.log("expand") //console.log("expand")
obj.classList.add('zooming') obj.classList.add('zooming')
TweenLite.to(obj, duration, { TweenLite.to(obj, duration, {
scale, scale,
@ -119,17 +119,17 @@ export default class Highlight extends Object {
static animateCircle(target, callback) { static animateCircle(target, callback) {
console.log('ANIMATE CIRCLE', this) console.log('ANIMATE CIRCLE', this)
// ** DEBUG OUTPUTS ** // ** DEBUG OUTPUTS **
let circle = target let circle = target
// We need a unique id to ensure correspondence between circle, mask, and maskImage // We need a unique id to ensure correspondence between circle, mask, and maskImage
if (!circle.hasAttribute('id')) { if (!circle.hasAttribute('id')) {
_CircleIds += 1 _CircleIds += 1
circle.setAttribute('id', '@@' + _CircleIds) circle.setAttribute('id', '@@' + _CircleIds)
} }
let id = circle.getAttribute('id') let id = circle.getAttribute('id')
TweenLite.set(circle, { transformOrigin: '50% 50%' }) TweenLite.set(circle, { transformOrigin: '50% 50%' })
/*if (circle.classList.contains('zooming')) { /*if (circle.classList.contains('zooming')) {
console.log("already zooming") console.log("already zooming")
return return
}*/ }*/
@ -228,12 +228,12 @@ export default class Highlight extends Object {
} }
} }
static toggleHighlight(node) { static toggleHighlight(node, options = {}) {
console.log('toggleHighlight', Highlight._isExpanded(node)) console.log('toggleHighlight', Highlight._isExpanded(node))
if (Highlight._isExpanded(node)) { if (Highlight._isExpanded(node)) {
Highlight.closeHighlight(node) Highlight.closeHighlight(node, options)
} else { } else {
Highlight.openHighlight(node) Highlight.openHighlight(node, options)
} }
} }
@ -328,7 +328,7 @@ export default class Highlight extends Object {
} }
svgGroup.appendChild(maskImage) svgGroup.appendChild(maskImage)
// svgGroup.appendChild(element) // svgGroup.appendChild(element)
return [mask, maskImage] return [mask, maskImage]
} }
@ -350,7 +350,7 @@ export default class Highlight extends Object {
static closeHighlight(target, { animation = 0.5 } = {}) { static closeHighlight(target, { animation = 0.5 } = {}) {
target.classList.remove(Highlight.expandedClass) target.classList.remove(Highlight.expandedClass)
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
let [mask, maskImage] = Highlight._getSVGMask(target) let [mask, maskImage] = Highlight._getSVGMask(target)
console.log('Close Highlight', maskImage) console.log('Close Highlight', maskImage)
TweenLite.to([target, maskImage], animation, { TweenLite.to([target, maskImage], animation, {
@ -369,7 +369,7 @@ export default class Highlight extends Object {
static _retrieveId(target) { static _retrieveId(target) {
let id = target.getAttribute('id') let id = target.getAttribute('id')
// We need a unique id to ensure correspondence between circle, mask, and maskImage // We need a unique id to ensure correspondence between circle, mask, and maskImage
if (!id) { if (!id) {
_CircleIds += 1 _CircleIds += 1
target.setAttribute('id', '@@' + _CircleIds) target.setAttribute('id', '@@' + _CircleIds)
@ -382,4 +382,4 @@ export default class Highlight extends Object {
} }
} }
Highlight.expandedClass = 'expanded' Highlight.expandedClass = 'expanded'