Fixed highlight doctest.

lib/card/index.html

@@ -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')
         })