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

Fixed highlight doctest.

Browse Source
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) {
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 } = {}) {

41
lib/card/highlight.js
View File

@ -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 } = {}) {

19
lib/card/index.html
View File

@ -6,6 +6,7 @@
<title>Doctests Cards</title>
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.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="../../dist/iwmlib.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,
100 leads to blank spaces -->
<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>
<image xlink:href="../examples/king.jpeg" x="0" y="0" height="188" width="268" />
<g>
<circle cx="50%" cy="50%" r="25%" class="highlight" stroke="white" fill="transparent"
stroke-width="1%" />
<circle cx="145" cy="60" r="50" class="highlight" stroke="white" fill="transparent"
stroke-width="4" />
</g>
</svg>
@ -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')
})