Added popup example.

lib/card/index.html

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
     <link rel="stylesheet" href="../../css/doctest.css">
     <link rel="stylesheet" href="../../css/highlight.css">
+    <link rel="stylesheet" href="../../css/popup.css">
     <script src="../3rdparty/highlight/highlight.pack.js"></script>
     <script src="../../dist/iwmlib.js"></script>
     <script src="../../dist/iwmlib.3rdparty.js"></script>
@@ -59,26 +60,29 @@
 
         <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>
+            <div class="info-card">
+                    <h1 style="color: gray;">A Demo Card with selectors</h1>
 
-            <!-- 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;" preserveAspectRatio="xMidYMid meet">
-                <defs>
-                </defs>
-                <image xlink:href="../examples/king.jpeg" x="0" y="0" height="188" width="268" />
-                <g>
-                    <circle cx="145" cy="60" r="50" class="highlight" stroke="white" fill="transparent"
-                        stroke-width="4" />
-                </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>
+                    <!-- 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;" preserveAspectRatio="xMidYMid meet">
+                        <defs>
+                        </defs>
+                        <image xlink:href="../examples/king.jpeg" x="0" y="0" height="188" width="268" />
+                        <g>
+                            <circle xlink:href="./popup.html"  cx="145" cy="60" r="50" class="highlight" stroke="white" fill="transparent"
+                                stroke-width="4" />
+                        </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>
+            </div>
+            
         </article>
 
     </div>
@@ -93,7 +97,7 @@
         const wrapper2 = new CardWrapper(demoCardWithSelector)
         wrapper2.handleClicksAsTaps()
         wrapper2.onTap('.highlight', event => {
-            Highlight.toggleHighlight(event.target)
+            Card.loadHighlightPopup(event)
         })
         
         wrapper2.onTap('.link', event => {

lib/card/popup.html

@@ -0,0 +1,10 @@
+<div class="popupHtml">
+
+    <h1>
+        Popup
+    </h1>
+    <p>
+        Lorem ipsum...
+    </p>
+
+</div>