Compare commits

...

2 Commits

2 changed files with 30 additions and 28 deletions

View File

@ -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,14 +345,14 @@ 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)
console.log('Close Highlight', maskImage)
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
}

View File

@ -141,13 +141,15 @@ export class HTMLLoader extends CardLoader {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest()
xhr.open('GET', this.src, false)
xhr.onload = e => {
domNode.innerHTML = this.prepare(xhr.response)
this.addedNode = domNode.firstElementChild
let { width, height } = this.size(this.addedNode)
if (width) this.wantedWidth = width || this.wantedWidth
if (height) this.wantedHeight = height || this.wantedHeight
resolve(this)
xhr.onreadystatechange = e => {
if (xhr.readyState == 4) {
domNode.innerHTML = this.prepare(xhr.response)
this.addedNode = domNode.firstElementChild
let { width, height } = this.size(this.addedNode)
if (width) this.wantedWidth = width || this.wantedWidth
if (height) this.wantedHeight = height || this.wantedHeight
resolve(this)
}
}
xhr.onerror = e => {
reject(this)