transcription wip

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>

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);
+}

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");

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");

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;

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);
+	}
+}