Working on cards.

lib/card/index.html

@@ -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>