-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
executable file
·136 lines (132 loc) · 4.41 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-063933E3C2"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-063933E3C2");
</script>
<meta charset="utf-8" />
<title>Isomorphic-Table-Cards</title>
<link
rel="canonical"
href="https://evoluteur.github.io/isomorphic-table-cards/"
/>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" type="image/png" href="favicon.png" />
<link href="css/isomorphic-table-cards.css" rel="stylesheet" />
<link href="css/demo.css" rel="stylesheet" />
<script src="js/data-gemstones.js" charset="utf-8"></script>
<script src="js/isomorphic-table-cards.js" charset="utf-8"></script>
<meta
name="description"
content="Isomorphic Table and Cards views with animated transitions on sorting, changing view, and browser resizing (using Vanilla Javascript, CSS, and HTML)."
/>
<meta
name="keywords"
content="table, list, card, cards, view, css, javascript, animation, transition, transformation, isomorphism, morphing"
/>
<meta
property="og:image"
content="https://raw.github.com/evoluteur/isomorphic-table-cards/master/screenshot.gif"
/>
<meta name="author" content="Olivier Giulieri" />
</head>
<body onresize="itc.redraw()" onload="render()">
<h1>
Isomorphic-Table-Cards
<div class="github">
<iframe
src="https://ghbtns.com/github-btn.html?user=evoluteur&repo=isomorphic-table-cards&type=star&count=true&size=small"
frameborder="0"
scrolling="0"
width="100px"
height="30px"
></iframe>
</div>
</h1>
<p>
This demo shows animations during transition between cards and table views
or sorting. Click on the links in the top-right corner to see it in
action.
</p>
<div id="opts">
<div>
View: <a href="javascript:itc.redraw('table')">Table</a> /
<a href="javascript:itc.redraw('cards')">Cards</a>
</div>
<div>
Order by: <a href="javascript:itc.sort('name')">Name</a> /
<a href="javascript:itc.sort('chakra')">Chakra</a>
</div>
</div>
<div class="holder">
<div class="header sortable">
<div onclick="itc.sort('name')">Gemstone</div>
<div onclick="itc.sort('chakra')">Spiritual properties</div>
</div>
</div>
<script lang="javascript">
let itc
const render = () => {
itc = new IsomorphicTableCards({
data,
selector: ".holder",
// row and card dimensions
rowHeight: 31,
cardHeight: 94,
cardWidth: 210,
// item template
itemTemplate: d => `<div class="item chakra${d.chakra}" id="${d.name}">
<div class="c1">
${d.name}
</div>
<div class="c2">
${d.spirit}
</div>
</div>
`,
// sort functions
sort: (data, key, direction) => {
if(key=='chakra'){
return data.sort(direction>0 ?
(a, b) => (a.chakra+a.name).localeCompare(b.chakra+b.name)
:
(a, b) => ((8-a.chakra)+a.name).localeCompare((8-b.chakra)+b.name)
)
}else{
return data.sort((a, b) => direction*a.name.localeCompare(b.name))
}
}
});
itc.render()
}
</script>
<footer>
<p>
The code available at
<a href="https://github.com/evoluteur/isomorphic-table-cards">GitHub</a>
under the MIT license. This is just Vanilla Javascript, CSS, and HTML.
It can also be done
<a href="https://evoluteur.github.io/d3-table-cards/">using D3.js</a>.
</p>
<p>
Gemstones properties:
<a href="https://smile.amazon.com/dp/1844090671" target="crystals"
>Healing Crystals</a
>
by Michael Gienger.
</p>
<p>
© 2024 <a href="https://evoluteur.github.io/">Olivier Giulieri</a>.
</p>
</footer>
</body>
</html>