Skip to content

Instantly share code, notes, and snippets.

@joceqo

joceqo/index.js

Last active October 20, 2023 10:34
Show Gist options
  • Save joceqo/a513f97c3f6fd447300e94b2b085b303 to your computer and use it in GitHub Desktop.
Save joceqo/a513f97c3f6fd447300e94b2b085b303 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. joceqo revised this gist Oct 20, 2023. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    console.log('hello simon')

    document.addEventListener("DOMContentLoaded", () => {
    // 🍪 on init check the monto cookie

  2. joceqo created this gist Oct 20, 2023.
    213 changes: 213 additions & 0 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,213 @@
    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;
    });
    });
    });