<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SRT Reader</title>
<!-- drag-n-drop: https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/-->
</head>
<style>
/**br hack from https://stackoverflow.com/a/28310011/191246**/
br {
content: "";
margin: 2em;
display: block;
font-size: 24%;
}
form {
margin: 1em auto;
width: 100%;
}
.box {
margin: 1em auto;
width: 70%;
max-width: 70%;
-webkit-box-shadow: rgba(29, 36, 23, 0.386719) -2px 4px 17px 0px;
-moz-box-shadow: rgba(29, 36, 23, 0.386719) -2px 4px 17px 0px;
box-shadow: rgba(29, 36, 23, 0.386719) -2px 4px 17px 0px;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
}
#rendered_markup {
padding: 1em;
}
body {
padding-left: 3em;
}
* {
font-family: "Droid Sans", Helvetica, sans-serif;
line-height: 1.2em;
}
textarea {
margin: .5em;
border: none;
width: 95%;
padding: .5em
}
.btn-submit {
margin: 1em;
text-align: right;
background-color: #44c767;
color: white;
border-radius: 28px;
border: 1px solid #18ab29;
display: inline-block;
cursor: pointer;
font-size: 17px;
padding: 16px 31px;
text-decoration: none;
text-shadow: 0px 1px 0px #2f6627;
}
.btn-submit:hover {
background-color: #5cbf2a;
}
.btn-submit:active {
position: relative;
top: 1px;
}
#drop-area.highlight {
border: 5px dotted green;
background: lightgreen;
}
#fileUpload {
display: none;
}
.hint {
font-size: 70%;
color: darkgray;
}
</style>
<body>
<div class="box">
<div id="rendered_markup">✍️</div>
</div>
<div class="box">
<div id="drop-area">
<form id="frm" name="frm" action="">
<textarea id="txt" name="txt" rows="15" cols="100">
</textarea>
<br>
<div style="text-align: center">
<input type="file" id="fileUpload" multiple accept="*" onchange="handleFiles(this.files)">
<input class="btn-submit" type="submit" value="Render" onclick="render(); return false;">
<br><label class="hint" for="fileUpload">paste or drag a file..</label>
</div>
</form>
</div>
</div>
<script>
function render(e) {
document.getElementById('rendered_markup').innerHTML = '<p>' + document.frm.txt.value.replace(/(?:\r\n|\r|\n)+/g, '<br>')
.replace(/#ffffff/g, '#2c7cf4')
.replace(/#00ffff/g, '#56aa03')
+ '</p>';
}
var dropArea = document.getElementById('drop-area');
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false)
})
function preventDefaults(e) {
e.preventDefault()
e.stopPropagation()
}
;['dragenter', 'dragover'].forEach(eventName => {
dropArea.addEventListener(eventName, highlight, false)
})
;['dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, unhighlight, false)
})
function highlight(e) {
dropArea.classList.add('highlight')
}
function unhighlight(e) {
dropArea.classList.remove('highlight')
}
dropArea.addEventListener('drop', handleDrop, false)
function handleDrop(e) {
var dt = e.dataTransfer
var files = dt.files
getFiles(files);
}
function getFiles(files) {
if (files) {
placeFileContent(
document.getElementById('txt'),
files.item(0))
}
}
function placeFileContent(target, file) {
readFileContent(file).then(content => {
target.value = content
}).then(() => {
render();
}).catch(error => console.log(error))
}
function readFileContent(file) {
const reader = new FileReader()
return new Promise((resolve, reject) => {
reader.onload = event => resolve(event.target.result)
reader.onerror = error => reject(error)
reader.readAsText(file)
})
}
</script>
</body>
</html>