From b7a8f5b73903f4c83f030e26c745e2fd171bf121 Mon Sep 17 00:00:00 2001
From: lzzfnc <luzzanafrancesco@gmail.com>
Date: Thu, 4 Nov 2021 01:53:17 +0100
Subject: [PATCH] transcription wip

---
 index.html     |  5 ++++-
 labels.js      | 13 ++++++++++++-
 panels.js      |  3 ++-
 picture.js     |  4 +++-
 style.css      | 23 ++++++++++++++++++-----
 text-export.js | 31 +++++++++++++++++++++++++++++++
 6 files changed, 70 insertions(+), 9 deletions(-)
 create mode 100644 text-export.js

diff --git a/index.html b/index.html
index 12be2cb..ca0fac2 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/labels.js b/labels.js
index 05c4cee..8480bd2 100644
--- a/labels.js
+++ b/labels.js
@@ -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);
+}
diff --git a/panels.js b/panels.js
index 6046ff3..b05df8f 100644
--- a/panels.js
+++ b/panels.js
@@ -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");
diff --git a/picture.js b/picture.js
index 031ca80..6d1821a 100644
--- a/picture.js
+++ b/picture.js
@@ -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");
diff --git a/style.css b/style.css
index d2dea05..1c28c11 100644
--- a/style.css
+++ b/style.css
@@ -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;
diff --git a/text-export.js b/text-export.js
new file mode 100644
index 0000000..29d6721
--- /dev/null
+++ b/text-export.js
@@ -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);
+	}
+}