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

Prettified all files.

Browse Source
This commit is contained in:
Sebastian Kupke
2019-07-18 12:26:39 +02:00
parent 7744b92771
commit 2d400a18ec
125 changed files with 11184 additions and 8154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/card/highlight.js
+50 -37
View File
@@ -4,17 +4,15 @@
let _HighlightEnabled = true
let _CircleIds = 0
/** Helper method to round values with one digit precision */
function round(value) {
return Math.round(parseFloat(value) * 10) / 10
}
/**
* A namespace with static functions to expand and shrink highlighted image regions.
* Assumes an SVG image with the following structure:
*
*
* <svg viewbox="0 0 100 100">
* <!-- The defs section must be defined and cannot be generated in JavaScript -->
* <defs>
@@ -23,15 +21,14 @@ function round(value) {
* <circle onclick="Highlight.animateZoom(event)" cx="47" cy="18" r="8" stroke-width="0.5" />
* <circle onclick="Highlight.animateZoom(event)" cx="60" cy="67" r="8" stroke-width="0.5" />
* </svg>
*
*
* The SVG root element should use a viewbox with 0 0 100 100 to ensure that the positions and size of the
* circles can be represnted in percent.
*
*
* @class Highlight
* @extends {Object}
*/
export default class Highlight extends Object {
static disableAnimations() {
_HighlightEnabled = false
let expanded = document.querySelectorAll('.expanded')
@@ -64,7 +61,10 @@ export default class Highlight extends Object {
if (circle.classList.length == 0) {
circle.removeAttribute('class')
}
if (circle.hasAttribute('id') && circle.getAttribute('id').startsWith('@@')) {
if (
circle.hasAttribute('id') &&
circle.getAttribute('id').startsWith('@@')
) {
circle.removeAttribute('id')
}
circle.removeAttribute('data-svg-origin')
@@ -79,9 +79,11 @@ export default class Highlight extends Object {
}
}
static expand(obj, { scale = 2, duration = 3, stroke = 2, onComplete = null } = {}) {
if (obj == null)
return
static expand(
obj,
{ scale = 2, duration = 3, stroke = 2, onComplete = null } = {}
) {
if (obj == null) return
//console.log("expand")
obj.classList.add('zooming')
TweenLite.to(obj, duration, {
@@ -102,8 +104,7 @@ export default class Highlight extends Object {
static shrink(obj, { duration = 0.5, stroke = 2 } = {}) {
//console.log("shrink")
if (obj == null)
return
if (obj == null) return
obj.classList.add('zooming')
TweenLite.to(obj, duration, {
scale: 1,
@@ -141,7 +142,6 @@ export default class Highlight extends Object {
let circleGroup = circle.parentNode
let image = svgRoot.querySelector('image')
let stroke = parseFloat(circleGroup.getAttribute('stroke-width') || 6)
let defs = svgRoot.querySelector('defs')
@@ -160,15 +160,16 @@ export default class Highlight extends Object {
this.shrink(maskImage, { stroke })
return
}
//console.log("animate called while zooming out -> expand")
}
else if (circle.classList.contains('zooming')) {
//console.log("animate called while zooming out -> expand")
} else if (circle.classList.contains('zooming')) {
//console.log("animate called while zooming in -> shrink")
this.shrink(circle, { stroke })
this.shrink(maskImage, { stroke })
return
}
let circles = Array.from(circleGroup.children).filter(e => e.tagName == 'circle')
let circles = Array.from(circleGroup.children).filter(
e => e.tagName == 'circle'
)
for (let c of circles) {
//console.log("shrinking all circles")
this.shrink(c, { stroke })
@@ -188,11 +189,10 @@ export default class Highlight extends Object {
return false
}
static openHighlight(target, {
animation = 0.5,
scale = 2,
onExpanded = null
} = {}) {
static openHighlight(
target,
{ animation = 0.5, scale = 2, onExpanded = null } = {}
) {
if (Highlight._isExpanded(target)) {
console.log('Target is already expanded!')
return
@@ -206,7 +206,10 @@ export default class Highlight extends Object {
let image = parent.querySelector(imageId)
if (image) {
this._bringToFront(image)
} else console.error('Could not find corresponding image element.')
} else
console.error(
'Could not find corresponding image element.'
)
} else console.log('Element was no parent:', target)
}
this._bringToFront(target)
@@ -215,10 +218,15 @@ export default class Highlight extends Object {
let image = svgRoot.querySelector('image')
// eslint-disable-next-line no-unused-vars
let [mask, maskImage] = Highlight._getSVGMask(target, { svgRoot, image })
let [mask, maskImage] = Highlight._getSVGMask(target, {
svgRoot,
image
})
let center = Highlight._calculateCenterRelativeTo(target, image)
TweenLite.set(maskImage, { transformOrigin: `${center.x}% ${center.y}%` })
TweenLite.set(maskImage, {
transformOrigin: `${center.x}% ${center.y}%`
})
TweenLite.set(target, { transformOrigin: '50% 50%' })
TweenLite.to([target, maskImage], animation, {
@@ -233,8 +241,7 @@ export default class Highlight extends Object {
static toggleHighlight(node) {
if (Highlight._isExpanded(node)) {
Highlight.closeHighlight(node)
}
else {
} else {
Highlight.openHighlight(node)
}
}
@@ -244,7 +251,12 @@ export default class Highlight extends Object {
if (target && parent) {
parent.removeChild(target)
parent.appendChild(target)
} else console.error('Could not bring to front. Either no target or no parent.', target, parent)
} else
console.error(
'Could not bring to front. Either no target or no parent.',
target,
parent
)
}
static _getSVGMask(circle, { svgRoot = null, image = null } = {}) {
@@ -258,13 +270,15 @@ export default class Highlight extends Object {
let maskImage = svgRoot.getElementById(maskImageId)
if (!mask || !maskImage)
[mask, maskImage] = Highlight._createSVGMask(circle, { svgRoot, image, id })
[mask, maskImage] = Highlight._createSVGMask(circle, {
svgRoot,
image,
id
})
return [mask, maskImage]
}
/**
* Creates an SVG mask for a provided svgElement.
*
@@ -277,8 +291,10 @@ export default class Highlight extends Object {
* @returns
* @memberof Highlight
*/
static _createSVGMask(element, { svgRoot = null, image = null, id = null } = {}) {
static _createSVGMask(
element,
{ svgRoot = null, image = null, id = null } = {}
) {
// We can fetch these values here, but it's more efficient to
// simply pass them in, as it's likely they were already retrieved beforehand.
if (svgRoot == null) svgRoot = element.closest('svg')
@@ -316,7 +332,6 @@ export default class Highlight extends Object {
let height = bbox.height
if (maskImage == null) {
maskImage = document.createElementNS(svg, 'image')
maskImage.style.pointerEvents = 'none'
maskImage.setAttribute('id', maskImageId)
@@ -369,8 +384,7 @@ export default class Highlight extends Object {
}
static animate(event) {
if (!_HighlightEnabled)
return
if (!_HighlightEnabled) return
event.stopPropagation()
Highlight.animateCircle(event.target)
@@ -394,4 +408,3 @@ export default class Highlight extends Object {
}
Highlight.expandedClass = 'expanded'