-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathindex.html
179 lines (178 loc) · 5.37 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>DOMSnap</title>
<meta name="description" content="Offline web pages by persisting DOM to IndexedDB/WebSQL" />
<meta name="keywords" content="DOMSnap, offline html, application cache, window.caches, IndexedDB, WebSQL">
<style>
html,body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
color: #555;
background-color: #eee;
}
a,a:visited{
color: #3498db;
text-decoration: none;
}
p{
margin: 0.3em 0;
}
h1,h2,h3,h4,h5{
margin: 0.5em 0;
}
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
button {
padding: 5px;
margin: 2px;
border: 0;
color: #fff;
background: #3498db;
text-decoration: none;
cursor: pointer;
}
button:hover {
background: #3cb0fd;
text-decoration: none;
}
button.green{
background-color: #4CAF50;
}
button.green:hover{
background-color: #74A976;
}
.container{
min-height: 100%;
padding: 20px 40px;
background: #fff;
}
.container>header{
vertical-align: middle;
}
.container>header>div{
display: inline-block;
}
.container>header .title{
width: 70%;
}
.container>header .links{
width: 28%;
text-align: right;
}
[contenteditable]{
height: 80px;
margin: 10px 0;
padding: 10px;
border: solid 1px #FFC107;
background-color: #FBFBE8;
}
@media screen and (min-width: 832px) {
.container {
width: 800px;
margin: 0 auto;
}
}
</style>
</head>
<body ontuchstart="">
<main class="container">
<header class="clearfix">
<div class="title"><h1>DOMSnap</h1></div>
<div class="links">
<a href="https://github.com/unbug/DOMSnap">GitHub</a>
</div>
</header>
<hr>
<h3>
<p>DOMSnap helps you to offline web pages by persisting DOM to IndexedDB/WebSQL.</p>
</h3>
<p>HTML5 provides LocalStorage, IndexedDB, and <a href="https://googlechrome.github.io/samples/service-worker/window-caches/">window.caches</a> to build offline web apps.
But all of <a href="http://www.html5rocks.com/en/features/offline">these technologies</a>, we can't miss local database.
DOMSnap takes full advantage of <a href="http://www.html5rocks.com/en/features/offline">offline technologies</a>.
Storing HTML to local IndexedDB/WebSQL and resumeing when you're offline.
With DOMSnap, web pages can resume to their last state with less request to the server and less template render.
Think offline is a long way out, why not just give DOMSnap a try?</p>
<section id="demo1">
<h4>Demo 1</h4>
<div contenteditable="true">
Please type something at here and click Capture to take a snapshot of this page.Then just reload it and click Resume to see what you just typed.
</div>
</section>
<button onclick="capture()" title="Capture for default">Capture</button>
<button onclick="capture(2)" title="Capture with specified id 2">Capture 2</button>
<button onclick="preCapture()" title="Capture with specified html">Pre-Capture</button>
<button onclick="watch()" title="Watching change and auto Capture">Watch</button>
<button class="green" onclick="resume()" title="Resume default">Resume</button>
<button class="green" onclick="resume(2)" title="Resume Capture 2">Resume 2</button>
<button class="green" onclick="resume('pre_id')" title="Resume Pre-Capture">Resume Pre</button>
<section id="demo2">
<h4>Demo 2</h4>
<div contenteditable="true">
Please type something....
</div>
</section>
<button onclick="watchAll()" title="Watching change and auto Capture">Watch all demos</button>
<button class="green" onclick="resumeAll()" title="Resume default">Resume all demos</button>
</main>
<script src="dist/DOMSnap.min.js"></script>
<script>
var DS = DOMSnap({
onReady: function () {
console.log('DOMSnap is ready');
}
});
function capture(id){
DS.capture('#demo1',{id: id});
console.log('captured');
}
function preCapture(){
DS.capture('#demo1',{
id: 'pre_id',
html: '<h4>Demo 1</h4>'+
'<div contenteditable="true">This content was pre rendered!</div>'
});
console.log('captured');
}
function watch() {
DS.watch('#demo1');
console.log('watched');
}
function customWatch() {
var id = 0;
DS.watch('#demo1',{
id: function(selector){ return id++},
html: function(selector){
return '<h4>Demo 1</h4>'+
'<div contenteditable="true">This content was generated for id '+id+'</div>'}
});
console.log('watched');
}
function resume(id){
DS.resume('#demo1',{id: id});
console.log('resumed');
}
function watchAll() {
DS.watch(['#demo1','#demo2']);
console.log('watched');
}
function resumeAll(){
DS.resume('#demo1');
DS.resume('#demo2');
console.log('all resumed');
}
</script>
</body>
</html>