Merge pull request #17 from hlxsites/general-improvements

456187 - Handle attributes values on breakpoint changes
hlxsites · Apr 4, 2024 · 605e202 · 605e202
2 parents a6b466e + 62102ab
commit 605e202
Show file tree

Hide file tree

Showing 21 changed files with 511 additions and 223 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -19,6 +19,9 @@ module.exports = {
     // allow reassigning param
     'no-param-reassign': [2, { props: false }],
     'linebreak-style': ['error', 'unix'],
+    semi: [2, 'always'],
+    quotes: [2, 'single', { avoidEscape: true }],
+    'no-multiple-empty-lines': ['error', { max: 1, maxEOF: 0 }],
     'import/extensions': [
       'error',
       {

diff --git a/.prettierrc b/.prettierrc
@@ -8,7 +8,7 @@
   "bracketSameLine": false,
   "jsxBracketSameLine": false,
   "jsxSingleQuote": true,
-  "printWidth": 80,
+  "printWidth": 120,
   "proseWrap": "preserve",
   "quoteProps": "as-needed",
   "requirePragma": false,

diff --git a/404.html b/404.html
@@ -9,26 +9,6 @@
   </script>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta property="og:title" content="Page not found">
-  <script src="/scripts/scripts.js" type="module" crossorigin="use-credentials"></script>
-  <script type="module">
-    import { sampleRUM } from '/scripts/lib-franklin.js';
-
-    window.addEventListener('load', () => {
-      if (document.referrer) {
-        const { origin, pathname } = new URL(document.referrer);
-        if (origin === window.location.origin) {
-          const backBtn = document.createElement('a');
-          backBtn.classList.add('button', 'error-button-back');
-          backBtn.href = pathname;
-          backBtn.textContent = 'Go back';
-          backBtn.title = 'Go back';
-          const btnContainer = document.querySelector('.button-container');
-          btnContainer.append(backBtn);
-        }
-      }
-      sampleRUM('404', { source: document.referrer, target: window.location.href });
-    });
-  </script>
   <link rel="stylesheet" href="/styles/styles.css">
   <style>
     main.error {
@@ -44,6 +24,9 @@
     main.error .error-number text {
       font-family: var(--fixed-font-family);
     }
+    html body {
+      display: unset;
+    }
   </style>
   <link rel="stylesheet" href="/styles/lazy-styles.css">
 </head>

diff --git a/blocks/accordion/accordion.js b/blocks/accordion/accordion.js
@@ -51,14 +51,8 @@ export default class Accordion extends ComponentBase {
     if (content) {
       content.classList.toggle('active');
       control.classList.toggle('active');
-      control.setAttribute(
-        'aria-expanded',
-        content.classList.contains('active'),
-      );
-      content.setAttribute(
-        'aria-hidden',
-        !content.classList.contains('active'),
-      );
+      control.setAttribute('aria-expanded', content.classList.contains('active'));
+      content.setAttribute('aria-hidden', !content.classList.contains('active'));
     }
   }
 
@@ -72,10 +66,7 @@ export default class Accordion extends ComponentBase {
       content.setAttribute('role', 'region');
       content.setAttribute('aria-hidden', true);
       content.classList.add('accordion-content');
-      content.setAttribute(
-        'aria-labelledby',
-        content.previousElementSibling.id,
-      );
+      content.setAttribute('aria-labelledby', content.previousElementSibling.id);
     });
   }
 }
diff --git a/blocks/card/card.js b/blocks/card/card.js
@@ -6,15 +6,10 @@ export default class Card extends ComponentBase {
 
   ready() {
     if (this.getAttribute('button') === 'true') {
-      Array.from(this.querySelectorAll('a')).forEach((a) =>
-        this.convertLink(a),
-      );
+      Array.from(this.querySelectorAll('a')).forEach((a) => this.convertLink(a));
     }
     this.eager = parseInt(this.getAttribute('eager') || 0, 10);
-    this.ratio = this.getAttribute('ratio') || '4/3';
-    this.style.setProperty('--card-ratio', this.ratio);
     this.classList.add('inner');
-    this.setupColumns(this.getAttribute('columns'));
     if (this.eager) {
       eagerImage(this, this.eager);
     }
@@ -27,14 +22,28 @@ export default class Card extends ComponentBase {
     a.replaceWith(button);
   }
 
+  setupRatio(ratio) {
+    this.ratio = ratio || '4/3';
+    this.style.setProperty('--card-ratio', this.ratio);
+  }
+
   setupColumns(columns) {
-    if (!columns) {
-      return;
-    }
+    if (!columns) return;
+
     this.columns = parseInt(columns, 10);
     this.area = Array.from(Array(parseInt(this.columns, 10)))
       .map(() => '1fr')
       .join(' ');
     this.style.setProperty('--card-columns', this.area);
   }
+
+  onAttributeColumnsChanged({ oldValue, newValue }) {
+    if (oldValue === newValue) return;
+    this.setupColumns(newValue);
+  }
+
+  onAttributeRatioChanged({ oldValue, newValue }) {
+    if (oldValue === newValue) return;
+    this.setupRatio(newValue);
+  }
 }
diff --git a/blocks/header/header.css b/blocks/header/header.css
@@ -1,8 +1,10 @@
 raqn-header {
   --scope-background: var(--scope-header-background, #fff);
   --scope-color: var(--scope-header-color, #000);
+  --scope-top: var(--scope-header-top, 0);
 
   position: fixed;
+  top: var(--scope-top);
   width: 100%;
   min-height: var(--scope-header-height, 64px);
   display: grid;

diff --git a/blocks/hero/hero.js b/blocks/hero/hero.js
@@ -9,6 +9,9 @@ export default class Hero extends ComponentBase {
     this.classList.add('full-width');
     this.setAttribute('role', 'banner');
     this.setAttribute('aria-label', 'hero');
-    this.style.setProperty('--hero-hero-order', this.getAttribute('order'));
+  }
+
+  onAttributeOrderChanged({ newValue }) {
+    this.style.setProperty('--hero-hero-order', newValue);
   }
 }
diff --git a/blocks/icon/icon.js b/blocks/icon/icon.js
@@ -28,6 +28,8 @@ export default class Icon extends ComponentBase {
   }
 
   async connected() {
+    this.setAttribute('aria-hidden', 'true');
+
     this.iconName = this.getAttribute('icon');
     if (!this.cache[this.iconName]) {
       this.cache[this.iconName] = {
@@ -52,7 +54,7 @@ export default class Icon extends ComponentBase {
         return '';
       })
       .join(' ');
-    return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ${attributes}><use xlink:href="#icons-sprite-${this.iconName}"/></svg>`;
+    return `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ${attributes}><use xlink:href="#icons-sprite-${this.iconName}"/></svg>`;
   }
 
   iconTemplate(iconName, svg, viewBox, width, height) {
@@ -70,14 +72,8 @@ export default class Icon extends ComponentBase {
           html: this.svg
             // rescope ids and references to avoid clashes across icons;
             .replaceAll(/ id="([^"]+)"/g, (_, id) => ` id="${iconName}-${id}"`)
-            .replaceAll(
-              /="url\(#([^)]+)\)"/g,
-              (_, id) => `="url(#${iconName}-${id})"`,
-            )
-            .replaceAll(
-              / xlink:href="#([^"]+)"/g,
-              (_, id) => ` xlink:href="#${iconName}-${id}"`,
-            ),
+            .replaceAll(/="url\(#([^)]+)\)"/g, (_, id) => `="url(#${iconName}-${id})"`)
+            .replaceAll(/ xlink:href="#([^"]+)"/g, (_, id) => ` xlink:href="#${iconName}-${id}"`),
         };
       } else {
         const dummy = document.createElement('div');
@@ -86,13 +82,7 @@ export default class Icon extends ComponentBase {
         const width = svg.getAttribute('width');
         const height = svg.getAttribute('height');
         const viewBox = svg.getAttribute('viewBox');
-        svg.innerHTML = this.iconTemplate(
-          iconName,
-          svg,
-          viewBox,
-          width,
-          height,
-        );
+        svg.innerHTML = this.iconTemplate(iconName, svg, viewBox, width, height);
         this.cache[iconName].width = width;
         this.cache[iconName].height = height;
         this.cache[iconName].viewBox = viewBox;

diff --git a/blocks/navigation/navigation.js b/blocks/navigation/navigation.js
@@ -4,38 +4,85 @@ import ComponentBase from '../../scripts/component-base.js';
 export default class Navigation extends ComponentBase {
   static observedAttributes = ['icon', 'compact'];
 
+  attributesValues = {
+    compact: {
+      xs: 'true',
+      s: 'true',
+      m: 'true',
+      all: 'false',
+    },
+  };
+
   createButton() {
-    const button = document.createElement('button');
-    button.setAttribute('aria-label', 'Menu');
-    button.setAttribute('aria-expanded', 'false');
-    button.setAttribute('aria-controls', 'navigation');
-    button.setAttribute('aria-haspopup', 'true');
-    button.setAttribute('type', 'button');
-    button.setAttribute('tabindex', '0');
-    button.innerHTML = `<raqn-icon icon=menu></raqn-icon>`;
-    button.addEventListener('click', () => {
+    this.navButton = document.createElement('button');
+    this.navButton.setAttribute('aria-label', 'Menu');
+    this.navButton.setAttribute('aria-expanded', 'false');
+    this.navButton.setAttribute('aria-controls', 'navigation');
+    this.navButton.setAttribute('aria-haspopup', 'true');
+    this.navButton.setAttribute('type', 'button');
+    // this.navButton.setAttribute('tabindex', '0');
+    this.navButton.innerHTML = '<raqn-icon icon=menu></raqn-icon>';
+    this.navButton.addEventListener('click', () => {
       this.classList.toggle('active');
-      button.setAttribute('aria-expanded', this.classList.contains('active'));
+      this.navButton.setAttribute('aria-expanded', this.classList.contains('active'));
     });
-    return button;
+    return this.navButton;
   }
 
   ready() {
     this.active = {};
-    this.list = this.querySelector('ul');
+    this.navContent = this.querySelector('ul');
+    this.innerHTML = '';
+    this.navContentInit = false;
+    this.navCompactedContent = this.navContent.cloneNode(true); // the clone need to be done before `this.navContent` is modified
+    this.navCompactedContentInit = false;
     this.nav = document.createElement('nav');
-    this.nav.append(this.list);
+    this.append(this.nav);
     this.setAttribute('role', 'navigation');
-    this.compact = this.getAttribute('compact') === 'true' || false;
+
     this.icon = this.getAttribute('icon') || 'menu';
-    if (this.compact) {
-      this.nav.append(this.createButton());
+
+    this.isCompact = this.getAttribute('compact') === 'true';
+
+    if (this.isCompact) {
+      this.setupCompactedNav();
+    } else {
+      this.setupNav();
+    }
+  }
+
+  setupNav() {
+    if (!this.navContentInit) {
+      this.navContentInit = true;
+      this.setupClasses(this.navContent);
+    }
+
+    this.nav.append(this.navContent);
+  }
+
+  setupCompactedNav() {
+    if (!this.navCompactedContentInit) {
+      this.navCompactedContentInit = true;
       start({ name: 'accordion' });
+      this.setupClasses(this.navCompactedContent, true);
+      this.navCompactedContent.addEventListener('click', (e) => this.activate(e));
     }
-    this.append(this.nav);
-    this.setupClasses(this.list);
-    if (this.compact) {
-      this.addEventListener('click', (e) => this.activate(e));
+
+    this.nav.append(this.createButton());
+    this.nav.append(this.navCompactedContent);
+  }
+
+  onAttributeCompactChanged({ newValue }) {
+    if (!this.initialized) return;
+    this.isCompact = newValue === 'true';
+    this.nav.innerHTML = '';
+
+    if (this.isCompact) {
+      this.setupCompactedNav();
+    } else {
+      this.classList.remove('active');
+      this.navButton.removeAttribute('aria-expanded');
+      this.setupNav();
     }
   }
 
@@ -45,29 +92,30 @@ export default class Navigation extends ComponentBase {
     return icon;
   }
 
-  creaeteAccordion(replaceChildrenElement) {
+  createAccordion(replaceChildrenElement) {
     const accordion = document.createElement('raqn-accordion');
     const children = Array.from(replaceChildrenElement.children);
     accordion.append(...children);
     replaceChildrenElement.append(accordion);
   }
 
-  setupClasses(ul, level = 1) {
+  setupClasses(ul, isCompact, level = 1) {
     const children = Array.from(ul.children);
+
     children.forEach((child) => {
       const hasChildren = child.querySelector('ul');
       child.classList.add(`level-${level}`);
       child.dataset.level = level;
 
       if (hasChildren) {
         const anchor = child.querySelector('a');
-        if (this.compact) {
-          this.creaeteAccordion(child);
+        if (isCompact) {
+          this.createAccordion(child);
         } else if (level === 1) {
           anchor.append(this.createIcon('chevron-right'));
         }
         child.classList.add('has-children');
-        this.setupClasses(hasChildren, level + 1);
+        this.setupClasses(hasChildren, isCompact, level + 1);
       }
     });
   }

diff --git a/blocks/router/router.js b/blocks/router/router.js
@@ -17,10 +17,7 @@ export default class Router extends ComponentBase {
     document.addEventListener(
       'click',
       (event) => {
-        if (
-          event.target.tagName === 'A' &&
-          event.target.href.startsWith(window.location.origin)
-        ) {
+        if (event.target.tagName === 'A' && event.target.href.startsWith(window.location.origin)) {
           event.preventDefault();
           this.setAttribute('external', event.target.href);
         }

diff --git a/blocks/section-metadata/section-metadata.js b/blocks/section-metadata/section-metadata.js
@@ -1,4 +1,4 @@
-import { collectParams } from '../../scripts/libs.js';
+import { collectAttributes } from '../../scripts/libs.js';
 import ComponentBase from '../../scripts/component-base.js';
 import ComponentMixin from '../../scripts/component-mixin.js';
 
@@ -7,13 +7,13 @@ export default class SectionMetadata extends ComponentBase {
     const classes = [...this.querySelectorAll(':scope > div > div:first-child')]
       .map((keyCell) => `${keyCell.textContent.trim()}-${keyCell.nextElementSibling.textContent.trim()}`);
 
-    const params = collectParams('section-metadata', classes, await ComponentMixin.getMixins(), this.knownAttributes);
+    const { currentAttributes } = collectAttributes('section-metadata', classes, await ComponentMixin.getMixins(), this.knownAttributes, this);
     const section = this.parentElement;
-    Object.keys(params).forEach((key) => {
+    Object.keys(currentAttributes).forEach((key) => {
       if(key === 'class') {
-        section.setAttribute(key, params[key]);
+        section.setAttribute(key, currentAttributes[key]);
       } else {
-        section.setAttribute(`data-${key}`, params[key]);
+        section.setAttribute(`data-${key}`, currentAttributes[key]);
       }
     });
     await ComponentMixin.startAll(section);