joe/webclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial checkin

Browse Source
This commit is contained in:
Joe
2017-02-07 12:48:17 -06:00
commit ded9ee7060
5 changed files with 634 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
display.html Normal file
View File

@@ -0,0 +1,212 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Joe&apos;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'>&darr;</span><span class='moreToggle' style='display:none' id='uarr'>&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>