From ac24eddda57d11a8e60a720807e0eb3f7ec9068a Mon Sep 17 00:00:00 2001 From: Code by Ben Date: Sat, 3 Aug 2024 11:00:28 +1000 Subject: [PATCH] wip --- assets/js/editor-assets.js | 77 +++++++++++++++++++++++++++++++++- handler/app/internal/mf/mf.go | 9 ++-- handler/htmx/artifact.go | 4 +- public/js/editor-assets.min.js | 2 +- view/app/artifactfile.tmpl | 7 +++- 5 files changed, 90 insertions(+), 9 deletions(-) diff --git a/assets/js/editor-assets.js b/assets/js/editor-assets.js index 42f3b369..e44d4eee 100644 --- a/assets/js/editor-assets.js +++ b/assets/js/editor-assets.js @@ -56,14 +56,87 @@ import { progress } from "./uploader.mjs"; // New file download form event listener. document.body.addEventListener("htmx:afterRequest", function (event) { - afterRequest( + afterFormRequest( event, `artifact-editor-dl-form`, `artifact-editor-dl-up`, `artifact-editor-dl-feedback` ); + afterDeleteRequest( + event, + "artifact-editor-image-delete", + "artifact-editor-image-feedback" + ); + afterLinkRequest( + event, + "artifact-editor-link-delete", + "artifact-editor-link-feedback" + ); }); + function afterDeleteRequest(event, inputId, feedbackId) { + if (event.detail.elt === null) return; + if (event.detail.elt.id !== `${inputId}`) return; + const feedback = document.getElementById(feedbackId); + if (feedback === null) { + throw new Error( + `The htmx successful feedback element ${feedbackId} is null` + ); + } + const errClass = "text-danger"; + const okClass = "text-success"; + const xhr = event.detail.xhr; + if (event.detail.successful) { + feedback.innerText = `The delete request was successful, about to refresh the page.`; + feedback.classList.remove(errClass); + feedback.classList.add(okClass); + setTimeout(() => { + location.reload(); + }, 500); + return; + } + if (event.detail.failed && event.detail.xhr) { + feedback.classList.add(errClass); + feedback.innerText = + `Something on the server is not working, ` + + `${xhr.status} status: ${xhr.responseText}.`; + return; + } + feedback.classList.add(errClass); + feedback.innerText = + "Something with the browser is not working," + + " please try again or refresh the page."; + } + + function afterLinkRequest(event, inputId, feedbackId) { + if (event.detail.elt === null) return; + if (event.detail.elt.id !== `${inputId}`) return; + const feedback = document.getElementById(feedbackId); + if (feedback === null) { + throw new Error( + `The htmx successful feedback element ${feedbackId} is null` + ); + } + const errClass = "text-danger"; + const xhr = event.detail.xhr; + if (event.detail.successful) { + feedback.innerText = `${xhr.responseText}`; + feedback.classList.remove(errClass); + return; + } + if (event.detail.failed && event.detail.xhr) { + feedback.classList.add(errClass); + feedback.innerText = + `Something on the server is not working, ` + + `${xhr.status} status: ${xhr.responseText}.`; + return; + } + feedback.classList.add(errClass); + feedback.innerText = + "Something with the browser is not working," + + " please try again or refresh the page."; + } + /** * The htmx event listener for the artifact editor upload a new file download form. * @param {Event} event - The htmx event. @@ -72,7 +145,7 @@ import { progress } from "./uploader.mjs"; * @param {string} feedbackName - The feedback name. * @returns {void} **/ - function afterRequest(event, formId, inputName, feedbackName) { + function afterFormRequest(event, formId, inputName, feedbackName) { if (event.detail.elt === null) return; if (event.detail.elt.id !== `${formId}`) return; const input = document.getElementById(inputName); diff --git a/handler/app/internal/mf/mf.go b/handler/app/internal/mf/mf.go index a7d5d584..640b5ce3 100644 --- a/handler/app/internal/mf/mf.go +++ b/handler/app/internal/mf/mf.go @@ -282,12 +282,14 @@ func entryHTML(images, programs, texts bool, rel, sign, size, unid string, bytes `data-bs-title="%s">%s`, rel, rel) if images { htm += `
` + - fmt.Sprintf(``, unid, name) + + fmt.Sprintf(``, unid, name) + `
` } else if texts { htm += `
` + - fmt.Sprintf(``, unid, name) + + fmt.Sprintf(``, unid, name) + `
` } else { @@ -296,7 +298,8 @@ func entryHTML(images, programs, texts bool, rel, sign, size, unid string, bytes switch { case texts: htm += `
` + - fmt.Sprintf(``, unid, name) + + fmt.Sprintf(``, unid, name) + `
` case programs: diff --git a/handler/htmx/artifact.go b/handler/htmx/artifact.go index 0d1ec6d7..bd7450f2 100644 --- a/handler/htmx/artifact.go +++ b/handler/htmx/artifact.go @@ -139,8 +139,8 @@ func RecordImagesDeleter(c echo.Context, dirs ...string) error { defer os.Remove(name) } } - c.Response().Header().Set("HX-Refresh", "true") - return c.String(http.StatusOK, "Deleted, refresh the browser.") + //c.Response().Header().Set("HX-Refresh", "true") + return c.NoContent(http.StatusOK) } func RecordReadmeDeleter(c echo.Context, extraDir string) error { diff --git a/public/js/editor-assets.min.js b/public/js/editor-assets.min.js index dc2c80e1..1ed4e205 100644 --- a/public/js/editor-assets.min.js +++ b/public/js/editor-assets.min.js @@ -1,2 +1,2 @@ /* editor-assets.min.js © Defacto2 2024 */ -(()=>{var E=100,T=1024*1024,M=100*T;function d(s,o){if(s==null)throw new Error("The formId value of progress is null.");if(o==null)throw new Error("The elementId value of progress is null.");htmx.on(`#${s}`,"htmx:xhr:progress",function(i){i.target.id==`${s}`&&htmx.find(`#${o}`).setAttribute("value",i.detail.loaded/i.detail.total*E)})}(()=>{"use strict";d("artifact-editor-dl-form","artifact-editor-dl-progress");let s=document.getElementById("artifact-editor-dl-reset");if(s==null){console.error("the reset button is missing");return}let o=document.getElementById("artifact-editor-dl-up");if(o==null){console.error("the artifact file input is missing");return}let i=document.getElementById("artifact-editor-modal");if(i==null){console.error("the data editor modal is missing");return}let u=document.getElementById("asset-editor-modal");if(u==null){console.error("the asset editor modal is missing");return}let c=document.getElementById("emulate-editor-modal");if(c==null){console.error("the emulate editor modal is missing");return}let f=new bootstrap.Modal(i),h=new bootstrap.Modal(u),m=new bootstrap.Modal(c);switch(new URL(window.location.href).hash){case"#data-editor":f.show();break;case"#file-editor":h.show();break;case"#emulate-editor":m.show();break;default:}document.body.addEventListener("htmx:afterRequest",function(e){w(e,"artifact-editor-dl-form","artifact-editor-dl-up","artifact-editor-dl-feedback")});function w(e,t,r,n){if(e.detail.elt===null||e.detail.elt.id!==`${t}`)return;let l=document.getElementById(r);if(l===null)throw new Error(`The htmx successful input element ${r} is null`);let a=document.getElementById(n);if(a===null)throw new Error(`The htmx successful feedback element ${n} is null`);if(e.detail.successful)return p(e,l,a);if(e.detail.failed&&e.detail.xhr)return v(e,l,a);x(l,a)}function p(e,t,r){let n=e.detail.xhr;r.innerText=`${n.responseText}`,r.classList.remove("invalid-feedback"),r.classList.add("valid-feedback"),t.classList.remove("is-invalid"),t.classList.add("is-valid"),setTimeout(()=>{location.reload()},500)}function v(e,t,r){let n=e.detail.xhr;r.innerText=`Something on the server is not working, ${n.status} status: ${n.responseText}.`,r.classList.remove("valid-feedback"),r.classList.add("invalid-feedback"),t.classList.remove("is-valid"),t.classList.add("is-invalid")}function x(e,t){e.classList.remove("is-valid"),e.classList.add("is-invalid"),t.innerText="Something with the browser is not working, please try again or refresh the page.",t.classList.remove("d-none")}s.addEventListener("click",function(){o.value="",o.classList.remove("is-invalid"),o.classList.remove("is-valid")})})();})(); +(()=>{var b=100,y=1024*1024,D=100*y;function f(l,i){if(l==null)throw new Error("The formId value of progress is null.");if(i==null)throw new Error("The elementId value of progress is null.");htmx.on(`#${l}`,"htmx:xhr:progress",function(a){a.target.id==`${l}`&&htmx.find(`#${i}`).setAttribute("value",a.detail.loaded/a.detail.total*b)})}(()=>{"use strict";f("artifact-editor-dl-form","artifact-editor-dl-progress");let l=document.getElementById("artifact-editor-dl-reset");if(l==null){console.error("the reset button is missing");return}let i=document.getElementById("artifact-editor-dl-up");if(i==null){console.error("the artifact file input is missing");return}let a=document.getElementById("artifact-editor-modal");if(a==null){console.error("the data editor modal is missing");return}let u=document.getElementById("asset-editor-modal");if(u==null){console.error("the asset editor modal is missing");return}let c=document.getElementById("emulate-editor-modal");if(c==null){console.error("the emulate editor modal is missing");return}let h=new bootstrap.Modal(a),m=new bootstrap.Modal(u),w=new bootstrap.Modal(c);switch(new URL(window.location.href).hash){case"#data-editor":h.show();break;case"#file-editor":m.show();break;case"#emulate-editor":w.show();break;default:}document.body.addEventListener("htmx:afterRequest",function(e){g(e,"artifact-editor-dl-form","artifact-editor-dl-up","artifact-editor-dl-feedback"),p(e,"artifact-editor-image-delete","artifact-editor-image-feedback"),x(e,"artifact-editor-link-delete","artifact-editor-link-feedback")});function p(e,n,r){if(e.detail.elt===null||e.detail.elt.id!==`${n}`)return;let t=document.getElementById(r);if(t===null)throw new Error(`The htmx successful feedback element ${r} is null`);let o="text-danger",s="text-success",d=e.detail.xhr;if(e.detail.successful){t.innerText="The delete request was successful, about to refresh the page.",t.classList.remove(o),t.classList.add(s),setTimeout(()=>{location.reload()},500);return}if(e.detail.failed&&e.detail.xhr){t.classList.add(o),t.innerText=`Something on the server is not working, ${d.status} status: ${d.responseText}.`;return}t.classList.add(o),t.innerText="Something with the browser is not working, please try again or refresh the page."}function x(e,n,r){if(e.detail.elt===null||e.detail.elt.id!==`${n}`)return;let t=document.getElementById(r);if(t===null)throw new Error(`The htmx successful feedback element ${r} is null`);let o="text-danger",s=e.detail.xhr;if(e.detail.successful){t.innerText=`${s.responseText}`,t.classList.remove(o);return}if(e.detail.failed&&e.detail.xhr){t.classList.add(o),t.innerText=`Something on the server is not working, ${s.status} status: ${s.responseText}.`;return}t.classList.add(o),t.innerText="Something with the browser is not working, please try again or refresh the page."}function g(e,n,r,t){if(e.detail.elt===null||e.detail.elt.id!==`${n}`)return;let o=document.getElementById(r);if(o===null)throw new Error(`The htmx successful input element ${r} is null`);let s=document.getElementById(t);if(s===null)throw new Error(`The htmx successful feedback element ${t} is null`);if(e.detail.successful)return v(e,o,s);if(e.detail.failed&&e.detail.xhr)return T(e,o,s);E(o,s)}function v(e,n,r){let t=e.detail.xhr;r.innerText=`${t.responseText}`,r.classList.remove("invalid-feedback"),r.classList.add("valid-feedback"),n.classList.remove("is-invalid"),n.classList.add("is-valid"),setTimeout(()=>{location.reload()},500)}function T(e,n,r){let t=e.detail.xhr;r.innerText=`Something on the server is not working, ${t.status} status: ${t.responseText}.`,r.classList.remove("valid-feedback"),r.classList.add("invalid-feedback"),n.classList.remove("is-valid"),n.classList.add("is-invalid")}function E(e,n){e.classList.remove("is-valid"),e.classList.add("is-invalid"),n.innerText="Something with the browser is not working, please try again or refresh the page.",n.classList.remove("d-none")}l.addEventListener("click",function(){i.value="",i.classList.remove("is-invalid"),i.classList.remove("is-valid")})})();})(); diff --git a/view/app/artifactfile.tmpl b/view/app/artifactfile.tmpl index a6c23af2..75310317 100644 --- a/view/app/artifactfile.tmpl +++ b/view/app/artifactfile.tmpl @@ -163,6 +163,7 @@
+
{{$modDecompress}}
@@ -171,6 +172,11 @@
{{- /* Image assets */}} Image assets +
+ +
+
@@ -197,7 +203,6 @@
{{$previewImg}}
-
Delete image assets