-
Notifications
You must be signed in to change notification settings - Fork 19
/
index.html
104 lines (92 loc) · 3.22 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>TinyShell Framework</title>
<link rel="stylesheet" href="./dist/css/tinyshell.css" />
<style>
.list-item {
background-color: #eee;
transition: transform 0.4s linear;
}
.goleft {
transform: translateX(-200%);
}
.goright {
transform: translateX(200%);
}
</style>
</head>
<body>
<nav class="bar bottom">
<div class="tab icon home">Home</div>
<div class="tab icon settings">Activities</div>
<div class="tab icon user">Contacts</div>
</nav>
<section class="page active">
<section class="content nobar">
<h1 class="info-back">This heading is an H1</h1>
<p>This is some text inside a content area.</p>
</section>
<ul class="list-view">
<li class="list-item has-reveal-left">
<div class="reveal-left"><i class="icon delete"></i></div>
<div class="list-text">Drag this one left.</div>
<div class="action-right"><span class="icon edit"></span></div>
</li>
<li class="list-item has-reveal-both">
<div class="reveal-left"><i class="icon delete"></i></div>
<div class="list-text">Drag this one right.</div>
<div class="reveal-right"><i class="icon delete"></i></div>
</li>
<li class="list-item">
<div class="list-text">Tap this one.</div>
</li>
<li class="list-item">
<div class="list-text">Swipe this one left or right.</div>
</li>
</ul>
</section>
<script src="./dist/js/tinyshell-min.js"></script>
<!-- <script src="./js/tinyshell.js"></script> -->
<script>
document.addEventListener("DOMContentLoaded", () => {
let first = document.querySelector(".list-item:nth-of-type(1)");
let firstTinyShell = new tinyshell(first);
firstTinyShell.addEventListener("revealright", one);
let second = document.querySelector(".list-item:nth-of-type(2)");
let secondTinyShell = new tinyshell(second);
secondTinyShell.addEventListener("revealleft", one);
let third = document.querySelector('.list-item:nth-child(3)');
let thirdTinyShell = new tinyshell(third);
thirdTinyShell.addEventListener('tap', one);
let fourth = document.querySelector('.list-item:nth-child(4)');
let fourthTinyShell = new tinyshell(fourth);
fourthTinyShell.addEventListener('swipeleft', left);
fourthTinyShell.addEventListener('swiperight', right);
});
function one(ev) {
console.log("function one called by event ", ev);
let p = document.querySelector('.content p').textContent = JSON.stringify(ev, '\t', 2);
}
function left(ev) {
//swiped left... add the class 'goleft' to the element
let li = ev.currentTarget;
console.log(li);
li.classList.add('goleft');
setTimeout((function () {
this.parentElement.removeChild(this);
}).bind(ev.currentTarget), 500);
}
function right(ev) {
//swiped left... add the class 'goleft' to the element
let li = ev.currentTarget;
console.log(li);
li.classList.add('goright');
setTimeout((function () {
this.parentElement.removeChild(this);
}).bind(ev.currentTarget), 500);
}
</script>
</body>
</html>