Last active
October 20, 2023 10:34
-
-
Save joceqo/a513f97c3f6fd447300e94b2b085b303 to your computer and use it in GitHub Desktop.
index.js for exotic
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| console.log('hello simon') | |
| document.addEventListener("DOMContentLoaded", () => { | |
| // 🍪 on init check the monto cookie | |
| function getCookieValue(name) { | |
| const regex = new RegExp(`(^| )${name}=([^;]+)`); | |
| const match = document.cookie.match(regex); | |
| if (match) { | |
| return match[2]; | |
| } | |
| } | |
| // window.currentSelectedMoney | |
| const montoCookie = getCookieValue("MONTO_CURRENT_CURRENCY") || "IDR"; | |
| let currentCurrency = montoCookie; | |
| let currencyRate = 1; | |
| const currenciesWithSymbol = [ | |
| { | |
| currency: "IDR", | |
| symbol: "Rp" | |
| }, | |
| { | |
| currency: "EUR", | |
| symbol: "€" | |
| }, | |
| { | |
| currency: "USD", | |
| symbol: "$" | |
| }, | |
| { | |
| currency: "AUD", | |
| symbol: "A$" | |
| } | |
| ]; | |
| // init script after finsweet loaded | |
| window.fsAttributes = window.fsAttributes || []; | |
| window.fsAttributes.push([ | |
| "cmssort", | |
| () => { | |
| console.log("finsweet loaded(?)"); | |
| const finsweetLoadEvent = new Event("finsweet-loaded"); | |
| window.dispatchEvent(finsweetLoadEvent); | |
| } | |
| ]); | |
| window.addEventListener("finsweet-loaded", () => { | |
| const priceWrapper = document.querySelector("#price-slider-wrapper"); | |
| const currencySpan = priceWrapper.querySelector("#currency"); | |
| const sliderWrapper = priceWrapper.querySelector(".range-slider_wrapper"); | |
| const leftHandle = sliderWrapper.querySelector("#left-handle"); | |
| const rightHandle = sliderWrapper.querySelector("#right-handle"); | |
| const sliderTextsWrapper = sliderWrapper.querySelector( | |
| ".range-values_wrapper" | |
| ); | |
| const leftHandleText = sliderTextsWrapper.children[0]; | |
| const rightHandleText = sliderTextsWrapper.children[1]; | |
| const idrButton = document.querySelector('[data-monto-set-currency="IDR"]'); | |
| const euroButton = document.querySelector( | |
| '[data-monto-set-currency="EUR"]' | |
| ); | |
| const dollarButton = document.querySelector( | |
| '[data-monto-set-currency="USD"]' | |
| ); | |
| const audButton = document.querySelector('[data-monto-set-currency="AUD"]'); | |
| function hideTextHandleIfOn() { | |
| if (leftHandle.style.display !== "none") { | |
| leftHandleText.style.display = "none"; | |
| } | |
| if (rightHandleText.style.display !== "none") { | |
| rightHandleText.style.display = "none"; | |
| } | |
| } | |
| let newLeftMoneyLabelDiv = null; | |
| let newRightMoneyLabelDiv = null; | |
| function insertTextNodeIfNeeded() { | |
| newLeftMoneyLabelDiv = sliderTextsWrapper.querySelector( | |
| "#newLeftMoneyLabelDiv" | |
| ); | |
| if (!newLeftMoneyLabelDiv) { | |
| newLeftMoneyLabelDiv = document.createElement("div"); | |
| newLeftMoneyLabelDiv.setAttribute("id", "newLeftMoneyLabelDiv"); | |
| sliderTextsWrapper.append(newLeftMoneyLabelDiv); | |
| } | |
| newRightMoneyLabelDiv = sliderTextsWrapper.querySelector( | |
| "#newRightMoneyLabelDiv" | |
| ); | |
| if (!newRightMoneyLabelDiv) { | |
| newRightMoneyLabelDiv = document.createElement("div"); | |
| newRightMoneyLabelDiv.setAttribute("id", "newRightMoneyLabelDiv"); | |
| sliderTextsWrapper.append(newRightMoneyLabelDiv); | |
| } | |
| } | |
| function insertMoneyText(target, value) { | |
| if (currentCurrency === "IDR") { | |
| const idrFormatter = new Intl.NumberFormat("id-ID", { | |
| notation: "compact", | |
| compactDisplay: "short", | |
| currency: "IDR", | |
| style: "currency" | |
| }); | |
| const roundedValue = Math.round(value * currencyRate); | |
| target.innerHTML = idrFormatter.format(roundedValue); | |
| } else { | |
| const normalFormatter = new Intl.NumberFormat("en-US", { | |
| currency: currentCurrency, | |
| style: "currency", | |
| minimumFractionDigits: 0, | |
| maximumFractionDigits: 0 | |
| }); | |
| const roundedValue = Math.round(value * currencyRate); | |
| target.innerHTML = normalFormatter.format(roundedValue); | |
| } | |
| } | |
| function getAriaValueNow() { | |
| return { | |
| left: leftHandle.getAttribute("aria-valuenow"), | |
| right: rightHandle.getAttribute("aria-valuenow") | |
| }; | |
| } | |
| function renderMoneyTextNode() { | |
| const { left, right } = getAriaValueNow(); | |
| insertMoneyText(newLeftMoneyLabelDiv, Number(left)); | |
| insertMoneyText(newRightMoneyLabelDiv, Number(right)); | |
| } | |
| function updateCurrencySymbol(element) { | |
| const selectedSymbol = currenciesWithSymbol.find( | |
| (currency) => currency.currency === currentCurrency | |
| ).symbol; | |
| element.innerHTML = `(${selectedSymbol})` || ""; | |
| } | |
| hideTextHandleIfOn(); | |
| insertTextNodeIfNeeded(); | |
| updateCurrencySymbol(currencySpan); | |
| renderMoneyTextNode(); | |
| idrButton.addEventListener("click", async () => { | |
| currentCurrency = "IDR"; | |
| const { rate } = await fetch( | |
| "https://api.monto.io/shops/AGr6Wab0l8QK9LxNv1RqOYKg/curconv/rate?currency=IDR" | |
| ).then((res) => res.json()); | |
| currencyRate = rate; | |
| hideTextHandleIfOn(); | |
| insertTextNodeIfNeeded(); | |
| updateCurrencySymbol(currencySpan); | |
| renderMoneyTextNode(); | |
| }); | |
| euroButton.addEventListener("click", async () => { | |
| currentCurrency = "EUR"; | |
| const { rate } = await fetch( | |
| "https://api.monto.io/shops/AGr6Wab0l8QK9LxNv1RqOYKg/curconv/rate?currency=EUR" | |
| ).then((res) => res.json()); | |
| currencyRate = rate; | |
| hideTextHandleIfOn(); | |
| insertTextNodeIfNeeded(); | |
| updateCurrencySymbol(currencySpan); | |
| renderMoneyTextNode(); | |
| }); | |
| dollarButton.addEventListener("click", async () => { | |
| currentCurrency = "USD"; | |
| const { rate } = await fetch( | |
| "https://api.monto.io/shops/AGr6Wab0l8QK9LxNv1RqOYKg/curconv/rate?currency=USD" | |
| ).then((res) => res.json()); | |
| currencyRate = rate; | |
| hideTextHandleIfOn(); | |
| insertTextNodeIfNeeded(); | |
| updateCurrencySymbol(currencySpan); | |
| renderMoneyTextNode(); | |
| }); | |
| audButton.addEventListener("click", async () => { | |
| currentCurrency = "AUD"; | |
| const { rate } = await fetch( | |
| "https://api.monto.io/shops/AGr6Wab0l8QK9LxNv1RqOYKg/curconv/rate?currency=AUD" | |
| ).then((res) => res.json()); | |
| currencyRate = rate; | |
| hideTextHandleIfOn(); | |
| insertTextNodeIfNeeded(); | |
| updateCurrencySymbol(currencySpan); | |
| renderMoneyTextNode(); | |
| }); | |
| let isKeydown = false; | |
| sliderWrapper.addEventListener("mousedown", () => { | |
| isKeydown = true; | |
| hideTextHandleIfOn(); | |
| insertTextNodeIfNeeded(); | |
| updateCurrencySymbol(currencySpan); | |
| renderMoneyTextNode(); | |
| }); | |
| sliderWrapper.addEventListener("mousemove", () => { | |
| if (isKeydown) { | |
| hideTextHandleIfOn(); | |
| insertTextNodeIfNeeded(); | |
| renderMoneyTextNode(); | |
| } | |
| }); | |
| sliderWrapper.addEventListener("mouseup", () => { | |
| isKeydown = false; | |
| }); | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment