transcription wip

master
km0 2 years ago
parent 101c1cbd45
commit b7a8f5b739

@ -8,6 +8,7 @@
<script src="labels.js" defer></script>
<script src="picture.js" defer></script>
<script src="panels.js" defer></script>
<script src="text-export.js" defer></script>
<link rel="stylesheet" href="style.css" />
<title>Concrete Label</title>
@ -28,7 +29,7 @@
</div>
</main>
<nav>
<button id="show-transcription">...</button>
<button id="show-transcription">Export</button>
<button id="show-info">?</button>
</nav>
<aside class="info" id="info-panel">
@ -52,6 +53,8 @@
<aside class="transcription" id="transcription-panel">
<button class="close">X</button>
<h1 class="title">Label Transcription</h1>
<ol class="labels-contents"></ol>
<button id="export-text">Export</button>
</aside>
</body>
</html>

@ -134,6 +134,7 @@ function drawLabel() {
labels.push(label);
container.appendChild(label);
createLabelTranscription(label);
// Reset the modal
input.value = "";
@ -146,7 +147,7 @@ function drawLabel() {
}
// Create the label element
function createLabel(x, y, width, height, index, input) {
function createLabel(x, y, width, height, index) {
let label = document.createElement("div");
label.classList.add("label");
label.style.left = `${x}px`;
@ -176,3 +177,13 @@ function createLabel(x, y, width, height, index, input) {
return label;
}
const transcriptionPanel = document.getElementById("transcription-panel");
const transcriptionList = transcriptionPanel.querySelector("ol");
function createLabelTranscription(label) {
let transcription = document.createElement("li");
transcription.innerHTML = label.querySelector(".label--text").innerHTML;
transcriptionList.appendChild(transcription);
}

@ -9,7 +9,8 @@ showInfo.addEventListener("click", (e) => {
});
const showTranscription = document.getElementById("show-transcription");
const transcriptionPanel = document.getElementById("transcription-panel");
// declared previously in labels.js
// const transcriptionPanel = document.getElementById("transcription-panel");
showTranscription.addEventListener("click", (e) => {
transcriptionPanel.classList.add("active");

@ -1,8 +1,10 @@
let fileName = "";
window.addEventListener("load", function () {
let input = document.querySelector('input[type="file"]');
input.addEventListener("change", function () {
console.log(this.files);
if (this.files && this.files[0]) {
fileName = this.files[0].name;
let img = document.querySelector("img");
img.onload = () => {
img.classList.add("visible");

@ -181,7 +181,7 @@ body {
.transcription.active,
.info.active {
transform: translateX(0);
transition: transform 0.4s ease-in;
transition: transform 0.6s ease-in;
}
.transcription .title,
@ -189,15 +189,23 @@ body {
margin: 0;
}
.transcription ol {
padding: 0;
list-style-position: inside;
font-size: 1.125rem;
}
#show-info,
#show-transcription,
.close {
.close,
button {
background: none;
display: inline-block;
width: 24px;
min-width: 24px;
height: 24px;
border-radius: 50%;
border-radius: 24px;
padding: 0 4px;
border: 1px solid currentColor;
@ -216,16 +224,21 @@ body {
.close {
position: absolute;
right: 24px;
top: 24px;
top: 32px;
color: white;
}
#export-text:hover,
.close:hover {
border: 1px solid white;
background-color: white;
color: #111;
}
#export-text {
color: white;
}
nav {
position: absolute;
top: 0;

@ -0,0 +1,31 @@
const exportText = document.getElementById("export-text");
exportText.addEventListener("click", (e) => {
let text = document.querySelector("ol").innerText;
let title = fileName.slice(0, fileName.indexOf(".")) || "export";
title += ".txt";
download(text, title, "text/plain;charset=utf-8");
});
// https://stackoverflow.com/questions/13405129/javascript-create-and-save-file
// Thank you Kanchu!
// Function to download data to a file
function download(data, filename, type) {
var file = new Blob([data], { type: type });
if (window.navigator.msSaveOrOpenBlob)
// IE10+
window.navigator.msSaveOrOpenBlob(file, filename);
else {
// Others
var a = document.createElement("a"),
url = URL.createObjectURL(file);
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
setTimeout(function () {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, 0);
}
}
Loading…
Cancel
Save