refactor code and add dragover visual cue
Signed-off-by: Gunwant Jain <mail@wantguns.dev>
This commit is contained in:
Gunwant Jain
parent
a9dc9452fc
commit
cca3a8bec9
|
|
@ -1,7 +1,10 @@
|
|||
use std::path::{Path, PathBuf};
|
||||
use rocket::fs::NamedFile;
|
||||
use rocket::response::status::NotFound;
|
||||
use std::path::{Path, PathBuf};
|
||||
|
||||
#[get("/<file..>", rank = 3)]
|
||||
pub async fn static_files(file: PathBuf) -> Option<NamedFile> {
|
||||
NamedFile::open(Path::new("static/").join(file)).await.ok()
|
||||
pub async fn static_files(file: PathBuf) -> Result<NamedFile, NotFound<String>> {
|
||||
NamedFile::open(Path::new("static/").join(file))
|
||||
.await
|
||||
.map_err(|e| NotFound(e.to_string()))
|
||||
}
|
||||
|
|
|
|||
72
static/css/index.css
Normal file
72
static/css/index.css
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
html,
|
||||
body {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 95vh;
|
||||
font-family: monospace;
|
||||
|
||||
display: grid;
|
||||
}
|
||||
|
||||
form.highlight {
|
||||
border: 1vh dashed #F29718;
|
||||
}
|
||||
|
||||
.grid_form {
|
||||
display: grid;
|
||||
grid-template-columns: 4fr 1fr 1fr;
|
||||
height: 100vh;
|
||||
margin-top: 1vh;
|
||||
align-items: start;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 90%;
|
||||
width: 100%;
|
||||
|
||||
background: none;
|
||||
border: none;
|
||||
|
||||
resize: none;
|
||||
overflow: auto;
|
||||
|
||||
color: inherit;
|
||||
font-family: monospace;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
select {
|
||||
color: inherit;
|
||||
background-color: #0f1419;
|
||||
border: none;
|
||||
padding: 0 1em 0 0;
|
||||
margin: 0;
|
||||
width: 80%;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
cursor: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
background-color: #F29718;
|
||||
border: none;
|
||||
padding: 0 1em 0 0;
|
||||
margin: 0;
|
||||
width: 50%;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
*:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
*.hidden {
|
||||
display: none;
|
||||
}
|
||||
105
static/js/index.js
Normal file
105
static/js/index.js
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
const body = document.querySelector('body');
|
||||
const form = document.querySelector('form');
|
||||
const grid_form = document.querySelector('.grid_form');
|
||||
const textarea = document.querySelector('textarea');
|
||||
const select = document.querySelector('select');
|
||||
const submitButton = document.querySelector('button[type="submit"]');
|
||||
|
||||
const onInput = () => {
|
||||
submitButton.classList.toggle('hidden', !textarea.value);
|
||||
select.classList.toggle('hidden', !textarea.value);
|
||||
}
|
||||
textarea.addEventListener('input', onInput);
|
||||
onInput();
|
||||
|
||||
document.body.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter' && e.ctrlKey) {
|
||||
form.submit();
|
||||
}
|
||||
});
|
||||
|
||||
async function postData(url = '', data) {
|
||||
const response = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: data
|
||||
});
|
||||
|
||||
const text = await response.text();
|
||||
return text;
|
||||
}
|
||||
|
||||
function preventDefaults(e) {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
}
|
||||
|
||||
// Prevent default drag behaviors
|
||||
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
||||
form.addEventListener(eventName, preventDefaults, false);
|
||||
document.body.addEventListener(eventName, preventDefaults, false);
|
||||
});
|
||||
|
||||
// highlight the dragarea
|
||||
['dragenter', 'dragover'].forEach(eventName => {
|
||||
form.addEventListener(eventName, highlight, false);
|
||||
});
|
||||
|
||||
// unhighlight the dragarea
|
||||
['dragleave', 'drop'].forEach(eventName => {
|
||||
form.addEventListener(eventName, unhighlight, false);
|
||||
});
|
||||
|
||||
function highlight(e) {
|
||||
form.classList.add('highlight');
|
||||
grid_form.classList.add('hidden');
|
||||
}
|
||||
|
||||
function unhighlight(e) {
|
||||
form.classList.remove('highlight');
|
||||
grid_form.classList.remove('hidden');
|
||||
}
|
||||
|
||||
// Files are dropped
|
||||
function dropHandler(ev) {
|
||||
ev.preventDefault();
|
||||
|
||||
if (ev.dataTransfer.items) {
|
||||
var item = ev.dataTransfer.items[0];
|
||||
var blob = item.getAsFile();
|
||||
const ext = blob.name.split(".")[1];
|
||||
var url = window.location.href;
|
||||
|
||||
// Give a visual cue
|
||||
grid_form.classList.add('hidden');
|
||||
|
||||
postData(url, blob)
|
||||
.then(data => {
|
||||
window.location.href = data + "." + ext;
|
||||
})
|
||||
.catch(function (err) {
|
||||
console.info(err + " url: " + url);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// pasting files from the clipboard
|
||||
document.onpaste = function (pasteEvent) {
|
||||
var item = pasteEvent.clipboardData.items[0];
|
||||
var blob = item.getAsFile();
|
||||
|
||||
if (blob !== null && blob !== '') {
|
||||
var url = window.location.href;
|
||||
|
||||
postData(url, blob)
|
||||
.then(data => {
|
||||
window.location.href = data;
|
||||
})
|
||||
.catch(function (err) {
|
||||
console.info(err + " url: " + url);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<title>{{ title }}</title>
|
||||
|
||||
<style>
|
||||
|
||||
/* fill entire page */
|
||||
code {
|
||||
background: transparent !important;
|
||||
|
|
@ -21,7 +20,7 @@
|
|||
body {
|
||||
/* Change background color to that of your theme's */
|
||||
background: #0f1419;
|
||||
padding: 10px;
|
||||
border: 10px solid transparent;
|
||||
color: #E6E1CF;
|
||||
}
|
||||
|
||||
|
|
@ -31,9 +30,9 @@
|
|||
background: #253340;
|
||||
}
|
||||
|
||||
{% block styles %}
|
||||
{% endblock styles %}
|
||||
</style>
|
||||
{% block styles %}
|
||||
{% endblock styles %}
|
||||
|
||||
{% block head %} {% endblock head %}
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -1,79 +1,13 @@
|
|||
{% extends "base" %}
|
||||
|
||||
{% block styles %}
|
||||
|
||||
html, body {
|
||||
overflow-y:hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100vh;
|
||||
font-family: monospace;
|
||||
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.grid_form {
|
||||
display: grid;
|
||||
grid-template-columns: 4fr 1fr 1fr;
|
||||
height: 100vh;
|
||||
align-items: start;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 90%;
|
||||
width: 100%;
|
||||
|
||||
background: none;
|
||||
border: none;
|
||||
|
||||
resize: none;
|
||||
overflow: auto;
|
||||
|
||||
color: inherit;
|
||||
font-family: monospace;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
select {
|
||||
color: inherit;
|
||||
background-color: #0f1419;
|
||||
border: none;
|
||||
padding: 0 1em 0 0;
|
||||
margin: 0;
|
||||
width: 80%;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
cursor: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
background-color: #F29718;
|
||||
border: none;
|
||||
padding: 0 1em 0 0;
|
||||
margin: 0;
|
||||
width: 50%;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
*:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
select.hidden { display: none; }
|
||||
button[type="submit"].hidden { display: none; }
|
||||
|
||||
<link rel="stylesheet" href="/css/index.css">
|
||||
{% endblock styles %}
|
||||
|
||||
{% block body %}
|
||||
<form action="/submit" method="post">
|
||||
<div class=grid_form ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
|
||||
<textarea name="val" style="resize: none" placeholder="
|
||||
<form action="/submit" method="post" ondrop="dropHandler(event)">
|
||||
<div class=grid_form>
|
||||
<textarea name="val" style="resize: none" placeholder="
|
||||
|
||||
bin(3) BIN bin(3)
|
||||
|
||||
|
|
@ -106,152 +40,77 @@ SEE ALSO
|
|||
|
||||
AUTHOR
|
||||
Gunwant Jain
|
||||
" autofocus autocomplete="off" autocorrect="off" autocapitalize="off"
|
||||
spellcheck="false"></textarea>
|
||||
" autofocus autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
|
||||
|
||||
<select id="ext" name="ext">
|
||||
<option value="txt">Plain Text</option>
|
||||
<option value="asa">ASP</option>
|
||||
<option value="asp">HTML (ASP)</option>
|
||||
<option value="as">ActionScript</option>
|
||||
<option value="applescript">AppleScript</option>
|
||||
<option value="bat">Batch File</option>
|
||||
<option value="build">NAnt Build File</option>
|
||||
<option value="cs">C#</option>
|
||||
<option value="cpp">C++</option>
|
||||
<option value="c">C</option>
|
||||
<option value="css">CSS</option>
|
||||
<option value="clj">Clojure</option>
|
||||
<option value="d">D</option>
|
||||
<option value="diff">Diff</option>
|
||||
<option value="erl">Erlang</option>
|
||||
<option value="yaws">HTML (Erlang)</option>
|
||||
<option value="go">Go</option>
|
||||
<option value="dot">Graphviz (DOT)</option>
|
||||
<option value="groovy">Groovy</option>
|
||||
<option value="html">HTML</option>
|
||||
<option value="hs">Haskell</option>
|
||||
<option value="lhs">Literate Haskell</option>
|
||||
<option value="jsp">Java Server Page (JSP)</option>
|
||||
<option value="java">Java</option>
|
||||
<option value="properties">Java Properties</option>
|
||||
<option value="json">JSON</option>
|
||||
<option value="js">JavaScript</option>
|
||||
<option value="bib">BibTeX</option>
|
||||
<option value="tex">LaTeX</option>
|
||||
<option value="sty">TeX</option>
|
||||
<option value="lisp">Lisp</option>
|
||||
<option value="lua">Lua</option>
|
||||
<option value="make">Makefile</option>
|
||||
<option value="md">Markdown</option>
|
||||
<option value="matlab">MATLAB</option>
|
||||
<option value="ml">OCaml</option>
|
||||
<option value="mll">OCamllex</option>
|
||||
<option value="mly">OCamlyacc</option>
|
||||
<option value="mm">Objective-C++</option>
|
||||
<option value="m">Objective-C</option>
|
||||
<option value="php">PHP</option>
|
||||
<option value="pas">Pascal</option>
|
||||
<option value="pl">Perl</option>
|
||||
<option value="py">Python</option>
|
||||
<option value="R">R</option>
|
||||
<option value="rd">Rd (R Documentation)</option>
|
||||
<option value="rails">HTML (Rails)</option>
|
||||
<option value="js.erb">JavaScript (Rails)</option>
|
||||
<option value="haml">Ruby Haml</option>
|
||||
<option value="rxml">Ruby on Rails</option>
|
||||
<option value="erbsql">SQL (Rails)</option>
|
||||
<option value="re">Regular Expression</option>
|
||||
<option value="rst">reStructuredText</option>
|
||||
<option value="rb">Ruby</option>
|
||||
<option value="rs">Rust</option>
|
||||
<option value="sql">SQL</option>
|
||||
<option value="scala">Scala</option>
|
||||
<option value="sh">Bourne Again Shell (bash)</option>
|
||||
<option value="adp">HTML (Tcl)</option>
|
||||
<option value="tcl">Tcl</option>
|
||||
<option value="textile">Textile</option>
|
||||
<option value="xml">XML</option>
|
||||
<option value="yaml">YAML</option>
|
||||
</select>
|
||||
<select id="ext" name="ext">
|
||||
<option value="txt">Plain Text</option>
|
||||
<option value="asa">ASP</option>
|
||||
<option value="asp">HTML (ASP)</option>
|
||||
<option value="as">ActionScript</option>
|
||||
<option value="applescript">AppleScript</option>
|
||||
<option value="bat">Batch File</option>
|
||||
<option value="build">NAnt Build File</option>
|
||||
<option value="cs">C#</option>
|
||||
<option value="cpp">C++</option>
|
||||
<option value="c">C</option>
|
||||
<option value="css">CSS</option>
|
||||
<option value="clj">Clojure</option>
|
||||
<option value="d">D</option>
|
||||
<option value="diff">Diff</option>
|
||||
<option value="erl">Erlang</option>
|
||||
<option value="yaws">HTML (Erlang)</option>
|
||||
<option value="go">Go</option>
|
||||
<option value="dot">Graphviz (DOT)</option>
|
||||
<option value="groovy">Groovy</option>
|
||||
<option value="html">HTML</option>
|
||||
<option value="hs">Haskell</option>
|
||||
<option value="lhs">Literate Haskell</option>
|
||||
<option value="jsp">Java Server Page (JSP)</option>
|
||||
<option value="java">Java</option>
|
||||
<option value="properties">Java Properties</option>
|
||||
<option value="json">JSON</option>
|
||||
<option value="js">JavaScript</option>
|
||||
<option value="bib">BibTeX</option>
|
||||
<option value="tex">LaTeX</option>
|
||||
<option value="sty">TeX</option>
|
||||
<option value="lisp">Lisp</option>
|
||||
<option value="lua">Lua</option>
|
||||
<option value="make">Makefile</option>
|
||||
<option value="md">Markdown</option>
|
||||
<option value="matlab">MATLAB</option>
|
||||
<option value="ml">OCaml</option>
|
||||
<option value="mll">OCamllex</option>
|
||||
<option value="mly">OCamlyacc</option>
|
||||
<option value="mm">Objective-C++</option>
|
||||
<option value="m">Objective-C</option>
|
||||
<option value="php">PHP</option>
|
||||
<option value="pas">Pascal</option>
|
||||
<option value="pl">Perl</option>
|
||||
<option value="py">Python</option>
|
||||
<option value="R">R</option>
|
||||
<option value="rd">Rd (R Documentation)</option>
|
||||
<option value="rails">HTML (Rails)</option>
|
||||
<option value="js.erb">JavaScript (Rails)</option>
|
||||
<option value="haml">Ruby Haml</option>
|
||||
<option value="rxml">Ruby on Rails</option>
|
||||
<option value="erbsql">SQL (Rails)</option>
|
||||
<option value="re">Regular Expression</option>
|
||||
<option value="rst">reStructuredText</option>
|
||||
<option value="rb">Ruby</option>
|
||||
<option value="rs">Rust</option>
|
||||
<option value="sql">SQL</option>
|
||||
<option value="scala">Scala</option>
|
||||
<option value="sh">Bourne Again Shell (bash)</option>
|
||||
<option value="adp">HTML (Tcl)</option>
|
||||
<option value="tcl">Tcl</option>
|
||||
<option value="textile">Textile</option>
|
||||
<option value="xml">XML</option>
|
||||
<option value="yaml">YAML</option>
|
||||
</select>
|
||||
|
||||
<button type="submit" title="Paste">Paste</button>
|
||||
</div>
|
||||
<button type="submit" title="Paste">Paste</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
const form = document.querySelector('form');
|
||||
const input = document.querySelector('textarea');
|
||||
const select = document.querySelector('select');
|
||||
const button = document.querySelector('button[type="submit"]');
|
||||
|
||||
const onInput = () => {
|
||||
button.classList.toggle('hidden', !input.value);
|
||||
select.classList.toggle('hidden', !input.value);
|
||||
}
|
||||
input.addEventListener('input', onInput);
|
||||
onInput();
|
||||
|
||||
document.body.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter' && e.ctrlKey) {
|
||||
form.submit();
|
||||
}
|
||||
});
|
||||
|
||||
async function postData(url = '', data) {
|
||||
const response = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: data
|
||||
});
|
||||
|
||||
const text = await response.text();
|
||||
return text;
|
||||
}
|
||||
|
||||
// drag and drop files
|
||||
function dropHandler(ev) {
|
||||
ev.preventDefault();
|
||||
|
||||
if (ev.dataTransfer.items) {
|
||||
var item = ev.dataTransfer.items[0];
|
||||
var blob = item.getAsFile();
|
||||
const ext = blob.name.split(".")[1];
|
||||
var url = window.location.href;
|
||||
|
||||
postData(url, blob)
|
||||
.then(data => {
|
||||
window.location.href = data + "." + ext;
|
||||
})
|
||||
.catch(function (err) {
|
||||
console.info(err + " url: " + url);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function dragOverHandler(ev) {
|
||||
ev.preventDefault();
|
||||
}
|
||||
|
||||
// pasting files from the clipboard
|
||||
document.onpaste = function(pasteEvent) {
|
||||
var item = pasteEvent.clipboardData.items[0];
|
||||
var blob = item.getAsFile();
|
||||
|
||||
if (blob !== null && blob !== '') {
|
||||
var url = window.location.href;
|
||||
|
||||
postData(url, blob)
|
||||
.then(data => {
|
||||
window.location.href = data;
|
||||
})
|
||||
.catch(function (err) {
|
||||
console.info(err + " url: " + url);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
{% endblock body %}
|
||||
<script src="/js/index.js"></script>
|
||||
{% endblock body %}
|
||||
|
|
@ -1,13 +1,16 @@
|
|||
{% extends "base" %}
|
||||
|
||||
{% block styles %}
|
||||
body {
|
||||
padding: 10px;
|
||||
}
|
||||
pre {
|
||||
margin: 0px;
|
||||
font-family: monospace;
|
||||
}
|
||||
<style>
|
||||
body {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0px;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
{% endblock styles %}
|
||||
|
||||
|
||||
|
|
@ -17,4 +20,4 @@ pre {
|
|||
|
||||
{% block body %}
|
||||
{{ body | safe }}
|
||||
{% endblock body %}
|
||||
{% endblock body %}
|
||||
Loading…
Reference in New Issue
Block a user