1
0
mirror of https://github.com/schollz/cowyo.git synced 2023-08-10 21:13:00 +03:00
cowyo/templates/index.html
Zack Scholl 79422d1fb3 Add static files, encryption
Former-commit-id: 80a53c01301cf96c28a22e1018efac2ceca7a381 [formerly af1c7ae599f506fcceebc85f87cc345e76329da3] [formerly 1bf3deab458c0e1f376da2296b03ac4fe8fcf8e9 [formerly 5a923ae11a]]
Former-commit-id: e826a5ffd431d22f8c37ac51f1be2193de1c270f [formerly 1deadc5e9c4fc7ff98b48bba18be31b773b8bde7]
Former-commit-id: 7fc964bb4c9d007010b1bb52665818212c0a2a8c
2017-03-21 21:06:35 -06:00

278 lines
11 KiB
HTML
Executable File

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="/static/js/jquery-1.8.3.js"></script>
<link rel="stylesheet" type="text/css" href="/static/css/github-markdown.css">
<link rel="stylesheet" type="text/css" href="/static/css/menus-min.css">
<link rel="stylesheet" type="text/css" href="/static/css/base-min.css">
<style type="text/css">
body {
background: #fff;
}
.pure-menu a {
color: #777;
}
#wrap {
position: absolute;
top: 50px;
left: 48px;
right: 30px;
bottom: 20px;
/* border: 3px double #f99;
*/
}
textarea {
width: 100%;
height: 100%;
box-sizing: border-box;
/* For IE and modern versions of Chrome */
-moz-box-sizing: border-box;
/* For Firefox */
-webkit-box-sizing: border-box;
/* For Safari */
position: absolute;
/* padding: 1em 2em;
*/
left: 0;
right: 0;
bottom: 0;
top: 0;
border: 0;
border: none;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
resize: none;
}
</style>
<title>{{ .Page }}</title>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function() {
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
var timeout;
return function() {
$('#saveEditButton').text("Editing");
var context = this,
args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
// This will apply the debounce effect on the keyup event
// And it only fires 500ms or half a second after the user stopped typing
$('#userInput').on('keyup', debounce(function() {
console.log('typing occurred');
$('#saveEditButton').text("Saving")
upload();
}, 500));
function upload() {
$.ajax({
type: 'POST',
url: '/update',
data: JSON.stringify({
new_text: $('#userInput').val(),
page: "{{ .Page }}"
}),
success: function(data) {
$('#saveEditButton').text(data.message);
},
error: function(xhr, error) {
$('#saveEditButton').text(error);
},
contentType: "application/json",
dataType: 'json'
});
}
function primeForSelfDestruct() {
$.ajax({
type: 'POST',
url: '/prime',
data: JSON.stringify({
page: "{{ .Page }}"
}),
success: function(data) {
$('#saveEditButton').text(data.message);
},
error: function(xhr, error) {
$('#saveEditButton').text(error);
},
contentType: "application/json",
dataType: 'json'
});
}
function lockPage(passphrase) {
$.ajax({
type: 'POST',
url: '/lock',
data: JSON.stringify({
page: "{{ .Page }}",
passphrase: passphrase
}),
success: function(data) {
$('#saveEditButton').text(data.message);
},
error: function(xhr, error) {
$('#saveEditButton').text(error);
},
contentType: "application/json",
dataType: 'json'
});
}
function encryptPage(passphrase) {
$.ajax({
type: 'POST',
url: '/encrypt',
data: JSON.stringify({
page: "{{ .Page }}",
passphrase: passphrase
}),
success: function(data) {
$('#saveEditButton').text(data.message);
window.location = "/{{ .Page }}/view";
},
error: function(xhr, error) {
$('#saveEditButton').text(error);
},
contentType: "application/json",
dataType: 'json'
});
}
$("#encryptPage").click(function(e) {
e.preventDefault();
var passphrase = prompt("Please enter a passphrase", "");
if (passphrase != null) {
encryptPage(passphrase);
}
});
$("#erasePage").click(function(e) {
e.preventDefault();
var r = confirm("Are you sure you want to erase?");
if (r == true) {
window.location = "/{{ .Page }}/erase";
} else {
x = "You pressed Cancel!";
}
});
$("#selfDestructPage").click(function(e) {
e.preventDefault();
var r = confirm("This will erase the page the next time it is opened, are you sure you want to do that?");
if (r == true) {
primeForSelfDestruct();
} else {
x = "You pressed Cancel!";
}
});
$("#lockPage").click(function(e) {
e.preventDefault();
var passphrase = prompt("Please enter a passphrase to lock", "");
if (passphrase != null) {
lockPage(passphrase);
// POST encrypt page
// reload page
}
});
}); //]]>
</script>
</head>
<body>
<article class="markdown-body">
<div class="pure-menu pure-menu-horizontal">
<ul class="pure-menu-list">
<li></li>
<!-- Required to keep them level? -->
<li class="pure-menu-item {{ with .EditPage }}pure-menu-selected{{ end }}"><a href="/{{ .Page }}/edit" class="pure-menu-link"><span id="saveEditButton">Edit</span></a></li>
<li class="pure-menu-item {{ with .ViewPage }}pure-menu-selected{{ end }}"><a href="/{{ .Page }}/view" class="pure-menu-link">View</a></li>
<li class="pure-menu-item {{ with .ListPage }}pure-menu-selected{{ end }}"><a href="/{{ .Page }}/list" class="pure-menu-link">List</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link" id="encryptPage">{{ if .IsEncrypted }}Decrypt{{ else }}Encrypt{{end}}</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link" id="lockPage">{{ if .IsLocked }}Unlock{{ else }}Lock{{end}}</a></li>
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
<a href="#" id="menuLink1" class="pure-menu-link">Other</a>
<ul class="pure-menu-children">
<li class="pure-menu-item"><a href="/{{ .Page }}/history" class="pure-menu-link">History</a></li>
<hr>
<li class="pure-menu-item"><a href="#" class="pure-menu-link" id="selfDestructPage">Self-destruct</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link" id="erasePage">Erase</a></li>
</ul>
</li>
</ul>
</div>
<div id="wrap">
{{ if .ViewPage }} {{ .RenderedPage }} {{ end }}
{{ if .EditPage }} <textarea autofocus placeholder="Start typing, it will save automatically." id="userInput">{{ .RawPage }}</textarea>{{ end }}
{{ if .HistoryPage }}
<ul>
{{range .Versions}}
<li><a href="/{{ $.Page }}/view?version={{.}}">Version #{{ . }}
{{end}}
</ul>
{{ end }}
</div>
</article>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent) {
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "s805xL01"
}], "*")
}
</script>
</body>
</html>