From 161a36b3081d4cff55410009186c879d931da2df Mon Sep 17 00:00:00 2001 From: "Felix W. Dekker" Date: Tue, 8 Jun 2021 22:56:51 +0200 Subject: [PATCH] Add template elements based on meta tags Fixes #20. --- package-lock.json | Bin 214017 -> 212693 bytes package.json | 10 ++++---- src/main/js/main.js | 55 ++++++++++++++++++++++++++++++++++++++++++++ src/test/index.html | 24 ++++++++----------- 4 files changed, 70 insertions(+), 19 deletions(-) diff --git a/package-lock.json b/package-lock.json index ef4894474b8981e8747b27b9b81aef9aa2705b8c..fffe4598ec9c7552cfca052c780aa9b44a96f63f 100644 GIT binary patch delta 3731 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 diff --git a/package.json b/package.json index 9f708b2..4356d4e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@fwdekker/template", - "version": "2.4.1", + "version": "2.5.0", "description": "The base template for pages on fwdekker.com.", "author": "Felix W. Dekker", "license": "MIT", @@ -28,14 +28,14 @@ "normalize.css": "^8.0.1" }, "devDependencies": { - "grunt": "^1.4.0", - "grunt-cli": "^1.4.2", + "grunt": "^1.4.1", + "grunt-cli": "^1.4.3", "grunt-contrib-clean": "^2.0.0", "grunt-contrib-cssmin": "^4.0.0", "grunt-contrib-watch": "^1.1.0", "grunt-focus": "^1.0.0", "grunt-webpack": "^4.0.3", - "webpack": "^5.36.0", - "webpack-cli": "^4.6.0" + "webpack": "^5.38.1", + "webpack-cli": "^4.7.2" } } diff --git a/src/main/js/main.js b/src/main/js/main.js index 6fd334e..0d8f34f 100644 --- a/src/main/js/main.js +++ b/src/main/js/main.js @@ -193,5 +193,60 @@ const footerLink = function(prefix, text, url, suffix) { }; +/** + * Runs the functions `nav`, `header`, and `footer` after the page has loaded using properties defined in the meta tags. + * + * The remaining functions are invoked only if the corresponding `target` meta property is set to select an existing + * element. The HTML element returned by the function is then added as a child to the element specified by the query + * selector in the `target` property. The parameters to the function invocation can be set using other meta properties. + * The format of meta properties is `fwd::`, where `property` is the same as the name of the + * parameter of that function, except that instead of camelcase words are separated by dashes. For example, `vcsURL` + * becomes `vcs-url`. + * + * Meta properties can be set by including `` in the HTML + * page on which this module is included. The `` is then passed without modification as a parameter to the + * function. Leaving out the `` by writing `` instead results in passing + * `null` as the value. Not including the meta tag at all corresponds to passing `undefined` to the function. See the + * documentation of the respective functions for more details on the parameters that they accept. + * + * Note that the function is invoked only if `fwd::target` is a query selector for an existing element. This + * means that it is possible to mix how the functions are invoked; for example, one can use meta properties to pass + * parameters to `nav`, but also invoke `header` in a separate function manually. + */ +doAfterLoad(() => { + const getMetaProperty = (name) => { + const element = $(`meta[name="${name}"]`); + return element === null ? undefined : element.getAttribute("content"); + }; + + const navTarget = $(getMetaProperty("fwd:nav:target")); + if (navTarget !== null) { + navTarget.appendChild(nav(getMetaProperty("fwd:nav:highlight-path"))); + } + + const headerTarget = $(getMetaProperty("fwd:header:target")); + if (headerTarget !== null) { + headerTarget.appendChild(header({ + title: getMetaProperty("fwd:header:title"), + description: getMetaProperty("fwd:header:description"), + })); + } + + const footerTarget = $(getMetaProperty("fwd:footer:target")); + if (footerTarget !== null) { + footerTarget.appendChild(footer({ + author: getMetaProperty("fwd:footer:author"), + authorURL: getMetaProperty("fwd:footer:author-url"), + license: getMetaProperty("fwd:footer:license"), + licenseURL: getMetaProperty("fwd:footer:license-url"), + vcs: getMetaProperty("fwd:footer:vcs"), + vcsURL: getMetaProperty("fwd:footer:vcs-url"), + version: getMetaProperty("fwd:footer:version"), + privacyPolicyURL: getMetaProperty("fwd:footer:privacy-policy-url"), + })); + } +}); + + // Export to namespace fwdekker = {stringToHtml, $, doAfterLoad, nav, header, footer}; diff --git a/src/test/index.html b/src/test/index.html index b9dcc7e..4de57b2 100644 --- a/src/test/index.html +++ b/src/test/index.html @@ -8,6 +8,15 @@ + + + + + + + + + Tools | FWDekker @@ -22,7 +31,7 @@ instructions on how to enable JavaScript in your web browser.

-
+
@@ -38,18 +47,5 @@ -