github.com
/
opengist
mirror of https://github.com/thomiceli/opengist
1
0
Fork 0
Code Releases Wiki Activity

Add file delete button on create editor (#320)

This commit is contained in:
Thomas Miceli 2024-09-07 15:17:56 +02:00 committed by GitHub
parent 0950c9ce38
commit de6578d9e8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 32 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
public/editor.ts
View File

@ -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;
};

5
templates/pages/create.html vendored
View File

@ -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">

4
templates/pages/edit.html vendored
View File

@ -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>