213 lines
6.4 KiB
HTML
213 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<title>Joe's Web-Clipboard</title>
|
|
</head>
|
|
<style>
|
|
body {
|
|
font-family:Verdana,sans-serif;
|
|
}
|
|
span.label {
|
|
float:left;
|
|
width:100px;
|
|
}
|
|
input.url {
|
|
width:350px;
|
|
border:1px solid;
|
|
}
|
|
span#pnlConnectionState {
|
|
font-size:10px;
|
|
position:fixed;
|
|
right:0;
|
|
border:1px solid;
|
|
padding:5px;
|
|
text-align:center;
|
|
background:#EEEEEE;
|
|
margin-right:10px;
|
|
}
|
|
div.circle {
|
|
position:relative;
|
|
left:40%;
|
|
width: 15px;
|
|
height: 15px;
|
|
border-radius: 50%;
|
|
}
|
|
textarea#taValue {
|
|
width:95%;
|
|
display:block;
|
|
max-width:95%;
|
|
line-height:1.5;
|
|
padding:15px 15px 30px;
|
|
border-radius:3px;
|
|
border:1px solid #F7E98D;
|
|
font:13px Tahoma, cursive;
|
|
transition:box-shadow 0.5s ease;
|
|
box-shadow:0 4px 6px rgba(0,0,0,0.1);
|
|
font-smoothing:subpixel-antialiased;
|
|
background:linear-gradient(#F9EFAF, #F7E98D);
|
|
background:-o-linear-gradient(#F9EFAF, #F7E98D);
|
|
background:-ms-linear-gradient(#F9EFAF, #F7E98D);
|
|
background:-moz-linear-gradient(#F9EFAF, #F7E98D);
|
|
background:-webkit-linear-gradient(#F9EFAF, #F7E98D);
|
|
}
|
|
</style>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
|
<script src="EventSource.js"></script> <!-- polyfill for IE -->
|
|
<script src="autosize.min.js"></script>
|
|
<script>
|
|
var webclip = (function () {
|
|
"use strict";
|
|
var source;
|
|
var lastTimeStamp;
|
|
var oldContent;
|
|
|
|
function loadData(id) {
|
|
$.get("raw/" + id, function (data) {
|
|
$("#lbNew").hide();
|
|
$("#taValue").val(data);
|
|
oldContent=data;
|
|
enableDisableButtons();
|
|
autosize($('#taValue'));
|
|
}).fail(function () {
|
|
$("#lbNew").show();
|
|
});
|
|
}
|
|
|
|
function startEventStream() {
|
|
source = new EventSource('events/' + $("#tbId").val());
|
|
|
|
source.addEventListener('message', function (event) {
|
|
console.log(event.data);
|
|
var data = JSON.parse(event.data);
|
|
if (data.timeStamp !== lastTimeStamp) {
|
|
if (0 !== lastTimeStamp) {
|
|
console.log("dirty - reloading");
|
|
loadData($("#tbId").val());
|
|
}
|
|
lastTimeStamp = data.timeStamp;
|
|
}
|
|
}, false);
|
|
|
|
source.addEventListener('open', function (e) {
|
|
console.log('> Connection was opened', e);
|
|
}, false);
|
|
|
|
source.addEventListener('error', function (e) {
|
|
if (e.eventPhase === 2) { //EventSource.CLOSED
|
|
console.log('> Connection was closed [ERR]');
|
|
}
|
|
console.log('> Connection error', e);
|
|
}, false);
|
|
}
|
|
|
|
function closeEventStream() {
|
|
console.log('> Closing EventStream');
|
|
try {
|
|
source.close();
|
|
}finally{}
|
|
}
|
|
|
|
function monitorConnectionState() {
|
|
if (source.readyState === 1) {
|
|
$("#icoStateConnected").show();
|
|
$("#icoStateDisconnected").hide();
|
|
} else {
|
|
$("#icoStateConnected").hide();
|
|
$("#icoStateDisconnected").show();
|
|
}
|
|
}
|
|
|
|
function saveData(id) {
|
|
closeEventStream();
|
|
$.post("save/" + id, {
|
|
data: $("#taValue").val()
|
|
}, function (data) {
|
|
$("#lbNew").hide();
|
|
console.log("AfterSave", data);
|
|
var jData = JSON.parse(data);
|
|
lastTimeStamp = jData.timeStamp;
|
|
oldContent=$("#taValue").val();
|
|
manageDirtyFlag();
|
|
startEventStream();
|
|
}).fail(function(xhr,textStatus,errorThrown){
|
|
console.log("ERROOOR",xhr,textStatus,errorThrown);
|
|
closeEventStream();
|
|
startEventStream();
|
|
});
|
|
}
|
|
|
|
function enableDisableButtons() {
|
|
if ($("#tbId").val() === "") {
|
|
$("#btnLoad").prop('disabled', true);
|
|
$("#btnSave").prop('disabled', true);
|
|
} else {
|
|
$("#btnLoad").prop('disabled', false);
|
|
if (!isContentChanged()){
|
|
$("#btnSave").prop('disabled', true);
|
|
$("#flgIsDirty").hide();
|
|
} else {
|
|
$("#btnSave").prop('disabled', false);
|
|
$("#flgIsDirty").show();
|
|
}
|
|
}
|
|
}
|
|
|
|
function manageDirtyFlag(){
|
|
enableDisableButtons();
|
|
}
|
|
|
|
function isContentChanged(){
|
|
if (oldContent !== $("#taValue").val()) {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
$(document).ready(function () {
|
|
$("#tbId").val(location.href.substr(location.href.lastIndexOf('/') + 1));
|
|
$("#tbURLEdit").val($(location).attr("href"));
|
|
$("#tbURLRaw").val($(location).attr("href").replace("/wc/", "/wc/raw/"));
|
|
loadData($("#tbId").val());
|
|
|
|
lastTimeStamp = 0;
|
|
startEventStream();
|
|
window.setInterval(monitorConnectionState,1000);
|
|
});
|
|
|
|
|
|
return {
|
|
saveData: saveData,
|
|
enableDisableButtons: enableDisableButtons,
|
|
manageDirtyFlag: manageDirtyFlag
|
|
};
|
|
}());
|
|
</script>
|
|
<body>
|
|
<span style='font-size:40px'><span style='color:#777777'>Web</span>-<span style='color:#FF0000'>Clipboard</span></span><span style='font-size:14px'> by <a href='mailto:joe@netsquat.com'>joe@netsquat.com</a></span>
|
|
<span id='pnlConnectionState'>
|
|
Connection
|
|
<hr/>
|
|
<div id='icoStateConnected' class='circle' style='background:#00FF00;display:none'></div>
|
|
<div id='icoStateDisconnected' class='circle' style='background:#FF0000;display:none'></div>
|
|
</span>
|
|
<hr />
|
|
<input id='tbId' onchange='webclip.enableDisableButtons();' onkeyup='webclip.enableDisableButtons();' placeholder="Clipboard-name" style='border:1px solid'/>
|
|
<span id='lbNew' style='display:none'>[NEW]</span>
|
|
<button id='btnLoad' onclick='window.location.replace($("#tbId").val());'>Load</button>
|
|
<button id='btnSave' onclick='webclip.saveData($("#tbId").val());'>Save<span style='display:none' id='flgIsDirty'>*</span></button>
|
|
<button style='font-weight:bold;color:#FF0000' onClick='$(".moreToggle").toggle();'><span class='moreToggle' id='darr'>↓</span><span class='moreToggle' style='display:none' id='uarr'>↑</span></button>
|
|
<br/>
|
|
<div id='pnlDetails' class='moreToggle' style='display:none'>
|
|
<span class='label'>Edit-URL</span> <input id='tbURLEdit' class='url' style='background-color:#CCCCCC' readonly='readonly'/><br/>
|
|
<span class='label'>Raw-URL</span> <input id='tbURLRaw' class='url' style='background-color:#CCCCCC' readonly='readonly'/>
|
|
</div>
|
|
<hr />
|
|
<textarea style='width:100%;font-family:courier,monospace' onkeyup='webclip.manageDirtyFlag();' onblur='webclip.manageDirtyFlag();' rows="20" id='taValue'>
|
|
</textarea>
|
|
<hr/>
|
|
$Revision: 15 $ -- $Date: 2016-02-07 12:09:18 -0600 (Sun, 07 Feb 2016) $
|
|
</body>
|
|
</html>
|