Add layout name to playground

Author: derekcannon

keyboard_svg.js

@@ -289,6 +289,52 @@ function openCorpusPopup() {
   document.getElementById('corpusPopup').style.display = 'flex';
 }
 
+var is_editing_name = false;
+var name_container = document.querySelector("#layout-name");
+var name_div = name_container.querySelector(".name");
+var name_edit_btn = name_container.querySelector("button.edit");
+var name_save_btn = name_container.querySelector("button.save");
+var name_input = name_container.querySelector(".name-entry");
+renderLayoutName();
+
+function renderLayoutName(layout_name = params.name) {
+  if (layout_name) {
+    name_div.innerHTML = layout_name;
+    name_input.value = layout_name;
+    name_div.classList.remove("placeholder");
+  } else {
+    name_div.innerHTML = "Unnamed layout";
+    name_div.classList.add("placeholder");
+  }
+}
+
+function toggleEditLayoutName() {
+  if (is_editing_name) {
+    name_div.removeAttribute("hidden")
+    name_input.setAttribute("hidden", true);
+    name_edit_btn.innerText = "Edit";
+    name_save_btn.setAttribute("hidden", true);
+  } else {
+    name_div.setAttribute("hidden", true)
+    name_edit_btn.innerText = "Cancel"
+    name_save_btn.removeAttribute("hidden");
+    name_input.removeAttribute("hidden");
+    name_input.focus();
+  }
+
+  is_editing_name = !is_editing_name;
+}
+
+function updateLayoutName() {
+  var new_layout_name = name_input.value;
+  var queryParams = new URLSearchParams(window.location.search);
+  queryParams.set('name',  new_layout_name);
+  history.replaceState(null, null, "?"+queryParams.toString());
+
+  renderLayoutName(new_layout_name);
+  toggleEditLayoutName();
+}
+
 function containsOneCopyOfAllLetters(str) {
   str = str.toUpperCase();
   if (strCount(str,",")!=1) {return false;}

playground.html

@@ -25,6 +25,41 @@
       .draggable {
         cursor: move;
       }
+      #layout-name {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          gap: 6px;
+          margin:auto;
+          padding: 10px;
+          padding-bottom: 16px;
+          width: 1000px;
+          min-height: 63px;
+      }
+      #layout-name .name {
+          color: #dfe2eb;
+      }
+      #layout-name .name-entry {
+          font-size: 16px;
+          padding: 2px 4px;
+      }
+      #layout-name .placeholder {
+          color: #999;
+          font-size: 16px;
+          font-style: italic;
+          font-weight: normal;
+      }
+      #layout-name button {
+          font-family: Sans, Arial;
+          background-color: #777777;
+          border: none;
+          color: #111111;
+          height: 25px;
+          padding-left: 4px;
+          padding-right: 4px;
+          font-size: 16px;
+      }
       .layout-svg{margin:auto;width:1000px;}
       .stats-svg{margin:auto;width:1000px;}
       .overlay {
@@ -152,6 +187,12 @@
         <a onclick="selectLanguage('swedish')">Swedish</a>
       </div>
     </div>
+    <div id="layout-name">
+       <input class="name-entry" hidden />
+        <h1 class="name"></h1>
+        <button class="save" onclick="updateLayoutName()" hidden>Save</button>
+        <button class="edit" onclick="toggleEditLayoutName()">Edit</button>
+    </div>
     <div class="layout-svg" id = "svglayout"></div>
     <br>
     <div class="stats-svg" id = "svgstats"></div>