From 159fbfd107a9fdb4bbfa405da698722908db4208 Mon Sep 17 00:00:00 2001 From: Pardeep Gera Date: Thu, 12 Oct 2023 16:49:32 +0530 Subject: [PATCH 1/5] embed block for youtube video --- blocks/embed/embed.css | 65 ++++++++++++++++++++++++ blocks/embed/embed.js | 113 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 178 insertions(+) create mode 100644 blocks/embed/embed.css create mode 100644 blocks/embed/embed.js diff --git a/blocks/embed/embed.css b/blocks/embed/embed.css new file mode 100644 index 00000000..dbc29cc8 --- /dev/null +++ b/blocks/embed/embed.css @@ -0,0 +1,65 @@ +main .embed { + width: unset; + text-align: center; + max-width: 800px; + margin: 32px auto; + } + + main .embed > div { + display: flex; + justify-content: center; + } + + main .embed.embed-twitter .twitter-tweet-rendered { + margin-left: auto; + margin-right: auto; + } + + main .embed .embed-placeholder { + width: 100%; + aspect-ratio: 16 / 9; + position: relative; + } + + main .embed .embed-placeholder > * { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + } + + main .embed .embed-placeholder picture img { + width: 100%; + height: 100%; + object-fit: cover; + } + + main .embed .embed-placeholder-play button { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(3); + width: 22px; + height: 22px; + border: 2px solid; + border-radius: 20px; + padding: 0; + } + + main .embed .embed-placeholder-play button::before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + width: 0; + height: 10px; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 6px solid; + top: 4px; + left: 7px; + } \ No newline at end of file diff --git a/blocks/embed/embed.js b/blocks/embed/embed.js new file mode 100644 index 00000000..788fad2d --- /dev/null +++ b/blocks/embed/embed.js @@ -0,0 +1,113 @@ +/* + * Embed Block + * Show videos and social posts directly on your page + * https://www.hlx.live/developer/block-collection/embed + */ + +const loadScript = (url, callback, type) => { + const head = document.querySelector('head'); + const script = document.createElement('script'); + script.src = url; + if (type) { + script.setAttribute('type', type); + } + script.onload = callback; + head.append(script); + return script; + }; + + const getDefaultEmbed = (url) => `
+ +
`; + + const embedYoutube = (url, autoplay) => { + const usp = new URLSearchParams(url.search); + const suffix = autoplay ? '&muted=1&autoplay=1' : ''; + let vid = encodeURIComponent(usp.get('v')); + const embed = url.pathname; + if (url.origin.includes('youtu.be')) { + [, vid] = url.pathname.split('/'); + } + const embedHTML = `
+ +
`; + return embedHTML; + }; + + const embedVimeo = (url, autoplay) => { + const [, video] = url.pathname.split('/'); + const suffix = autoplay ? '?muted=1&autoplay=1' : ''; + const embedHTML = `
+ +
`; + return embedHTML; + }; + + const embedTwitter = (url) => { + const embedHTML = `
`; + loadScript('https://platform.twitter.com/widgets.js'); + return embedHTML; + }; + + const loadEmbed = (block, link, autoplay) => { + if (block.classList.contains('embed-is-loaded')) { + return; + } + + const EMBEDS_CONFIG = [ + { + match: ['youtube', 'youtu.be'], + embed: embedYoutube, + }, + { + match: ['vimeo'], + embed: embedVimeo, + }, + { + match: ['twitter'], + embed: embedTwitter, + }, + ]; + + const config = EMBEDS_CONFIG.find((e) => e.match.some((match) => link.includes(match))); + const url = new URL(link); + if (config) { + block.innerHTML = config.embed(url, autoplay); + block.classList = `block embed embed-${config.match[0]}`; + } else { + block.innerHTML = getDefaultEmbed(url); + block.classList = 'block embed'; + } + block.classList.add('embed-is-loaded'); + }; + + export default function decorate(block) { + const placeholder = block.querySelector('picture'); + const link = block.querySelector('a').href; + block.textContent = ''; + + if (placeholder) { + const wrapper = document.createElement('div'); + wrapper.className = 'embed-placeholder'; + wrapper.innerHTML = '
'; + wrapper.prepend(placeholder); + wrapper.addEventListener('click', () => { + loadEmbed(block, link, true); + }); + block.append(wrapper); + } else { + const observer = new IntersectionObserver((entries) => { + if (entries.some((e) => e.isIntersecting)) { + observer.disconnect(); + loadEmbed(block, link); + } + }); + observer.observe(block); + } + } \ No newline at end of file From 7ef29e378fe59f1f87d21a152dcb9a0d1d4288fa Mon Sep 17 00:00:00 2001 From: Pardeep Gera Date: Thu, 12 Oct 2023 17:02:09 +0530 Subject: [PATCH 2/5] resolved linting issues --- blocks/embed/embed.js | 188 +++++++++++++++++++++--------------------- 1 file changed, 94 insertions(+), 94 deletions(-) diff --git a/blocks/embed/embed.js b/blocks/embed/embed.js index 788fad2d..1634dddf 100644 --- a/blocks/embed/embed.js +++ b/blocks/embed/embed.js @@ -5,109 +5,109 @@ */ const loadScript = (url, callback, type) => { - const head = document.querySelector('head'); - const script = document.createElement('script'); - script.src = url; - if (type) { - script.setAttribute('type', type); - } - script.onload = callback; - head.append(script); - return script; - }; - - const getDefaultEmbed = (url) => `
+ const head = document.querySelector('head'); + const script = document.createElement('script'); + script.src = url; + if (type) { + script.setAttribute('type', type); + } + script.onload = callback; + head.append(script); + return script; +}; + +const getDefaultEmbed = (url) => `
`; - - const embedYoutube = (url, autoplay) => { - const usp = new URLSearchParams(url.search); - const suffix = autoplay ? '&muted=1&autoplay=1' : ''; - let vid = encodeURIComponent(usp.get('v')); - const embed = url.pathname; - if (url.origin.includes('youtu.be')) { - [, vid] = url.pathname.split('/'); - } - const embedHTML = `
+ +const embedYoutube = (url, autoplay) => { + const usp = new URLSearchParams(url.search); + const suffix = autoplay ? '&muted=1&autoplay=1' : ''; + let vid = encodeURIComponent(usp.get('v')); + const embed = url.pathname; + if (url.origin.includes('youtu.be')) { + [, vid] = url.pathname.split('/'); + } + const embedHTML = `
`; - return embedHTML; - }; - - const embedVimeo = (url, autoplay) => { - const [, video] = url.pathname.split('/'); - const suffix = autoplay ? '?muted=1&autoplay=1' : ''; - const embedHTML = `
+ return embedHTML; +}; + +const embedVimeo = (url, autoplay) => { + const [, video] = url.pathname.split('/'); + const suffix = autoplay ? '?muted=1&autoplay=1' : ''; + const embedHTML = `
`; - return embedHTML; - }; - - const embedTwitter = (url) => { - const embedHTML = ``; - loadScript('https://platform.twitter.com/widgets.js'); - return embedHTML; - }; - - const loadEmbed = (block, link, autoplay) => { - if (block.classList.contains('embed-is-loaded')) { - return; - } - - const EMBEDS_CONFIG = [ - { - match: ['youtube', 'youtu.be'], - embed: embedYoutube, - }, - { - match: ['vimeo'], - embed: embedVimeo, - }, - { - match: ['twitter'], - embed: embedTwitter, - }, - ]; - - const config = EMBEDS_CONFIG.find((e) => e.match.some((match) => link.includes(match))); - const url = new URL(link); - if (config) { - block.innerHTML = config.embed(url, autoplay); - block.classList = `block embed embed-${config.match[0]}`; - } else { - block.innerHTML = getDefaultEmbed(url); - block.classList = 'block embed'; - } - block.classList.add('embed-is-loaded'); - }; - - export default function decorate(block) { - const placeholder = block.querySelector('picture'); - const link = block.querySelector('a').href; - block.textContent = ''; - - if (placeholder) { - const wrapper = document.createElement('div'); - wrapper.className = 'embed-placeholder'; - wrapper.innerHTML = '
'; - wrapper.prepend(placeholder); - wrapper.addEventListener('click', () => { - loadEmbed(block, link, true); - }); - block.append(wrapper); - } else { - const observer = new IntersectionObserver((entries) => { - if (entries.some((e) => e.isIntersecting)) { - observer.disconnect(); - loadEmbed(block, link); - } - }); - observer.observe(block); - } - } \ No newline at end of file + return embedHTML; +}; + +const embedTwitter = (url) => { + const embedHTML = ``; + loadScript('https://platform.twitter.com/widgets.js'); + return embedHTML; +}; + +const loadEmbed = (block, link, autoplay) => { + if (block.classList.contains('embed-is-loaded')) { + return; + } + + const EMBEDS_CONFIG = [ + { + match: ['youtube', 'youtu.be'], + embed: embedYoutube, + }, + { + match: ['vimeo'], + embed: embedVimeo, + }, + { + match: ['twitter'], + embed: embedTwitter, + }, + ]; + + const config = EMBEDS_CONFIG.find((e) => e.match.some((match) => link.includes(match))); + const url = new URL(link); + if (config) { + block.innerHTML = config.embed(url, autoplay); + block.classList = `block embed embed-${config.match[0]}`; + } else { + block.innerHTML = getDefaultEmbed(url); + block.classList = 'block embed'; + } + block.classList.add('embed-is-loaded'); +}; + +export default function decorate(block) { + const placeholder = block.querySelector('picture'); + const link = block.querySelector('a').href; + block.textContent = ''; + + if (placeholder) { + const wrapper = document.createElement('div'); + wrapper.className = 'embed-placeholder'; + wrapper.innerHTML = '
'; + wrapper.prepend(placeholder); + wrapper.addEventListener('click', () => { + loadEmbed(block, link, true); + }); + block.append(wrapper); + } else { + const observer = new IntersectionObserver((entries) => { + if (entries.some((e) => e.isIntersecting)) { + observer.disconnect(); + loadEmbed(block, link); + } + }); + observer.observe(block); + } +} From efd2111fac38b2e4ae57a19d84c12e381e525a04 Mon Sep 17 00:00:00 2001 From: TeshuKatepalli Date: Thu, 12 Oct 2023 22:58:30 +0530 Subject: [PATCH 3/5] Updated the script files --- head.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/head.html b/head.html index 85e0113f..b41145f2 100644 --- a/head.html +++ b/head.html @@ -9,8 +9,8 @@ - - - - + + + + From db291870e09e944213cae71287cb8dcb51cba10b Mon Sep 17 00:00:00 2001 From: Pardeep Gera Date: Fri, 13 Oct 2023 09:19:31 +0530 Subject: [PATCH 4/5] Included the gtm script --- scripts/delayed.js | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/scripts/delayed.js b/scripts/delayed.js index 4f632597..ada4b1d4 100644 --- a/scripts/delayed.js +++ b/scripts/delayed.js @@ -5,3 +5,35 @@ import { sampleRUM } from './aem.js'; sampleRUM('cwv'); // add more delayed functionality here + +// google tag manager -start +function loadGTM() { + const scriptTag = document.createElement('script'); + scriptTag.innerHTML = ` + let gtmId = 'GTM-MLWV3QQ'; + // googleTagManager + (function (w, d, s, l, i) { + w[l] = w[l] || []; + w[l].push({ + 'gtm.start': + new Date().getTime(), event: 'gtm.js' + }); + var f = d.getElementsByTagName(s)[0], + j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; + j.async = true; + j.src = + 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; + f.parentNode.insertBefore(j, f); + })(window, document, 'script', 'dataLayer', gtmId); + `; + document.head.prepend(scriptTag); +} +// google tag manager -start + +if ( + !window.location.hostname.includes('localhost') + && !document.location.hostname.includes('.hlx.page') +) { + loadGTM(); +} + From 3e8be66b7e3d41b8205fa37ca7435cf28a9f2de9 Mon Sep 17 00:00:00 2001 From: Pardeep Gera Date: Fri, 13 Oct 2023 09:32:38 +0530 Subject: [PATCH 5/5] fixed linting issues --- scripts/delayed.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/scripts/delayed.js b/scripts/delayed.js index ada4b1d4..07651689 100644 --- a/scripts/delayed.js +++ b/scripts/delayed.js @@ -8,8 +8,8 @@ sampleRUM('cwv'); // google tag manager -start function loadGTM() { - const scriptTag = document.createElement('script'); - scriptTag.innerHTML = ` + const scriptTag = document.createElement('script'); + scriptTag.innerHTML = ` let gtmId = 'GTM-MLWV3QQ'; // googleTagManager (function (w, d, s, l, i) { @@ -26,14 +26,13 @@ function loadGTM() { f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', gtmId); `; - document.head.prepend(scriptTag); + document.head.prepend(scriptTag); } // google tag manager -start if ( - !window.location.hostname.includes('localhost') + !window.location.hostname.includes('localhost') && !document.location.hostname.includes('.hlx.page') ) { - loadGTM(); + loadGTM(); } -