Working on cards.

2019-07-15 13:32:45 +02:00
parent 0e8c62eb4b
commit c3477244b9
5 changed files with 447 additions and 51 deletions
@@ -20,6 +20,9 @@ import {Cycle, Colors, Elements, Angle, Dates, Points, Polygon, Rect, Sets, Stri
 import UITest from './uitest.js'

 import {CardWrapper} from './card/wrapper.js'
+import {Highlight} from './card/highlight.js'
+
+
 /* Needed to ensure that rollup.js includes class definitions and the classes
 are visible inside doctests.
 */
@@ -84,4 +87,5 @@ window.debounce = debounce
 window.randomInt = randomInt
 window.randomFloat = randomFloat

-window.CardWrapper = CardWrapper
+window.CardWrapper = CardWrapper
+window.Highlight = Highlight
@@ -30,7 +30,7 @@ function round(value) {
 * @class Highlight
 * @extends {Object}
 */
-class Highlight extends Object {
+export class Highlight extends Object {

    static disableAnimations() {
        _HighlightEnabled = false
@@ -194,7 +194,7 @@ class Highlight extends Object {
        onExpanded = null
    } = {}) {

-        console.log('Open Highlight!')
+        console.log('Open Highlight!', target)

        if (Highlight._isExpanded(target)) {
            console.log('Target is already expanded!')
@@ -202,7 +202,7 @@ class Highlight extends Object {
        } else {

            let targetId = target.getAttribute('id')
-            console.log(targetId)
+            console.log(targetId, targetId && targetId.startsWith('@@'))
            if(targetId && targetId.startsWith('@@')){
                let id = targetId.slice(2)
                const imageId = '#maskImage'+id
@@ -214,7 +214,7 @@ class Highlight extends Object {
                    }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,21 +222,21 @@ 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}%` })
            TweenLite.set(target, { transformOrigin: '50% 50%' })

-            TweenLite.to(target, 2, {
-
-            })
-
            TweenLite.to([target, maskImage], animation, {
                scale,
                onComplete: onExpanded
            })

            target.classList.add('expanded')
+            console.log({target, maskImage, scale, animation})
+            console.log(maskImage)
        }

        return
@@ -397,4 +397,4 @@ class Highlight extends Object {
 }

 Highlight.expandedClass = 'expanded'
-window.Highlight = Highlight
+
@@ -46,7 +46,7 @@
            <h1 style="color: gray;">A Demo Card with onclick</h1>
            <figure style="position: relative;">
                <img width="75%" src="../examples/women.jpeg">
-                <svg id="overlayBase" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"
+                <svg class="overlayBase" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"
                    viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
                    <circle cx="35" cy="50" r="35" class="highlight" onclick="alert('Highlight clicked')" stroke="white"
                        fill="transparent" stroke-width="1" />
@@ -59,15 +59,23 @@
        <article id="demoCardWithSelector"
            style="position: absolute; left: 50%; top: 0%; padding: 16px; margin: 16px; border: 1px solid gray; width: 320px; height: 240px;">
            <h1 style="color: gray;">A Demo Card with selectors</h1>
-            <figure style="position: relative;">
-                <img width="75%" src="../examples/king.jpeg">
-                <svg id="overlayBase" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"
-                    viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
-                    <circle cx="35" cy="50" r="35" class="highlight" stroke="white" fill="transparent"
-                        stroke-width="1" />
-                </svg>
-            </figure>
-            <p>Lorem ipsum <a class="link" href="javascript:alert('Link clicked via href')" style="color:blue;">dolor</a> sit
+
+            <!-- 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">
+                <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%" />
+                </g>
+
+            </svg>
+
+            <p>Lorem ipsum <a class="link" href="javascript:alert('Link clicked via href')"
+                    style="color:blue;">dolor</a> sit
                amet,
                consetetur sadipscing elitr.</p>
        </article>
@@ -84,8 +92,17 @@
        const wrapper2 = new CardWrapper(demoCardWithSelector)
        wrapper2.handleClicksAsTaps()
        wrapper2.onTap('.highlight', event => {
-            alert('.highlight clicked')
+
+            Highlight.openHighlight(event.target, {
+
+                onExpanded: () => {
+                    console.log("onExpanded", event.target)
+                }
+            })
        })
+
+        // Highlight.animate(event)
+
        wrapper2.onTap('.link', event => {
            alert('.link clicked')
        })
@@ -94,7 +111,8 @@
    <h2>
        Using Cards within Scatters
    </h2>
-    <p>Cards can be used within scatters. Since the <code>CardWrapper</code> implements the <code>ITapDelegate</code> protocol they can simply
+    <p>Cards can be used within scatters. Since the <code>CardWrapper</code> implements the <code>ITapDelegate</code>
+        protocol they can simply
        be attached to a DOMScatter object. See the <a href="../scatter.html">Scatter Doctest</a>.
    </p>
    <div class="interactive grayBorder" style="position: relative;">
@@ -104,6 +122,7 @@
        References
    </h2>
    <ul>
-        <li><a href="https://uicookies.com/css-card-design/">30 Visually Stunning CSS Cards Inspirations For Every Type Of Websites 2019</a></li>
+        <li><a href="https://uicookies.com/css-card-design/">30 Visually Stunning CSS Cards Inspirations For Every Type
+                Of Websites 2019</a></li>
    </ul>
 </body>
@@ -17,11 +17,6 @@ export class CardWrapper extends Object {

    handleClicks() {
        this.domNode.addEventListener('click', event => {
-            console.log('handleClicks', event.isTrusted)
-            /* Currently we cannot send synthesized click events to SVG elements without unwanted side effects.
-                 Therefore we make an exception and let the original click event through.
-                 */
-            
            if (event.isTrusted) {
                Events.stop(event)
                if (this.triggerSVGClicks && this.isSVGNode(event.target)) {
@@ -34,10 +29,6 @@ export class CardWrapper extends Object {

    handleClicksAsTaps() {
        this.domNode.addEventListener('click', event => {
-            console.log('handleClicksAsTaps', event.isTrusted)
-            /* Currently we cannot send synthesized click events to SVG elements without unwanted side effects.
-                 Therefore we make an exception and let the original click event through.
-                 */
            if (event.isTrusted) {
                Events.stop(event)
                
@@ -62,9 +53,7 @@ export class CardWrapper extends Object {
        if (this.tapNodes.has(node))
            return true
        for (let [selector, handler] of this.tapHandler.entries()) {
-            console.log("selector", this.domNode.querySelectorAll(selector))
            for (let obj of this.domNode.querySelectorAll(selector)) {
-                console.log("selector2", node, obj)
                if (node == obj) {
                    return true
                }
@@ -127,7 +116,6 @@ export class CardWrapper extends Object {
        /* https://stackoverflow.com/questions/49564905/is-it-possible-to-use-click-function-on-svg-tags-i-tried-element-click-on-a
         proposes the dispatchEvent solution. But this leads to problems in flippable.html hiding the back page.
        Therefore we use the original click event (see constructor). */
-        console.log("simulateClick", node, node.ownerSVGElement)
        if (this.isSVGNode(node)) {
            if (this.triggerSVGClicks) {
                let click = new Event('click')
@@ -160,7 +148,6 @@ export class CardWrapper extends Object {
    }

    tap(event, calledBy='unknown') {
-        console.log("tap", calledBy, event.alreadyTapped, event)
        if (event.isTrusted) {
            let node = this.nearestActive(event)
            this.nodeTapped(node, event)
@@ -184,4 +171,3 @@ export class CardWrapper extends Object {
    }

 }
-window.CardWrapper = CardWrapper