https://indiaharley-davidson.com/scripts/dom-helpers.js

1/*
2 * Copyright 2023 Adobe. All rights reserved.
3 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License. You may obtain a copy
5 * of the License at http://www.apache.org/licenses/LICENSE-2.0
6 *
7 * Unless required by applicable law or agreed to in writing, software distributed under
8 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9 * OF ANY KIND, either express or implied. See the License for the specific language
10 * governing permissions and limitations under the License.
11 */
12
13/* eslint-disable no-param-reassign */
14
15/**
16 * Example Usage:
17 *
18 * domEl('main',
19 *  div({ class: 'card' },
20 *  a({ href: item.path },
21 *    div({ class: 'card-thumb' },
22 *     createOptimizedPicture(item.image, item.title, 'lazy', [{ width: '800' }]),
23 *    ),
24 *   div({ class: 'card-caption' },
25 *      h3(item.title),
26 *      p({ class: 'card-description' }, item.description),
27 *      p({ class: 'button-container' },
28 *       a({ href: item.path, 'aria-label': 'Read More', class: 'button primary' }, 'Read More'),
29 *     ),
30 *   ),
31 *  ),
32 * )
33 */
34
35/**
36 * Helper for more concisely generating DOM Elements with attributes and children
37 * @param {string} tag HTML tag of the desired element
38 * @param  {[Object?, ...Element]} items: First item can optionally be an object of attributes,
39 *  everything else is a child element
40 * @returns {Element} The constructred DOM Element
41 */
42export function domEl(tag, ...items) {
43  const element = document.createElement(tag);
44
45  if (!items || items.length === 0) return element;
46
47  if (!(items[0] instanceof Element || items[0] instanceof HTMLElement) && typeof items[0] === 'object') {
48    const [attributes, ...rest] = items;
49    items = rest;
50
51    Object.entries(attributes).forEach(([key, value]) => {
52      if (typeof value === 'boolean') {
53        if (value) element.setAttribute(key, '');
54        else element.removeAttribute(key);
55      } else if (!key.toLowerCase().startsWith('on')) {
56        element.setAttribute(key, Array.isArray(value) ? value.join(' ') : value);
57      } else {
58        element.addEventListener(key.substring(2).toLowerCase(), value);
59      }
60    });
61  }
62
63  items.forEach((item) => {
64    item = item instanceof Element || item instanceof HTMLElement
65      ? item
66      : document.createTextNode(item);
67    element.appendChild(item);
68  });
69
70  return element;
71}
72
73/*
74  More short hand functions can be added for very common DOM elements below.
75  domEl function from above can be used for one off DOM element occurrences.
76*/
77export function div(...items) { return domEl('div', ...items); }
78export function p(...items) { return domEl('p', ...items); }
79export function a(...items) { return domEl('a', ...items); }
80export function h1(...items) { return domEl('h1', ...items); }
81export function h2(...items) { return domEl('h2', ...items); }
82export function h3(...items) { return domEl('h3', ...items); }
83export function h4(...items) { return domEl('h4', ...items); }
84export function h5(...items) { return domEl('h5', ...items); }
85export function h6(...items) { return domEl('h6', ...items); }
86export function ul(...items) { return domEl('ul', ...items); }
87export function ol(...items) { return domEl('ol', ...items); }
88export function li(...items) { return domEl('li', ...items); }
89export function i(...items) { return domEl('i', ...items); }
90export function img(...items) { return domEl('img', ...items); }
91export function span(...items) { return domEl('span', ...items); }
92export function form(...items) { return domEl('form', ...items); }
93export function input(...items) { return domEl('input', ...items); }
94export function label(...items) { return domEl('label', ...items); }
95export function button(...items) { return domEl('button', ...items); }
96export function iframe(...items) { return domEl('iframe', ...items); }
97export function nav(...items) { return domEl('nav', ...items); }
98export function fieldset(...items) { return domEl('fieldset', ...items); }
99export function article(...items) { return domEl('article', ...items); }
100export function strong(...items) { return domEl('strong', ...items); }
101export function select(...items) { return domEl('select', ...items); }
102export function option(...items) { return domEl('option', ...items); }
103export function section(...items) { return domEl('section', ...items); }
104export function sup(...items) { return domEl('sup', ...items); }