mirror of
https://github.com/amark/gun.git
synced 2025-03-30 15:08:33 +00:00
79 lines
2.4 KiB
HTML
79 lines
2.4 KiB
HTML
<!DOCTYPE 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>
|