Added popup example.
This commit is contained in:
parent
d506eed827
commit
3c607200be
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -7,6 +7,7 @@
|
||||||
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
|
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
|
||||||
<link rel="stylesheet" href="../../css/doctest.css">
|
<link rel="stylesheet" href="../../css/doctest.css">
|
||||||
<link rel="stylesheet" href="../../css/highlight.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="../3rdparty/highlight/highlight.pack.js"></script>
|
||||||
<script src="../../dist/iwmlib.js"></script>
|
<script src="../../dist/iwmlib.js"></script>
|
||||||
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
<script src="../../dist/iwmlib.3rdparty.js"></script>
|
||||||
|
|
@ -59,26 +60,29 @@
|
||||||
|
|
||||||
<article id="demoCardWithSelector"
|
<article id="demoCardWithSelector"
|
||||||
style="position: absolute; left: 50%; top: 0%; padding: 16px; margin: 16px; border: 1px solid gray; width: 320px; height: 240px;">
|
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,
|
<!-- Grr... The viewBox must reflect the width & height, using 0, 0, 100,
|
||||||
100 leads to blank spaces -->
|
100 leads to blank spaces -->
|
||||||
<svg class="overlayBase" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 268 188"
|
<svg class="overlayBase" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 268 188"
|
||||||
style="width: 180px;" preserveAspectRatio="xMidYMid meet">
|
style="width: 180px;" preserveAspectRatio="xMidYMid meet">
|
||||||
<defs>
|
<defs>
|
||||||
</defs>
|
</defs>
|
||||||
<image xlink:href="../examples/king.jpeg" x="0" y="0" height="188" width="268" />
|
<image xlink:href="../examples/king.jpeg" x="0" y="0" height="188" width="268" />
|
||||||
<g>
|
<g>
|
||||||
<circle cx="145" cy="60" r="50" class="highlight" stroke="white" fill="transparent"
|
<circle xlink:href="./popup.html" cx="145" cy="60" r="50" class="highlight" stroke="white" fill="transparent"
|
||||||
stroke-width="4" />
|
stroke-width="4" />
|
||||||
</g>
|
</g>
|
||||||
|
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
<p>Lorem ipsum <a class="link" href="javascript:alert('Link clicked via href')"
|
<p>Lorem ipsum <a class="link" href="javascript:alert('Link clicked via href')"
|
||||||
style="color:blue;">dolor</a> sit
|
style="color:blue;">dolor</a> sit
|
||||||
amet,
|
amet,
|
||||||
consetetur sadipscing elitr.</p>
|
consetetur sadipscing elitr.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -93,7 +97,7 @@
|
||||||
const wrapper2 = new CardWrapper(demoCardWithSelector)
|
const wrapper2 = new CardWrapper(demoCardWithSelector)
|
||||||
wrapper2.handleClicksAsTaps()
|
wrapper2.handleClicksAsTaps()
|
||||||
wrapper2.onTap('.highlight', event => {
|
wrapper2.onTap('.highlight', event => {
|
||||||
Highlight.toggleHighlight(event.target)
|
Card.loadHighlightPopup(event)
|
||||||
})
|
})
|
||||||
|
|
||||||
wrapper2.onTap('.link', event => {
|
wrapper2.onTap('.link', event => {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
<div class="popupHtml">
|
||||||
|
|
||||||
|
<h1>
|
||||||
|
Popup
|
||||||
|
</h1>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum...
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
Loading…
Reference in New Issue