From bb7b8ee00bd2c7d26e82c2eb4a0571023e821d9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= <hugo@lysator.liu.se>
Date: Tue, 15 Mar 2022 01:36:07 +0100
Subject: Introduce user-additions in frontend.

Along with an initial example of their use.
---
 doc/ref/javascript.texi                |  2 ++
 doc/ref/javascript/formatters.texi     |  4 ++++
 doc/ref/javascript/user-additions.texi | 18 ++++++++++++++++++
 module/calp/html/vcomponent.scm        |  1 -
 module/calp/html/view/calendar.scm     |  1 +
 static/formatters.ts                   |  6 ++++++
 static/user/.gitignore                 |  1 +
 static/user/user-additions.js          | 11 +++++++++++
 8 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 doc/ref/javascript/user-additions.texi
 create mode 100644 static/user/.gitignore
 create mode 100644 static/user/user-additions.js

diff --git a/doc/ref/javascript.texi b/doc/ref/javascript.texi
index 434b556f..25ac4f00 100644
--- a/doc/ref/javascript.texi
+++ b/doc/ref/javascript.texi
@@ -10,6 +10,7 @@
 The frontend code has its entry-point in @code{script.ts}
 
 All elements are initialized in elements.ts
+
 @include javascript/clock.texi
 @include javascript/lib.texi
 @include javascript/eventCreator.texi
@@ -18,6 +19,7 @@ All elements are initialized in elements.ts
 @include javascript/globals.texi
 @include javascript/server_connect.texi
 @include javascript/formatters.texi
+@include javascript/user-additions.texi
 
 @node General Components
 @section General Components
diff --git a/doc/ref/javascript/formatters.texi b/doc/ref/javascript/formatters.texi
index 65df48c4..16a988c4 100644
--- a/doc/ref/javascript/formatters.texi
+++ b/doc/ref/javascript/formatters.texi
@@ -10,3 +10,7 @@ Formatting procedures used by some components.
 Each procedure takes two arguments. The HTML-element which contents
 should be replaced, along with the target value, as returned by @ref{VEvent.getProperty}.
 @end deftypevar
+
+@deftypevr {Window Value} {Map<string, (e:HTMLElement, s:string) => void>} formatters
+Same object as @xref{formatters-proc}. Provided for @xref{user-additions.js}.
+@end deftypevr
diff --git a/doc/ref/javascript/user-additions.texi b/doc/ref/javascript/user-additions.texi
new file mode 100644
index 00000000..706b1dd4
--- /dev/null
+++ b/doc/ref/javascript/user-additions.texi
@@ -0,0 +1,18 @@
+@node user-additions.js
+@section user-additions.js
+
+Some things in the JavaScript code is built to be user-extendable.
+The HTML-page attempts to load @code{/static/user/user-additions.js}.
+
+
+Currently; this only entails @ref{formatters}, where you could, for
+example, parse all HTTP-links in a description.
+
+@example
+window.formatters.set('description', (el, d) => @{
+    el.innerHTML = d.replaceAll(/https?:\/\/\S+/g, '<a href="$&">$&</a>');
+@})
+@end example
+
+Remember that the documents are X-HTML, so be @emph{extremely} careful
+with innerHTML.
diff --git a/module/calp/html/vcomponent.scm b/module/calp/html/vcomponent.scm
index f593133c..9f7a30ba 100644
--- a/module/calp/html/vcomponent.scm
+++ b/module/calp/html/vcomponent.scm
@@ -26,7 +26,6 @@
   :use-module (ice-9 format)
   )
 
-
 (define-config summary-filter (lambda (_ a) a)
   pre: (ensure procedure?))
 
diff --git a/module/calp/html/view/calendar.scm b/module/calp/html/view/calendar.scm
index 76cdf736..670ad9b6 100644
--- a/module/calp/html/view/calendar.scm
+++ b/module/calp/html/view/calendar.scm
@@ -117,6 +117,7 @@ window.default_calendar='~a';"
     ,(include-alt-css "/static/light.css" '(title "Light"))
 
     (script (@ (src "/static/script.out.js")))
+    (script (@ (src "/static/user/user-additions.js")))
 
     ,(calendar-styles calendars)
 
diff --git a/static/formatters.ts b/static/formatters.ts
index 38c71e5e..828a0e8b 100644
--- a/static/formatters.ts
+++ b/static/formatters.ts
@@ -4,6 +4,12 @@ export {
 
 import { makeElement } from './lib'
 
+declare global {
+    interface Window {
+        formatters : Map<string, (e : HTMLElement, s : any) => void>;
+    }
+}
+
 let formatters : Map<string, (e : HTMLElement, s : any) => void>;
 formatters = window.formatters = new Map();
 
diff --git a/static/user/.gitignore b/static/user/.gitignore
new file mode 100644
index 00000000..d4aa116a
--- /dev/null
+++ b/static/user/.gitignore
@@ -0,0 +1 @@
+!*.js
diff --git a/static/user/user-additions.js b/static/user/user-additions.js
new file mode 100644
index 00000000..59a6248d
--- /dev/null
+++ b/static/user/user-additions.js
@@ -0,0 +1,11 @@
+window.formatters.set('description', (el, d) => {
+    if (/<br\/?>/.exec(d)) {
+        /* Assume that the text is HTML iff in contains a <br/> tag */
+        let parser = new DOMParser();
+        let doc = parser.parseFromString(d, 'text/html');
+        el.replaceChildren(doc.body);
+    } else {
+        /* Otherwise it should be plain(er) text, parse "all" links */
+        el.innerHTML = d.replaceAll(/https?:\/\/\S+/g, '<a href="$&">$&</a>');
+    }
+})
-- 
cgit v1.2.3