gun/examples/docs.html
Mark Nadal fa724b5abb test
2019-11-08 08:51:17 -08:00

95 lines
2.9 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<!-- always start with these two lines to set a clean baseline for different devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery.js"></script>
<title>Docs</title>
</head>
<body class="black whitet">
<style>
/*
Choose white text on a black background so you can add color in.
Pick your favorite font and choose a font size.
*/
@import url('https://fonts.googleapis.com/css?family=Oxygen');
html, body {
font-family: "Oxygen", sans-serif;
}
[contenteditable]:focus {
outline: none;
}
</style>
<div class="hold full hue2">
<div id="page" class="max focus gap" style="padding-top: 9%;">
<p class="loud crack">Docs</p>
<p>The contemporary tendency in our society is to base our distribution on scarcity, which has vanished, and to compress our abundance into the overfed mouths of the middle and upper classes until they gag with superfluity. If democracy is to have breadth of meaning, it is necessary to adjust this inequity. It is not only moral, but it is also intelligent. We are wasting and degrading human life by clinging to archaic thinking.</p>
</div>
</div>
<script src="../../gun/gun.js"></script>
<script src="../../gun/lib/monotype.js"></script>
<script src="../../gun/lib/meta.js"></script>
<script src="../../gun/lib/normalize.js"></script>
<script>
var gun = Gun('https://guntest.herokuapp.com/gun');
;(window.onhashchange = function(){
var file = (location.hash||'').slice(1);
var S = +new Date;
gun.get('test/gun/docs/'+file).get('what').once(function(data){
console.log(+new Date - S, 'ms load');
$('#page').html($.normalize(data));
});
})();
document.execCommand('defaultParagraphSeparator', false, 'p');
meta.edit({
name: "Edit",
combo: ['E'],
use: function(eve){
console.log('on');
}, on: function(eve){
meta.flip(false);
console.log('use');
console.log("TRIGGERED!!!!???");
//meta.tap.on.attr('contenteditable', 'true');
$('#page').attr('contenteditable', 'true');
$(document).on('keyup.tmp', '[contenteditable]', function(eve){
if(eve.which != 13){ return true }
console.log(eve.which, $(this).text());
return false;
}).on('keyup.tmp', '[contenteditable]', function(eve){
return;
var p = $(window.getSelection().anchorNode).closest('p');
var r = monotype(p);
var html = p.html() || '';
var safe = $.normalize(html);
console.log("BEFORE:", html);
console.log("AFTER:", safe);
p.html(safe);
r.restore()
});
},
up: function(){
console.log("UP");
$('[contenteditable=true]').off('.tmp');
}
});
meta.edit({
name: "Save",
combo: ['S'], fake: -1,
on: function(eve){
meta.tap.on.attr('contenteditable', 'false');
var what = $.normalize($('#page').html());
var file = (location.hash||'').slice(1);
gun.get('test/gun/docs/'+file).put({what: what});
},
up: function(){}
});
</script>
</body>
</html>