From de6578d9e8c2b2016075c72f30eb2dfe842e136b Mon Sep 17 00:00:00 2001
From: Thomas Miceli <27960254+thomiceli@users.noreply.github.com>
Date: Sat, 7 Sep 2024 15:17:56 +0200
Subject: [PATCH] Add file delete button on create editor (#320)

---
 public/editor.ts            | 25 +++++++++++++++++++++++++
 templates/pages/create.html |  5 +++++
 templates/pages/edit.html   |  4 ++--
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/public/editor.ts b/public/editor.ts
index 07c0940..2916ee7 100644
--- a/public/editor.ts
+++ b/public/editor.ts
@@ -111,6 +111,7 @@ document.addEventListener("DOMContentLoaded", () => {
             deleteBtns.onclick = () => {
                 editorsjs.splice(editorsjs.indexOf(editor), 1);
                 dom.remove();
+                checkForFirstDeleteButton();
             };
         }
 
@@ -191,6 +192,8 @@ document.addEventListener("DOMContentLoaded", () => {
         editorsjs.push(currEditor);
     });
 
+    checkForFirstDeleteButton();
+
     document.getElementById("add-file")!.onclick = () => {
         let newEditorDom = firstEditordom.cloneNode(true) as HTMLElement;
 
@@ -204,6 +207,7 @@ document.addEventListener("DOMContentLoaded", () => {
         // creating the new codemirror editor and append it in the editor div
         editorsjs.push(newEditor(newEditorDom));
         editorsParentdom.append(newEditorDom);
+        showDeleteButton(newEditorDom);
     };
 
     document.querySelector<HTMLFormElement>("form#create")!.onsubmit = () => {
@@ -226,6 +230,27 @@ document.addEventListener("DOMContentLoaded", () => {
 
     }
 
+    function checkForFirstDeleteButton() {
+        let deleteBtn = editorsParentdom.querySelector<HTMLButtonElement>("button.delete-file")!;
+        if (editorsjs.length === 1) {
+            deleteBtn.classList.add("hidden");
+            deleteBtn.previousElementSibling.classList.remove("rounded-l-md");
+            deleteBtn.previousElementSibling.classList.add("rounded-md");
+        } else {
+            deleteBtn.classList.remove("hidden");
+            deleteBtn.previousElementSibling.classList.add("rounded-l-md");
+            deleteBtn.previousElementSibling.classList.remove("rounded-md");
+        }
+    }
+
+    function showDeleteButton(editorDom: HTMLElement) {
+        let deleteBtn = editorDom.querySelector<HTMLButtonElement>("button.delete-file")!;
+        deleteBtn.classList.remove("hidden");
+        deleteBtn.previousElementSibling.classList.add("rounded-l-md");
+        deleteBtn.previousElementSibling.classList.remove("rounded-md");
+        checkForFirstDeleteButton();
+    }
+
     document.onsubmit = () => {
         window.onbeforeunload = null;
     };
diff --git a/templates/pages/create.html b/templates/pages/create.html
index 92d3414..a2b1ea4 100644
--- a/templates/pages/create.html
+++ b/templates/pages/create.html
@@ -32,6 +32,11 @@
                     <div class="border-b-1 border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 my-auto flex">
                         <p class="mx-2 my-2 inline-flex">
                             <input type="text" name="name" placeholder="{{ .locale.Tr "gist.new.filename-with-extension" }}" style="line-height: 0.05em" class="form-filename bg-white dark:bg-gray-900 shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-200 dark:border-gray-700 rounded-md gist-title">
+                            <button style="line-height: 0.05em" class="hidden delete-file -ml-px relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-200 dark:border-gray-700 text-sm font-medium rounded-r-md text-slate-700 dark:text-slate-300 bg-gray-50 dark:bg-gray-800 hover:bg-white dark:hover:bg-gray-900 focus:outline-none" type="button">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                                </svg>
+                            </button>
                         </p>
                         <button type="button" class="md-preview hidden whitespace-nowrap text-slate-700 dark:text-slate-300 rounded border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-900 my-2 px-2 text-xs font-medium shadow-sm hover:bg-gray-200 dark:hover:bg-gray-700 hover:border-gray-500 hover:text-slate-700 dark:hover:text-slate-300 focus:outline-none focus:ring-1 focus:border-primary-500 focus:ring-primary-500">{{ .locale.Tr "gist.new.preview" }}</button>
                         <div class="hidden mx-2 my-2 sm:inline-flex ml-auto space-x-2">
diff --git a/templates/pages/edit.html b/templates/pages/edit.html
index a8f92d6..b1c2ba7 100644
--- a/templates/pages/edit.html
+++ b/templates/pages/edit.html
@@ -65,8 +65,8 @@
                 <div class="rounded-md border border-1 border-gray-200 dark:border-gray-700 editor">
                     <div class="border-b-1 border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 my-auto flex">
                         <p class="mx-2 my-2 inline-flex">
-                            <input type="text" value="{{ $file.Filename }}" name="name" placeholder="Filename with extension" style="line-height: 0.05em; z-index: 99999" class="form-filename bg-white dark:bg-gray-900 shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-200 dark:border-gray-700 rounded-l-md gist-title">
-                            <button style="line-height: 0.05em" class="delete-file -ml-px relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-200 dark:border-gray-700 text-sm font-medium rounded-r-md text-slate-700 dark:text-slate-300 bg-gray-50 dark:bg-gray-800 hover:bg-white dark:hover:bg-gray-900 focus:outline-none" type="button">
+                            <input type="text" value="{{ $file.Filename }}" name="name" placeholder="{{ $.locale.Tr "gist.new.filename-with-extension" }}" style="line-height: 0.05em; z-index: 99999" class="form-filename bg-white dark:bg-gray-900 shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-200 dark:border-gray-700 {{ if eq (len $.files) 1 }}rounded-md{{ else }}rounded-l-md{{ end }} gist-title">
+                            <button style="line-height: 0.05em" class="{{ if eq (len $.files) 1 }}hidden{{ end }} delete-file -ml-px relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-200 dark:border-gray-700 text-sm font-medium rounded-r-md text-slate-700 dark:text-slate-300 bg-gray-50 dark:bg-gray-800 hover:bg-white dark:hover:bg-gray-900 focus:outline-none" type="button">
                                 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                     <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                 </svg>