Change media picker from <div> to <dialog> and make it modal

Have to call Dialog.showModal when HTMx loaded the dialog in the DOM,
so had to add a onLoad event listened that checks whether the loaded
element is actually a DIALOG.

Had to restrict the margin: 0 for all elements (*) to exclude dialog,
because the browser sets it to auto, and i did not want to set it again
just because i was too overzealous with my “reset”.

The rest of the CSS is just to have a sticky header and footer, and see
the cancel button, that works as a “close”, all the time.

Finally, i realized that if i add the dialog at the end of the fieldset
and let HTMx inherit its hx-target and hx-swap, i no longer need to set
them in the dialog, as HTMx will always replace the fieldset, and i can
have the dialog side by side the current content of the fieldset, that
it was very confusing seeing it disappear when trying to select a new
media.

The cancel button could now just remove the dialog instead of making the
POST, but in local it makes no difference; we’lls see what happens on
production.

po/ca.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: camper\n"
 "Report-Msgid-Bugs-To: jordi@tandem.blog\n"
-"POT-Creation-Date: 2023-09-22 00:56+0200\n"
+"POT-Creation-Date: 2023-09-22 02:03+0200\n"
 "PO-Revision-Date: 2023-07-22 23:45+0200\n"
 "Last-Translator: jordi fita mas <jordi@tandem.blog>\n"
 "Language-Team: Catalan <ca@dodds.net>\n"
@@ -810,11 +810,11 @@ msgstr "No podeu deixar el format del número de factura en blanc."
 msgid "Cross-site request forgery detected."
 msgstr "S’ha detectat un intent de falsificació de petició a llocs creuats."
 
-#: pkg/media/admin.go:278
+#: pkg/media/admin.go:265
 msgid "Uploaded file can not be empty."
 msgstr "No podeu deixar el fitxer del mèdia en blanc."
 
-#: pkg/media/admin.go:337
+#: pkg/media/admin.go:324
 msgid "Filename can not be empty."
 msgstr "No podeu deixar el nom del fitxer."
 

po/es.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: camper\n"
 "Report-Msgid-Bugs-To: jordi@tandem.blog\n"
-"POT-Creation-Date: 2023-09-22 00:56+0200\n"
+"POT-Creation-Date: 2023-09-22 02:03+0200\n"
 "PO-Revision-Date: 2023-07-22 23:46+0200\n"
 "Last-Translator: jordi fita mas <jordi@tandem.blog>\n"
 "Language-Team: Spanish <es@tp.org.es>\n"
@@ -810,11 +810,11 @@ msgstr "No podéis dejar el formato de número de factura en blanco."
 msgid "Cross-site request forgery detected."
 msgstr "Se ha detectado un intento de falsificación de petición en sitios cruzados."
 
-#: pkg/media/admin.go:278
+#: pkg/media/admin.go:265
 msgid "Uploaded file can not be empty."
 msgstr "No podéis dejar el archivo del medio en blanco."
 
-#: pkg/media/admin.go:337
+#: pkg/media/admin.go:324
 msgid "Filename can not be empty."
 msgstr "No podéis dejar el nombre del archivo en blanco."
 

web/static/camper.css

@@ -7,7 +7,7 @@
     box-sizing: border-box;
 }
 
-* {
+*:not(dialog) {
     margin: 0;
 }
 
@@ -67,3 +67,25 @@ a.missing-translation {
 .media-grid img {
     object-fit: cover;
 }
+
+.media-picker {
+    min-width: 75vw;
+}
+
+.media-picker, .media-picker header, .media-picker footer {
+    background-color: white;
+}
+
+.media-picker header, .media-picker footer {
+    position: sticky;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+}
+
+.media-picker header {
+    top: -1em;
+}
+
+.media-picker footer {
+    bottom: -1em;
+}

web/static/camper.js

@@ -134,3 +134,10 @@ function camperUploadForm(el) {
         }
     });
 }
+
+htmx.onLoad((target) => {
+    if (target.tagName === 'DIALOG') {
+        target.showModal();
+    }
+})
+

web/templates/admin/form.gohtml

@@ -21,7 +21,10 @@
     <fieldset data-hx-target="this" data-hx-swap="outerHTML">
         <legend>{{( pgettext .Label "input" )}}</legend>
         <input type="hidden" name="{{ .Name }}" value="{{ .Val }}">
-        <button class="media-picker" type="button" data-hx-get="/admin/media/picker?name={{ .Name | queryEscape }}&amp;value={{ .Val | queryEscape }}&amp;label={{ .Label | queryEscape }}&amp;prompt={{ .Prompt | queryEscape }}">
+        <button type="button"
+                data-hx-get="/admin/media/picker?name={{ .Name | queryEscape }}&amp;value={{ .Val | queryEscape }}&amp;label={{ .Label | queryEscape }}&amp;prompt={{ .Prompt | queryEscape }}"
+                data-hx-swap="beforeend"
+        >
             {{ if .Val -}}
                 <img src="/admin/media/{{ .Val }}/content" alt="">
             {{ else -}}

web/templates/admin/media/picker.gohtml

@@ -2,7 +2,7 @@
  SPDX-FileCopyrightText: 2023 jordi fita mas <jordi@tandem.blog>
  SPDX-License-Identifier: AGPL-3.0-only
 -->
-<div class="media-picker" data-hx-target="this" data-hx-swap="outerHTML">
+<dialog class="media-picker">
     {{- /*gotype: dev.tandem.ws/tandem/camper/pkg/media.mediaPicker*/ -}}
     <header>
         <h3>{{( pgettext "Media Picker" "title" )}}</h3>
@@ -58,4 +58,4 @@
             <button name="value" value="{{ .Field.Val }}" type="submit">{{( pgettext "Cancel" "action" )}}</button>
         </footer>
     </form>
-</div>
+</dialog>