From 9d6b7ba2ce4b1a75d62bb6ab4aed207533294caf Mon Sep 17 00:00:00 2001
From: Jacob Strieb <jstrieb@users.noreply.github.com>
Date: Tue, 19 May 2020 22:13:00 -0400
Subject: [PATCH] Add ability to hide buttons in the editor

---
 editor/editor.js  | 11 +++++++++++
 editor/index.html |  3 +++
 editor/main.css   | 10 ++++++++++
 3 files changed, 24 insertions(+)

diff --git a/editor/editor.js b/editor/editor.js
index b978bb0..4b42192 100644
--- a/editor/editor.js
+++ b/editor/editor.js
@@ -82,6 +82,17 @@ function showCopyCodePrompt() {
 }
 
 
+/* Hide and show buttons based on checkbox state */
+function hideButtons(box) {
+  let buttons = document.querySelectorAll("button");
+  if (box.checked) {
+    buttons.forEach((button) => button.style.display = "none");
+  } else {
+    buttons.forEach((button) => button.style.display = "inline");
+  }
+}
+
+
 
 /***
  * Main procedure functions
diff --git a/editor/index.html b/editor/index.html
index 789855d..1543c83 100644
--- a/editor/index.html
+++ b/editor/index.html
@@ -15,6 +15,8 @@
 </div>
 
 <div id="bottomleft-buttons">
+  <label for="hide">Hide Buttons</label>
+  <input type="checkbox" id="hide" onclick="hideButtons(this)" /><br />
   <!-- Seemingly random attributes necessary for TinyUrl to accept the request -->
   <form action="http://tinyurl.com/create.php" method="get" target="_blank">
 		<input type="hidden" id="source" name="source" value="indexpage">
@@ -25,6 +27,7 @@
   <button><a id="getLinkLink" href="" target="_blank">Open Page</a></button>
   <button onclick="showCopyCodePrompt()">Copy Code</button>
   <button><a id="downloadLink" href="" target="_blank" download="export.html">Download Code</a></button>
+  <button><a href="https://jstrieb.github.io/link-lock" target="_blank">Add a Password</a></button>
 </div>
 
 <div id="topright-buttons">
diff --git a/editor/main.css b/editor/main.css
index ca7ae7a..0e76501 100644
--- a/editor/main.css
+++ b/editor/main.css
@@ -52,3 +52,13 @@ a, button {
 form {
   display: inline;
 }
+
+label, input[type="checkbox"] {
+  vertical-align: middle;
+}
+
+label {
+  margin: 5px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}