Skip to content

Commit

Permalink
Add file delete button on create editor
Browse files Browse the repository at this point in the history
  • Loading branch information
@thomiceli
thomiceli committed Sep 7, 2024
1 parent 0950c9c commit 130d326
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 2 deletions.
25 changes: 25 additions & 0 deletions public/editor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,7 @@ document.addEventListener("DOMContentLoaded", () => {
deleteBtns.onclick = () => {
editorsjs.splice(editorsjs.indexOf(editor), 1);
dom.remove();
checkForFirstDeleteButton();
};
}

Expand Down Expand Up @@ -191,6 +192,8 @@ document.addEventListener("DOMContentLoaded", () => {
editorsjs.push(currEditor);
});

checkForFirstDeleteButton();

document.getElementById("add-file")!.onclick = () => {
let newEditorDom = firstEditordom.cloneNode(true) as HTMLElement;

Expand All @@ -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 = () => {
Expand All @@ -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;
};
Expand Down
5 changes: 5 additions & 0 deletions templates/pages/create.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,11 @@ <h1 class="text-2xl font-bold leading-tight text-slate-700 dark:text-slate-300">
<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">
Expand Down
4 changes: 2 additions & 2 deletions templates/pages/edit.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,8 @@ <h1 class="text-2xl font-bold leading-tight text-slate-700 dark:text-slate-300">
<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>
Expand Down

0 comments on commit 130d326

Please sign in to comment.