diff --git a/css/highlight.css b/css/highlight.css new file mode 100644 index 0000000..bff393c --- /dev/null +++ b/css/highlight.css @@ -0,0 +1,11 @@ +circle +{ + stroke: white; + fill: transparent; +} + +mask circle +{ + stroke-width: 0; + fill: white; +} diff --git a/dist/iwmlib.js b/dist/iwmlib.js index a333796..5112503 100644 --- a/dist/iwmlib.js +++ b/dist/iwmlib.js @@ -7828,7 +7828,7 @@ static animateCircle(target, callback) { console.log('ANIMATE CIRCLE', this); // ** DEBUG OUTPUTS ** - + let circle = target; // We need a unique id to ensure correspondence between circle, mask, and maskImage if (!circle.hasAttribute('id')) { @@ -7898,28 +7898,22 @@ scale = 2, onExpanded = null } = {}) { - - console.log('Open Highlight!', target); - if (Highlight._isExpanded(target)) { console.log('Target is already expanded!'); return } else { - let targetId = target.getAttribute('id'); - console.log(targetId, targetId && targetId.startsWith('@@')); - if(targetId && targetId.startsWith('@@')){ + if (targetId && targetId.startsWith('@@')) { let id = targetId.slice(2); - const imageId = '#maskImage'+id; + const imageId = '#maskImage' + id; const parent = target.parentNode; - if(parent != null){ + if (parent != null) { let image = parent.querySelector(imageId); - if(image){ + if (image) { this._bringToFront(image); - }else console.error('Could not find corresponding image element.'); - }else console.log('Element was no parent:', target); + } else console.error('Could not find corresponding image element.'); + } else console.log('Element was no parent:', target); } - console.log("_bringToFront"); this._bringToFront(target); let svgRoot = target.closest('svg'); @@ -7927,8 +7921,6 @@ // eslint-disable-next-line no-unused-vars let [mask, maskImage] = Highlight._getSVGMask(target, { svgRoot, image }); - - console.log({svgRoot, image, mask, maskImage}); let center = Highlight._calculateCenterRelativeTo(target, image); TweenLite.set(maskImage, { transformOrigin: `${center.x}% ${center.y}%` }); @@ -7940,19 +7932,24 @@ }); target.classList.add('expanded'); - console.log({target, maskImage, scale, animation}); - console.log(maskImage); } - - return } - static _bringToFront(target){ + static toggleHighlight(node) { + if (Highlight._isExpanded(node)) { + Highlight.closeHighlight(node); + } + else { + Highlight.openHighlight(node); + } + } + + static _bringToFront(target) { const parent = target.parentNode; - if(target && parent){ + 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 } = {}) { diff --git a/lib/card/highlight.js b/lib/card/highlight.js index 8186bf3..2e63bc4 100644 --- a/lib/card/highlight.js +++ b/lib/card/highlight.js @@ -123,7 +123,7 @@ export class Highlight extends Object { static animateCircle(target, callback) { console.log('ANIMATE CIRCLE', this) // ** DEBUG OUTPUTS ** - + let circle = target // We need a unique id to ensure correspondence between circle, mask, and maskImage if (!circle.hasAttribute('id')) { @@ -193,28 +193,22 @@ export class Highlight extends Object { scale = 2, onExpanded = null } = {}) { - - console.log('Open Highlight!', target) - if (Highlight._isExpanded(target)) { console.log('Target is already expanded!') return } else { - let targetId = target.getAttribute('id') - console.log(targetId, targetId && targetId.startsWith('@@')) - if(targetId && targetId.startsWith('@@')){ + if (targetId && targetId.startsWith('@@')) { let id = targetId.slice(2) - const imageId = '#maskImage'+id + const imageId = '#maskImage' + id const parent = target.parentNode - if(parent != null){ + if (parent != null) { let image = parent.querySelector(imageId) - if(image){ + if (image) { this._bringToFront(image) - }else console.error('Could not find corresponding image element.') - }else console.log('Element was no parent:', target) + } else console.error('Could not find corresponding image element.') + } else console.log('Element was no parent:', target) } - console.log("_bringToFront") this._bringToFront(target) let svgRoot = target.closest('svg') @@ -222,8 +216,6 @@ export class Highlight extends Object { // eslint-disable-next-line no-unused-vars let [mask, maskImage] = Highlight._getSVGMask(target, { svgRoot, image }) - - console.log({svgRoot, image, mask, maskImage}) let center = Highlight._calculateCenterRelativeTo(target, image) TweenLite.set(maskImage, { transformOrigin: `${center.x}% ${center.y}%` }) @@ -235,19 +227,24 @@ export class Highlight extends Object { }) target.classList.add('expanded') - console.log({target, maskImage, scale, animation}) - console.log(maskImage) } - - return } - static _bringToFront(target){ + static toggleHighlight(node) { + if (Highlight._isExpanded(node)) { + Highlight.closeHighlight(node) + } + else { + Highlight.openHighlight(node) + } + } + + static _bringToFront(target) { const parent = target.parentNode - if(target && parent){ + 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 } = {}) { diff --git a/lib/card/index.html b/lib/card/index.html index 82655fb..cfb1396 100644 --- a/lib/card/index.html +++ b/lib/card/index.html @@ -6,6 +6,7 @@ Doctests Cards + @@ -63,13 +64,13 @@ + style="width: 180px;" preserveAspectRatio="xMidYMid meet"> - + @@ -92,17 +93,9 @@ const wrapper2 = new CardWrapper(demoCardWithSelector) wrapper2.handleClicksAsTaps() wrapper2.onTap('.highlight', event => { - - Highlight.openHighlight(event.target, { - - onExpanded: () => { - console.log("onExpanded", event.target) - } - }) + Highlight.toggleHighlight(event.target) }) - - // Highlight.animate(event) - + wrapper2.onTap('.link', event => { alert('.link clicked') })