iwmlib/lib/card/index.html

125 lines
5.5 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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">
<link rel="stylesheet" href="../../css/popup.css">
<script src="../3rdparty/highlight/highlight.pack.js"></script>
<script src="../../dist/iwmlib.3rdparty.js"></script>
<script src="../../dist/iwmlib.js"></script>
</head>
<body onload="Doctest.run();">
<h1>
Cards
</h1>
<p>
Cards implement a central UI metaphor for multiuser applications. They allow users to explore information spaces
independently from each other. Most of the time a card lives within a scatter and can be moved, rotated, and
scaled.
The scatter and it's interaction mapper are also responsible to detect and distinguish tap events form other
interactions.
But in preview programs and editors this is not necessary. Therefore we provide a central CardWrapper class that
turns any DOM node into a card.
</p>
<p>
The wrapper's main task is to handle tap events and trigger the corresponding actions. There are three main
ways to define these actions.
<ol>
<li>Define onclick handlers in HTML and SVG, e.g. <code>&lt;a onclick="alert(1)"&gt;link&lt;a&gt;</code>
</li>
<li>Use onTap with a DOM node as event target, e.g. <code>wrapper.onTap(node, event => {})</code></li>
<li>Use onTap with a CSS selector, e.g. <code>wrapper.onTap('.link', event => {})</code></li>
</li>
</ol>
The order in which these possibilities are testet is 1, 2, 3.
</p>
<p>
Note that the objects can also be actived by clicking nearby and not directly on the DOM node.
This solves a major problem on large tabletops with a parallaxis in the display.
</p>
<div class="interactive grayBorder" style="position: relative;">
<article id="demoCardWithOnClick"
style="position: relative; left: 0%; padding: 16px; margin: 16px; border: 1px solid gray; width: 320px; height: 240px;">
<h1 style="color: gray;">A Demo Card with onclick</h1>
<figure style="position: relative;">
<img width="75%" src="../examples/women.jpeg">
<svg class="overlayBase" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"
viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
<circle cx="35" cy="50" r="35" class="highlight" onclick="alert('Highlight clicked')" stroke="white"
fill="transparent" stroke-width="1" />
</svg>
</figure>
<p>Lorem ipsum <a class="link" style="color:blue;" onclick="alert('Link clicked')">dolor</a> sit amet,
consetetur sadipscing elitr.</p>
</article>
<article id="demoCardWithSelector"
style="position: absolute; left: 50%; top: 0%; padding: 16px; margin: 16px; border: 1px solid gray; width: 320px; height: 240px;">
<div class="info-card" style="text-align: center">
<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 xlink:href="./popup.html" cx="50%" cy="30%" r="25%" 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>
<script class="doctest">
Doctest.expect(ITapDelegate.implementedBy(CardWrapper), true)
const wrapper1 = new CardWrapper(demoCardWithOnClick)
wrapper1.handleClicksAsTaps()
const wrapper2 = new CardWrapper(demoCardWithSelector)
wrapper2.handleClicksAsTaps()
wrapper2.onTap('circle', (event, node) => {
Card.loadHighlightPopup(event, node)
})
wrapper2.onTap('a', event => {
alert('a clicked')
})
</script>
<h2>
Using Cards within Scatters
</h2>
<p>Cards can be used within scatters. Since the <code>CardWrapper</code> implements the <code>ITapDelegate</code>
protocol they can simply
be attached to a DOMScatter object. See the <a href="../scatter.html">Scatter Doctest</a>.
</p>
<div class="interactive grayBorder" style="position: relative;">
</div>
<h2>
References
</h2>
<ul>
<li><a href="https://uicookies.com/css-card-design/">30 Visually Stunning CSS Cards Inspirations For Every Type
Of Websites 2019</a></li>
</ul>
</body>