gun
Version:
A realtime, decentralized, offline-first, graph data synchronization engine.
79 lines (78 loc) • 2.51 kB
HTML
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="../../gun.js"></script>
</head>
<body>
<h3>Admin JSON Editor</h3>
This is a live view of your data, you can edit it in realtime or add new field/values.
<ul id="data">
</ul>
<li id="model">
<b>field</b>:
<span contenteditable="true">val</span>
</li>
<ul><li>
<form id="form">
<label>
<input id="field" placeholder="field">
<button type="submit">add</button>
</label>
</form>
</li></ul>
<script> // minimal jQuery polyfill
var $ = function(s, e){ return (e || document).querySelector(s) }
function clean(text){ return String(text).replace(/\</ig, '<') }
</script>
<script>
var gun = Gun(location.origin + '/gun');
var ref = gun.get('example/json/data');
$('#form').onsubmit = function(e){
return ref.path( clean($('#field').value) ).put("value"), false; // add a new field, and cancel the form submit.
}
document.onkeyup = function(e){
if(!e || !e.target){ return } // ignore if no element!
if(!e.target.attributes.contenteditable){ return } // ignore if element content isn't editable!
console.log("save to", e.target.previousElementSibling.innerHTML, ":", e.target.innerHTML);
ref.path(clean(e.target.previousElementSibling.innerHTML)) // grab the label, which is in the previous element.
.put( clean(e.target.innerHTML) ); // insert the value of the text in the current element.
}
ref.on(function(json){
var data = Gun.obj.copy(json); // make a snapshot!
delete data._; // skip meta data!
for(var field in data){
var val = String(data[field]), id = field.replace(/[^A-z]/ig, ''), elem; // make data safe.
(elem = $('#' + id) || $('#data').appendChild($('#model').cloneNode(true))).id = id; // reuse or make element, set id.
$('b', elem).innerHTML = clean(field); // escape and display field
$('span', elem).innerHTML = clean(val); // escape and display value
}
});
</script>
<style>
html, body {
font-family: Verdana, Geneva, sans-serif;
}
a, button {
border: none;
color: skyblue;
background: transparent;
text-decoration: none;
cursor: poiner;
}
ul, li {
list-style-type: none;
}
ul:hover, li:hover {
list-style-type: inherit;
}
input {
border: none;
border-bottom: dashed 1px gainsboro;
}
.none, #model {
display: none;
}
</style>
</body>
</html>