IWMBrowser/iwmlib
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
css/popup.css Normal file
View File

@ -0,0 +1,35 @@
.popup {
width: 800px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
min-width: 400px;
color: #191919;
background-color: #f2f2f2;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
padding: 25.64px 40px;
}
.popup img {
display: block;
margin: auto;
}
.popup img:not(:first-child) {
margin-top: 20px;
}
.popup img:not(:last-child) {
margin-bottom: 20px;
}
.popup .notch {
width: 20px;
height: 20px;
border-color: #f2f2f2;
}
.PopupContent p:not(:last-child) {
margin-bottom: 30px;
}

40
lib/card/index.html
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>
<!-- 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>
</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>
<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>
</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 => {

10
lib/card/popup.html Normal file
View File

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