Skip to content

Commit

Permalink
chore: refactor number 2
Browse files Browse the repository at this point in the history
davidnuescheler committed Jul 11, 2024
1 parent c2efe45 commit 84563a8
Showing 4 changed files with 34 additions and 41 deletions.
7 changes: 7 additions & 0 deletions blocks/fragment/fragment.js
Original file line number Diff line number Diff line change
@@ -24,12 +24,19 @@ export async function loadFragment(path) {
const main = document.createElement('main');
main.innerHTML = await resp.text();

/* remove paths of self references */
const { pathname } = new URL(path, window.location);
main.querySelectorAll(`a[href^="${pathname}#"]`).forEach((a) => {
a.href = `#${a.href.split('#')[1]}`;
});

// reset base path for media to fragment base
const resetAttributeBase = (tag, attr) => {
main.querySelectorAll(`${tag}[${attr}^="./media_"]`).forEach((elem) => {
elem[attr] = new URL(elem.getAttribute(attr), new URL(path, window.location)).href;
});
};

resetAttributeBase('img', 'src');
resetAttributeBase('source', 'srcset');

40 changes: 21 additions & 19 deletions scripts/consent.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
/**
* Display Consent Banner and return consent details
* Handles consent, including the loading of consented.js
* where needed.
*
* Dispatches `consent` event on document on change
*/

// eslint-disable-next-line import/no-cycle
@@ -16,16 +19,19 @@ function createButton(text, clickHandler, style, label) {
}

/* display consent banner */
function displayConsentBanner(consentBanner) {
export async function displayConsentBanner() {
const consentBanner = (await loadFragment('/drafts/uncled/consent-banner')).firstElementChild;

const bannerClose = new Promise((resolve) => {
const dialog = document.createElement('dialog');

const storeAndClose = (status) => {
localStorage.setItem('consentStatus', status);
dialog.remove();
resolve(status);
// eslint-disable-next-line no-use-before-define
displayConsentLink(consentBanner);
document.dispatchEvent(new CustomEvent('consent', { detail: { consentStatus: status } }));
const loc = window.location;
if (loc.hash === '#consent') window.history.pushState({}, null, `${loc.pathname}${loc.search}`);
};

const close = () => { storeAndClose('declineAll'); };
@@ -48,30 +54,26 @@ function displayConsentBanner(consentBanner) {
return bannerClose;
}

/* display consent link */
function displayConsentLink(consentBanner) {
const div = document.createElement('div');
div.id = 'consent-link';
const button = createButton(consentBanner.dataset.shortTitle, async () => {
div.remove();
await displayConsentBanner(consentBanner);
}, 'secondary');
div.append(button);
document.body.append(div);
}

/* main consent handler */
export default async function handleConsent() {
const mapStatus = (consentStatus) => {
if (consentStatus === 'declineAll') return false;
return true;
};

document.addEventListener('consent', (e) => {
if (mapStatus(e.detail.consentStatus)) import('./consented.js');
});

const consentStatus = localStorage.getItem('consentStatus');
const consentBanner = (await loadFragment('/drafts/uncled/consent-banner')).firstElementChild;

if (consentStatus === null) {
return mapStatus(await displayConsentBanner(consentBanner));
return mapStatus(await displayConsentBanner());
}
displayConsentLink(consentBanner);

window.addEventListener('hashchange', (e) => {
if (new URL(e.newURL).hash === '#consent') displayConsentBanner();
});

return mapStatus(consentStatus);
}
12 changes: 2 additions & 10 deletions scripts/scripts.js
Original file line number Diff line number Diff line change
@@ -116,23 +116,15 @@ async function loadLazy(doc) {
sampleRUM.observe(main.querySelectorAll('picture > img'));
}

/**
* Checks consent asynchronously and returns true if consented.js
* can be loaded (which should contain the tag manager).
*/
async function checkConsent() {
async function handleConsent() {
const mod = await import('./consent.js');

Check failure on line 120 in scripts/scripts.js

GitHub Actions / build

Dependency cycle via ../blocks/fragment/fragment.js:9
return mod.default();
}

async function loadConsented() {
import('./consented.js');
}

async function loadPage() {
await loadEager(document);
await loadLazy(document);
if (await checkConsent()) loadConsented();
handleConsent();
}

loadPage();
16 changes: 4 additions & 12 deletions styles/lazy-styles.css
Original file line number Diff line number Diff line change
@@ -1,24 +1,20 @@
/* add global styles that can be loaded post LCP here */

dialog#consent-banner, div#consent-link {
dialog#consent-banner {
position: fixed;
left: 0;
bottom: 0;
background-color: var(--light-color);
max-width: 600px;
padding: 16px;
padding-right: 40px;
font-size: var(--body-font-size-xs);
margin: 16px;
border-radius: 32px;
border-radius: 16px;
border: 0;
box-shadow: 3px 3px 10px #0004;
}

dialog#consent-banner {
border-radius: 16px;
padding-right: 40px;
}

dialog#consent-banner p {
margin: 0px;
}
@@ -43,8 +39,4 @@ dialog#consent-banner .consent-banner-close {
color: unset;
background-color: unset;
margin: 0;
}

div#consent-link button {
margin: 0;
}
}

0 comments on commit 84563a8

Please sign in to comment.