Initial commit to github

static/js/components/backToTop.js

@@ -0,0 +1,23 @@
+// Back to Top Button Component
+class BackToTopButton extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+      <button id="backToTopBtn" aria-label="Back to top" class="back-to-top" style="display:none;position:fixed;bottom:2rem;right:2rem;z-index:1000;padding:0.75em 1.5em;font-size:1.1rem;border-radius:2em;background:var(--color-primary,#3857BC);color:#fff;border:none;box-shadow:0 2px 8px rgba(0,0,0,0.15);cursor:pointer;transition:opacity 0.2s;">
+        ↑ Top
+      </button>
+    `;
+    const btn = this.querySelector('#backToTopBtn');
+    window.addEventListener('scroll', () => {
+      btn.style.display = window.scrollY > 300 ? 'block' : 'none';
+    });
+    btn.addEventListener('click', () => {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    });
+  }
+}
+
+export function registerBackToTopButton() {
+  if (!customElements.get('back-to-top')) {
+    customElements.define('back-to-top', BackToTopButton);
+  }
+}

static/js/components/button.js

@@ -0,0 +1,76 @@
+class ButtonComponent extends HTMLElement {
+  /**
+   * Parameters
+   *  - btnClasses: Additional classes to add to the block.
+   *  - element: The element to use for the button. Defaults to 'a'.
+   *  - url: The URL to link to.
+   *  - target: The target for the link.
+   *  - title: The text to display on the button.
+   *  - color: The color of the button.
+   *  - variant: The variant of the button.
+   *  - size: The size of the button.
+   *  - width: The width of the button.
+   *
+   */
+
+  connectedCallback() {
+    if (!this.querySelector(this.getAttribute('element'))) {
+      this.append(document.createElement(this.getAttribute('element')));
+    }
+
+    this.update();
+  }
+
+  static get observedAttributes() {
+    return [
+      'btnClasses',
+      'el',
+      'element',
+      'type',
+      'url',
+      'target',
+      'title',
+      'color',
+      'variant',
+      'size',
+      'width',
+    ]
+  }
+
+  attributeChangedCallback() {
+    this.update();
+  }
+
+  update() {
+    const btn = this.querySelector(this.getAttribute('element'));
+
+    if (btn) {
+      btn.classList = this.getAttribute('btnClasses') || '';
+
+      if (this.getAttribute('element') == 'a') {
+        btn.href = this.getAttribute('url') || '#';
+
+        if (btn.target) {
+          btn.target = 'target="${this.getAttribute(target)}"';
+        }
+      }
+
+      const type = this.getAttribute('type');
+      if (type && this.getAttribute('element') !== 'a') {
+        btn.type = type;
+      }
+
+      btn.title        = this.getAttribute('title') || '';
+      btn.textContent  = this.getAttribute('title') || '';
+
+      btn.setAttribute('data-button-color',   this.getAttribute('color'));
+      btn.setAttribute('data-button-variant', this.getAttribute('variant'));
+      btn.setAttribute('data-button-size',    this.getAttribute('size'));
+      btn.setAttribute('data-button-width',   this.getAttribute('width'));
+    }
+  }
+}
+
+export const registerButtonComponent = () => {
+  customElements.define('x-button', ButtonComponent);
+}