@ribajs/shopify
Version:
Shopify extension for Riba.js
68 lines • 5.08 kB
JavaScript
import { Component } from "@ribajs/core";
import { Pjax, Prefetch } from "@ribajs/router";
export class ShopifyProductScrollbarComponent extends Component {
static tagName = "shopify-product-scrollbar";
static get observedAttributes() {
return [];
}
scope = {
onScroll: this.onScroll,
onProductTap: this.onProductTap,
onProductMouseenter: this.onProductMouseenter,
title: "",
};
products = null;
constructor() {
super();
}
connectedCallback() {
super.connectedCallback();
this.products = this.querySelectorAll(".embed-responsive");
this.init(ShopifyProductScrollbarComponent.observedAttributes);
}
onProductTap(event, scope, eventEl) {
const url = eventEl.dataset.url;
if (!url) {
return;
}
const pjax = Pjax.getInstance("main");
if (!pjax) {
return;
}
pjax.goTo(url);
}
onProductMouseenter(event, scope, eventEl) {
const url = eventEl.dataset.url;
const prefetch = Prefetch.getInstance();
if (!prefetch) {
return;
}
if (!url) {
return;
}
prefetch.onLinkEnter(url, eventEl, event);
}
onScroll(event, scope, eventEl) {
if (this.products) {
for (let i = 0; i < this.products.length; i++) {
const product = this.products[i];
const productData = product.dataset;
const parentRect = eventEl.getBoundingClientRect();
const elementRect = product.getBoundingClientRect();
const elementMiddle = elementRect.width / 2;
const centerX = elementRect.left - (parentRect.width / 2 - elementMiddle);
const offset = elementMiddle;
if (centerX > offset * -1 && centerX < offset) {
this.scope.title = productData.title;
}
}
}
}
requiredAttributes() {
return [];
}
template() {
return null;
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZHVjdC1zY3JvbGxiYXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvcHJvZHVjdC1zY3JvbGxiYXIvcHJvZHVjdC1zY3JvbGxiYXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQW9CLE1BQU0sY0FBYyxDQUFDO0FBQzNELE9BQU8sRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFFaEQsTUFBTSxPQUFPLGdDQUFpQyxTQUFRLFNBQVM7SUFDdEQsTUFBTSxDQUFDLE9BQU8sR0FBRywyQkFBMkIsQ0FBQztJQUVwRCxNQUFNLEtBQUssa0JBQWtCO1FBQzNCLE9BQU8sRUFBRSxDQUFDO0lBQ1osQ0FBQztJQUVNLEtBQUssR0FBUTtRQUNsQixRQUFRLEVBQUUsSUFBSSxDQUFDLFFBQVE7UUFDdkIsWUFBWSxFQUFFLElBQUksQ0FBQyxZQUFZO1FBQy9CLG1CQUFtQixFQUFFLElBQUksQ0FBQyxtQkFBbUI7UUFDN0MsS0FBSyxFQUFFLEVBQUU7S0FDVixDQUFDO0lBRVEsUUFBUSxHQUFtQyxJQUFJLENBQUM7SUFFMUQ7UUFDRSxLQUFLLEVBQUUsQ0FBQztJQUNWLENBQUM7SUFNUyxpQkFBaUI7UUFDekIsS0FBSyxDQUFDLGlCQUFpQixFQUFFLENBQUM7UUFDMUIsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsbUJBQW1CLENBQUMsQ0FBQztRQUMzRCxJQUFJLENBQUMsSUFBSSxDQUFDLGdDQUFnQyxDQUFDLGtCQUFrQixDQUFDLENBQUM7SUFDakUsQ0FBQztJQUtNLFlBQVksQ0FBQyxLQUFZLEVBQUUsS0FBVSxFQUFFLE9BQW9CO1FBQ2hFLE1BQU0sR0FBRyxHQUFHLE9BQU8sQ0FBQyxPQUFPLENBQUMsR0FBRyxDQUFDO1FBQ2hDLElBQUksQ0FBQyxHQUFHLEVBQUUsQ0FBQztZQUNULE9BQU87UUFDVCxDQUFDO1FBQ0QsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUN0QyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7WUFDVixPQUFPO1FBQ1QsQ0FBQztRQUNELElBQUksQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDakIsQ0FBQztJQUtNLG1CQUFtQixDQUFDLEtBQVksRUFBRSxLQUFVLEVBQUUsT0FBb0I7UUFDdkUsTUFBTSxHQUFHLEdBQUcsT0FBTyxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUM7UUFDaEMsTUFBTSxRQUFRLEdBQUcsUUFBUSxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQ3hDLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztZQUNkLE9BQU87UUFDVCxDQUFDO1FBQ0QsSUFBSSxDQUFDLEdBQUcsRUFBRSxDQUFDO1lBQ1QsT0FBTztRQUNULENBQUM7UUFDRCxRQUFRLENBQUMsV0FBVyxDQUFDLEdBQUcsRUFBRSxPQUE0QixFQUFFLEtBQUssQ0FBQyxDQUFDO0lBQ2pFLENBQUM7SUFLTSxRQUFRLENBQUMsS0FBWSxFQUFFLEtBQVUsRUFBRSxPQUFvQjtRQUM1RCxJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztZQUNsQixLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxNQUFNLEVBQUUsQ0FBQyxFQUFFLEVBQUUsQ0FBQztnQkFDOUMsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FBQztnQkFDakMsTUFBTSxXQUFXLEdBQUcsT0FBTyxDQUFDLE9BQU8sQ0FBQztnQkFDcEMsTUFBTSxVQUFVLEdBQUcsT0FBTyxDQUFDLHFCQUFxQixFQUFFLENBQUM7Z0JBQ25ELE1BQU0sV0FBVyxHQUFHLE9BQU8sQ0FBQyxxQkFBcUIsRUFBRSxDQUFDO2dCQUNwRCxNQUFNLGFBQWEsR0FBRyxXQUFXLENBQUMsS0FBSyxHQUFHLENBQUMsQ0FBQztnQkFFNUMsTUFBTSxPQUFPLEdBQ1gsV0FBVyxDQUFDLElBQUksR0FBRyxDQUFDLFVBQVUsQ0FBQyxLQUFLLEdBQUcsQ0FBQyxHQUFHLGFBQWEsQ0FBQyxDQUFDO2dCQUM1RCxNQUFNLE1BQU0sR0FBRyxhQUFhLENBQUM7Z0JBRTdCLElBQUksT0FBTyxHQUFHLE1BQU0sR0FBRyxDQUFDLENBQUMsSUFBSSxPQUFPLEdBQUcsTUFBTSxFQUFFLENBQUM7b0JBQzlDLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxHQUFHLFdBQVcsQ0FBQyxLQUFLLENBQUM7Z0JBQ3ZDLENBQUM7WUFDSCxDQUFDO1FBQ0gsQ0FBQztJQUNILENBQUM7SUFFUyxrQkFBa0I7UUFDMUIsT0FBTyxFQUFFLENBQUM7SUFDWixDQUFDO0lBRVMsUUFBUTtRQUNoQixPQUFPLElBQUksQ0FBQztJQUNkLENBQUMifQ==