From: Justin Wind Date: Fri, 22 Mar 2024 23:15:40 +0000 (-0700) Subject: minor refactors X-Git-Tag: v1.6.0~1 X-Git-Url: https://git.squeep.com/?a=commitdiff_plain;h=d6b0485d9f665ccc886279e8bb447137acca2b9e;p=squeep-html-template-helper minor refactors --- diff --git a/README.md b/README.md index 888bd54..68f91ea 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,8 @@ Simplistic helpers for rendering HTML and boilerplate. Specific to Squeep Framework Applications, this module has strong opinions and makes many assumptions. +Expects `/static/theme.css` and `/static/custom.css` to exist. + ## API - `initContext(ctx)` @@ -41,4 +43,4 @@ Lists of errors and notices to show at top of page, before main content. ## Tests -`LintHtml` class is a simple wrapper around html-validate package which can report issues with generated html strings. +`LintHtml` class is a simple wrapper around `html-validate` package which can report issues with generated html strings. diff --git a/lib/template-helper.js b/lib/template-helper.js index 7f7021a..e8163ab 100644 --- a/lib/template-helper.js +++ b/lib/template-helper.js @@ -19,7 +19,7 @@ const initContext = (ctx) => { /** * Some fields may have values outside normal dates, handle them here. - * @param {Date} date + * @param {Date|Number} date * @param {String} otherwise */ const dateOrNot = (date, otherwise) => { @@ -203,7 +203,8 @@ ${htmlFooter(ctx, options)} * @returns {String} */ function renderNavLink(nav) { - return `${nav.text}`; + const aClass = nav.class ? ` class="${nav.class}"` : ''; + return `${nav.text}`; } @@ -277,7 +278,10 @@ ${spacer}` : ''; * @returns {String} */ function elementAttributes(attributes) { - const attr = Object.entries(attributes).map(([name, value]) => `${name}="${value}"`).join(' '); + const attr = Object.entries(attributes).map(([name, value]) => { + const v = value ? `="${value}"` : ''; + return `${name}${v}`; + }).join(' '); return attr ? ' ' + attr : ''; } @@ -295,19 +299,33 @@ function LI(item, indent = 0, attributes = {}) { } +/** + * Wrap an array of items in a list container element. + * @param {String} element + * @param {Number} indent + * @param {Object} attributes + * @param {String[]} items + * @param {(item, index, array) => {Object}} itemAttributeGenerator + * @returns {String} + */ +function listContainer(element, indent, attributes, items, itemAttributeGenerator) { + const spacer = '\t'.repeat(indent); + return `${spacer}<${element}${elementAttributes(attributes)}> +${items.map((item, index, array) => LI(item, indent + 1, itemAttributeGenerator(item, index, array))).join('\n')} +${spacer}`; +} + + /** * Wrap a list of items in an unordered list. * @param {String[]} items * @param {Number} indent * @param {Object} attributes - * @param {(item) => Object} itemAttributeGenerator + * @param {(item, index, array) => Object} itemAttributeGenerator * @returns {String} */ function UL(items, indent = 0, attributes = {}, itemAttributeGenerator = () => {}) { - const spacer = '\t'.repeat(indent); - return `${spacer} -${items.map((item) => LI(item, indent + 1, itemAttributeGenerator(item))).join('\n')} -${spacer}`; + return listContainer('ul', indent, attributes, items, itemAttributeGenerator); } @@ -316,15 +334,12 @@ ${spacer}`; * @param {String[]} items * @param {Number} indent * @param {Object} attributes - * @param {(item) => Object} itemAttributeGenerator + * @param {(item, index, array) => Object} itemAttributeGenerator * @returns {String} */ function OL(items, indent = 0, attributes = {}, itemAttributeGenerator = () => {}) { - const spacer = '\t'.repeat(indent); - return `${spacer} -${items.map((item) => LI(item, indent + 1, itemAttributeGenerator(item))).join('\n')} -${spacer}`; + return listContainer('ol', indent, attributes, items, itemAttributeGenerator); } @@ -404,7 +419,9 @@ module.exports = { indented, renderNavLink, LI, + listContainer, UL, OL, htmlPage, + elementAttributes, }; diff --git a/test/lib/template-helper.js b/test/lib/template-helper.js index 75481ad..c62a3c0 100644 --- a/test/lib/template-helper.js +++ b/test/lib/template-helper.js @@ -170,6 +170,17 @@ describe('Template Helper', function () { }); }); // renderNavLink + describe('elementAttributes', function () { + it('covers', function () { + const attributes = { + class: 'foo bar', + disabled: '', + }; + const result = th.elementAttributes(attributes); + assert.strictEqual(result, ' class="foo bar" disabled'); + }); + }); // elementAttributes + describe('OL', function () { it('covers', function () { const result = th.OL(['item', 'another item'], 1, { class: 'class' }, (item) => ({ class: `${item}-class` })); @@ -273,6 +284,7 @@ describe('Template Helper', function () { ]; }); it('covers', async function () { + this.slow(1000); // First invocation of htmlLint takes some time. const result = th.htmlPage(pagePathLevel, ctx, options, main); await htmlLint(result); assert(result);