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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
css/highlight.css Normal file
View File

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

41
dist/iwmlib.js vendored
View File

@ -7828,7 +7828,7 @@
static animateCircle(target, callback) { static animateCircle(target, callback) {
console.log('ANIMATE CIRCLE', this); console.log('ANIMATE CIRCLE', this);
// ** DEBUG OUTPUTS ** // ** DEBUG OUTPUTS **
let circle = target; let circle = target;
// We need a unique id to ensure correspondence between circle, mask, and maskImage // We need a unique id to ensure correspondence between circle, mask, and maskImage
if (!circle.hasAttribute('id')) { if (!circle.hasAttribute('id')) {
@ -7898,28 +7898,22 @@
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;
const parent = target.parentNode; const parent = target.parentNode;
if(parent != null){ if (parent != null) {
let image = parent.querySelector(imageId); let image = parent.querySelector(imageId);
if(image){ if (image) {
this._bringToFront(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); } 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,19 +7932,24 @@
}); });
target.classList.add('expanded'); 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; const parent = target.parentNode;
if(target && parent){ if (target && parent) {
parent.removeChild(target); parent.removeChild(target);
parent.appendChild(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 } = {}) { static _getSVGMask(circle, { svgRoot = null, image = null } = {}) {

41
lib/card/highlight.js
View File

@ -123,7 +123,7 @@ export class Highlight extends Object {
static animateCircle(target, callback) { static animateCircle(target, callback) {
console.log('ANIMATE CIRCLE', this) console.log('ANIMATE CIRCLE', this)
// ** DEBUG OUTPUTS ** // ** DEBUG OUTPUTS **
let circle = target let circle = target
// We need a unique id to ensure correspondence between circle, mask, and maskImage // We need a unique id to ensure correspondence between circle, mask, and maskImage
if (!circle.hasAttribute('id')) { if (!circle.hasAttribute('id')) {
@ -193,28 +193,22 @@ 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
const parent = target.parentNode const parent = target.parentNode
if(parent != null){ if (parent != null) {
let image = parent.querySelector(imageId) let image = parent.querySelector(imageId)
if(image){ if (image) {
this._bringToFront(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) } 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,19 +227,24 @@ export class Highlight extends Object {
}) })
target.classList.add('expanded') 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 const parent = target.parentNode
if(target && parent){ if (target && parent) {
parent.removeChild(target) parent.removeChild(target)
parent.appendChild(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 } = {}) { static _getSVGMask(circle, { svgRoot = null, image = null } = {}) {

19
lib/card/index.html
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,17 +93,9 @@
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')
}) })