125 lines
5.5 KiB
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.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><a onclick="alert(1)">link<a></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>
|