gethomepage/homepage local-remote href slider

custom.js

// -----------------
// Slider to switch between local/remote addresses.
// Allows you to change the domains of the href targets to the current domain (e.g. when using a VPN).
// -----------------

// these domain (href) will be changed to the current browser domain
// prevents changing links to other services/servers which should not be changed
const host = "pi-server.local"; // TODO: change this

const updateLocation = () => {
    const serviceWidgetsLink = document.getElementsByClassName("service-title-text");
    let browserAddr = window.location.href.split(":");
    browserAddr = browserAddr[1].slice(2, -1);
    for (let i = 0; i < serviceWidgetsLink.length; i++) {
        // widgets might not have an href property set in homepage config
        if (!serviceWidgetsLink[i].getAttribute("href")) {continue;}
        let href = serviceWidgetsLink[i].href;
        let split = href.split(":");
        if (split.length < 3) {
            continue;
        }
        let currServiceAddr = split[1].slice(2, href.length);
        if (currServiceAddr === host) {
            // change domain to current browser
            split[1] = "//" + browserAddr;
            serviceWidgetsLink[i].href = split.join(":");
        } else if (currServiceAddr === browserAddr) {
            // switch back to original domain
            split[1] = "//" + host;
            serviceWidgetsLink[i].href = split.join(":");
        }
    }
};

const sliderOFF = new DOMParser().parseFromString(
    '<svg id="sliderOFF" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="text-theme-800 dark:text-theme-200 w-8 h-8 cursor-pointer" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zM7 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"></path></svg>',
    "text/html"
).getElementById("sliderOFF");
const sliderON = new DOMParser().parseFromString(
    '<svg id="sliderON" stroke="currentColor" fill="#75FB4C" stroke-width="0" viewBox="0 0 24 24" class="text-theme-800 dark:text-theme-200 w-8 h-8 cursor-pointer" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"></path></svg>',
    "text/html"
).getElementById("sliderON");
const iconHome = new DOMParser().parseFromString(
    '<svg id="iconHome" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor" class="text-theme-800 dark:text-theme-200 w-5 h-5 m-1.5"><path d="M240-200h120v-200q0-17 11.5-28.5T400-440h160q17 0 28.5 11.5T600-400v200h120v-360L480-740 240-560v360Zm-80 0v-360q0-19 8.5-36t23.5-28l240-180q21-16 48-16t48 16l240 180q15 11 23.5 28t8.5 36v360q0 33-23.5 56.5T720-120H560q-17 0-28.5-11.5T520-160v-200h-80v200q0 17-11.5 28.5T400-120H240q-33 0-56.5-23.5T160-200Zm320-270Z"/></svg>',
    "text/html"
).getElementById("iconHome");
const iconAway = new DOMParser().parseFromString(
    '<svg id="iconAway" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor" class="text-theme-800 dark:text-theme-200 w-5 h-5 m-1.5"><path d="M436-360 371-72q-3 14-14.5 23T330-40q-20 0-32-15t-8-34l113-573q6-29 27-43.5t44-14.5q23 0 42.5 10t31.5 30l40 64q18 29 46.5 52.5T700-529v-41q0-13 8.5-21.5T730-600q13 0 21.5 8.5T760-570v500q0 13-8.5 21.5T730-40q-13 0-21.5-8.5T700-70v-376q-48-11-89-35t-71-59l-24 120 72 68q6 6 9 13.5t3 15.5v243q0 17-11.5 28.5T560-40q-17 0-28.5-11.5T520-80v-200l-84-80Zm-178-82-46-9q-16-3-25-16.5t-6-30.5l30-157q6-34 36-51.5t65-10.5q17 3 25.5 16.5T343-670l-38 196q-3 17-16.5 26t-30.5 6Zm282-298q-33 0-56.5-23.5T460-820q0-33 23.5-56.5T540-900q33 0 56.5 23.5T620-820q0 33-23.5 56.5T540-740Z"/></svg>',
    "text/html"
).getElementById("iconAway");

// create slider container element
const changeSlider = document.createElement("div");
changeSlider.setAttribute("id", "location");
changeSlider.setAttribute("class", "rounded-full flex self-end ml-3");
changeSlider.appendChild(iconHome);
changeSlider.appendChild(sliderOFF);
changeSlider.appendChild(iconAway);

// append to footer
const footer = document.querySelector("#style");
footer.appendChild(changeSlider);

// event listener
changeSlider.addEventListener("click", () => {
    updateLocation();
    if (sliderON.parentElement === changeSlider) {
        sliderON.replaceWith(sliderOFF);
    } else {
        sliderOFF.replaceWith(sliderON);
    }
});

Thanks for making this! I found a bug where the remote IP was getting cut off. For example, something like 100.x.x.100 would turn into 100.x.x.10. The issue came from using window.location.href.split(":")[1].slice(2, -1) to grab the IP, which accidentally removed the last digit. I fixed it by using window.location.hostname instead. That gives the correct IP or domain without touching anything else. Everything works now when switching between local and remote addresses like with Tailscale or Meshnet. This really useful feature and this small change makes it even better. I added the full updateLocation function just so it's easier to see what's changed.

const updateLocation = () => { const serviceWidgetsLink = document.getElementsByClassName("service-title-text"); const browserAddr = window.location.hostname;

for (let i = 0; i < serviceWidgetsLink.length; i++) {
    if (!serviceWidgetsLink[i].getAttribute("href")) { continue; }
    
    let href = serviceWidgetsLink[i].href;
    let split = href.split(":");
    if (split.length < 3) {
        continue;
    }

    let currServiceAddr = split[1].replace("//", "");
    if (currServiceAddr === host) {
        split[1] = "//" + browserAddr;
        serviceWidgetsLink[i].href = split.join(":");
    } else if (currServiceAddr === browserAddr) {
        split[1] = "//" + host;
        serviceWidgetsLink[i].href = split.join(":");
    }
}

};

hi there

I am just trying to get this one going on my set up. what should i change from the original document

Ok, I havev figured out how to use it and how to implement @OwenWright8 addition via the help of chatgpt. But i understand it alot better now. That was a run few hours of learning. Thanks again for posting this. This is the updated version i am using, ive tested it and it works well.

   // -----------------
// Slider to switch between local/remote addresses.
// Allows you to change the domains of the href targets to the current domain (e.g. when using a VPN).
// -----------------

// these domain (href) will be changed to the current browser domain
// prevents changing links to other services/servers which should not be changed
const host = "pi-server.local"; // TODO: change this

const updateLocation = () => {
    const serviceWidgetsLink = document.getElementsByClassName("service-title-text");
    let browserAddr = window.location.hostname;
    for (let i = 0; i < serviceWidgetsLink.length; i++) {
        // widgets might not have an href property set in homepage config
        if (!serviceWidgetsLink[i].getAttribute("href")) {continue;}
        let href = serviceWidgetsLink[i].href;
        let split = href.split(":");
        if (split.length < 3) {
            continue;
        }
        let currServiceAddr = split[1].slice(2, href.length);
        if (currServiceAddr === host) {
            // change domain to current browser
            split[1] = "//" + browserAddr;
            serviceWidgetsLink[i].href = split.join(":");
        } else if (currServiceAddr === browserAddr) {
            // switch back to original domain
            split[1] = "//" + host;
            serviceWidgetsLink[i].href = split.join(":");
        }
    }
};

const sliderOFF = new DOMParser().parseFromString(
    '<svg id="sliderOFF" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="text-theme-800 dark:text-theme-200 w-8 h-8 cursor-pointer" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zM7 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"></path></svg>',
    "text/html"
).getElementById("sliderOFF");
const sliderON = new DOMParser().parseFromString(
    '<svg id="sliderON" stroke="currentColor" fill="#75FB4C" stroke-width="0" viewBox="0 0 24 24" class="text-theme-800 dark:text-theme-200 w-8 h-8 cursor-pointer" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M17 7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h10c2.76 0 5-2.24 5-5s-2.24-5-5-5zm0 8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"></path></svg>',
    "text/html"
).getElementById("sliderON");
const iconHome = new DOMParser().parseFromString(
    '<svg id="iconHome" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor" class="text-theme-800 dark:text-theme-200 w-5 h-5 m-1.5"><path d="M240-200h120v-200q0-17 11.5-28.5T400-440h160q17 0 28.5 11.5T600-400v200h120v-360L480-740 240-560v360Zm-80 0v-360q0-19 8.5-36t23.5-28l240-180q21-16 48-16t48 16l240 180q15 11 23.5 28t8.5 36v360q0 33-23.5 56.5T720-120H560q-17 0-28.5-11.5T520-160v-200h-80v200q0 17-11.5 28.5T400-120H240q-33 0-56.5-23.5T160-200Zm320-270Z"/></svg>',
    "text/html"
).getElementById("iconHome");
const iconAway = new DOMParser().parseFromString(
    '<svg id="iconAway" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 -960 960 960" width="1em" fill="currentColor" class="text-theme-800 dark:text-theme-200 w-5 h-5 m-1.5"><path d="M436-360 371-72q-3 14-14.5 23T330-40q-20 0-32-15t-8-34l113-573q6-29 27-43.5t44-14.5q23 0 42.5 10t31.5 30l40 64q18 29 46.5 52.5T700-529v-41q0-13 8.5-21.5T730-600q13 0 21.5 8.5T760-570v500q0 13-8.5 21.5T730-40q-13 0-21.5-8.5T700-70v-376q-48-11-89-35t-71-59l-24 120 72 68q6 6 9 13.5t3 15.5v243q0 17-11.5 28.5T560-40q-17 0-28.5-11.5T520-80v-200l-84-80Zm-178-82-46-9q-16-3-25-16.5t-6-30.5l30-157q6-34 36-51.5t65-10.5q17 3 25.5 16.5T343-670l-38 196q-3 17-16.5 26t-30.5 6Zm282-298q-33 0-56.5-23.5T460-820q0-33 23.5-56.5T540-900q33 0 56.5 23.5T620-820q0 33-23.5 56.5T540-740Z"/></svg>',
    "text/html"
).getElementById("iconAway");

// create slider container element
const changeSlider = document.createElement("div");
changeSlider.setAttribute("id", "location");
changeSlider.setAttribute("class", "rounded-full flex self-end ml-3");
changeSlider.appendChild(iconHome);
changeSlider.appendChild(sliderOFF);
changeSlider.appendChild(iconAway);

// append to footer
const footer = document.querySelector("#style");
footer.appendChild(changeSlider);

// event listener
changeSlider.addEventListener("click", () => {
    updateLocation();
    if (sliderON.parentElement === changeSlider) {
        sliderON.replaceWith(sliderOFF);
    } else {
        sliderOFF.replaceWith(sliderON);
    }
});

Thanks for the update @Binocularbath and glad to hear it works for you now!

Thanks for the update @Binocularbath and glad to hear it works for you now!

Thank you for sharing the script! It's really great

Hi there I just created an account to thank you. This is exactly what I was looking for.

I also experienced the problem of not switching to the proper external IP. My simple approach was using

browserAddr = browserAddr[1].slice(2);

instead of:

browserAddr = browserAddr[1].slice(2, -1);

Thank you so much!

@i-found-an-available-username I highly appreciate the effort haha

I will look into the issue with the ips since others have reported the same.