From 101c1cbd45bfa6d447dff31e15a53a83104747bf Mon Sep 17 00:00:00 2001
From: "kam (from the studio)" <luzzanafrancesco@gmail.com>
Date: Wed, 3 Nov 2021 18:17:39 +0100
Subject: [PATCH] panels wip

---
 index.html | 12 ++++++++++--
 panel.js   | 14 --------------
 panels.js  | 19 +++++++++++++++++++
 style.css  | 39 ++++++++++++++++++++++++++++++---------
 4 files changed, 59 insertions(+), 25 deletions(-)
 delete mode 100644 panel.js
 create mode 100644 panels.js

diff --git a/index.html b/index.html
index cfc9be5..12be2cb 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
 
 		<script src="labels.js" defer></script>
 		<script src="picture.js" defer></script>
-		<script src="panel.js" defer></script>
+		<script src="panels.js" defer></script>
 
 		<link rel="stylesheet" href="style.css" />
 		<title>Concrete Label</title>
@@ -27,8 +27,12 @@
 				</form>
 			</div>
 		</main>
-		<button id="show-info">?</button>
+		<nav>
+			<button id="show-transcription">...</button>
+			<button id="show-info">?</button>
+		</nav>
 		<aside class="info" id="info-panel">
+			<button class="close">X</button>
 			<h1 class="title">Concrete 🎏 Label</h1>
 			<p>
 				How could computer read concrete & visual poetry? How does computer navigate through
@@ -45,5 +49,9 @@
 				Everything happen in your browser.
 			</p>
 		</aside>
+		<aside class="transcription" id="transcription-panel">
+			<button class="close">X</button>
+			<h1 class="title">Label Transcription</h1>
+		</aside>
 	</body>
 </html>
diff --git a/panel.js b/panel.js
deleted file mode 100644
index c0395b1..0000000
--- a/panel.js
+++ /dev/null
@@ -1,14 +0,0 @@
-const showInfo = document.getElementById("show-info");
-const infoPanel = document.getElementById("info-panel");
-
-showInfo.addEventListener("click", (e) => {
-	if (infoPanel.classList.contains("active")) {
-		infoPanel.classList.remove("active");
-		showInfo.classList.remove("active");
-		showInfo.innerHTML = "?";
-	} else {
-		infoPanel.classList.add("active");
-		showInfo.classList.add("active");
-		showInfo.innerHTML = "X";
-	}
-});
diff --git a/panels.js b/panels.js
new file mode 100644
index 0000000..6046ff3
--- /dev/null
+++ b/panels.js
@@ -0,0 +1,19 @@
+const showInfo = document.getElementById("show-info");
+const infoPanel = document.getElementById("info-panel");
+
+showInfo.addEventListener("click", (e) => {
+	infoPanel.classList.add("active");
+	infoPanel.querySelector(".close").addEventListener("click", (e) => {
+		infoPanel.classList.remove("active");
+	});
+});
+
+const showTranscription = document.getElementById("show-transcription");
+const transcriptionPanel = document.getElementById("transcription-panel");
+
+showTranscription.addEventListener("click", (e) => {
+	transcriptionPanel.classList.add("active");
+	transcriptionPanel.querySelector(".close").addEventListener("click", (e) => {
+		transcriptionPanel.classList.remove("active");
+	});
+});
diff --git a/style.css b/style.css
index 12dd9e6..d2dea05 100644
--- a/style.css
+++ b/style.css
@@ -157,7 +157,8 @@ body {
 	display: none;
 }
 
-.info {
+.info,
+.transcription {
 	position: absolute;
 	right: 0;
 	bottom: 0;
@@ -177,21 +178,20 @@ body {
 	transition: transform 0.4s ease-out;
 }
 
+.transcription.active,
 .info.active {
 	transform: translateX(0);
 	transition: transform 0.4s ease-in;
 }
 
+.transcription .title,
 .info .title {
 	margin: 0;
 }
 
-#show-info {
-	position: absolute;
-	top: 24px;
-	right: 24px;
-	z-index: 100;
-
+#show-info,
+#show-transcription,
+.close {
 	background: none;
 
 	display: inline-block;
@@ -206,18 +206,39 @@ body {
 	cursor: pointer;
 }
 
+#show-transcription:hover,
 #show-info:hover {
 	border: 1px solid tomato;
 	background-color: tomato;
 	color: white;
 }
 
-#show-info.active {
+.close {
+	position: absolute;
+	right: 24px;
+	top: 24px;
 	color: white;
 }
 
-#show-info:hover.active {
+.close:hover {
 	border: 1px solid white;
 	background-color: white;
 	color: #111;
 }
+
+nav {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 50;
+
+	padding: 24px;
+	text-align: right;
+
+	pointer-events: none;
+}
+
+nav > * {
+	pointer-events: all;
+}