FrontendComponents/helper-functions
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dodanie reinit swiper scrollbar

Browse Source
This commit is contained in:
pawel.gaca
2025-12-19 11:16:19 +01:00
parent 5b4582b098
commit 49a399db5d
2 changed files with 82 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
XMLtoGraphQL/script.js
View File

@@ -2,11 +2,11 @@ function idmGetGrossNetPrices({priceNode, name}){
return { return {
gross: { gross: {
value: priceNode?.getAttribute(`${name}`) !== null ? +priceNode?.getAttribute(`${name}`) : undefined, value: priceNode?.getAttribute(`${name}`) !== null ? +priceNode?.getAttribute(`${name}`) : undefined,
formatted: priceNode?.getAttribute(`${name}_formatted`) ?? undefined, formatted: priceNode?.getAttribute(`${name}_formatted`),
}, },
net: { net: {
value: priceNode?.getAttribute(`${name}_net`) !== null ? +priceNode?.getAttribute(`${name}_net`) : undefined, value: priceNode?.getAttribute(`${name}_net`) !== null ? +priceNode?.getAttribute(`${name}_net`) : undefined,
formatted: priceNode?.getAttribute(`${name}_net_formatted`) ?? undefined, formatted: priceNode?.getAttribute(`${name}_net_formatted`),
} }
} }
} }
@@ -16,11 +16,11 @@ function idmGetPriceFromNode(priceNode){
price: { price: {
gross: { gross: {
value: priceNode?.getAttribute("value") !== null ? +priceNode.getAttribute("value") : undefined, value: priceNode?.getAttribute("value") !== null ? +priceNode.getAttribute("value") : undefined,
formatted: priceNode?.getAttribute("price_formatted") ?? undefined, formatted: priceNode?.getAttribute("price_formatted"),
}, },
net: { net: {
value: priceNode?.getAttribute("price_net") !== null ? +priceNode.getAttribute("price_net") : undefined, value: priceNode?.getAttribute("price_net") !== null ? +priceNode.getAttribute("price_net") : undefined,
formatted: priceNode?.getAttribute("price_net_formatted") ?? undefined, formatted: priceNode?.getAttribute("price_net_formatted"),
} }
}, },
rebateCodeActive: priceNode?.getAttribute("rebate_code_active") === "y" ? true : false, rebateCodeActive: priceNode?.getAttribute("rebate_code_active") === "y" ? true : false,
@@ -70,21 +70,21 @@ function idmGetPriceFromNode(priceNode){
...idmGetGrossNetPrices({priceNode, name: "unit_converted_price"}) ...idmGetGrossNetPrices({priceNode, name: "unit_converted_price"})
}, },
// rebateNumber: {}, // rebateNumber: {},
lastPriceChangeDate: priceNode?.getAttribute("last_price_change_date") ?? undefined, lastPriceChangeDate: priceNode?.getAttribute("last_price_change_date"),
// advancePrice: {}, // advancePrice: {},
promotionDuration: { promotionDuration: {
promotionTill: { promotionTill: {
date: { date: {
date: priceNode?.getAttribute("last_price_change_date")?.split("-")?.[2] ?? undefined, date: priceNode?.getAttribute("last_price_change_date")?.split("-")?.[2],
month: priceNode?.getAttribute("last_price_change_date")?.split("-")?.[1] ?? undefined, month: priceNode?.getAttribute("last_price_change_date")?.split("-")?.[1],
year: priceNode?.getAttribute("last_price_change_date")?.split("-")?.[0] ?? undefined, year: priceNode?.getAttribute("last_price_change_date")?.split("-")?.[0],
// weekDay: "", // weekDay: "",
// formatted: "" // formatted: ""
}, },
time: { time: {
hour: priceNode?.getAttribute("promotiontillhour")?.split(":")?.[0] ?? undefined, hour: priceNode?.getAttribute("promotiontillhour")?.split(":")?.[0],
minutes: priceNode?.getAttribute("promotiontillhour")?.split(":")?.[1] ?? undefined, minutes: priceNode?.getAttribute("promotiontillhour")?.split(":")?.[1],
seconds: priceNode?.getAttribute("promotiontillhour")?.split(":")?.[2] ?? undefined, seconds: priceNode?.getAttribute("promotiontillhour")?.split(":")?.[2],
}, },
// timestamp: "" // timestamp: ""
}, },
@@ -103,8 +103,8 @@ function idmGetTraitsFromNode(node){
node.querySelectorAll(":scope > trait").forEach(trait=>{ node.querySelectorAll(":scope > trait").forEach(trait=>{
const currParameter = awardedParameters.find(param=>param.id === trait.getAttribute("groupid")) || { const currParameter = awardedParameters.find(param=>param.id === trait.getAttribute("groupid")) || {
id: trait.getAttribute("groupid") ?? undefined, id: trait.getAttribute("groupid"),
name: trait.getAttribute("groupdescription") ?? undefined, name: trait.getAttribute("groupdescription"),
// description: "", // description: "",
values: [], values: [],
// contextValue: "", // contextValue: "",
@@ -114,9 +114,9 @@ function idmGetTraitsFromNode(node){
} }
currParameter.values.push({ currParameter.values.push({
id: trait.getAttribute("traitid") ?? undefined, id: trait.getAttribute("traitid"),
name: trait.getAttribute("traitid") ?? undefined, name: trait.getAttribute("traitid"),
link: trait.getAttribute("link") ?? undefined, link: trait.getAttribute("link"),
// description: "", // description: "",
// search: { // search: {
// icon: "" // icon: ""
@@ -170,21 +170,21 @@ async function idmGetGraphQLData(link){
const enclosuresImages = []; const enclosuresImages = [];
prod.querySelectorAll(":scope > enclosures > images > enclosure").forEach(img=>{ prod.querySelectorAll(":scope > enclosures > images > enclosure").forEach(img=>{
enclosuresImages.push({ enclosuresImages.push({
position: img.getAttribute("position") ?? undefined, position: img.getAttribute("position"),
type: img.getAttribute("type") ?? undefined, type: img.getAttribute("type"),
typeSecond: img.getAttribute("type_second") ?? undefined, typeSecond: img.getAttribute("type_second"),
url: img.getAttribute("url") ?? undefined, url: img.getAttribute("url"),
urlSecond: img.getAttribute("url_second") ?? undefined, urlSecond: img.getAttribute("url_second"),
width: img.getAttribute("width") ?? undefined, width: img.getAttribute("width"),
height: img.getAttribute("height") ?? undefined, height: img.getAttribute("height"),
iconUrl: img.getAttribute("icon") ?? undefined, iconUrl: img.getAttribute("icon"),
iconUrlSecond: img.getAttribute("icon_second") ?? undefined, iconUrlSecond: img.getAttribute("icon_second"),
iconWidth: img.getAttribute("icon_width") ?? undefined, iconWidth: img.getAttribute("icon_width"),
iconHeight: img.getAttribute("icon_height") ?? undefined, iconHeight: img.getAttribute("icon_height"),
mediumUrl: img.getAttribute("medium") ?? undefined, mediumUrl: img.getAttribute("medium"),
mediumUrlSecond: img.getAttribute("medium_second") ?? undefined, mediumUrlSecond: img.getAttribute("medium_second"),
mediumWidth: img.getAttribute("medium_width") ?? undefined, mediumWidth: img.getAttribute("medium_width"),
mediumHeight: img.getAttribute("medium_height") ?? undefined, mediumHeight: img.getAttribute("medium_height"),
}) })
}) })
@@ -197,11 +197,11 @@ async function idmGetGraphQLData(link){
const weightNode = size.querySelector(":scope > weight"); const weightNode = size.querySelector(":scope > weight");
sizes.push({ sizes.push({
id: size?.getAttribute("type") ?? undefined, id: size?.getAttribute("type"),
name: size?.getAttribute("name") ?? undefined, name: size?.getAttribute("name"),
code: size?.getAttribute("code") ?? undefined, code: size?.getAttribute("code"),
codeProducer: size?.getAttribute("code_producer") ?? undefined, codeProducer: size?.getAttribute("code_producer"),
codeExtern: size?.getAttribute("code_extern") ?? undefined, codeExtern: size?.getAttribute("code_extern"),
amount: size?.getAttribute("amount") !== null ? +size.getAttribute("amount") : undefined, amount: size?.getAttribute("amount") !== null ? +size.getAttribute("amount") : undefined,
amount_mo: size?.getAttribute("amount_mo") !== null ? +size.getAttribute("amount_mo") : undefined, amount_mo: size?.getAttribute("amount_mo") !== null ? +size.getAttribute("amount_mo") : undefined,
amount_mw: size?.getAttribute("amount_mw") !== null ? +size.getAttribute("amount_mw") : undefined, amount_mw: size?.getAttribute("amount_mw") !== null ? +size.getAttribute("amount_mw") : undefined,
@@ -209,11 +209,11 @@ async function idmGetGraphQLData(link){
weight: weightNode?.getAttribute("g") !== null ? +weightNode.getAttribute("g") : undefined, weight: weightNode?.getAttribute("g") !== null ? +weightNode.getAttribute("g") : undefined,
availability: { availability: {
visible: availabilityNode?.getAttribute("visible") === "y" ? true : false, visible: availabilityNode?.getAttribute("visible") === "y" ? true : false,
description: availabilityNode?.getAttribute("status_description") ?? undefined, description: availabilityNode?.getAttribute("status_description"),
status: availabilityNode?.getAttribute("status") ?? undefined, status: availabilityNode?.getAttribute("status"),
icon: availabilityNode?.getAttribute("status_gfx") ?? undefined, icon: availabilityNode?.getAttribute("status_gfx"),
deliveryDate: shippingTimeNode?.getAttribute("today") === "true" ? `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate().toString().padStart(2, 0)}` : availabilityNode?.getAttribute("delivery_date"), deliveryDate: shippingTimeNode?.getAttribute("today") === "true" ? `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate().toString().padStart(2, 0)}` : availabilityNode?.getAttribute("delivery_date"),
minimumStockOfProduct: availabilityNode?.getAttribute("minimum_stock_of_product") ?? undefined, minimumStockOfProduct: availabilityNode?.getAttribute("minimum_stock_of_product"),
// descriptionTel: "", // descriptionTel: "",
// iconTel: "", // iconTel: "",
}, },
@@ -230,81 +230,81 @@ async function idmGetGraphQLData(link){
versionsNode.querySelectorAll(":scope > version").forEach(ver=>{ versionsNode.querySelectorAll(":scope > version").forEach(ver=>{
versions.push({ versions.push({
id: ver?.getAttribute("id") !== null ? +ver?.getAttribute("id") : undefined, id: ver?.getAttribute("id") !== null ? +ver?.getAttribute("id") : undefined,
name: ver?.getAttribute("name") ?? undefined, name: ver?.getAttribute("name"),
icon: ver?.getAttribute("gfx") ?? undefined, icon: ver?.getAttribute("gfx"),
iconSecond: ver?.getAttribute("gfx_second") ?? undefined, iconSecond: ver?.getAttribute("gfx_second"),
iconSmall: ver?.getAttribute("gfx_small") ?? undefined, iconSmall: ver?.getAttribute("gfx_small"),
iconSmallSecond: ver?.getAttribute("gfx_small_second") ?? undefined, iconSmallSecond: ver?.getAttribute("gfx_small_second"),
productIcon: ver?.getAttribute("icon") ?? undefined, productIcon: ver?.getAttribute("icon"),
productIconSecond: ver?.getAttribute("icon_second") ?? undefined, productIconSecond: ver?.getAttribute("icon_second"),
productIconSmall: ver?.getAttribute("icon_small") ?? undefined, productIconSmall: ver?.getAttribute("icon_small"),
productIconSmallSecond: ver?.getAttribute("icon_small_second") ?? undefined, productIconSmallSecond: ver?.getAttribute("icon_small_second"),
link: ver?.getAttribute("link") ?? undefined, link: ver?.getAttribute("link"),
// parameterValues: [], // parameterValues: [],
}); });
}); });
// DATA // DATA
const typeParts = prod.getAttribute("product_type"); const typeParts = prod.getAttribute("product_type")?.split("_");
data.push({ data.push({
id: prod?.getAttribute("id") !== null ? +prod?.getAttribute("id") : undefined, id: prod?.getAttribute("id") !== null ? +prod?.getAttribute("id") : undefined,
type: typeParts[1] === "item" ? typeParts[0] : typeParts[1], type: typeParts[1] === "item" ? typeParts[0] : typeParts[1],
code: prod?.getAttribute("code") ?? undefined, code: prod?.getAttribute("code"),
name: prod.querySelector(":scope > name")?.textContent ?? undefined, name: prod.querySelector(":scope > name")?.textContent,
versionName: prod.querySelector(":scope > versions")?.getAttribute("name") ?? undefined, versionName: prod.querySelector(":scope > versions")?.getAttribute("name"),
description: prod.querySelector(":scope > description")?.textContent ?? undefined, description: prod.querySelector(":scope > description")?.textContent,
// longDescription: prod.querySelector("vlongdescription")?.textContent ?? undefined, // longDescription: prod.querySelector("vlongdescription")?.textContent,
// longDescriptionSections: "", // longDescriptionSections: "",
link: prod?.getAttribute("link"), link: prod?.getAttribute("link"),
zones, zones,
icon: prod.querySelector(":scope > icon")?.textContent ?? undefined, icon: prod.querySelector(":scope > icon")?.textContent,
iconSecond: prod.querySelector(":scope > icon_second")?.textContent ?? undefined, iconSecond: prod.querySelector(":scope > icon_second")?.textContent,
iconSmall: prod.querySelector(":scope > icon_small")?.textContent ?? undefined, iconSmall: prod.querySelector(":scope > icon_small")?.textContent,
iconSmallSecond: prod.querySelector(":scope > icon_small_second")?.textContent ?? undefined, iconSmallSecond: prod.querySelector(":scope > icon_small_second")?.textContent,
price: idmGetPriceFromNode(priceNode), price: idmGetPriceFromNode(priceNode),
unit: { unit: {
id: sizesNode?.getAttribute("unit_id") ?? undefined, id: sizesNode?.getAttribute("unit_id"),
// name: "", // name: "",
singular: sizesNode?.getAttribute("unit_single") !== null ? +sizesNode?.getAttribute("unit_single") : undefined, singular: sizesNode?.getAttribute("unit_single"),
plural: sizesNode?.getAttribute("unit_plural") ?? undefined, plural: sizesNode?.getAttribute("unit_plural"),
fraction: sizesNode?.getAttribute("unit_fraction") ?? undefined, fraction: sizesNode?.getAttribute("unit_fraction"),
sellBy: sizesNode?.getAttribute("unit_sellby") !== null ? +sizesNode?.getAttribute("unit_sellby") : undefined, sellBy: sizesNode?.getAttribute("unit_sellby") !== null ? +sizesNode?.getAttribute("unit_sellby") : undefined,
precision: sizesNode?.getAttribute("unit_precision") !== null ? +sizesNode?.getAttribute("unit_precision") : undefined, precision: sizesNode?.getAttribute("unit_precision") !== null ? +sizesNode?.getAttribute("unit_precision") : undefined,
unitConvertedFormat: sizesNode?.getAttribute("unit_converted_format") ?? undefined, unitConvertedFormat: sizesNode?.getAttribute("unit_converted_format"),
}, },
producer: { producer: {
id: firmNode?.getAttribute("id") !== null ? +firmNode?.getAttribute("id") : undefined, id: firmNode?.getAttribute("id") !== null ? +firmNode?.getAttribute("id") : undefined,
name: firmNode?.getAttribute("name") ?? undefined, name: firmNode?.getAttribute("name"),
link: firmNode?.getAttribute("productslink") ?? undefined, link: firmNode?.getAttribute("productslink"),
searchIcons: { searchIcons: {
icon: firmNode?.getAttribute("icon") ?? undefined, icon: firmNode?.getAttribute("icon"),
}, },
// projectorIcons: {}, // projectorIcons: {},
}, },
category: { category: {
id: categoryNode?.getAttribute("id") !== null ? +categoryNode?.getAttribute("id") : undefined, id: categoryNode?.getAttribute("id") !== null ? +categoryNode?.getAttribute("id") : undefined,
name: categoryNode?.getAttribute("name") ?? undefined, name: categoryNode?.getAttribute("name"),
link: categoryNode?.getAttribute("productslink") ?? undefined link: categoryNode?.getAttribute("productslink")
}, },
group: { group: {
id: versionsNode?.getAttribute("id") !== null ? +versionsNode?.getAttribute("id") : undefined, id: versionsNode?.getAttribute("id") !== null ? +versionsNode?.getAttribute("id") : undefined,
name: versionsNode?.getAttribute("name") ?? undefined, name: versionsNode?.getAttribute("name"),
displayAll: versionsNode?.getAttribute("display_all") === "true" ? true : false, displayAll: versionsNode?.getAttribute("display_all") === "true" ? true : false,
link: versionsNode?.getAttribute("link") ?? undefined, link: versionsNode?.getAttribute("link"),
versions, versions,
groupParameters: idmGetTraitsFromNode(versionsNode.querySelector(":scope > groupParameters")) groupParameters: idmGetTraitsFromNode(versionsNode.querySelector(":scope > groupParameters"))
}, },
opinion: { opinion: {
rating: commentsNode?.getAttribute("avg") !== null ? +commentsNode?.getAttribute("avg") : undefined, rating: commentsNode?.getAttribute("avg") !== null ? +commentsNode?.getAttribute("avg") : undefined,
count: commentsNode?.getAttribute("count") !== null ? +commentsNode?.getAttribute("count") : undefined, count: commentsNode?.getAttribute("count") !== null ? +commentsNode?.getAttribute("count") : undefined,
link: commentsNode?.getAttribute("link") ?? undefined link: commentsNode?.getAttribute("link")
}, },
enclosuresImages, enclosuresImages,
// enclosuresAttachments: [], // enclosuresAttachments: [],
series: { series: {
id: seriesNode?.getAttribute("id") !== null ? +seriesNode?.getAttribute("id") : undefined, id: seriesNode?.getAttribute("id") !== null ? +seriesNode?.getAttribute("id") : undefined,
name: seriesNode?.getAttribute("name") ?? undefined, name: seriesNode?.getAttribute("name"),
link: seriesNode?.getAttribute("link") ?? undefined link: seriesNode?.getAttribute("link")
}, },
awardedParameters: idmGetTraitsFromNode(prod.querySelector(":scope > traits")), awardedParameters: idmGetTraitsFromNode(prod.querySelector(":scope > traits")),
// parameteresWithContext: [], // parameteresWithContext: [],

7
swiper-scrollbar/scrollbar.js
View File

@@ -32,6 +32,13 @@ class IdmSwiperProgress {
this.swiper.on("breakpoint", () => {this.updateBarWidth()}); this.swiper.on("breakpoint", () => {this.updateBarWidth()});
} }
reattachSwiperFn(newSwiperFn){
this.swiper = newSwiperFn?.slider?.slider ?? newSwiperFn?.slider ?? newSwiperFn;
this.progressEl.style.width = "";
this.progressEl.style.left = "";
this.updateBarWidth();
}
updateBarWidth() { updateBarWidth() {
const { slidesPerGroup, slidesPerView } = this.swiper.params; const { slidesPerGroup, slidesPerView } = this.swiper.params;
const totalSlides = this.swiper.slides.length; const totalSlides = this.swiper.slides.length;