export and scroll

index.html

@@ -28,18 +28,32 @@
 			<button id="load-labels">Load</button>
 		</nav>
 		<aside class="info" id="info-panel">
+			<div class="contents">
 				<button class="close">X</button>
 				<h1 class="title">Concrete 🎏 Label</h1>
 				<p>
 					What do we need to know: - text labels-contents - order - position - size - who
 					wrote it ? (random id? name? nothing at all?) - timestamp ? -
 				</p>
+			</div>
 		</aside>
 		<aside class="transcription" id="transcription-panel">
+			<div class="contents">
 				<button class="close">X</button>
 				<h1 class="title">Label Transcription</h1>
-			<ol class="labels-contents"></ol>
 				<button id="export-text">Export</button>
+				<div class="options">
+					<div>
+						<input type="checkbox" id="checkJSON" name="export-json" checked />
+						<label for="export-json">JSON</label>
+					</div>
+					<div>
+						<input type="checkbox" id="checkText" name="export-text" checked />
+						<label for="export-text">TXT</label>
+					</div>
+				</div>
+				<ol class="labels-contents"></ol>
+			</div>
 		</aside>
 	</body>
 </html>

labels.js

@@ -262,7 +262,7 @@ function drawLabel() {
 				labels.push(label);
 
 				imageTarget.appendChild(label);
-				createLabelTranscription(label);
+				createLabelTranscription(input.value);
 			})
 			.catch((e) => {})
 			.then(() => {
@@ -306,9 +306,9 @@ function createLabel(x, y, width, height, index) {
 const transcriptionPanel = document.getElementById("transcription-panel");
 const transcriptionList = transcriptionPanel.querySelector("ol");
 
-function createLabelTranscription(label) {
+function createLabelTranscription(text) {
 	let transcription = document.createElement("li");
-	transcription.innerHTML = label.querySelector(".label--text").innerHTML;
+	transcription.innerHTML = text;
 
 	transcriptionList.appendChild(transcription);
 }
@@ -364,6 +364,8 @@ function loadLabels() {
 				labelElement.classList.add("loaded");
 
 				imageTarget.appendChild(labelElement);
+
+				createLabelTranscription(label.text);
 			});
 		});
 }

style.css

@@ -226,7 +226,6 @@ body {
 	top: 0;
 	z-index: 50;
 
-	padding: 24px;
 	margin: 0;
 
 	width: 25%;
@@ -239,6 +238,13 @@ body {
 	transition: transform 0.4s ease-out;
 }
 
+.info .contents,
+.transcription .contents {
+	padding: 24px;
+	height: 100vh;
+	overflow-y: auto;
+}
+
 .transcription.active,
 .info.active {
 	transform: translateX(0);
@@ -254,6 +260,7 @@ body {
 	padding: 0;
 	list-style-position: inside;
 	font-size: 1.125rem;
+	margin-bottom: 100px;
 }
 
 #show-info,
@@ -320,3 +327,7 @@ nav > * {
 img.hidden {
 	display: none;
 }
+
+.transcription .options {
+	margin-top: 24px;
+}

text-export.js

@@ -1,11 +1,30 @@
-const exportText = document.getElementById("export-text");
+const exportButton = document.getElementById("export-text");
+const imageElement = document.getElementById("background-image");
 
-exportText.addEventListener("click", (e) => {
+const checkJSON = document.getElementById("checkJSON");
+const checkTEXT = document.getElementById("checkText");
+
+let fileUrl = imageElement.src;
+let fileName = fileUrl.slice(fileUrl.lastIndexOf("/") + 1, fileUrl.length);
+let fileTitle = fileName.slice(0, fileName.indexOf(".")) || "export";
+
+console.log(document.getElementById("transcription-panel"));
+
+exportButton.addEventListener("click", (e) => {
+	if (checkJSON.value) exportJSON();
+	if (checkTEXT.value) exportText();
+});
+
+function exportText() {
 	let text = document.querySelector("ol").innerText;
-	let title = fileName.slice(0, fileName.indexOf(".")) || "export";
-	title += ".txt";
+	let title = fileTitle + ".txt";
 	download(text, title, "text/plain;charset=utf-8");
-});
+}
+
+function exportJSON() {
+	let title = fileTitle + ".json";
+	download(JSON.stringify(labelsObj), title, "application/json");
+}
 
 // https://stackoverflow.com/questions/13405129/javascript-create-and-save-file
 // Thank you Kanchu!