pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

just need to make the makefile work somehow

Browse Source
This commit is contained in:
Wim Brand
2018-01-18 23:33:44 +01:00
parent ff1d240889
commit c4443399e7
15 changed files with 337 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Makefile
View File

@@ -13,3 +13,4 @@ backgroundrun:
go run main.go
backgroundts:
tsc --watch --project res/static/res/typescript/home
--project res/static/res/typescript/textupload

9
res/static/res/script/compiled/home.js
View File

@@ -4,10 +4,11 @@ var totalUploads = 0;
var UploadProgressBar = /** @class */ (function () {
function UploadProgressBar(file) {
this.file = file;
this.name = file.name;
this.queueNum = totalUploads;
totalUploads++;
this.uploadDiv = document.createElement("a");
this.uploadDiv.setAttribute("class", "uploadItem");
this.uploadDiv.setAttribute("class", "file_button");
this.uploadDiv.innerText = "Queued\n" + this.file.name;
this.uploadDivJQ = $(this.uploadDiv);
$("#uploads_queue").append(this.uploadDivJQ.hide().fadeIn('slow'));
@@ -25,7 +26,7 @@ var UploadProgressBar = /** @class */ (function () {
this.uploadDiv.setAttribute('style', 'background: #111');
this.uploadDiv.setAttribute('href', '/u/' + id);
this.uploadDiv.setAttribute("target", "_blank");
this.uploadDivJQ.html('<img src="/api/file/' + id + '/thumbnail" alt="' + this.file.name + '" class="uploadItemImage"/>'
this.uploadDivJQ.html('<img src="/api/file/' + id + '/thumbnail" alt="' + this.file.name + '"/>'
+ this.file.name + '<br/>'
+ '<span style="color: var(--highlight_color);">' + window.location.hostname + '/u/' + id + '</span>');
};
@@ -153,10 +154,10 @@ var UploadWorker = /** @class */ (function () {
this.upload(file);
};
UploadWorker.prototype.upload = function (file) {
console.debug("Starting upload of " + file.file.name);
console.debug("Starting upload of " + file.name);
var formData = new FormData();
formData.append('file', file.file);
formData.append("name", file.file.name);
formData.append("name", file.name);
var that = this; // jquery changes the definiton of "this"
$.ajax({
url: "/api/file",

187
res/static/res/script/compiled/textupload.js Normal file
View File

@@ -0,0 +1,187 @@
var uploader = null;
var TextUpload = /** @class */ (function () {
function TextUpload(file, name) {
this.file = file;
this.name = name;
}
TextUpload.prototype.onProgress = function (progress) { return; };
TextUpload.prototype.onFinished = function (id) {
setTimeout(window.location.href = "/u/" + id, 100);
};
TextUpload.prototype.onFailure = function (response, error) {
alert("File upload failed! The server told us this: " + response);
};
return TextUpload;
}());
function uploadText() {
var text = $("#textarea").val();
var blob = new Blob([text], { type: "text/plain" });
var filename = prompt("What do you want to call this piece of textual art?\n\n"
+ "Please add your own file extension, if you want.", "Pixeldrain_Text_File.txt");
if (filename === null) {
return;
}
if (uploader === null) {
uploader = new UploadManager();
}
uploader.uploadFile(new TextUpload(blob, filename));
}
/**
* Prevent the Tab key from moving the cursor outside of the text area
*/
$(document).delegate('#textarea', 'keydown', function (e) {
var keyCode = e.keyCode || e.which;
if (keyCode === 9) {
e.preventDefault();
var start = $(this).get(0).selectionStart;
var end = $(this).get(0).selectionEnd;
// set textarea value to: text before caret + tab + text after caret
$(this).val($(this).val().substring(0, start)
+ "\t"
+ $(this).val().substring(end));
// put caret at right position again
$(this).get(0).selectionStart =
$(this).get(0).selectionEnd = start + 1;
}
});
// Upload the file when ctrl + s is pressed
$(document).bind('keydown', function (e) {
if (e.ctrlKey && (e.which === 83)) {
e.preventDefault();
uploadText();
return false;
}
});
var Cookie;
(function (Cookie) {
function read(name) {
var result = new RegExp('(?:^|; )' + encodeURIComponent(name) + '=([^;]*)').exec(document.cookie);
return result ? result[1] : null;
}
Cookie.read = read;
function write(name, value, days) {
if (!days) {
days = 365 * 20;
}
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toUTCString();
document.cookie = name + "=" + value + expires + "; path=/";
}
Cookie.write = write;
function remove(name) {
write(name, "", -1);
}
Cookie.remove = remove;
})(Cookie || (Cookie = {}));
var UploadManager = /** @class */ (function () {
function UploadManager() {
this.uploadQueue = new Array();
this.uploadThreads = new Array();
this.maxThreads = 3;
}
UploadManager.prototype.uploadFile = function (file) {
console.debug("Adding upload to queue");
this.uploadQueue.push(file);
if (this.uploadThreads.length < this.maxThreads) {
console.debug("Starting upload thread");
var thread_1 = new UploadWorker(this);
this.uploadThreads.push(thread_1);
setTimeout(function () { thread_1.start(); }, 0); // Start a new upload thread
}
else {
for (var i = 0; i < this.uploadThreads.length; i++) {
this.uploadThreads[i].start();
}
}
};
UploadManager.prototype.grabFile = function () {
if (this.uploadQueue.length > 0) {
return this.uploadQueue.shift();
}
else {
return undefined;
}
};
return UploadManager;
}());
var UploadWorker = /** @class */ (function () {
function UploadWorker(manager) {
this.tries = 0;
this.uploading = false;
this.manager = manager;
}
UploadWorker.prototype.start = function () {
if (!this.uploading) {
this.newFile();
}
};
UploadWorker.prototype.newFile = function () {
var file = this.manager.grabFile();
if (file === undefined) {
this.uploading = false;
console.debug("No files left in queue");
return; // Stop the thread
}
this.uploading = true;
this.tries = 0;
this.upload(file);
};
UploadWorker.prototype.upload = function (file) {
console.debug("Starting upload of " + file.name);
var formData = new FormData();
formData.append('file', file.file);
formData.append("name", file.name);
var that = this; // jquery changes the definiton of "this"
$.ajax({
url: "/api/file",
data: formData,
cache: false,
crossDomain: false,
contentType: false,
processData: false,
type: 'POST',
xhr: function () {
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", function (evt) {
if (evt.lengthComputable) {
file.onProgress(evt.loaded / evt.total);
}
}, false);
return xhr;
},
success: function (data) {
file.onFinished(data.id);
that.setHistoryCookie(data.id);
console.log("Done: " + data.id);
that.newFile(); // Continue uploading on this thread
},
error: function (xhr, status, error) {
console.log("status: " + status + " error: " + error);
if (that.tries === 3) {
alert("Upload failed: " + status);
file.onFailure(status, error);
setTimeout(function () { that.newFile(); }, 2000); // Try to continue
return; // Upload failed
}
// Try again
that.tries++;
setTimeout(function () { that.upload(file); }, that.tries * 3000);
}
});
};
UploadWorker.prototype.setHistoryCookie = function (id) {
var uc = Cookie.read("pduploads");
// First upload in this browser
if (uc === null) {
Cookie.write("pduploads", id + ".", undefined);
return;
}
if (uc.length > 2000) {
// Cookie is becoming too long, drop the oldest two files
uc = uc.substring(uc.indexOf(".") + 1).substring(uc.indexOf(".") + 1);
}
Cookie.write("pduploads", uc + id + ".", undefined);
};
return UploadWorker;
}());

18
res/static/res/script/history.js
View File

@@ -38,10 +38,9 @@ $(document).ready(function () {
function historyAddItem(json) {
if(!json.success){
var uploadItem = "<div class=\"uploadItem\" >"
var uploadItem = "<div class=\"file_button\" >"
+ "<img src=\"/res/img/cross.png\" "
+ "alt=\"File has expired\" "
+ "class=\"uploadItemImage\" />"
+ "alt=\"File has expired\" />"
+ "File has expired"
+ "</div>";
@@ -52,16 +51,13 @@ function historyAddItem(json) {
var date = new Date(json.date_upload * 1000);
var uploadItem = "<div class=\"uploadItem\" >"
+ "<a href=\"/u/" + json.id + "\" target=\"_blank\">"
+ "<img src=\"" + APIURL + json.thumbnail_href + "\" "
+ "alt=\"" + json.file_name + "\" "
+ "class=\"uploadItemImage\" />"
+ json.file_name
+ "</a>"
var uploadItem = '<a href="/u/'+ json.id +'" target="_blank" class="file_button">'
+ '<img src="'+ APIURL + json.thumbnail_href + '"'
+ "alt=\"" + json.file_name + "\" />"
+ '<span style="color: var(--highlight_color);">'+json.file_name+'</span>'
+ "<br/>"
+ date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate()
+ "</div>";
+ "</a>";
$("#uploadedFiles").append($(uploadItem).hide().fadeIn(400));
}

4
res/static/res/script/listmaker.js
View File

@@ -49,7 +49,7 @@ function createList(){
function listCreated(response){
if(response.success){
resultString = "<div class=\"uploadItem\">List creation finished!<br/>"
resultString = "<div class=\"file_button\">List creation finished!<br/>"
+ "Your List URL: <br/>"
+ "<a href=\"/l/" + response.id + "\" target=\"_blank\" style=\"font-weight: bold;\">"+window.location.hostname+"/l/" + response.id + "</a>"
+ "</div>";
@@ -59,7 +59,7 @@ function listCreated(response){
);
window.open('/l/'+response.id, '_blank');
}else{
resultString = "<div class=\"uploadItem\">List creation failed<br/>"
resultString = "<div class=\"file_button\">List creation failed<br/>"
+ "The server responded with this: <br/>"
+ response.type + ": " + response.value
+ "</div>";

34
res/static/res/style/history.css
View File

@@ -1,34 +0,0 @@
.uploadedFiles{
position: relative;
width: 100%;
margin: 0;
height: auto;
display: inline-block;
}
.uploadItem, .uploadItem:hover{
position: relative;
box-sizing: border-box;
width: 322px;
max-width: 90%;
height: 60px;
float: left;
margin: 3px;
padding: 0;
border: 1px #555 solid;
overflow: hidden;
background-color: #111;
color: var(--text_color);
word-break: break-all;
text-align: left;
line-height: 120%;
display: block;
}
.uploadItemImage{
max-height: 60px;
max-width: 120px;
margin-right: 5px;
float: left;
display: block;
}

33
res/static/res/style/home.css
View File

@@ -1,33 +0,0 @@
/*
Created on : Jun 3, 2015, 9:33:11 AM
Author : Fornax
*/
.progress-bar{
position: relative;
width: 100%;
height: 0;
background-color: #555;
overflow: hidden;
color: #eeeeee;
text-align: left;
white-space: nowrap;
}
.progressbar-inner{
position: absolute;
top: 0;
width: 0%;
left: 0;
height: 100%;
background-color: var(--highlight_color);;
overflow: hidden;
color: #000;
white-space: nowrap;
}
.progress-text{
overflow: hidden;
width: 100%;
white-space: nowrap;
}

54
res/static/res/style/layout.css
View File

@@ -20,7 +20,7 @@ html{
height: 100%;
}
/* HEAD */
/* Page layout elements */
#header{
position: relative;
@@ -41,17 +41,6 @@ html{
margin-top: 15px;
}
#uploads_queue{
position: relative;
width: 100%;
height: 0;
overflow-x: hidden;
overflow-y: scroll;
}
/* Layout elements */
.body{
position: relative;
display: inline-block;
@@ -205,6 +194,47 @@ a:hover{
white-space: nowrap;
}
.uploads_queue{
position: relative;
width: 100%;
height: 0;
overflow-x: hidden;
overflow-y: scroll;
}
.files_container{
position: relative;
width: 100%;
margin: 0;
height: auto;
display: inline-block;
}
.file_button, .file_button:hover{
position: relative;
box-sizing: border-box;
width: 316px;
max-width: 90%;
height: 60px;
float: left;
margin: 6px;
padding: 0;
overflow: hidden;
box-shadow: 2px 2px 5px 2px #111;
background-color: #111;
color: var(--text_color);
word-break: break-all;
text-align: left;
line-height: 120%;
display: block;
}
.file_button > img{
max-height: 60px;
max-width: 120px;
margin-right: 5px;
float: left;
display: block;
}
/* Form fields */
/* BUTTONS */

6
res/static/res/typescript/home/home.ts
View File

@@ -9,11 +9,12 @@ class UploadProgressBar implements FileUpload {
constructor(file: File){
this.file = file
this.name = file.name
this.queueNum = totalUploads
totalUploads++
this.uploadDiv = document.createElement("a");
this.uploadDiv.setAttribute("class", "uploadItem");
this.uploadDiv.setAttribute("class", "file_button");
this.uploadDiv.innerText = "Queued\n" + this.file.name
this.uploadDivJQ = $(this.uploadDiv)
@@ -24,6 +25,7 @@ class UploadProgressBar implements FileUpload {
// Interface stuff
public file: File;
public name: string
public onProgress(progress: number){
this.uploadDiv.innerText = "Uploading... " + Math.round(progress*1000)/10 + "%\n" + this.file.name
this.uploadDiv.setAttribute(
@@ -42,7 +44,7 @@ class UploadProgressBar implements FileUpload {
this.uploadDiv.setAttribute('href', '/u/'+id)
this.uploadDiv.setAttribute("target", "_blank");
this.uploadDivJQ.html(
'<img src="/api/file/'+id+'/thumbnail" alt="'+this.file.name+'" class="uploadItemImage"/>'
'<img src="/api/file/'+id+'/thumbnail" alt="'+this.file.name+'"/>'
+ this.file.name+'<br/>'
+ '<span style="color: var(--highlight_color);">'+window.location.hostname+'/u/'+id+'</span>'
)

7
res/static/res/typescript/lib/uploader.ts
View File

@@ -1,5 +1,6 @@
interface FileUpload {
file: File
file: Blob
name: string
onProgress(progress: number)
onFinished(id: string)
onFailure(response: JQuery.Ajax.ErrorTextStatus, error: string)
@@ -62,11 +63,11 @@ class UploadWorker {
}
private upload(file: FileUpload){
console.debug("Starting upload of " + file.file.name)
console.debug("Starting upload of " + file.name)
var formData = new FormData()
formData.append('file', file.file)
formData.append("name", file.file.name)
formData.append("name", file.name)
var that = this // jquery changes the definiton of "this"

69
res/static/res/typescript/textupload/text.ts Normal file
View File

@@ -0,0 +1,69 @@
var uploader: UploadManager|null = null
class TextUpload implements FileUpload {
constructor(file: Blob, name: string){
this.file = file
this.name = name
}
// Interface stuff
public file: Blob;
public name: string
public onProgress(progress: number){return}
public onFinished(id: string){
setTimeout(window.location.href = "/u/" + id, 100);
}
public onFailure(response: JQuery.Ajax.ErrorTextStatus, error: string) {
alert("File upload failed! The server told us this: " + response);
}
}
function uploadText() {
var text = $("#textarea").val();
var blob = new Blob([text], {type: "text/plain"});
var filename = prompt("What do you want to call this piece of textual art?\n\n"
+ "Please add your own file extension, if you want.",
"Pixeldrain_Text_File.txt");
if(filename === null){
return;
}
if (uploader === null){
uploader = new UploadManager()
}
uploader.uploadFile(new TextUpload(blob, filename))
}
/**
* Prevent the Tab key from moving the cursor outside of the text area
*/
$(document).delegate('#textarea', 'keydown', function (e) {
var keyCode = e.keyCode || e.which;
if (keyCode === 9) {
e.preventDefault();
var start = (<HTMLTextAreaElement>$(this).get(0)).selectionStart;
var end = (<HTMLTextAreaElement>$(this).get(0)).selectionEnd;
// set textarea value to: text before caret + tab + text after caret
$(this).val((<string>$(this).val()).substring(0, start)
+ "\t"
+ (<string>$(this).val()).substring(end));
// put caret at right position again
(<HTMLTextAreaElement>$(this).get(0)).selectionStart =
(<HTMLTextAreaElement>$(this).get(0)).selectionEnd = start + 1;
}
});
// Upload the file when ctrl + s is pressed
$(document).bind('keydown', function (e) {
if (e.ctrlKey && (e.which === 83)) {
e.preventDefault();
uploadText();
return false;
}
});

11
res/static/res/typescript/textupload/tsconfig.json Normal file
View File

@@ -0,0 +1,11 @@
{
"compilerOptions": {
"outFile": "../../script/compiled/textupload.js"
},
"files": [
"text.ts",
"../lib/cookie.ts",
"../lib/jquery.d.ts",
"../lib/uploader.ts"
]
}

3
res/template/history.html
View File

@@ -7,7 +7,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="/global.css"/>
<link rel="stylesheet" href="/res/style/layout.css"/>
<link rel="stylesheet" href="/res/style/history.css"/>
<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'/>
<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css"/>
<link rel="shortcut icon" href="/res/img/tray32.png"/>
@@ -44,7 +43,7 @@
This data is saved locally in your web browser and gets updated every time you upload a file through your current browser.
<br/><br/>
<div id="uploadedFiles" class="uploadedFiles"></div>
<div id="uploadedFiles" class="files_container"></div>
{{template "footer"}}
</div>
<script src="/res/script/history.js"></script>

4
res/template/home.html
View File

@@ -6,9 +6,7 @@
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="/global.css"/>
<link rel="stylesheet" href="/res/style/home.css"/>
<link rel="stylesheet" href="/res/style/layout.css"/>
<link rel="stylesheet" href="/res/style/history.css"/>
<link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'/>
<link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css"/>
<link rel="shortcut icon" href="/res/img/tray32.png"/>
@@ -42,7 +40,7 @@
<button id="select_file_button" class="big_button button_highlight">Upload Files</button>
<button id="text_button" class="big_button button_highlight" onClick="window.location.href = '/t/'">Upload Text</button><br/>
<div id="uploads_queue"></div>
<div id="uploads_queue" class="uploads_queue"></div>
</div>
<div class="highlight_dark border-bottom">
<button id="btn_create_list">Create list with uploaded files</button>

22
res/template/paste.html
View File

@@ -55,26 +55,8 @@
</div>
</div>
<script src="/res/script/Cookie.js"></script>
<script src="/res/script/paste.js"></script>
<!-- Google Analytics Tracking code -->
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-24463738-4', 'auto');
ga('send', 'pageview');
</script>
<script src="/res/script/compiled/textupload.js"></script>
{{template "analytics"}}
</body>
</html>
{{end}}