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

Update text editor

Browse Source
This commit is contained in:
Wim Brand
2020-10-19 18:10:54 +02:00
parent 9825535637
commit 55c2f66709
9 changed files with 811 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
res/template/file_viewer.html
View File

@@ -22,7 +22,7 @@
<body>
<div id="file_viewer" class="file_viewer">
<div id="file_viewer_headerbar" class="highlight_1 file_viewer_headerbar">
<button id="btn_toggle_toolbar" class="button_toggle_toolbar"><i class="icon small">menu</i></button>
<button id="btn_toggle_toolbar" class="button_toggle_toolbar"><i class="icon">menu</i></button>
<a href="/" id="button_home" class="button button_home">
{{template `pixeldrain.svg` .}}
</a>

21
res/template/home.html
View File

@@ -10,7 +10,14 @@
max-width: 800px;
margin: 0 auto 50px auto;
}
.big_button{
width: 40%;
min-width: 250px;
max-width: 400px;
margin: 10px !important;
border-radius: 5px;
font-size: 1.8em;
}
.instruction_highlight {
border-top: 1px solid var(--layer_2_color_border);
border-bottom: 1px solid var(--layer_2_color_border);
@@ -108,10 +115,10 @@
</div></div>
<input id="file_input_field" type="file" name="file" multiple="multiple"/>
<button id="upload_file_button" class="big_button button_highlight">
<i class="icon">cloud_upload</i>
<i class="icon small">cloud_upload</i>
<u>U</u>pload Files</button>
<button id="upload_text_button" class="big_button button_highlight">
<i class="icon">text_fields</i>
<i class="icon small">text_fields</i>
Upload <u>T</u>ext</button>
<br/>
<p>
@@ -159,10 +166,10 @@
</button>
</div>
<br/>
<button id="btn_create_list"><i class="icon small">list</i> Create list with uploaded files</button>
<button id="btn_copy_links"><i class="icon small">content_copy</i> Copy all links to clipboard</button>
<button id="btn_copy_markdown"><i class="icon small">content_copy</i> Copy markdown to clipboard</button>
<button id="btn_copy_bbcode"><i class="icon small">content_copy</i> Copy BBCode to clipboard</button>
<button id="btn_create_list"><i class="icon">list</i> Create list with uploaded files</button>
<button id="btn_copy_links"><i class="icon">content_copy</i> Copy all links to clipboard</button>
<button id="btn_copy_markdown"><i class="icon">content_copy</i> Copy markdown to clipboard</button>
<button id="btn_copy_bbcode"><i class="icon">content_copy</i> Copy BBCode to clipboard</button>
<br/>
<div id="created_lists"></div>
</div>

74
res/template/paste.html
View File

@@ -1,74 +0,0 @@
{{define "paste"}}
<!DOCTYPE html>
<html lang="en">
<head>
{{template "meta_tags" "Text Upload"}}
{{template "user_style" .}}
<style>
#toolbar {
position: absolute;
width: 8em;
height: 100%;
background-color: var(--layer_2_color);
text-align: center;
}
.textarea_container {
position: absolute;
left: 8em;
top: 0;
right: 0;
bottom: 0;
display: inline-block;
line-height: 0;
}
.textarea{
position: relative;
height: 100%;
width: 100%;
background: var(--layer_1_color);
color: var(--text_color);
margin: 0;
border-radius: 0;
}
.toolbar_button{
text-align: left;
}
.toolbar_button > img,
.toolbar_button > svg {
width: 24px;
height: 24px;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="toolbar">
<button class="toolbar_button button_full_width button_highlight" onclick="uploadText();">
<i class="icon">save</i>
<span>Upload</span>
</button>
<a href="/" class="button toolbar_button button_full_width">
{{template `pixeldrain.svg` .}}
<span>Home</span>
</a>
<br/><br/>
Tip: Save your file with extension '.md' to use markdown formatting<br/>
</div>
<div class="textarea_container">
<textarea id="textarea" class="textarea" placeholder="Your text here..." autofocus="autofocus"></textarea>
</div>
<script>
let apiEndpoint = '{{.APIEndpoint}}';
{{template "UploadManager.js"}}
{{template "util.js"}}
{{template "textupload.js"}}
</script>
{{template "analytics"}}
</body>
</html>
{{end}}

152
res/template/text_editor.html Normal file
View File

@@ -0,0 +1,152 @@
{{define "text_editor"}}
<!DOCTYPE html>
<html lang="en">
<head>
{{template "meta_tags" "Text Upload"}}
{{template "user_style" .}}
<style>
.text_editor {
position: absolute;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.headerbar {
flex: 0 0 auto;
display: flex;
flex-direction: row;
}
.headerbar > * {
flex: 0 0 auto;
margin-left: 6px;
margin-right: 6px;
}
.headerbar > .headerbar_spacer { flex: 1 1 auto; }
.textarea_container {
flex: 1 1 auto;
margin: 0;
z-index: 9;
}
.textarea {
position: relative;
height: 100%;
width: 100%;
background: var(--layer_1_color);
color: var(--text_color);
margin: 0;
border-radius: 0;
box-shadow: none;
}
.textarea:focus { box-shadow: none; }
{{template `modal.css`}}
</style>
</head>
<body>
<div id="text_editor" class="text_editor">
<div id="headerbar" class="highlight_2 headerbar">
<a href="/" class="button">
<i class="icon">arrow_back</i>
</a>
<div id="headerbar_spacer" class="headerbar_spacer"></div>
<button class="button toolbar_button" onclick="return helpModal();">
<i class="icon">info</i> Information
</button>
<button class="button toolbar_button button_highlight" onclick="uploadText();">
<i class="icon">save</i> Save
</button>
</div>
<div class="textarea_container">
<textarea id="textarea" class="textarea" placeholder="Your text here..." autofocus="autofocus"></textarea>
</div>
</div>
<template id="tpl_text_editor_help">
<p>
You can type anything you want in here. When you're done press
CTRL + S or click the Save button in the top right corner to
upload your text file to pixeldrain.
</p>
<p>
To show syntax highlighting on pixeldrain's file viewer you
should save your file with a file extension like .js, .go,
.java, etc. If you save your file with the extension .md or
.markdown the result will be rendered as HTML on the file
viewer.
</p>
<p>
The text editor has been enhanced by Jacob Kelly's
<a href="https://jakiestfu.github.io/Behave.js/"target="_blank">Behave.js</a>.
Many thanks to him for developing this plugin and putting it
under the MIT license.
</p>
</template>
<script src="/res/script/behave.js"></script>
<script>
let apiEndpoint = '{{.APIEndpoint}}';
{{template "UploadManager.js"}}
{{template "util.js"}}
{{template "Modal.js"}}
let editor = new Behave({
textarea: document.getElementById("textarea"),
replaceTab: true,
softTabs: false,
tabSize: 8
});
function uploadText() {
var text = document.getElementById("textarea").value;
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.",
"Text file.txt"
);
if(filename === null){
return; // User pressed cancel
}
new UploadManager(apiEndpoint+"/file", null).addFile(
blob,
filename,
null,
function (id){
addUploadHistory(id);
setTimeout(window.location.href = "/u/" + id, 100);
},
function (response, error) {
alert("File upload failed! The server told us this: " + response);
}
)
}
// Upload the file when ctrl + s is pressed
document.addEventListener("keydown", function(event) {
if ((event.ctrlKey || event.metaKey) && event.keyCode === 83) {
event.preventDefault();
uploadText();
return false;
}
});
function helpModal() {
let m = new Modal(
document.body, null, "Text editor", "600px", "auto"
)
m.cloneTemplate("tpl_text_editor_help")
m.open()
return false
}
</script>
{{template "analytics"}}
</body>
</html>
{{end}}