-
Notifications
You must be signed in to change notification settings - Fork 18
/
Copy pathindex.html
254 lines (234 loc) · 12.9 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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<!doctype html>
<html lang="en">
<head>
<!-- SEO and PWA metadata -->
<meta charset="utf-8">
<meta name="application-name" content="Shopping List">
<meta name="description" content="An Offline First demo of a shopping list using vanilla JavaScript and PouchDB">
<meta name="keywords" content="Offline First,HTML,CSS,XML,JavaScript,PouchDB">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<meta name="theme-color" content="#283b4f">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#283b4f">
<meta name="apple-mobile-web-app-title" content="Shopping List">
<meta name="msapplication-config" content="browserconfig.xml">
<!-- favicons for all -->
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
<link rel="mask-icon" href="favicons/safari-pinned-tab.svg" color="#283b4f">
<link rel="shortcut icon" href="favicons/favicon.ico">
<!-- PWA manifest -->
<link rel="manifest" href="manifest.json">
<!-- CSS galore -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link rel="stylesheet" href="css/shoppinglist.css">
<title>Shopping List | vanilla JavaScript | PouchDB</title>
</head>
<body>
<!-- banner -->
<header class="navbar-fixed">
<nav id="nav" class="primary-color">
<div class="nav-wrapper">
<span class="brand-logo left">
<a href="#" onclick="shopper.goto(); return false" class="goback" role="button"><i class="material-icons">arrow_back</i></a>
<span id="header-title">Shopping Lists</span>
</span>
<!-- settings button -->
<a href="#" onclick="shopper.openabout(); return false" class="right settings about-btn" role="button"><i class="material-icons">info_outline</i></a>
<a href="#" onclick="shopper.opensettings(); return false" class="right settings settings-btn" role="button"><i class="material-icons">settings</i></a>
<a href="#" onclick="shopper.opensettings(); return false" class="right settings error-btn" role="button"><i class="material-icons secondary-text lighter">error</i></a>
</div>
</nav>
</header>
<!-- content area -->
<main>
<div id="shopping-lists">
<!-- shopping lists get inserted here -->
</div>
<ul id="shopping-list-items" class="collection">
<!-- shopping list items get inserted here -->
</ul>
<!-- add more stuff button -->
<button id="add-button" class="btn-floating btn-large secondary-color right" onclick="shopper.openadd()">
<i class="material-icons">add</i>
</button>
</main>
<!-- modal: add a shopping list form -->
<div class="modal bottom-sheet list-bottom-sheet" role="dialog" aria-labelledby="create-shopping-list">
<form id="shopping-list-add" class="col s12 white" onsubmit="shopper.add(event); return false">
<div class="modal-content">
<h5 id="create-shopping-list">Create a Shopping List</h5>
<div class="row">
<div class="input-field col s12">
<input name="title" type="text" class="validate" placeholder="Enter a title for the shopping list" data-escape="closeadd" required />
</div>
<input name="type" type="hidden" value="list">
</div>
</div>
<div class="modal-footer primary-color">
<button class="btn-flat" type="button" data-escape="closeadd" onclick="shopper.closeadd()">Cancel</button>
<button class="btn-flat" type="submit" data-escape="closeadd">Add</button>
</div>
</form>
</div>
<!-- modal: add a shopping list item form -->
<div class="modal bottom-sheet item-bottom-sheet" role="dialog" aria-labelledby="add-an-item">
<form id="shopping-list-item-add" class="col s12 white" onsubmit="shopper.add(event); return false">
<div class="modal-content">
<h5 id="add-an-item">Add an Item</h5>
<div class="row">
<div class="input-field col s12">
<input name="title" type="text" class="validate" placeholder="Enter an item to add to the shopping list" data-escape="closeadd" required />
</div>
<input name="type" type="hidden" value="item">
</div>
</div>
<div class="modal-footer primary-color">
<button class="btn-flat" type="button" data-escape="closeadd" onclick="shopper.closeadd()">Cancel</button>
<button class="btn-flat" type="submit" data-escape="closeadd">Add</button>
</div>
</form>
</div>
<!-- modal: add a shopping list settings form -->
<div class="modal top-sheet settings-top-sheet" role="dialog" aria-labelledby="shopping-lists-settings">
<form id="shopping-list-settings" class="col s12 white" onsubmit="shopper.settings(event); return false">
<div class="modal-content">
<h5 id="shopping-lists-settings">Shopping Lists Settings</h5>
<div class="row">
<div class="input-field col s12">
<span class="primary-text darker">Enter a fully qualified URL (including username and password) to a remote IBM Cloudant, Apache CouchDB, or PouchDB database to sync your shopping list.</span>
<input name="remoteDB" type="url" class="validate" placeholder="http://username:password@localhost:5984/database" data-escape="closesettings" />
<div class="chip"></div>
</div>
</div>
</div>
<div class="modal-footer secondary-color">
<button class="btn-flat" type="button" data-escape="closesettings" onclick="shopper.closesettings()">Cancel</button>
<button class="btn-flat" type="submit" data-escape="closesettings">Sync</button>
</div>
</form>
</div>
<!-- modal: open shopping list about -->
<div class="modal top-sheet about-top-sheet" role="dialog" aria-labelledby="shopping-list-about">
<div class="col s12 white">
<div class="modal-content">
<h5 id="shopping-list-about">About</h5>
<div class="row">
<div class="col s12">
<p class="primary-text darker">
<a href="https://github.com/ibm-watson-data-lab/shopping-list" target="_blank">Shopping List is a series of Offline First demo apps, each built using a different stack.</a>
These demo apps cover Progressive Web Apps, hybrid mobile apps, native mobile apps, and desktop apps. This particular demo app is a <strong>Progressive Web App</strong>
built using <strong>Vanilla JS and PouchDB</strong>. <a href="https://github.com/ibm-watson-data-lab/shopping-list-vanillajs-pouchdb" target="_blank">Get the source code</a>.
</p>
</div>
</div>
</div>
<div class="modal-footer primary-color">
<button class="btn-flat" type="button" data-escape="closeabout" onclick="shopper.closeabout()">Close</button>
</div>
</div>
</div>
<!-- modal: overlay -->
<div class="modal-overlay" onclick="shopper.closeadd()" aria-hidden="true"></div>
<!-- template: shopping list -->
<script type="text/template" id="shopping-list-template">
<div class="list-view collapsible">
<div class="card-content" onclick="shopper.goto('{{_id}}', '{{title}}', event)" role="button">
<span class="card-title activator">{{title}}
<button class="btn-flat more-btn right" onclick="shopper.toggle('{{_sanitizedid}}', event)"><i class="material-icons">more_vert</i></button>
</span>
<p class="primary-text darker">{{place.title}}</p>
</div>
<div class="card-action">
<input type="checkbox" id="checked-list-{{_sanitizedid}}" name="checked-list-{{_sanitizedid}}" {{_checked}} disabled />
<label for="checked-list-{{_sanitizedid}}">0 items</label>
</div>
</div>
<div class="list-edit collapsible closed">
<form id="form-{{_sanitizedid}}" class="col s12 white" onsubmit="shopper.update('{{_id}}', event); return false">
<div class="card-content">
<span class="card-title">
<button id="close-{{_sanitizedid}}" type="button" class="btn-flat more-btn right" data-escape="{{_sanitizedid}}" onclick="shopper.toggle('{{_sanitizedid}}', event)" aria-hidden="true"><i class="material-icons">close</i></button>
</span>
<h5>Edit Shopping List</h5>
<div class="row">
<div class="input-field col s12">
<input name="title" type="text" class="validate" value="{{title}}" placeholder="{{title}}" data-escape="{{_sanitizedid}}" aria-hidden="true" required />
</div>
</div>
</div>
<div class="card-action">
<button class="btn-flat" type="button" data-escape="{{_sanitizedid}}" onclick="shopper.remove('{{_id}}')" aria-hidden="true">Remove</button>
<button class="btn-flat" type="submit" data-escape="{{_sanitizedid}}" aria-hidden="true">Update</button>
</div>
</form>
</div>
</script>
<!-- template: shopping list item -->
<script type="text/template" id="shopping-list-item-template">
<div class="item-view collapsible">
<input type="checkbox" id="checked-item-{{_sanitizedid}}" name="checked-item-{{_sanitizedid}}" {{_checked}} onclick="shopper.update('{{_id}}')" value="{{title}}" />
<label for="checked-item-{{_sanitizedid}}">{{title}}</label>
<button class="btn-flat more-btn right" onclick="shopper.toggle('{{_sanitizedid}}', event)"><i class="material-icons">more_vert</i></button>
</div>
<div class="item-edit collapsible closed">
<form id="form-{{_sanitizedid}}" class="col s12 tertiary lighter" onsubmit="shopper.update('{{_id}}', event); return false">
<div>
<span class="card-title">
<button id="close-{{_sanitizedid}}" type="button" class="btn-flat more-btn right" data-escape="{{_sanitizedid}}" onclick="shopper.toggle('{{_sanitizedid}}', event)" aria-hidden="true"><i class="material-icons">close</i></button>
</span>
<h5>Edit Item</h5>
<div class="row">
<div class="input-field col s12">
<input name="title" type="text" class="validate" value="{{title}}" placeholder="{{title}}" data-escape="{{_sanitizedid}}" aria-hidden="true" required />
</div>
</div>
</div>
<div class="card-action">
<button class="btn-flat" type="button" data-escape="{{_sanitizedid}}" onclick="shopper.remove('{{_id}}')" aria-hidden="true">Remove</button>
<button class="btn-flat" type="submit" data-escape="{{_sanitizedid}}" aria-hidden="true">Update</button>
</div>
</form>
</div>
</script>
<!-- service worker -->
<script>
// browser supports 'serviceWorker'
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
// register service worker
navigator.serviceWorker.register('worker.js').then(function(registration) {
console.log('ServiceWorker registration successful with scope: ', registration.scope)
}, function(err) {
console.log('ServiceWorker registration failed: ', err)
})
})
}
// browser supports 'onLine' status
if ('onLine' in navigator) {
var onlineStatusUpdate = function () {
// update page based on 'onLine' status
if (navigator.onLine) {
document.body.className = document.body.className.replace('shopping-list-offline', '').trim()
} else {
document.body.className += ' shopping-list-offline'
}
}
// listen to 'online', 'offline' statuses
window.addEventListener('online', onlineStatusUpdate)
window.addEventListener('offline', onlineStatusUpdate)
onlineStatusUpdate()
}
</script>
<!-- JavaScript goodies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/cuid/1.3.8/browser-cuid.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pouchdb.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pouchdb.find.min.js"></script>
<script src="js/shoppinglist.js"></script>
<script src="js/shoppinglist.model.js"></script>
</body>
</html>