iwmlib/lib/card/index.html

107 lines
4.8 KiB
HTML
Raw Normal View History

2019-07-12 14:33:15 +02:00
<!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">
<script src="../3rdparty/highlight/highlight.pack.js"></script>
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.3rdparty.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 id="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;">
<h1 style="color: gray;">A Demo Card with selectors</h1>
<figure style="position: relative;">
<img width="75%" src="../examples/king.jpeg">
<svg id="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" stroke="white" fill="transparent"
stroke-width="1" />
</svg>
</figure>
<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>
<script class="doctest">
const wrapper1 = new CardWrapper(demoCardWithOnClick)
wrapper1.handleClicksAsTaps()
const wrapper2 = new CardWrapper(demoCardWithSelector)
wrapper2.handleClicksAsTaps()
wrapper2.onTap('.highlight', event => {
alert('.highlight clicked')
})
wrapper2.onTap('.link', event => {
alert('.link clicked')
})
</script>
<h2>
Using Cards within Scatters
</h2>
<p>Cards can be used within scatters. Since the CardWrapper implements the TapDelegate protocol they can simply
be attached to a DOMScatter object.
</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>