Compare commits
2 Commits
129672eb0f
...
6ab63eb32c
Author | SHA1 | Date |
---|---|---|
Severin Opel | 6ab63eb32c | |
Severin Opel | 6445ab3f57 |
|
@ -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,14 +345,14 @@ 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
|
||||||
}
|
}
|
||||||
|
|
|
@ -141,7 +141,8 @@ export class HTMLLoader extends CardLoader {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
let xhr = new XMLHttpRequest()
|
let xhr = new XMLHttpRequest()
|
||||||
xhr.open('GET', this.src, false)
|
xhr.open('GET', this.src, false)
|
||||||
xhr.onload = e => {
|
xhr.onreadystatechange = e => {
|
||||||
|
if (xhr.readyState == 4) {
|
||||||
domNode.innerHTML = this.prepare(xhr.response)
|
domNode.innerHTML = this.prepare(xhr.response)
|
||||||
this.addedNode = domNode.firstElementChild
|
this.addedNode = domNode.firstElementChild
|
||||||
let { width, height } = this.size(this.addedNode)
|
let { width, height } = this.size(this.addedNode)
|
||||||
|
@ -149,6 +150,7 @@ export class HTMLLoader extends CardLoader {
|
||||||
if (height) this.wantedHeight = height || this.wantedHeight
|
if (height) this.wantedHeight = height || this.wantedHeight
|
||||||
resolve(this)
|
resolve(this)
|
||||||
}
|
}
|
||||||
|
}
|
||||||
xhr.onerror = e => {
|
xhr.onerror = e => {
|
||||||
reject(this)
|
reject(this)
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue