projects / squeep-html-template-helper / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
remove hard-coded navLinks entirely, let other modules populate them
[squeep-html-template-helper] / lib / template-helper.js
diff --git a/lib/template-helper.js b/lib/template-helper.js
index 16a14cc4c3d0bdfd42406a03ef29d31f698eddaa..7f7021ae010f2a58be394f17e23ea4120a4570d7 100644 (file)
--- a/lib/template-helper.js
+++ b/lib/template-helper.js
@@ -6,6 +6,17 @@
 
 const { lazy } = require('@squeep/lazy-property');
 
+
+/**
+ * Set up expected fields for how we handle error reporting
+ * and whatnot.
+ * @param {Object} ctx
+ */
+const initContext = (ctx) => {
+  ctx.errors = [];
+  ctx.notifications = [];
+};
+
 /**
  * Some fields may have values outside normal dates, handle them here.
  * @param {Date} date
@@ -65,6 +76,33 @@ lazy(dateFormat, '_dtf', () => {
 });
 
 
+/**
+ * Wrap a Date in a <time> block.
+ * @param {Date} date
+ * @param {Object} options
+ * @param {String=} options.title
+ */
+const timeElement = (date, options = {}) => {
+  const {
+    title,
+    pInf,
+    nInf,
+    otherwise,
+  } = options;
+  const attributes = {
+    ...(title && { title }),
+    ...(date instanceof Date && { datetime: date.toISOString() }),
+  };
+  return [
+    '<time',
+    elementAttributes(attributes),
+    '>',
+    dateFormat(date, pInf, nInf, otherwise),
+    '</time>',
+  ].join('');
+};
+
+
 /**
  * Render a duration.
  * @param {Number} seconds
@@ -80,7 +118,7 @@ const secondsToPeriod = (seconds) => {
       result.push(`${r} ${label}${r != 1 ? 's' : ''}`);
     }
     value = factor ? Math.floor(value / factor) : value;
-  }
+  };
 
   nextResult(60, 'second');
   nextResult(60, 'minute');
@@ -122,8 +160,8 @@ function htmlHead(pagePathLevel, ctx, options) {
   return `\t<head>
 \t\t<meta charset="utf-8">
 \t\t<meta name="viewport" content="width=device-width,initial-scale=1">
-\t\t<link rel="stylesheet" href="${rootPathPfx}static/theme.css" title="Default">
-\t\t<link rel="stylesheet" href="${rootPathPfx}static/custom.css" title="Site Specific">
+\t\t<link rel="stylesheet" href="${rootPathPfx}static/theme.css">
+\t\t<link rel="stylesheet" href="${rootPathPfx}static/custom.css">
 ${headElements.map((e) => '\t\t' + e).join('\n')}
 \t\t<title>${pageTitle}</title>
 \t</head>`;
@@ -194,6 +232,7 @@ ${spacer}</nav>` : '';
  * @param {Object} ctx
  * @param {Object} options
  * @param {String[]=} options.logoUrl
+ * @param {String[]=} options.logoAlt
  * @param {String[]=} options.pageTitle
  * @returns {String}
  */
@@ -201,9 +240,10 @@ function htmlHeader(pagePathLevel, ctx, options) {
   const rootPathPfx = '../'.repeat(pagePathLevel);
   const {
     logoUrl = '',
+    logoAlt = 'logo',
     pageTitle = '',
   } = options;
-  const logoImg = logoUrl ? `<img src="${rootPathPfx}${logoUrl}" class="logo">` : '';
+  const logoImg = logoUrl ? `<img src="${rootPathPfx}${logoUrl}" alt="logo" class="${logoAlt}">` : '';
   return `\t\t<header>
 \t\t\t<h1>${logoImg}${pageTitle}</h1>
 ${htmlNav(ctx, options)}
@@ -300,16 +340,16 @@ ${spacer}</ol>`;
  * @param {String[]=} options.notificationContent
  */
 function htmlMessages(ctx, options) {
-  const errorHeading = options && options.errorHeading ? `
+  const errorHeading = options?.errorHeading ? `
 \t<h2>${options.errorHeading}</h2>` : '';
-  const errorContent = options && options.errorContent && options.errorContent.length ? '\n' + options.errorContent.map(((content) => `\t${content}`)).join('\n') : '';
-  const notificationHeading = options && options.notificationHeading ? `\n\t<h2>${options.notificationHeading}</h2>` : '';
-  const notificationContent = options && options.notificationContent && options.notificationContent.length ? '\n' + options.notificationContent.map(((content) => `\t${content}`)).join('\n') : '';
-  const errors = ctx && ctx.errors && ctx.errors.length ? `
+  const errorContent = options?.errorContent?.length ? '\n' + options.errorContent.map(((content) => `\t${content}`)).join('\n') : '';
+  const notificationHeading = options?.notificationHeading ? `\n\t<h2>${options.notificationHeading}</h2>` : '';
+  const notificationContent = options?.notificationContent?.length ? '\n' + options.notificationContent.map(((content) => `\t${content}`)).join('\n') : '';
+  const errors = ctx?.errors?.length ? `
 <section class="error">${errorHeading}${errorContent}
 ${UL(ctx.errors, 1)}
 </section>` : '';
-  const notifications = ctx && ctx.notifications && ctx.notifications.length ? `
+  const notifications = ctx?.notifications?.length ? `
 <section class="notification">${notificationHeading}${notificationContent}
 ${UL(ctx.notifications, 1)}
 </section>` : '';
@@ -318,17 +358,15 @@ ${UL(ctx.notifications, 1)}
 
 
 /**
- * Render all parts of an HTML page. Adds user logout nav link automatically.
+ * Render all parts of an HTML page.
  * @param {Number} pagePathLevel - relative path-distance to base
  * @param {Object} ctx
- * @param {Object=} ctx.session
- * @param {String=} ctx.session.authenticatedIdentifier
- * @param {String=} ctx.session.authenticatedProfile
  * @param {String[]=} ctx.errors
  * @param {String[]=} ctx.notifications
  * @param {Object} options
  * @param {String=} options.pageTitle
  * @param {String=} options.logoUrl
+ * @param {String=} options.logoAlt
  * @param {Object[]=} options.bodyAttributes
  * @param {String[]=} options.headElements
  * @param {Object[]=} options.navLinks
@@ -341,19 +379,6 @@ ${UL(ctx.notifications, 1)}
  * @returns {String}
  */
 function htmlPage(pagePathLevel, ctx, options, main = []) {
-  const user = (ctx && ctx.session && ctx.session.authenticatedProfile) || (ctx && ctx.session && ctx.session.authenticatedIdentifier);
-  if (user) {
-    if (!options.navLinks) {
-      options.navLinks = [];
-    }
-    const logoutRedirect = ctx && ctx.url ? `?r=${encodeURIComponent(ctx.url)}` : '';
-    const logoutPath = (pagePathLevel > 0) ? `${'../'.repeat(pagePathLevel - 1)}` : 'admin/';
-    options.navLinks.push({
-      text: `Logout (${user})`,
-      href: `${logoutPath}logout${logoutRedirect}`,
-    });
-  }
-
   return [
     '<!DOCTYPE html>',
     '<html lang="en">',
@@ -365,8 +390,10 @@ function htmlPage(pagePathLevel, ctx, options, main = []) {
 
 
 module.exports = {
+  initContext,
   dateOrNot,
   dateFormat,
+  timeElement,
   secondsToPeriod,
   htmlHead,
   htmlBody,
Node module for squeep applications