km0 3 years ago
commit d9067e3553

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

@ -134,6 +134,7 @@ function drawLabel() {
labels.push(label); labels.push(label);
container.appendChild(label); container.appendChild(label);
createLabelTranscription(label);
// Reset the modal // Reset the modal
input.value = ""; input.value = "";
@ -146,7 +147,7 @@ function drawLabel() {
} }
// Create the label element // Create the label element
function createLabel(x, y, width, height, index, input) { function createLabel(x, y, width, height, index) {
let label = document.createElement("div"); let label = document.createElement("div");
label.classList.add("label"); label.classList.add("label");
label.style.left = `${x}px`; label.style.left = `${x}px`;
@ -176,3 +177,13 @@ function createLabel(x, y, width, height, index, input) {
return label; 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 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) => { showTranscription.addEventListener("click", (e) => {
transcriptionPanel.classList.add("active"); transcriptionPanel.classList.add("active");

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

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