initial commit

2026-08-24 21:41:12 +02:00
commit 5c952a25b1
367 changed files with 134961 additions and 0 deletions
@@ -0,0 +1,132 @@
+if (!customElements.get('pickup-availability')) {
+  customElements.define(
+    'pickup-availability',
+    class PickupAvailability extends HTMLElement {
+      constructor() {
+        super();
+
+        if (!this.hasAttribute('available')) return;
+
+        this.errorHtml = this.querySelector('template').content.firstElementChild.cloneNode(true);
+        this.onClickRefreshList = this.onClickRefreshList.bind(this);
+        this.fetchAvailability(this.dataset.variantId);
+      }
+
+      fetchAvailability(variantId) {
+        if (!variantId) return;
+
+        let rootUrl = this.dataset.rootUrl;
+        if (!rootUrl.endsWith('/')) {
+          rootUrl = rootUrl + '/';
+        }
+        const variantSectionUrl = `${rootUrl}variants/${variantId}/?section_id=pickup-availability`;
+
+        fetch(variantSectionUrl)
+          .then((response) => response.text())
+          .then((text) => {
+            const sectionInnerHTML = new DOMParser()
+              .parseFromString(text, 'text/html')
+              .querySelector('.shopify-section');
+            this.renderPreview(sectionInnerHTML);
+          })
+          .catch((e) => {
+            const button = this.querySelector('button');
+            if (button) button.removeEventListener('click', this.onClickRefreshList);
+            this.renderError();
+          });
+      }
+
+      onClickRefreshList() {
+        this.fetchAvailability(this.dataset.variantId);
+      }
+
+      update(variant) {
+        if (variant?.available) {
+          this.fetchAvailability(variant.id);
+        } else {
+          this.removeAttribute('available');
+          this.innerHTML = '';
+        }
+      }
+
+      renderError() {
+        this.innerHTML = '';
+        this.appendChild(this.errorHtml);
+
+        this.querySelector('button').addEventListener('click', this.onClickRefreshList);
+      }
+
+      renderPreview(sectionInnerHTML) {
+        const drawer = document.querySelector('pickup-availability-drawer');
+        if (drawer) drawer.remove();
+        if (!sectionInnerHTML.querySelector('pickup-availability-preview')) {
+          this.innerHTML = '';
+          this.removeAttribute('available');
+          return;
+        }
+
+        this.innerHTML = sectionInnerHTML.querySelector('pickup-availability-preview').outerHTML;
+        this.setAttribute('available', '');
+
+        document.body.appendChild(sectionInnerHTML.querySelector('pickup-availability-drawer'));
+        const colorClassesToApply = this.dataset.productPageColorScheme.split(' ');
+        colorClassesToApply.forEach((colorClass) => {
+          document.querySelector('pickup-availability-drawer').classList.add(colorClass);
+        });
+
+        const button = this.querySelector('button');
+        if (button)
+          button.addEventListener('click', (evt) => {
+            document.querySelector('pickup-availability-drawer').show(evt.target);
+          });
+      }
+    }
+  );
+}
+
+if (!customElements.get('pickup-availability-drawer')) {
+  customElements.define(
+    'pickup-availability-drawer',
+    class PickupAvailabilityDrawer extends HTMLElement {
+      constructor() {
+        super();
+
+        this.onBodyClick = this.handleBodyClick.bind(this);
+
+        this.querySelector('button').addEventListener('click', () => {
+          this.hide();
+        });
+
+        this.addEventListener('keyup', (event) => {
+          if (event.code.toUpperCase() === 'ESCAPE') this.hide();
+        });
+      }
+
+      handleBodyClick(evt) {
+        const target = evt.target;
+        if (
+          target != this &&
+          !target.closest('pickup-availability-drawer') &&
+          target.id != 'ShowPickupAvailabilityDrawer'
+        ) {
+          this.hide();
+        }
+      }
+
+      hide() {
+        this.removeAttribute('open');
+        document.body.removeEventListener('click', this.onBodyClick);
+        document.body.classList.remove('overflow-hidden');
+        removeTrapFocus(this.focusElement);
+      }
+
+      show(focusElement) {
+        this.focusElement = focusElement;
+        this.setAttribute('open', '');
+        document.body.addEventListener('click', this.onBodyClick);
+        document.body.classList.add('overflow-hidden');
+        trapFocus(this);
+      }
+    }
+  );
+}