From b1e51efc1f7bf4989cd182afa7cede15d572a187 Mon Sep 17 00:00:00 2001 From: louisachu Date: Thu, 8 Feb 2024 11:56:00 -0800 Subject: [PATCH 1/9] remove the serif font --- hlx_statics/blocks/hero/hero.js | 2 +- hlx_statics/blocks/site-hero/site-hero.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/hlx_statics/blocks/hero/hero.js b/hlx_statics/blocks/hero/hero.js index 3feeb3bf..94da4c65 100644 --- a/hlx_statics/blocks/hero/hero.js +++ b/hlx_statics/blocks/hero/hero.js @@ -27,7 +27,7 @@ export default async function decorate(block) { decorateLightOrDark(block, true); // H1 decoration block.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach((h) => { - h.classList.add('spectrum-Heading', 'spectrum-Heading--sizeXXL', 'spectrum-Heading--serif'); + h.classList.add('spectrum-Heading', 'spectrum-Heading--sizeXXL'); }); block.querySelectorAll('picture source').forEach((picture) => { diff --git a/hlx_statics/blocks/site-hero/site-hero.js b/hlx_statics/blocks/site-hero/site-hero.js index b958a0ca..f626576d 100644 --- a/hlx_statics/blocks/site-hero/site-hero.js +++ b/hlx_statics/blocks/site-hero/site-hero.js @@ -17,7 +17,7 @@ export default async function decorate(block) { block.classList.add('spectrum--dark'); block.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach((h) => { - h.classList.add('spectrum-Heading', 'spectrum-Heading--sizeXXL', 'spectrum-Heading--serif'); + h.classList.add('spectrum-Heading', 'spectrum-Heading--sizeXXL'); h.parentElement.classList.add('site-hero-content'); h.parentElement.append(button_div); }); From 5f7c6c98af1e251d779e552bb539192ee3a9cadd Mon Sep 17 00:00:00 2001 From: louisachu Date: Fri, 9 Feb 2024 11:33:19 -0800 Subject: [PATCH 2/9] update to use any font family --- hlx_statics/blocks/hero/hero.js | 9 ++++++++- hlx_statics/blocks/site-hero/site-hero.js | 8 +++++++- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/hlx_statics/blocks/hero/hero.js b/hlx_statics/blocks/hero/hero.js index 94da4c65..a1af8799 100644 --- a/hlx_statics/blocks/hero/hero.js +++ b/hlx_statics/blocks/hero/hero.js @@ -27,7 +27,14 @@ export default async function decorate(block) { decorateLightOrDark(block, true); // H1 decoration block.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach((h) => { - h.classList.add('spectrum-Heading', 'spectrum-Heading--sizeXXL'); + const fontFamily = block?.parentElement?.parentElement?.getAttribute('data-font-family'); + if (fontFamily) { + h.style.fontFamily = fontFamily; + h.classList.add('spectrum-Heading', 'spectrum-Heading--sizeXXL'); + } else { + h.classList.add('spectrum-Heading', 'spectrum-Heading--sizeXXL', 'spectrum-Heading--serif'); + } + }); block.querySelectorAll('picture source').forEach((picture) => { diff --git a/hlx_statics/blocks/site-hero/site-hero.js b/hlx_statics/blocks/site-hero/site-hero.js index f626576d..f4c0d440 100644 --- a/hlx_statics/blocks/site-hero/site-hero.js +++ b/hlx_statics/blocks/site-hero/site-hero.js @@ -17,7 +17,13 @@ export default async function decorate(block) { block.classList.add('spectrum--dark'); block.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach((h) => { - h.classList.add('spectrum-Heading', 'spectrum-Heading--sizeXXL'); + const fontFamily = block?.parentElement?.parentElement?.getAttribute('data-font-family'); + if (fontFamily) { + h.style.fontFamily = fontFamily; + h.classList.add('spectrum-Heading', 'spectrum-Heading--sizeXXL'); + } else { + h.classList.add('spectrum-Heading', 'spectrum-Heading--sizeXXL', 'spectrum-Heading--serif'); + } h.parentElement.classList.add('site-hero-content'); h.parentElement.append(button_div); }); From 5cecaa630d75755fa59fb47846e1b04b50d92cdb Mon Sep 17 00:00:00 2001 From: louisachu Date: Mon, 12 Feb 2024 10:16:55 -0800 Subject: [PATCH 3/9] update video carousel with youtube links --- .../blocks/video-carousel/video-carousel.css | 4 +++ .../blocks/video-carousel/video-carousel.js | 31 ++++++++++++++----- 2 files changed, 28 insertions(+), 7 deletions(-) diff --git a/hlx_statics/blocks/video-carousel/video-carousel.css b/hlx_statics/blocks/video-carousel/video-carousel.css index 71e78fde..9af1e3a2 100644 --- a/hlx_statics/blocks/video-carousel/video-carousel.css +++ b/hlx_statics/blocks/video-carousel/video-carousel.css @@ -90,6 +90,10 @@ main div.video-carousel .video-slide { flex: 1 0 100%; } +main div.video-carousel .embed { + margin-top: 0px; +} + main div.video-carousel .video-slide-arrow { margin: auto; background-color: transparent; diff --git a/hlx_statics/blocks/video-carousel/video-carousel.js b/hlx_statics/blocks/video-carousel/video-carousel.js index d9f259c5..7c6e002f 100644 --- a/hlx_statics/blocks/video-carousel/video-carousel.js +++ b/hlx_statics/blocks/video-carousel/video-carousel.js @@ -157,7 +157,7 @@ export default async function decorate(block) { block.className = 'video-carousel'; const link = a.href; const url = new URL(link); - a.insertAdjacentHTML('afterend', loadVideo(url)); + a.insertAdjacentHTML('afterend', embedUrl(url)); const videoElement = createTag('div', {class: 'video-element'}); videoElement.innerHTML = a.parentElement.innerHTML; a.parentElement.parentElement.append(videoElement); @@ -165,12 +165,29 @@ export default async function decorate(block) { videoElement.querySelector('a').remove(); }; - function loadVideo (url) { - const html = `
- -
`; + function embedUrl (url) { + const usp = new URLSearchParams(url.search); + let vid = encodeURIComponent(usp.get('v')); + const embed = url.pathname; + var youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com\/(watch\?v=|embed\/)|youtu\.be\/)/; + let html; + if (url.origin.includes('youtu.be')) { + [, vid] = url.pathname.split('/'); + } + if (youtubeRegex.test(url)) { + html = `
+ + + +
`; + } else { + html = `
+ +
`; + } return html; }; From 7aa7f3b35191528e930727d0e2714aaf07092449 Mon Sep 17 00:00:00 2001 From: louisachu Date: Mon, 12 Feb 2024 14:28:43 -0800 Subject: [PATCH 4/9] update --- .idea/inspectionProfiles/Project_Default.xml | 6 ++++++ .../blocks/video-carousel/video-carousel.js | 19 ++++++++++++------- 2 files changed, 18 insertions(+), 7 deletions(-) create mode 100644 .idea/inspectionProfiles/Project_Default.xml diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 00000000..03d9549e --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/hlx_statics/blocks/video-carousel/video-carousel.js b/hlx_statics/blocks/video-carousel/video-carousel.js index 7c6e002f..b22293d5 100644 --- a/hlx_statics/blocks/video-carousel/video-carousel.js +++ b/hlx_statics/blocks/video-carousel/video-carousel.js @@ -11,6 +11,7 @@ import { * @param {Element} block The carousel block element */ export default async function decorate(block) { + block.setAttribute('daa-lh', 'vidoe-carousel'); removeEmptyPTags(block); decorateButtons(block); @@ -38,7 +39,7 @@ export default async function decorate(block) { //load the video link. const a = block.querySelectorAll('a'); for (let i=0; i < a.length; i++) { - loadEmbed(block, a[i]); + loadVideoURL(block, a[i]); } block.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach((h) => { @@ -153,11 +154,12 @@ export default async function decorate(block) { }); }); - function loadEmbed(block,a) { + // load the video url and append to the video element. + function loadVideoURL(block,a) { block.className = 'video-carousel'; const link = a.href; const url = new URL(link); - a.insertAdjacentHTML('afterend', embedUrl(url)); + a.insertAdjacentHTML('afterend', loadUrl(url)); const videoElement = createTag('div', {class: 'video-element'}); videoElement.innerHTML = a.parentElement.innerHTML; a.parentElement.parentElement.append(videoElement); @@ -165,16 +167,18 @@ export default async function decorate(block) { videoElement.querySelector('a').remove(); }; - function embedUrl (url) { + function loadUrl (url) { + let html; + const embed = url.pathname; + // Check if the URL is a youtube link. const usp = new URLSearchParams(url.search); let vid = encodeURIComponent(usp.get('v')); - const embed = url.pathname; - var youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com\/(watch\?v=|embed\/)|youtu\.be\/)/; - let html; + const youtubeRegex = /^(https?:\/\/)?(www\.)?(youtube\.com\/(watch\?v=|embed\/)|youtu\.be\/)/; if (url.origin.includes('youtu.be')) { [, vid] = url.pathname.split('/'); } if (youtubeRegex.test(url)) { + // Render the youtube link through iframe within right container of one of the video carousel slide. html = `
@@ -182,6 +186,7 @@ export default async function decorate(block) {
`; } else { + // Render the url link through video tag within right container of one of the video carousel slide. html = `