diff --git a/blocks/carousel/card.js b/blocks/carousel/card.js index 608840c..f171e74 100644 --- a/blocks/carousel/card.js +++ b/blocks/carousel/card.js @@ -5,21 +5,21 @@ import { decorateIcons, loadCSS, createOptimizedPicture, fetchPlaceholders, toCamelCase, } from '../../scripts/lib-franklin.js'; -import { isGatedResource, summariseDescription } from '../../scripts/scripts.js'; import { a, div, h3, p, i, span, } from '../../scripts/dom-helpers.js'; +/*import { isGatedResource, summariseDescription } from '../../scripts/scripts.js'; import { createCompareBannerInterface } from '../../templates/compare-items/compare-banner.js'; import { MAX_COMPARE_ITEMS, getTitleFromNode, getSelectedItems, updateCompareButtons, -} from '../../scripts/compare-helpers.js'; +} from '../../scripts/compare-helpers.js';*/ let placeholders = {}; -export async function handleCompareProducts(e) {F +export async function handleCompareProducts(e) { const { target } = e; const clickedItemTitle = getTitleFromNode(target); const selectedItemTitles = getSelectedItems(); @@ -109,15 +109,18 @@ class Card { decorateIcons(c2aLinkBlock); } - const c2aBlock = div({ class: 'c2a' }, - p({ class: 'button-container' }, + const c2aBlock = div( + { class: 'c2a' }, + p( + { class: 'button-container' }, c2aLinkBlock, ), ); if ( item.specifications && item.specifications !== '0' - ) { + ) + { c2aBlock.append(div({ class: 'compare-button' }, `${placeholders.compare || 'Compare'} (`, span({ class: 'compare-count' }, '0'), @@ -143,13 +146,17 @@ class Card { } return ( - div({ class: 'card' }, - this.showImageThumbnail ? div({ class: 'card-thumb' }, - this.thumbnailLink ? a({ href: cardLink }, + div( + { class: 'card' }, + this.showImageThumbnail ? div( + { class: 'card-thumb' }, + this.thumbnailLink ? a( + { href: cardLink }, thumbnailBlock, ) : thumbnailBlock, ) : '', - item.badgeText ? div({ class: 'badge' }, item.badgeText) : '', + item.badgeText ? div( + { class: 'badge' }, item.badgeText) : '', div({ class: 'card-caption' }, item.type ? div({ class: 'card-type' }, item.type) : '', h3( diff --git a/scripts/dom-helpers.js b/scripts/dom-helpers.js index da289c3..243c12b 100644 --- a/scripts/dom-helpers.js +++ b/scripts/dom-helpers.js @@ -28,61 +28,60 @@ * @returns {Element} The constructred DOM Element */ export function domEl(tag, ...items) { - const element = document.createElement(tag); - - if (!items || items.length === 0) return element; - - if (!(items[0] instanceof Element || items[0] instanceof HTMLElement) && typeof items[0] === 'object') { - const [attributes, ...rest] = items; - items = rest; - - Object.entries(attributes).forEach(([key, value]) => { - if (!key.startsWith('on')) { - element.setAttribute(key, Array.isArray(value) ? value.join(' ') : value); - } else { - element.addEventListener(key.substring(2).toLowerCase(), value); - } - }); - } - - items.forEach((item) => { - item = item instanceof Element || item instanceof HTMLElement - ? item - : document.createTextNode(item); - element.appendChild(item); + const element = document.createElement(tag); + + if (!items || items.length === 0) return element; + + if (!(items[0] instanceof Element || items[0] instanceof HTMLElement) && typeof items[0] === 'object') { + const [attributes, ...rest] = items; + items = rest; + + Object.entries(attributes).forEach(([key, value]) => { + if (!key.startsWith('on')) { + element.setAttribute(key, Array.isArray(value) ? value.join(' ') : value); + } else { + element.addEventListener(key.substring(2).toLowerCase(), value); + } }); - - return element; } - - /* - More short hand functions can be added for very common DOM elements below. - domEl function from above can be used for one off DOM element occurrences. - */ - export function div(...items) { return domEl('div', ...items); } - export function p(...items) { return domEl('p', ...items); } - export function a(...items) { return domEl('a', ...items); } - export function h1(...items) { return domEl('h1', ...items); } - export function h2(...items) { return domEl('h2', ...items); } - export function h3(...items) { return domEl('h3', ...items); } - export function h4(...items) { return domEl('h4', ...items); } - export function h5(...items) { return domEl('h5', ...items); } - export function h6(...items) { return domEl('h6', ...items); } - export function ul(...items) { return domEl('ul', ...items); } - export function ol(...items) { return domEl('ol', ...items); } - export function li(...items) { return domEl('li', ...items); } - export function i(...items) { return domEl('i', ...items); } - export function img(...items) { return domEl('img', ...items); } - export function span(...items) { return domEl('span', ...items); } - export function form(...items) { return domEl('form', ...items); } - export function input(...items) { return domEl('input', ...items); } - export function label(...items) { return domEl('label', ...items); } - export function button(...items) { return domEl('button', ...items); } - export function iframe(...items) { return domEl('iframe', ...items); } - export function nav(...items) { return domEl('nav', ...items); } - export function fieldset(...items) { return domEl('fieldset', ...items); } - export function article(...items) { return domEl('article', ...items); } - export function strong(...items) { return domEl('strong', ...items); } - export function select(...items) { return domEl('select', ...items); } - export function option(...items) { return domEl('option', ...items); } - \ No newline at end of file + + items.forEach((item) => { + item = item instanceof Element || item instanceof HTMLElement + ? item + : document.createTextNode(item); + element.appendChild(item); + }); + + return element; +} + +/* + More short hand functions can be added for very common DOM elements below. + domEl function from above can be used for one off DOM element occurrences. +*/ +export function div(...items) { return domEl('div', ...items); } +export function p(...items) { return domEl('p', ...items); } +export function a(...items) { return domEl('a', ...items); } +export function h1(...items) { return domEl('h1', ...items); } +export function h2(...items) { return domEl('h2', ...items); } +export function h3(...items) { return domEl('h3', ...items); } +export function h4(...items) { return domEl('h4', ...items); } +export function h5(...items) { return domEl('h5', ...items); } +export function h6(...items) { return domEl('h6', ...items); } +export function ul(...items) { return domEl('ul', ...items); } +export function ol(...items) { return domEl('ol', ...items); } +export function li(...items) { return domEl('li', ...items); } +export function i(...items) { return domEl('i', ...items); } +export function img(...items) { return domEl('img', ...items); } +export function span(...items) { return domEl('span', ...items); } +export function form(...items) { return domEl('form', ...items); } +export function input(...items) { return domEl('input', ...items); } +export function label(...items) { return domEl('label', ...items); } +export function button(...items) { return domEl('button', ...items); } +export function iframe(...items) { return domEl('iframe', ...items); } +export function nav(...items) { return domEl('nav', ...items); } +export function fieldset(...items) { return domEl('fieldset', ...items); } +export function article(...items) { return domEl('article', ...items); } +export function strong(...items) { return domEl('strong', ...items); } +export function select(...items) { return domEl('select', ...items); } +export function option(...items) { return domEl('option', ...items); } \ No newline at end of file diff --git a/scripts/lib-franklin.js b/scripts/lib-franklin.js index aa085c6..2a0eeaf 100644 --- a/scripts/lib-franklin.js +++ b/scripts/lib-franklin.js @@ -335,7 +335,6 @@ export function readBlockConfig(block) { */ export function decorateSections(main) { const imageMediaQuery = window.matchMedia('only screen and (min-width: 400px)'); - main.querySelectorAll(':scope > div').forEach((section) => { const wrappers = []; let defaultContent = false; @@ -460,7 +459,7 @@ export function buildBlock(blockName, content) { * @param {Element} block The block element * @returns {Object} The block config (blockName, cssPath and jsPath) */ -function getBlockConfig(block) { +/* function getBlockConfig(block) { const { blockName } = block.dataset; const cssPath = `${window.hlx.codeBasePath}/blocks/${blockName}/${blockName}.css`; const jsPath = `${window.hlx.codeBasePath}/blocks/${blockName}/${blockName}.js`; @@ -471,7 +470,7 @@ function getBlockConfig(block) { (config, fn) => fn(config, original), { blockName, cssPath, jsPath }, ); -} +}*/ /** * Loads JS and CSS for a block. diff --git a/scripts/scripts.js b/scripts/scripts.js index 5b21d98..b9723b8 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -8,42 +8,18 @@ import { decorateTemplateAndTheme, waitForLCP, loadBlocks, - toClassName, getMetadata, loadCSS, - loadBlock, loadHeader, decorateBlock, buildBlock, - readBlockConfig, - toCamelCase, } from './lib-franklin.js'; import { a, div, domEl, p, } from './dom-helpers.js'; -/** - * to add/remove a template, just add/remove it in the list below - */ -const TEMPLATE_LIST = [ - 'application-note', - 'news', - 'publication', - 'blog', - 'event', - 'about-us', - 'newsroom', - 'landing-page', -]; - const LCP_BLOCKS = []; // add your LCP blocks to the list -let LAST_SCROLL_POSITION = 0; -let LAST_STACKED_HEIGHT = 0; -let STICKY_ELEMENTS; -let PREV_STICKY_ELEMENTS; -const mobileDevice = window.matchMedia('(max-width: 991px)'); - export function loadScript(url, callback, type, async, forceReload) { let script = document.querySelector(`head > script[src="${url}"]`); if (forceReload && script) { @@ -112,7 +88,6 @@ function decorateEmbeddedBlocks(container) { .forEach(decorateBlock); } - /** * Parse video links and build the markup */ @@ -246,7 +221,6 @@ function decorateParagraphs(main) { }); } - /** * load fonts.css and set a session storage flag */ @@ -312,8 +286,6 @@ async function loadEager(doc) { } } - - export async function fetchFragment(path, plain = true) { const response = await fetch(path + (plain ? '.plain.html' : '')); if (!response.ok) { @@ -330,8 +302,6 @@ export async function fetchFragment(path, plain = true) { return text; } - - /** * Loads everything that doesn't need to be delayed. * @param {Element} doc The container element @@ -385,7 +355,7 @@ export async function processEmbedFragment(element) { // not a url, ignore } if (linkTextUrl && linkTextUrl.pathname === linkUrl.pathname) { - const fragmentDomains = ['localhost', 'teshu-resume--teshukatepalli.hlx.page','teshu-resume--teshukatepalli.hlx.live']; + const fragmentDomains = ['localhost', 'teshu-resume--teshukatepalli.hlx.page', 'teshu-resume--teshukatepalli.hlx.live']; found = fragmentDomains.find((domain) => linkUrl.hostname.endsWith(domain)); if (found) { block.classList.remove('button-container');