tools/paste
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor code and add dragover visual cue

Browse Source 
Signed-off-by: Gunwant Jain <mail@wantguns.dev>
This commit is contained in:
Gunwant Jain
2021-12-26 08:23:18 +05:30
parent a9dc9452fc
commit cca3a8bec9
6 changed files with 271 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

289
templates/index.html.tera
View File

@@ -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 %}