Skip to content
This repository was archived by the owner on Mar 6, 2018. It is now read-only.

Commit a9c52e6

Browse files
sonnypsonnyp
committed
add demos
1 parent bd8c0c3 commit a9c52e6

File tree

11 files changed

+754
-0
lines changed

11 files changed

+754
-0
lines changed

‎.eslintignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
JSON8Patch.js
2+
demos/

‎demos/apply/index.html

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8"/>
5+
6+
<title>JSON8 Patch apply demo</title>
7+
<link rel="stylesheet" type="text/css" href="../style.css">
8+
9+
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/themes/prism.min.css">
10+
11+
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.14.2/codemirror.css">
12+
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.14.2/addon/lint/lint.css">
13+
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.14.2/addon/fold/foldgutter.css">
14+
15+
<!-- codemirror -->
16+
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.14.2/codemirror.js"></script>
17+
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.14.2/mode/javascript/javascript.js"></script>
18+
19+
<!-- linting -->
20+
<script src="//cdnjs.cloudflare.com/ajax/libs/jsonlint/1.6.0/jsonlint.js"></script>
21+
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.14.2/addon/lint/lint.js"></script>
22+
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.14.2/addon/lint/json-lint.js"></script>
23+
24+
<!-- code folding -->
25+
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.14.2/addon/fold/foldcode.js"></script>
26+
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.14.2/addon/fold/foldgutter.js"></script>
27+
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.14.2/addon/fold/brace-fold.js"></script>
28+
29+
<!-- hightlighting -->
30+
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.14.2/addon/edit/matchbrackets.js"></script>
31+
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.14.2/addon/edit/closebrackets.js"></script>
32+
33+
<script src="../../JSON8Patch.js"></script>
34+
<script src="script.js"></script>
35+
</head>
36+
<body>
37+
<p>This is a <strong>live editor</strong>. Editting <strong data-target="target">input</strong> or <strong data-target="patch">patch</strong> will update <strong data-target="result">output</strong> instantly.</p>
38+
39+
<div id="target" class="json8">
40+
<h1>input</h1>
41+
<textarea></textarea>
42+
</div>
43+
44+
<div id="patch" class="json8">
45+
<h1>patch</h1>
46+
<textarea></textarea>
47+
</div>
48+
49+
<div id="result" class="json8">
50+
<h1>output</h1>
51+
<textarea></textarea>
52+
</div>
53+
54+
<pre>
55+
<code class="language-javascript" id="example">
56+
<strong data-target="result">output</strong> = ooPatch.apply(<strong data-target="target">input</strong>, <strong data-target="patch">patch</strong>}).doc</code>
57+
</pre>
58+
59+
<script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/prism.min.js"></script>
60+
<script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/plugins/keep-markup/prism-keep-markup.min.js"></script>
61+
<script src="../script.js"></script>
62+
</body>
63+
</html>

‎demos/apply/script.js

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
(function () {
2+
'use strict'
3+
4+
var ooPatch = JSON8Patch
5+
6+
var sections = [
7+
{
8+
id: 'target',
9+
value: {
10+
"firstName": "John",
11+
"lastName": "Smith",
12+
"age": 25,
13+
"address": {
14+
"streetAddress": "21 2nd Street",
15+
"city": "New York",
16+
"state": "NY",
17+
"postalCode": "10021"
18+
},
19+
"phoneNumber": [
20+
{
21+
"type": "home",
22+
"number": "212 555-1234"
23+
},
24+
{
25+
"type": "fax",
26+
"number": "646 555-4567"
27+
}
28+
],
29+
"gender": {
30+
"type": "male"
31+
}
32+
}
33+
},
34+
{
35+
id: 'patch',
36+
value: [
37+
{"path": "/age", "op": "replace", "value": 26},
38+
{"path": "/phoneNumber/1", "op": "remove"}
39+
]
40+
},
41+
{
42+
id: 'result'
43+
}
44+
]
45+
46+
var editors = {}
47+
48+
document.addEventListener('DOMContentLoaded', function () {
49+
sections.forEach(function (section) {
50+
var input = section.textarea = document.querySelector('div#' + section.id + ' textarea')
51+
52+
if (section.value) {
53+
input.value = JSON.stringify(section.value, null, 2)
54+
}
55+
56+
editors[section.id] = section.editor = CodeMirror.fromTextArea(section.textarea, {
57+
lineNumbers: true,
58+
mode: section.value ? "application/json" : "text/plain",
59+
gutters: ["CodeMirror-lint-markers", "CodeMirror-foldgutter"],
60+
lint: true,
61+
matchBrackets: true,
62+
autoCloseBrackets: true,
63+
foldGutter: true,
64+
readOnly: section.id === 'result'
65+
})
66+
})
67+
68+
function run () {
69+
var target
70+
var patch
71+
72+
try {
73+
target = JSON.parse(editors['target'].getValue())
74+
} catch (e) {
75+
editors['result'].setOption('mode', 'text/plain');
76+
editors['result'].setValue('target is not valid JSON\n\n' + e)
77+
return
78+
}
79+
80+
try {
81+
patch = JSON.parse(editors['patch'].getValue())
82+
} catch (e) {
83+
editors['result'].setOption('mode', 'text/plain');
84+
editors['result'].setValue('patch is not valid JSON\n\n' + e)
85+
return
86+
}
87+
88+
var applyResult
89+
90+
try {
91+
applyResult = ooPatch.apply(target, patch)
92+
} catch (e) {
93+
editors['result'].setOption('mode', 'text/plain');
94+
editors['result'].setValue('patch is not valid\n\n' + e)
95+
return
96+
}
97+
98+
editors['result'].setOption('mode', 'application/json');
99+
editors['result'].setValue(JSON.stringify(applyResult.doc, null, 2))
100+
}
101+
102+
[editors['target'], editors['patch']].forEach(function (editor) {
103+
editor.on('change', function () {
104+
run()
105+
})
106+
})
107+
108+
run()
109+
})
110+
}())

‎demos/buildPatchFromRevert/index.html

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8"/>
5+
6+
<title>JSON8 Patch buildPatchFromRevert demo</title>
7+
<link rel="stylesheet" type="text/css" href="../style.css">
8+
9+
10+
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/themes/prism.min.css">
11+
12+
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.14.2/codemirror.min.css">
13+
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.14.2/addon/lint/lint.min.css">
14+
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.14.2/addon/fold/foldgutter.min.css">
15+
16+
<!-- codemirror -->
17+
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.14.2/codemirror.min.js"></script>
18+
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.14.2/mode/javascript/javascript.min.js"></script>
19+
20+
<!-- linting -->
21+
<script src="//cdnjs.cloudflare.com/ajax/libs/jsonlint/1.6.0/jsonlint.min.js"></script>
22+
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.14.2/addon/lint/lint.min.js"></script>
23+
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.14.2/addon/lint/json-lint.min.js"></script>
24+
25+
<!-- code folding -->
26+
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.14.2/addon/fold/foldcode.min.js"></script>
27+
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.14.2/addon/fold/foldgutter.min.js"></script>
28+
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.14.2/addon/fold/brace-fold.min.js"></script>
29+
30+
<!-- hightlighting -->
31+
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.14.2/addon/edit/matchbrackets.min.js"></script>
32+
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.14.2/addon/edit/closebrackets.min.js"></script>
33+
34+
<script src="../../JSON8Patch.js"></script>
35+
<script src="script.js"></script>
36+
</head>
37+
<body>
38+
<p>This is a <strong>live editor</strong>. Editting <strong data-target="target">input</strong> or <strong data-target="patch">patch</strong> will update <strong data-target="result">revert</strong> instantly.</p>
39+
40+
<div id="target" class="json8">
41+
<h1>input</h1>
42+
<textarea></textarea>
43+
</div>
44+
45+
<div id="patch" class="json8">
46+
<h1>patch</h1>
47+
<textarea></textarea>
48+
</div>
49+
50+
<div id="result" class="json8">
51+
<h1>revert</h1>
52+
<textarea></textarea>
53+
</div>
54+
55+
<pre>
56+
<code class="language-javascript" id="example">
57+
var applyResult = ooPatch.apply(<strong data-target="target">input</strong>, <strong data-target="patch">patch</strong>, {reversible: true})
58+
<strong data-target="result">revert</strong> = ooPatch.buildPatchFromRevert(applyResult.revert)</code>
59+
</pre>
60+
61+
<script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/prism.min.js"></script>
62+
<script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/plugins/keep-markup/prism-keep-markup.min.js"></script>
63+
<script src="../script.js"></script>
64+
</body>
65+
</html>

‎demos/buildPatchFromRevert/script.js

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
(function () {
2+
'use strict'
3+
4+
var ooPatch = JSON8Patch
5+
6+
var sections = [
7+
{
8+
id: 'target',
9+
value: {
10+
"firstName": "John",
11+
"lastName": "Smith",
12+
"age": 25,
13+
"address": {
14+
"streetAddress": "21 2nd Street",
15+
"city": "New York",
16+
"state": "NY",
17+
"postalCode": "10021"
18+
},
19+
"phoneNumber": [
20+
{
21+
"type": "home",
22+
"number": "212 555-1234"
23+
},
24+
{
25+
"type": "fax",
26+
"number": "646 555-4567"
27+
}
28+
],
29+
"gender": {
30+
"type": "male"
31+
}
32+
}
33+
},
34+
{
35+
id: 'patch',
36+
value: [
37+
{"path": "/age", "op": "replace", "value": 26},
38+
{"path": "/phoneNumber/1", "op": "remove"}
39+
]
40+
},
41+
{
42+
id: 'result'
43+
}
44+
]
45+
46+
var editors = {}
47+
48+
document.addEventListener('DOMContentLoaded', function () {
49+
// CodeMirror.fromTextArea(document.getElementById('example'), {
50+
// mode: 'application/javascript'
51+
// })
52+
53+
sections.forEach(function (section) {
54+
var input = section.textarea = document.querySelector('div#' + section.id + ' textarea')
55+
56+
if (section.value) {
57+
input.value = JSON.stringify(section.value, null, 2)
58+
}
59+
60+
editors[section.id] = section.editor = CodeMirror.fromTextArea(section.textarea, {
61+
lineNumbers: true,
62+
mode: section.value ? "application/json" : "text/plain",
63+
gutters: ["CodeMirror-lint-markers", "CodeMirror-foldgutter"],
64+
lint: true,
65+
matchBrackets: true,
66+
autoCloseBrackets: true,
67+
foldGutter: true,
68+
readOnly: section.id === 'result'
69+
})
70+
})
71+
72+
function run () {
73+
var target
74+
var patch
75+
76+
try {
77+
target = JSON.parse(editors['target'].getValue())
78+
} catch (e) {
79+
editors['result'].setOption('mode', 'text/plain');
80+
editors['result'].setValue('target is not valid JSON\n\n' + e)
81+
return
82+
}
83+
84+
try {
85+
patch = JSON.parse(editors['patch'].getValue())
86+
} catch (e) {
87+
editors['result'].setOption('mode', 'text/plain');
88+
editors['result'].setValue('patch is not valid JSON\n\n' + e)
89+
return
90+
}
91+
92+
var applyResult
93+
94+
try {
95+
applyResult = ooPatch.apply(target, patch, {reversible: true})
96+
} catch (e) {
97+
editors['result'].setOption('mode', 'text/plain');
98+
editors['result'].setValue('patch is not valid\n\n' + e)
99+
return
100+
}
101+
102+
editors['result'].setOption('mode', 'application/json');
103+
editors['result'].setValue(JSON.stringify(ooPatch.buildPatchFromRevert(applyResult.revert), null, 2))
104+
}
105+
106+
[editors['target'], editors['patch']].forEach(function (editor) {
107+
editor.on('change', function () {
108+
run()
109+
})
110+
})
111+
112+
run()
113+
})
114+
}())

0 commit comments

Comments
 (0)