added keyboard shortcuts for nudging /deleting containers

1 files changed, 62 insertions, 7 deletions

diff --git a/startpage.html b/startpage.html
index 780e190..c22bbc8 100644
--- a/startpage.html
+++ b/startpage.html
@@ -572,7 +572,7 @@
             </p>
 
         </div>
-   todo: enable changing color of edit page toggle? remove underline from links? nudge elements 1px with arrow keys? reset data button?
+   todo: enable changing color of edit page toggle?  reset data button?
     </div>
   </body>
 
@@ -809,6 +809,7 @@
             style="z-index: ${numberOfMediaContainers + numberOfTextContainers};"
             src="${this.mediaUrl}"
             draggable=false
+            tabindex="0"
           ></img>
           ${loadingFromSave ? `</a>` : ``}
         `
@@ -828,6 +829,7 @@
             id=${this.id}
             class="movable media"
             style="width:640px;height:480px"
+            tabindex="0"
           >
             <div class="youtubeEmbedCover" style="z-index: ${900 + numberOfMediaContainers + numberOfTextContainers}; ${editing ? 'display: block"' : 'display:none;"'}></div>
             <iframe
@@ -849,7 +851,7 @@
         document.body.insertAdjacentHTML(
           "beforeend",
           `
-            <div class="movable container" id=${this.id}>
+            <div class="movable container" id=${this.id} tabindex="0">
               <div class="autoMarginHolder">
                 <div id=${this.id + "-header"} class="containerHeader">
                   <div id=${this.id + "-date"}></div>
@@ -920,7 +922,7 @@
         document.getElementById("containers").insertAdjacentHTML(
           "afterbegin",
           `
-          <div class="containerListing" id=${this.id + "-container-listing"}>
+          <div class="containerListing" id=${this.id + "-container-listing"} tabIndex="0">
 
           <div class="expandableMenuToggle active" onclick="toggleExpandableMenu(this)">
             <p id=${this.id + "--listing-header"}>[${this.settings.zIndex}]: ${this.name}</p>
@@ -1866,8 +1868,13 @@
           mouseDownMovableElement,
           true
         );
-        // TODO put event listeners here to a single function to handle nudges
-        // prevent context menu when resizing
+
+        container.addEventListener(
+          "keydown",
+          keyDownMovableElement,
+          false
+        );
+
         container.addEventListener("contextmenu", (e) => {
           e.preventDefault();
         });
@@ -1972,6 +1979,7 @@
       
       /** add keybinds */
       document.body.addEventListener("keydown", (e) => {
+        console.log("grabbed");
         if (e.key == "e" && !editing) {
           toggleEditMode();
         }
@@ -2634,7 +2642,15 @@
       updateContainerListingOrder();
     }
     function deleteContainer(buttonPressed) {
-      let containerId = buttonPressed.id.split("--")[0];
+      let  containerId;
+      if (buttonPressed.id) {
+        containerId = buttonPressed.id.split("--")[0];
+      }
+      else {
+        // if being called from keyboard shortcut
+        containerId = buttonPressed;
+      }
+
       let container = containerDataMap.get(containerId);
 
       if (container.mediaUrl == undefined) {
@@ -2677,7 +2693,7 @@
       return -1;
     }
 
-    /** upon click release on movable elements, store position data for when saving to localStorage when disabling edit mode */
+    /** upon click release on movable elements, store position data to save to localStorage when edit mode gets disabled */
     function storeElementData() {
       let borderWidth = changingElement.style.borderWidth.slice(0, -2) * 2; // slice to remove "px"
       let element = document.getElementById(changingElement.id);
@@ -2862,6 +2878,45 @@
       }
     }
 
+    function keyDownMovableElement(keyDown) {
+      if (!editing || 
+        keyDown.target.id == "settingsContainer" ||
+        keyDown.key == "Escape"
+      ) {
+        console.log(keyDown.key);
+        console.log(keyDown.target.id);
+        return;
+      }
+      keyDown.stopPropagation();
+
+      changingElement = document.getElementById(keyDown.target.id);
+
+      currentX = parseInt(changingElement.style.left.replace("px", ""));
+      currentY = parseInt(changingElement.style.top.replace("px", ""));
+
+      // deletion
+      if(keyDown.key == "Backspace") {
+        deleteContainer(keyDown.target.id);
+      }
+      // nudges
+      if(keyDown.key == "ArrowUp") {
+        changingElement.style.top =`${currentY - 1}px`;
+        storeElementData();
+      }
+      if(keyDown.key == "ArrowRight") {
+        changingElement.style.left =`${currentX + 1}px`;
+        storeElementData();
+      }
+      if(keyDown.key == "ArrowDown") {
+        changingElement.style.top =`${currentY + 1}px`;
+        storeElementData();
+      }
+      if(keyDown.key == "ArrowLeft") {
+        changingElement.style.left =`${currentX - 1}px`;
+        storeElementData();
+      }
+    }
+
     function setDefaultCursor() {
       cursors.default = document.getElementById("pointerCursorInput").value;
       // apply new default cursor to entire html document