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><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">
|
2019-07-15 13:32:45 +02:00
|
|
|
<svg class="overlayBase" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"
|
2019-07-12 14:33:15 +02:00
|
|
|
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>
|
2019-07-15 13:32:45 +02:00
|
|
|
|
|
|
|
|
<!-- 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; height: 100px;" preserveAspectRatio="xMidYMid meet">
|
|
|
|
|
<defs>
|
|
|
|
|
</defs>
|
|
|
|
|
<image xlink:href="../examples/king.jpeg" x="0" y="0" height="188" width="268" />
|
|
|
|
|
<g>
|
|
|
|
|
<circle cx="50%" cy="50%" r="25%" class="highlight" stroke="white" fill="transparent"
|
|
|
|
|
stroke-width="1%" />
|
|
|
|
|
</g>
|
|
|
|
|
|
|
|
|
|
</svg>
|
|
|
|
|
|
|
|
|
|
<p>Lorem ipsum <a class="link" href="javascript:alert('Link clicked via href')"
|
|
|
|
|
style="color:blue;">dolor</a> sit
|
2019-07-12 14:33:15 +02:00
|
|
|
amet,
|
|
|
|
|
consetetur sadipscing elitr.</p>
|
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script class="doctest">
|
|
|
|
|
|
2019-07-12 14:50:30 +02:00
|
|
|
Doctest.expect(ITapDelegate.implementedBy(CardWrapper), true)
|
|
|
|
|
|
2019-07-12 14:33:15 +02:00
|
|
|
const wrapper1 = new CardWrapper(demoCardWithOnClick)
|
|
|
|
|
wrapper1.handleClicksAsTaps()
|
|
|
|
|
|
|
|
|
|
const wrapper2 = new CardWrapper(demoCardWithSelector)
|
|
|
|
|
wrapper2.handleClicksAsTaps()
|
|
|
|
|
wrapper2.onTap('.highlight', event => {
|
2019-07-15 13:32:45 +02:00
|
|
|
|
|
|
|
|
Highlight.openHighlight(event.target, {
|
|
|
|
|
|
|
|
|
|
onExpanded: () => {
|
|
|
|
|
console.log("onExpanded", event.target)
|
|
|
|
|
}
|
|
|
|
|
})
|
2019-07-12 14:33:15 +02:00
|
|
|
})
|
2019-07-15 13:32:45 +02:00
|
|
|
|
|
|
|
|
// Highlight.animate(event)
|
|
|
|
|
|
2019-07-12 14:33:15 +02:00
|
|
|
wrapper2.onTap('.link', event => {
|
|
|
|
|
alert('.link clicked')
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<h2>
|
|
|
|
|
Using Cards within Scatters
|
|
|
|
|
</h2>
|
2019-07-15 13:32:45 +02:00
|
|
|
<p>Cards can be used within scatters. Since the <code>CardWrapper</code> implements the <code>ITapDelegate</code>
|
|
|
|
|
protocol they can simply
|
2019-07-12 14:50:30 +02:00
|
|
|
be attached to a DOMScatter object. See the <a href="../scatter.html">Scatter Doctest</a>.
|
2019-07-12 14:33:15 +02:00
|
|
|
</p>
|
|
|
|
|
<div class="interactive grayBorder" style="position: relative;">
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h2>
|
|
|
|
|
References
|
|
|
|
|
</h2>
|
|
|
|
|
<ul>
|
2019-07-15 13:32:45 +02:00
|
|
|
<li><a href="https://uicookies.com/css-card-design/">30 Visually Stunning CSS Cards Inspirations For Every Type
|
|
|
|
|
Of Websites 2019</a></li>
|
2019-07-12 14:33:15 +02:00
|
|
|
</ul>
|
|
|
|
|
</body>
|
