continuing work on the artifact editor.

Defacto2 · Jun 17, 2024 · de9739a · de9739a
1 parent 7af8ad2
commit de9739a
Show file tree

Hide file tree

Showing 15 changed files with 485 additions and 261 deletions.
diff --git a/assets/js/artifact-editor.js b/assets/js/artifact-editor.js
@@ -7,6 +7,8 @@ import {
   releaser as validateReleaser,
   repository as validateGitHub,
   color16 as validate16color,
+  youtube as validateYouTube,
+  number as validateNumber,
 } from "./artifact-validate.mjs";
 
 (() => {
@@ -312,50 +314,98 @@ import {
 
   const dateLastMod = document.getElementById("artifact-editor-date-lastmod");
   if (dateLastMod === null) {
-    throw new Error("The date last mod input is missing.");
-  }
-  const dateLastModder = document.getElementById(
-    "artifact-editor-date-lastmodder"
-  );
-  if (dateLastModder === null) {
-    throw new Error("The date last modder input is missing.");
-  }
-  dateLastMod.addEventListener("click", () => {
-    yearInput.classList.remove("is-invalid", "is-valid");
-    monthInput.classList.remove("is-invalid", "is-valid");
-    dayInput.classList.remove("is-invalid", "is-valid");
-    const value = dateLastModder.value;
-    const values = value.split("-");
-    if (values.length != 3) {
-      throw new Error("The date last modder values are invalid.");
+    // do nothing as the date last mod input is optional
+  } else {
+    const dateLastModder = document.getElementById(
+      "artifact-editor-date-lastmodder"
+    );
+    if (dateLastModder === null) {
+      throw new Error("The date last modder input is missing.");
     }
-    yearInput.value = values[0];
-    monthInput.value = values[1];
-    dayInput.value = values[2];
-  });
-
-  const github = document.getElementById("artifact-editor-github");
-  if (github === null) {
-    throw new Error("The GitHub input is missing.");
+    dateLastMod.addEventListener("click", () => {
+      yearInput.classList.remove("is-invalid", "is-valid");
+      monthInput.classList.remove("is-invalid", "is-valid");
+      dayInput.classList.remove("is-invalid", "is-valid");
+      const value = dateLastModder.value;
+      const values = value.split("-");
+      if (values.length != 3) {
+        throw new Error("The date last modder values are invalid.");
+      }
+      yearInput.value = values[0];
+      monthInput.value = values[1];
+      dayInput.value = values[2];
+    });
   }
-  github.addEventListener("input", (e) => validateGitHub(e.target));
 
-  const colors16 = document.getElementById("artifact-editor-16colors");
-  if (colors16 === null) {
-    throw new Error("The 16colors input is missing.");
+  const linksReset = document.getElementById("artifact-editor-links-reset");
+  if (linksReset === null) {
+    throw new Error("The links reset is missing.");
   }
-  colors16.addEventListener("input", (e) => validate16color(e.target));
-
   const youtube = document.getElementById("artifact-editor-youtube");
-  if (youtube === null) {
-    throw new Error("The YouTube input is missing.");
+  const youtubeReset = document.getElementById("artifact-editor-youtube-reset");
+  if (youtube === null || youtubeReset === null) {
+    throw new Error("A YouTube input is missing.");
   }
-  youtube.addEventListener("input", (e) => {
-    e.target.classList.remove("is-valid", "is-invalid");
-    const value = e.target.value.trim();
-    const required = 11;
-    if (value.length > 0 && value.length != required) {
-      e.target.classList.add("is-invalid");
-    }
+  const demozoo = document.getElementById("artifact-editor-demozoo");
+  const demozooReset = document.getElementById("artifact-editor-demozoo-reset");
+  if (demozoo === null || demozooReset === null) {
+    throw new Error("A Demozoo input is missing.");
+  }
+  const pouet = document.getElementById("artifact-editor-pouet");
+  const pouetReset = document.getElementById("artifact-editor-pouet-reset");
+  if (pouet === null || pouetReset === null) {
+    throw new Error("A Pouet input is missing.");
+  }
+  const colors16 = document.getElementById("artifact-editor-16colors");
+  const colors16Reset = document.getElementById(
+    "artifact-editor-16colors-reset"
+  );
+  if (colors16 === null || colors16Reset === null) {
+    throw new Error("A 16colors input is missing.");
+  }
+  const github = document.getElementById("artifact-editor-github");
+  const githubReset = document.getElementById("artifact-editor-github-reset");
+  if (github === null || githubReset === null) {
+    throw new Error("A GitHub input is missing.");
+  }
+  const relations = document.getElementById("artifact-editor-relations");
+  const relationsReset = document.getElementById(
+    "artifact-editor-relations-reset"
+  );
+  if (relations === null || relationsReset === null) {
+    throw new Error("A relations input is missing.");
+  }
+  const websites = document.getElementById("artifact-editor-websites");
+  const websitesReset = document.getElementById(
+    "artifact-editor-websites-reset"
+  );
+  if (websites === null || websitesReset === null) {
+    throw new Error("A websites input is missing.");
+  }
+  linksReset.addEventListener("click", () => {
+    youtube.classList.remove("is-invalid", "is-valid");
+    demozoo.classList.remove("is-invalid", "is-valid");
+    pouet.classList.remove("is-invalid", "is-valid");
+    colors16.classList.remove("is-invalid", "is-valid");
+    github.classList.remove("is-invalid", "is-valid");
+    relations.classList.remove("is-invalid", "is-valid");
+    websites.classList.remove("is-invalid", "is-valid");
+    youtube.value = youtubeReset.value;
+    demozoo.value = demozooReset.value;
+    pouet.value = pouetReset.value;
+    colors16.value = colors16Reset.value;
+    github.value = githubReset.value;
+    relations.value = relationsReset.value;
+    websites.value = websitesReset.value;
   });
+  const demozooSanity = 450000,
+    pouetSanity = 200000;
+  youtube.addEventListener("input", (e) => validateYouTube(e.target));
+  demozoo.addEventListener("input", (e) =>
+    validateNumber(e.target, demozooSanity)
+  );
+  pouet.addEventListener("input", (e) => validateNumber(e.target, pouetSanity));
+  colors16.addEventListener("input", (e) => validate16color(e.target));
+  github.addEventListener("input", (e) => validateGitHub(e.target));
+  // relations and websites are optional
 })();
diff --git a/assets/js/artifact-validate.mjs b/assets/js/artifact-validate.mjs
@@ -168,3 +168,29 @@ export function releaser(elm) {
   elm.classList.remove("is-invalid");
   error.classList.remove("d-block");
 }
+
+export function youtube(elm) {
+  if (elm == null) {
+    throw new Error("The element of the releaser validator is null.");
+  }
+  elm.classList.remove("is-valid", "is-invalid");
+  const value = elm.value.trim();
+  const required = 11;
+  if (value.length > 0 && value.length != required) {
+    elm.classList.add("is-invalid");
+  }
+}
+
+export function number(elm, max) {
+  if (elm == null) {
+    throw new Error("The element of the number validator is null.");
+  }
+  elm.classList.remove("is-valid", "is-invalid");
+  const value = parseInt(elm.value, 10);
+  if (isNaN(value)) {
+    elm.classList.add("is-invalid");
+  }
+  if (value > max || value < 0) {
+    elm.classList.add("is-invalid");
+  }
+}
diff --git a/assets/js/layout-htmx.mjs b/assets/js/layout-htmx.mjs
@@ -93,7 +93,7 @@ export function htmxEvents() {
     afterUpdate(event, `artifact-editor-credit-ill`);
     afterUpdate(event, `artifact-editor-credit-prog`);
     afterUpdate(event, `artifact-editor-credit-audio`);
-    afterCreators(event, `artifact-editor-credit-resetter`);
+    afterCreators(event, `artifact-editor-credit-reset"`);
     // record comment.
     afterUpdate(event, `artifact-editor-comment`);
     afterReset(
@@ -109,9 +109,42 @@ export function htmxEvents() {
     afterUpdate(event, `artifact-editor-github`);
     afterUpdate(event, `artifact-editor-relations`);
     afterUpdate(event, `artifact-editor-websites`);
+    afterLinks(event, `artifact-editor-links-reset`);
   });
 }
 
+function afterLinks(event, buttonId) {
+  if (event.detail.elt === null) return;
+  if (event.detail.elt.id !== `${buttonId}`) return;
+
+  const alertId = "artifact-editor-alert";
+  const liveAlert = document.getElementById(alertId);
+  if (typeof liveAlert === "undefined" || liveAlert === null) {
+    throw new Error(`The htmx alert element ${alertId} is null`);
+  }
+  if (event.detail.successful) {
+    console.log("okay");
+    // updateSuccess(liveAlert, `artifact-editor-links-reset`);
+    // updateSuccess(liveAlert, `artifact-editor-demozoo`);
+    // updateSuccess(liveAlert, `artifact-editor-pouet`);
+    // updateSuccess(liveAlert, `artifact-editor-16colors`);
+    // updateSuccess(liveAlert, `artifact-editor-github`);
+    // updateSuccess(liveAlert, `artifact-editor-relations`);
+    // return updateSuccess(liveAlert, `artifact-editor-websites`);
+  }
+  if (event.detail.failed && event.detail.xhr) {
+    console.log("error");
+    // updateError(event, `artifact-editor-links-reset`, liveAlert);
+    // updateError(event, `artifact-editor-demozoo`, liveAlert);
+    // updateError(event, `artifact-editor-pouet`, liveAlert);
+    // updateError(event, `artifact-editor-16colors`, liveAlert);
+    // updateError(event, `artifact-editor-github`, liveAlert);
+    // updateError(event, `artifact-editor-relations`, liveAlert);
+    // return updateError(event, `artifact-editor-websites`, liveAlert);
+  }
+  errorBrowser(liveAlert);
+}
+
 function afterCreators(event, buttonId) {
   if (event.detail.elt === null) return;
   if (event.detail.elt.id !== `${buttonId}`) return;

diff --git a/docs/todo.md b/docs/todo.md
@@ -10,8 +10,9 @@
 
 ### Files and assets
 
-- [ ] Create a specific magazines handler with the file editor.
 - [ ] Create a htmx, live _classifications page_ for editors, using the advanced uploader `<select>` fields.
+- [ ] Mobile support for Data editor.
+- [ ] Data editor button should reload the page when data Editor module is active.
 
 ### Menus and layout
 
@@ -27,3 +28,4 @@
 
 - [ ] *? Implememnt a [scheduling library for Go](https://github.com/reugn/go-quartz)
 - [ ] [xstrings](https://github.com/huandu/xstrings) for string manipulation.
+- [ ] Errors cleanup, never return raw errors, always wrap them. And also never use, "xxx failed or broke" as an error message. Instead use "doing xxx" or "while doing xxx".
diff --git a/handler/app/app_test.go b/handler/app/app_test.go
@@ -390,8 +390,6 @@ func TestDownloadB(t *testing.T) {
 
 func TestLinkSamples(t *testing.T) {
 	t.Parallel()
-	s := app.LinkSamples("", "", "", "", "", "", "")
-	assert.Empty(t, s)
 	x := app.LinkPreviews("1", "2", "3", "4", "5", "6", "7")
 	assert.Len(t, x, 7)
 	assert.Contains(t, x[0], "youtube.com/watch?v=1")

diff --git a/handler/app/template.go b/handler/app/template.go
@@ -5,7 +5,6 @@ package app
 import (
 	"embed"
 	"fmt"
-	"html"
 	"html/template"
 	"path/filepath"
 	"reflect"
@@ -95,15 +94,6 @@ func DownloadB(i any) template.HTML {
 	return template.HTML(elm)
 }
 
-// LinkSample returns a collection of HTML formatted links for the artifact editor.
-func LinkSamples(youtube, demozoo, pouet, colors16, github, rels, sites string) string {
-	links := LinkPreviews(youtube, demozoo, pouet, colors16, github, rels, sites)
-	for i, link := range links {
-		links[i] = html.EscapeString(link)
-	}
-	return strings.Join(links, "<br>")
-}
-
 // LinkPreviews returns a slice of HTML formatted links for the artifact editor.
 func LinkPreviews(youtube, demozoo, pouet, colors16, github, rels, sites string) []string {
 	rel := func(url string) string {
@@ -127,10 +117,10 @@ func LinkPreviews(youtube, demozoo, pouet, colors16, github, rels, sites string)
 		links = append(links, rel("github.com/"+github))
 	}
 	if rels != "" {
-		links = append(links, string(LinkRelations(rels)))
+		links = append(links, strings.Split(string(LinkRelations(rels)), "+")...)
 	}
 	if sites != "" {
-		links = append(links, string(LinkSites(sites)))
+		links = append(links, strings.Split(string(LinkSites(sites)), "+")...)
 	}
 	return links
 }
@@ -520,7 +510,7 @@ func (web Templ) TemplateFuncs() template.FuncMap {
 		"recordImgSample":    web.ImageSample,
 		"recordThumbSample":  web.ThumbSample,
 		"recordInfoOSTag":    TagWithOS,
-		"recordLinkPreviews": LinkSamples,
+		"recordLinkPreviews": LinkPreviews,
 		"recordTagInfo":      TagBrief,
 		"safeHTML":           SafeHTML,
 		"safeJS":             SafeJS,