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

Added popup example.

Browse Source
This commit is contained in:
Uwe Oestermeier
2019-07-17 11:41:33 +02:00
parent d506eed827
commit 3c607200be
3 changed files with 69 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/card/index.html
+24 -20
View File
@@ -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 => {