Fixed highlight doctest.

This commit is contained in:
Uwe Oestermeier 2019-07-15 14:42:01 +02:00
parent c3477244b9
commit 9a399ecfe9
4 changed files with 55 additions and 57 deletions

11
css/highlight.css Normal file
View File

@ -0,0 +1,11 @@
circle
{
stroke: white;
fill: transparent;
}
mask circle
{
stroke-width: 0;
fill: white;
}

19
dist/iwmlib.js vendored
View File

@ -7898,16 +7898,11 @@
scale = 2, scale = 2,
onExpanded = null onExpanded = null
} = {}) { } = {}) {
console.log('Open Highlight!', target);
if (Highlight._isExpanded(target)) { if (Highlight._isExpanded(target)) {
console.log('Target is already expanded!'); console.log('Target is already expanded!');
return return
} else { } else {
let targetId = target.getAttribute('id'); let targetId = target.getAttribute('id');
console.log(targetId, targetId && targetId.startsWith('@@'));
if (targetId && targetId.startsWith('@@')) { if (targetId && targetId.startsWith('@@')) {
let id = targetId.slice(2); let id = targetId.slice(2);
const imageId = '#maskImage' + id; const imageId = '#maskImage' + id;
@ -7919,7 +7914,6 @@
} 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); } else console.log('Element was no parent:', target);
} }
console.log("_bringToFront");
this._bringToFront(target); this._bringToFront(target);
let svgRoot = target.closest('svg'); let svgRoot = target.closest('svg');
@ -7927,8 +7921,6 @@
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
let [mask, maskImage] = Highlight._getSVGMask(target, { svgRoot, image }); let [mask, maskImage] = Highlight._getSVGMask(target, { svgRoot, image });
console.log({svgRoot, image, mask, maskImage});
let center = Highlight._calculateCenterRelativeTo(target, image); let center = Highlight._calculateCenterRelativeTo(target, image);
TweenLite.set(maskImage, { transformOrigin: `${center.x}% ${center.y}%` }); TweenLite.set(maskImage, { transformOrigin: `${center.x}% ${center.y}%` });
@ -7940,11 +7932,16 @@
}); });
target.classList.add('expanded'); target.classList.add('expanded');
console.log({target, maskImage, scale, animation}); }
console.log(maskImage);
} }
return static toggleHighlight(node) {
if (Highlight._isExpanded(node)) {
Highlight.closeHighlight(node);
}
else {
Highlight.openHighlight(node);
}
} }
static _bringToFront(target) { static _bringToFront(target) {

View File

@ -193,16 +193,11 @@ export class Highlight extends Object {
scale = 2, scale = 2,
onExpanded = null onExpanded = null
} = {}) { } = {}) {
console.log('Open Highlight!', target)
if (Highlight._isExpanded(target)) { if (Highlight._isExpanded(target)) {
console.log('Target is already expanded!') console.log('Target is already expanded!')
return return
} else { } else {
let targetId = target.getAttribute('id') let targetId = target.getAttribute('id')
console.log(targetId, targetId && targetId.startsWith('@@'))
if (targetId && targetId.startsWith('@@')) { if (targetId && targetId.startsWith('@@')) {
let id = targetId.slice(2) let id = targetId.slice(2)
const imageId = '#maskImage' + id const imageId = '#maskImage' + id
@ -214,7 +209,6 @@ export class Highlight extends Object {
} 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) } else console.log('Element was no parent:', target)
} }
console.log("_bringToFront")
this._bringToFront(target) this._bringToFront(target)
let svgRoot = target.closest('svg') let svgRoot = target.closest('svg')
@ -222,8 +216,6 @@ export class Highlight extends Object {
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
let [mask, maskImage] = Highlight._getSVGMask(target, { svgRoot, image }) let [mask, maskImage] = Highlight._getSVGMask(target, { svgRoot, image })
console.log({svgRoot, image, mask, maskImage})
let center = Highlight._calculateCenterRelativeTo(target, image) let center = Highlight._calculateCenterRelativeTo(target, image)
TweenLite.set(maskImage, { transformOrigin: `${center.x}% ${center.y}%` }) TweenLite.set(maskImage, { transformOrigin: `${center.x}% ${center.y}%` })
@ -235,11 +227,16 @@ export class Highlight extends Object {
}) })
target.classList.add('expanded') target.classList.add('expanded')
console.log({target, maskImage, scale, animation}) }
console.log(maskImage)
} }
return static toggleHighlight(node) {
if (Highlight._isExpanded(node)) {
Highlight.closeHighlight(node)
}
else {
Highlight.openHighlight(node)
}
} }
static _bringToFront(target) { static _bringToFront(target) {

View File

@ -6,6 +6,7 @@
<title>Doctests Cards</title> <title>Doctests Cards</title>
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css"> <link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
<link rel="stylesheet" href="../../css/doctest.css"> <link rel="stylesheet" href="../../css/doctest.css">
<link rel="stylesheet" href="../../css/highlight.css">
<script src="../3rdparty/highlight/highlight.pack.js"></script> <script src="../3rdparty/highlight/highlight.pack.js"></script>
<script src="../../dist/iwmlib.js"></script> <script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.3rdparty.js"></script> <script src="../../dist/iwmlib.3rdparty.js"></script>
@ -63,13 +64,13 @@
<!-- Grr... The viewBox must reflect the width & height, using 0, 0, 100, <!-- Grr... The viewBox must reflect the width & height, using 0, 0, 100,
100 leads to blank spaces --> 100 leads to blank spaces -->
<svg class="overlayBase" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 268 188" <svg class="overlayBase" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 268 188"
style="width: 180px; height: 100px;" preserveAspectRatio="xMidYMid meet"> style="width: 180px;" preserveAspectRatio="xMidYMid meet">
<defs> <defs>
</defs> </defs>
<image xlink:href="../examples/king.jpeg" x="0" y="0" height="188" width="268" /> <image xlink:href="../examples/king.jpeg" x="0" y="0" height="188" width="268" />
<g> <g>
<circle cx="50%" cy="50%" r="25%" class="highlight" stroke="white" fill="transparent" <circle cx="145" cy="60" r="50" class="highlight" stroke="white" fill="transparent"
stroke-width="1%" /> stroke-width="4" />
</g> </g>
</svg> </svg>
@ -92,16 +93,8 @@
const wrapper2 = new CardWrapper(demoCardWithSelector) const wrapper2 = new CardWrapper(demoCardWithSelector)
wrapper2.handleClicksAsTaps() wrapper2.handleClicksAsTaps()
wrapper2.onTap('.highlight', event => { wrapper2.onTap('.highlight', event => {
Highlight.toggleHighlight(event.target)
Highlight.openHighlight(event.target, {
onExpanded: () => {
console.log("onExpanded", event.target)
}
}) })
})
// Highlight.animate(event)
wrapper2.onTap('.link', event => { wrapper2.onTap('.link', event => {
alert('.link clicked') alert('.link clicked')