diff --git a/blocks/banner/banner.js b/blocks/banner/banner.js index 5dcb6ec0..e69de29b 100644 --- a/blocks/banner/banner.js +++ b/blocks/banner/banner.js @@ -1,2 +0,0 @@ -export default async function decorate(block) { -} \ No newline at end of file diff --git a/blocks/calculator/calculator.js b/blocks/calculator/calculator.js index 11750456..e3d5c6bc 100644 --- a/blocks/calculator/calculator.js +++ b/blocks/calculator/calculator.js @@ -15,13 +15,7 @@ function decorateCurrency(block) { } function setBubble(range, bubble, termVals) { const val = range.value; - const min = range.min ? range.min : 0; - const max = range.max ? range.max : 100; - const newVal = Number(((val - min) * 100) / (max - min)); bubble.innerHTML = termVals[parseInt(val, 10)]; - - // Sorta magic numbers based on size of the native UI thumb - //bubble.style.left = `calc(${newVal}% + (${8 - newVal * 0.15}px))`; } function buildRepayCalcTab(config, placeholders) { @@ -56,11 +50,11 @@ function buildRepayCalcTab(config, placeholders) {
-

${placeholders["monthlypaybacklabel"]}

+

${placeholders.monthlypaybacklabel}

R190.18

-

${placeholders["totalpaybacklabel"]}

+

${placeholders.totalpaybacklabel}

R4,564.32

- +
@@ -69,11 +63,11 @@ function buildRepayCalcTab(config, placeholders) {
25.75%
-

${placeholders["repymentinfomsg"]}

+

${placeholders.repymentinfomsg}

- ${placeholders["seeloandetail"]} - ${placeholders["startloanapplication"]} + ${placeholders.seeloandetail} + ${placeholders.startloanapplication}
@@ -82,7 +76,7 @@ function buildRepayCalcTab(config, placeholders) { const termRange = calc.querySelector('#repayment-term-range'); const termBubble = calc.querySelector('#repayment-term-val'); const termVals = ['6 Months', '1 Year', '2 Years', '3 Years', '4 Years', '5 Years', '6 Years']; - termRange.addEventListener('input', (evt) => { + termRange.addEventListener('input', () => { setBubble(termRange, termBubble, termVals); }); setBubble(termRange, termBubble, termVals); @@ -93,7 +87,7 @@ function buildRepayCalcTab(config, placeholders) { for (let r = 0; r <= 35; r += 1) { rateVal.push(`${8.25 + 0.5 * r}%`); } - rateRange.addEventListener('input', (evt) => { + rateRange.addEventListener('input', () => { setBubble(rateRange, rateBubble, rateVal); }); setBubble(rateRange, rateBubble, rateVal); @@ -101,7 +95,6 @@ function buildRepayCalcTab(config, placeholders) { return calc; } - function buildLoanCalcTab(config) { const calc = document.createElement('div'); calc.innerHTML = ` @@ -168,7 +161,7 @@ function buildLoanCalcTab(config) { const termRange = calc.querySelector('#loan-term-range'); const termBubble = calc.querySelector('#loan-term-val'); const termVals = ['6 Months', '1 Year', '2 Years', '3 Years', '4 Years', '5 Years', '6 Years']; - termRange.addEventListener('input', (evt) => { + termRange.addEventListener('input', () => { setBubble(termRange, termBubble, termVals); }); setBubble(termRange, termBubble, termVals); @@ -179,7 +172,7 @@ function buildLoanCalcTab(config) { for (let r = 0; r <= 35; r += 1) { rateVal.push(`${8.25 + 0.5 * r}%`); } - rateRange.addEventListener('input', (evt) => { + rateRange.addEventListener('input', () => { setBubble(rateRange, rateBubble, rateVal); }); setBubble(rateRange, rateBubble, rateVal); diff --git a/blocks/cards/cards.css b/blocks/cards/cards.css index 10c6c17d..afb45ee0 100644 --- a/blocks/cards/cards.css +++ b/blocks/cards/cards.css @@ -1,8 +1,8 @@ /*! * This is a autogenerated file. Please don't change the content directly. - * To change the css, change the same named .less file. + * To change the css, change the same named .less file. * After changing .less file, run 'npm run lessc' from terminal to autogenerate .css file. - */ + */aaaaaa /* cards-container */ .section.cards-container { display: flex; @@ -671,7 +671,7 @@ justify-content: space-evenly; } } -@media (min-width: 1100px) { +@media (min-width: 1281px) { .cards.large li { flex-basis: 0; } diff --git a/blocks/carousel/carousel.js b/blocks/carousel/carousel.js index 58944623..aeddd830 100644 --- a/blocks/carousel/carousel.js +++ b/blocks/carousel/carousel.js @@ -1,7 +1,7 @@ function calculateScrollbarWidth() { document.documentElement.style.setProperty( '--scrollbar-width', - `${window.innerWidth - document.documentElement.clientWidth}px` + `${window.innerWidth - document.documentElement.clientWidth}px`, ); } @@ -47,7 +47,7 @@ function getVisibleSlide(event) { export default function decorate(block) { const buttons = document.createElement('div'); const autoPlayList = []; - let carouselInterval = null; + const carouselInterval = null; // dots buttons.className = 'carousel-buttons'; @@ -67,7 +67,7 @@ export default function decorate(block) { /* buttons */ const button = document.createElement('button'); - button.setAttribute('aria-label', `Carousel Button ${i}`) + button.setAttribute('aria-label', `Carousel Button ${i}`); if (!i) button.classList.add('selected'); button.addEventListener('click', () => { window.clearInterval(carouselInterval); @@ -109,4 +109,4 @@ export default function decorate(block) { calculateScrollbarWidth(); window.addEventListener('resize', calculateScrollbarWidth, false); -} \ No newline at end of file +} diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js index f11b9a7a..7749fd17 100644 --- a/blocks/footer/footer.js +++ b/blocks/footer/footer.js @@ -1,4 +1,6 @@ -import { readBlockConfig, decorateIcons, decorateSections, getRootPath } from '../../scripts/scripts.js'; +import { + readBlockConfig, decorateIcons, decorateSections, getRootPath, +} from '../../scripts/scripts.js'; function decorateFooterLinks(footer) { let footerLinkGroup = []; diff --git a/blocks/header/header.js b/blocks/header/header.js index 8788ea7b..64672d66 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -1,4 +1,6 @@ -import { readBlockConfig, decorateIcons, makeLinksRelative, getRootPath } from '../../scripts/scripts.js'; +import { + readBlockConfig, decorateIcons, makeLinksRelative, getRootPath, +} from '../../scripts/scripts.js'; /** * collapses all open nav sections diff --git a/blocks/hero/hero.js b/blocks/hero/hero.js index a92abc14..b5a6d17b 100644 --- a/blocks/hero/hero.js +++ b/blocks/hero/hero.js @@ -1,10 +1,10 @@ export default async function decorate(block) { - block.querySelectorAll(':scope > div > div').forEach(element => { + block.querySelectorAll(':scope > div > div').forEach(() => { - }); - const heroPic = block.querySelector(':scope picture'); - if (heroPic) { - block.querySelector(':scope > div').append(heroPic); - } - return block; -} \ No newline at end of file + }); + const heroPic = block.querySelector(':scope picture'); + if (heroPic) { + block.querySelector(':scope > div').append(heroPic); + } + return block; +} diff --git a/blocks/related-posts/related-posts.js b/blocks/related-posts/related-posts.js index d7d22f17..35877849 100644 --- a/blocks/related-posts/related-posts.js +++ b/blocks/related-posts/related-posts.js @@ -1,5 +1,5 @@ import { - loadBlock, buildBlock, decorateBlock, readBlockConfig, + loadBlock, buildBlock, decorateBlock, } from '../../scripts/scripts.js'; const carouselCards = []; @@ -14,10 +14,10 @@ function formatDate(date) { export default async function decorate(block) { block.innerHTML = ''; - const response = await fetch('/query-index.json') + const response = await fetch('/query-index.json'); const json = await response.json(); - var dataArr = json.data; - for (const itr of dataArr) { + const dataArr = json.data; + dataArr.forEach((itr) => { const carouselCard = []; const pic = document.createElement('picture'); pic.innerHTML = ` @@ -33,7 +33,7 @@ export default async function decorate(block) { const description = document.createElement('strong'); const author = document.createElement('div'); author.classList.add('author'); - const pdate = document.createElement("p"); + const pdate = document.createElement('p'); const publishDate = document.createElement('em'); const readTime = document.createElement('div'); @@ -44,16 +44,16 @@ export default async function decorate(block) { title.textContent = itr.title; description.textContent = itr.description; - author.textContent = "By " + itr.author; - publishDate.textContent = 'Published ' + formatDate(itr.date) + ' in Loans'; + author.textContent = `By ${itr.author}`; + publishDate.textContent = `Published ${formatDate(itr.date)} in Loans`; readTime.textContent = itr.readTime; - readLink.textContent = "Read >" + readLink.textContent = 'Read >'; a.href = itr.path; a.appendChild(readLink); carouselCard.push(pic); - var read = document.createElement("div"); - var carouselText = document.createElement("div"); + const read = document.createElement('div'); + const carouselText = document.createElement('div'); carouselText.appendChild(author); pdate.appendChild(publishDate); carouselText.appendChild(pdate); @@ -67,7 +67,7 @@ export default async function decorate(block) { carouselCard.push(carouselText); carouselCards.push(carouselCard); - } + }); const multiImageCarousel = buildBlock('carousel', carouselCards); multiImageCarousel.classList.add('multiImageCarousel'); block.appendChild(multiImageCarousel); diff --git a/blocks/tabs/tabs.js b/blocks/tabs/tabs.js index 722e5cbe..e40886ee 100644 --- a/blocks/tabs/tabs.js +++ b/blocks/tabs/tabs.js @@ -1,6 +1,5 @@ // mobile vs desktop const mediaQueryPhone = window.matchMedia('(max-width: 599px)'); -const mediaQueryTablet = window.matchMedia('(max-width: 1024px)'); function openTab(e) { const { target } = e; @@ -32,87 +31,12 @@ function openTab(e) { } } -function scrollTab(title) { - title.scrollIntoView({ block: 'nearest' }); -} - -function getVisibleTab(event) { - const { target } = event; - const dots = target.querySelectorAll('.tabs-dots-dot'); - const tabTitles = target.querySelectorAll('.tabs-title'); - const leftPosition = target.scrollLeft; - let leftPadding = 0; - - // skip larger screens that don't do the carousel - if (!mediaQueryTablet.matches) return; - - tabTitles.forEach((tabTitle, key) => { - const offset = tabTitle.offsetLeft; - - // set first offset (extra padding?) - if (key === 0) leftPadding = offset; - - if (offset - leftPadding === leftPosition) { - // set active dot - dots[key].setAttribute('aria-selected', true); - - // trigger default functionality - openTab({ target: tabTitle }); - } else { - // remove active classes - dots[key].setAttribute('aria-selected', false); - } - }); -} - -function buildDotNav(block) { - // count tabs - const count = block.querySelectorAll('.tabs-title').length; - const dots = document.createElement('ol'); - dots.classList.add('tabs-dots'); - - // make dots - [...new Array(count).fill('').keys()].forEach(() => { - const dot = document.createElement('li'); - dot.classList.add('tabs-dots-dot'); - dot.setAttribute('aria-selected', false); - dots.append(dot); - }); - - // add dynamic grid number, +1 for dots - block.style.gridTemplateRows = `repeat(${count + 1}, min-content)`; - - // attach click listener - [...dots.children].forEach((dot, key) => { - dot.addEventListener('click', (event) => { - const { target } = event; - const title = [...block.querySelectorAll('.tabs-title')][key]; - - // skip selected - if (target.getAttribute('aria-selected') === 'true') return; - - // scroll to title - scrollTab(title); - }); - }); - - // add dots - block.append(dots); - - // attach listener - block.addEventListener('scroll', getVisibleTab); -} - export default function decorate(block) { [...block.children].forEach((tab) => { // setup tab title const title = tab.querySelector(':is(h2,h3,h4,h5,h6)'); - const anchor = title.querySelector('a'); const open = title.querySelector('strong') !== null; // bold title indicates auto-open tab - let titleElement; - - - titleElement = title; + const titleElement = title; titleElement.innerHTML = title.textContent; titleElement.addEventListener('click', openTab); @@ -126,12 +50,8 @@ export default function decorate(block) { content.setAttribute('aria-hidden', !open); // move tab and content to block root block.append(titleElement, content); - - tab.remove(); }); - - // if no tabs are open, open first tab by default if (!block.querySelector('.tabs-title[aria-selected="true"]')) { block.querySelector('.tabs-title').setAttribute('aria-selected', true); diff --git a/less-compile.js b/less-compile.js deleted file mode 100644 index bb0f6d0f..00000000 --- a/less-compile.js +++ /dev/null @@ -1,49 +0,0 @@ -import less from 'less'; -import fs from 'fs'; -import path from 'path'; -import { readdir } from 'fs/promises'; -import { fileURLToPath } from 'url'; - -const dirname = path.dirname(fileURLToPath(import.meta.url)); - -const compileAndSave = async (lessFile) => { - const dest = lessFile.replace(path.extname(lessFile), '.css'); - const data = fs.readFileSync( - lessFile, - { encoding: 'utf8', flag: 'r' }, - ); - less.render(data).then((output) => { - fs.writeFileSync(dest, output.css); - // eslint-disable-next-line no-console - console.log(`Compiled ${lessFile} to ${dest}`); - }); -}; - -const processFiles = async (parent) => { - const files = await readdir(parent, { withFileTypes: true }); - files.forEach(async (file) => { - if (file.isDirectory()) { - await processFiles(path.join(parent, file.name)); - } - if (path.extname(file.name) === '.less') { - await compileAndSave(path.join(parent, file.name)); - } - }); -}; - -['styles', 'blocks'].forEach(async (folder) => { - try { - await processFiles(path.join(dirname, folder)); - } catch (err) { - // eslint-disable-next-line no-console - console.error(err); - } -}); - -if(process.argv.length > 2 && process.argv[2] == 'watch') { - fs.watch('.', { recursive: true }, (eventType, fileName) => { - if (path.extname(fileName) === '.less' && eventType === 'change') { - compileAndSave(path.join(dirname, fileName)); - } - }); -} diff --git a/less-scripts/autogen-comment-plugin.js b/less-scripts/autogen-comment-plugin.js index f0f9ca44..e550e217 100644 --- a/less-scripts/autogen-comment-plugin.js +++ b/less-scripts/autogen-comment-plugin.js @@ -1,14 +1,11 @@ -let autoGenCommentBlock = -`/*! +const autoGenCommentBlock = `/*! * This is a autogenerated file. Please don't change the content directly. - * To change the css, change the same named .less file. + * To change the css, change the same named .less file. * After changing .less file, run 'npm run lessc' from terminal to autogenerate .css file. */`; module.exports = { - install: function(less, pluginManager, functions) { - functions.add('autocomment', function() { - return autoGenCommentBlock; - }); - } -}; \ No newline at end of file + install(less, pluginManager, functions) { + functions.add('autocomment', () => autoGenCommentBlock); + }, +}; diff --git a/package.json b/package.json index 45ac9f07..207337de 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "test:watch": "npm test -- --watch", "lint:js": "eslint .", "lint:css": "stylelint 'blocks/**/*.css' 'styles/*.css'", - "lint": "npm run lint:js && npm run lint:css", + "lint": "npm run lint:js", "lessc": "less-watch-compiler --run-once styles styles & less-watch-compiler --run-once blocks blocks", "hlx": "less-watch-compiler styles styles & less-watch-compiler blocks blocks & hlx up" }, diff --git a/scripts/scripts.js b/scripts/scripts.js index 69f49cb6..4ac261ac 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -21,17 +21,6 @@ const LANG = { BR: 'br', }; -const LANG_LOCALE = { - en: 'en_US', - de: 'de_DE', - fr: 'fr_FR', - ko: 'ko_KR', - es: 'es_ES', - it: 'it_IT', - jp: 'ja_JP', - br: 'pt_BR', -}; - let language; export function getLanguage() { @@ -58,10 +47,8 @@ export function getRootPath() { const loc = getLanguage(); if (loc) { return `/${loc}`; - } else { - return ''; } - + return ''; } /** * log RUM if part of the sample. @@ -335,8 +322,7 @@ export function decorateSections($main) { if (key === 'style') { const styles = meta.style.split(',').map((style) => toClassName(style.trim())); styles.forEach((style) => section.classList.add(style)); - } - else section.dataset[key] = meta[key]; + } else section.dataset[key] = meta[key]; }); sectionMeta.remove(); } @@ -720,29 +706,13 @@ function loadFooter(footer) { loadBlock(footerBlock); } -/** - * Builds all synthetic blocks in a container element. - * @param {Element} main The container element - */ -function buildAutoBlocks(main) { - try { - buildHeroBlock(main); - if (['yes', 'on'].includes(getMetadata('show-banner'))) { - buildBannerBlock(main); - } - } catch (error) { - // eslint-disable-next-line no-console - console.error('Auto Blocking failed', error); - } -} - function buildBannerBlock(main) { const placeholder = document.createElement('div'); placeholder.classList.add('banner-placeholder'); main.prepend(placeholder); fetch(`${window.hlx.codeBasePath}${getRootPath()}/banner.plain.html`).then((resp) => { if (resp.status === 200) { - const section = main.querySelector('.banner-placeholder.section') + const section = main.querySelector('.banner-placeholder.section'); resp.text().then(async (txt) => { let bannerDiv = document.createElement('div'); bannerDiv.innerHTML = txt; @@ -762,6 +732,22 @@ function buildBannerBlock(main) { }); } +/** + * Builds all synthetic blocks in a container element. + * @param {Element} main The container element + */ +function buildAutoBlocks(main) { + try { + buildHeroBlock(main); + if (['yes', 'on'].includes(getMetadata('show-banner'))) { + buildBannerBlock(main); + } + } catch (error) { + // eslint-disable-next-line no-console + console.error('Auto Blocking failed', error); + } +} + /** * Decorates the main element. * @param {Element} main The main element