diff options
-rw-r--r-- | doc/ref/javascript.texi | 2 | ||||
-rw-r--r-- | doc/ref/javascript/formatters.texi | 4 | ||||
-rw-r--r-- | doc/ref/javascript/user-additions.texi | 18 | ||||
-rw-r--r-- | module/calp/html/vcomponent.scm | 1 | ||||
-rw-r--r-- | module/calp/html/view/calendar.scm | 1 | ||||
-rw-r--r-- | static/formatters.ts | 6 | ||||
-rw-r--r-- | static/user/.gitignore | 1 | ||||
-rw-r--r-- | static/user/user-additions.js | 11 |
8 files changed, 43 insertions, 1 deletions
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>'); + } +}) |