193 lines
4.7 KiB
HTML
193 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset='utf-8'>
|
|
<meta name='viewport' content='width=device-width,initial-scale=1'>
|
|
|
|
<title>JSON Editor (Svelte)</title>
|
|
|
|
<link rel='icon' type='image/png' href='favicon.png'>
|
|
|
|
<style>
|
|
html, body {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
color: #333;
|
|
margin: 0;
|
|
padding: 8px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
h1 {
|
|
color: purple;
|
|
}
|
|
|
|
#testEditorContainer {
|
|
width: 800px;
|
|
height: 500px;
|
|
max-width: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="testEditorContainer"></div>
|
|
<p>
|
|
<button id="loadLargeJson">load large json</button>
|
|
<button id="clearJson">clear json</button>
|
|
<button id="patchJson">patch json</button>
|
|
<input id="loadFile" type="file">
|
|
</p>
|
|
<p>
|
|
<button id="expandAll">expand all</button>
|
|
<button id="expand2">expand 2 levels</button>
|
|
<button id="collapseAll">collapse all</button>
|
|
</p>
|
|
|
|
<script type="module">
|
|
import jsoneditor, { TreeMode } from './dist/es/jsoneditor.js'
|
|
|
|
const doc = {
|
|
'array': [1, 2, 3, {
|
|
name: 'Item ' + 2,
|
|
id: String(2),
|
|
index: 2,
|
|
time: new Date().toISOString(),
|
|
location: {
|
|
latitude: 1.23,
|
|
longitude: 23.44,
|
|
coordinates: [23.44, 1.23]
|
|
}
|
|
}],
|
|
'emptyArray': [],
|
|
'boolean': true,
|
|
'color': '#82b92c',
|
|
'null': null,
|
|
'number': 123,
|
|
'object': {
|
|
'a': 'b', 'c': 'd', nested: {
|
|
name: 'Item ' + 2,
|
|
id: String(2),
|
|
index: 2,
|
|
time: new Date().toISOString(),
|
|
location: {
|
|
latitude: 1.23,
|
|
longitude: 23.44,
|
|
coordinates: [23.44, 1.23]
|
|
}
|
|
}
|
|
},
|
|
'emptyObject': {},
|
|
'': '',
|
|
'string': 'Hello World',
|
|
'url': 'https://jsoneditoronline.org',
|
|
'Lorem Ipsum': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
|
|
}
|
|
|
|
const testEditor = jsoneditor({
|
|
target: document.getElementById('testEditorContainer'),
|
|
mode: TreeMode,
|
|
doc,
|
|
onChangeJson: doc => console.log('onChangeJson', doc),
|
|
validate: doc => {
|
|
if (
|
|
doc && typeof doc === 'object' &&
|
|
doc.object && typeof doc.object === 'object' &&
|
|
doc.object.a === 'b') {
|
|
return [
|
|
{
|
|
path: ['object', 'a'],
|
|
message: '"a" should not be "b" ;)'
|
|
}
|
|
]
|
|
}
|
|
|
|
return []
|
|
}
|
|
})
|
|
window.testEditor = testEditor // expose to window for debugging
|
|
|
|
document.getElementById('loadLargeJson').onclick = function handleLoadLargeJson() {
|
|
const count = 500
|
|
|
|
console.log('create large json', {count})
|
|
console.time('create large json')
|
|
const largeJson = {}
|
|
largeJson.numbers = []
|
|
largeJson.randomNumbers = []
|
|
largeJson.array = []
|
|
for (let i = 0; i < count; i++) {
|
|
const longitude = 4 + i / count
|
|
const latitude = 51 + i / count
|
|
|
|
largeJson.numbers.push(i)
|
|
largeJson.randomNumbers.push(Math.round(Math.random() * 1000))
|
|
largeJson.array.push({
|
|
name: 'Item ' + i,
|
|
id: String(i),
|
|
index: i,
|
|
time: new Date().toISOString(),
|
|
location: {
|
|
latitude,
|
|
longitude,
|
|
coordinates: [longitude, latitude]
|
|
},
|
|
random: Math.random()
|
|
})
|
|
}
|
|
console.timeEnd('create large json')
|
|
|
|
// const stringifiedSize = JSON.stringify(largeJson).length
|
|
// console.log(`large json stringified size: ${filesize(stringifiedSize)}`)
|
|
|
|
testEditor.set(largeJson)
|
|
}
|
|
|
|
document.getElementById('clearJson').onclick = function handleClearJson() {
|
|
testEditor.set({})
|
|
}
|
|
|
|
document.getElementById('patchJson').onclick = function handleClearJson() {
|
|
const operations = [{
|
|
op: 'replace',
|
|
path: '/object/c',
|
|
value: 'd2'
|
|
}]
|
|
|
|
testEditor.patch(operations)
|
|
}
|
|
|
|
document.getElementById('loadFile').onchange = function loadFile(event) {
|
|
console.log('loadFile', event.target.files)
|
|
|
|
const reader = new FileReader()
|
|
const file = event.target.files[0]
|
|
reader.onload = function (event) {
|
|
const text = event.target.result
|
|
const json = JSON.parse(text)
|
|
testEditor.set(json)
|
|
}
|
|
reader.readAsText(file)
|
|
}
|
|
|
|
document.getElementById('expandAll').onclick = function expandAll () {
|
|
testEditor.expand(() => true)
|
|
}
|
|
|
|
document.getElementById('expand2').onclick = function expandAll () {
|
|
testEditor.expand(path => path.length < 2)
|
|
}
|
|
|
|
document.getElementById('collapseAll').onclick = function collapseAll () {
|
|
testEditor.collapse(() => false)
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|