Adds an switch, if the switch is enabled and you click on a map marker, the script automatic clicks on the mark pin button

Genshin Impact Teyvat Interactive Map - Automate mark pins.user.js

// ==UserScript==
// @name            Genshin Impact Teyvat Interactive Map - Automate mark pins
// @name:de         Genshin Impact Teyvat Interactive Map - Automatisches setzen der Markierung
// @namespace       kurotaku.de
// @version         1.2.2
// @description     Adds an switch, if the switch is enabled and you click on a map marker, the script automatic clicks on the mark pin button
// @description:de  Fügt einen Schalter hinzu, wenn der Schalter aktiviert ist und Sie auf eine Kartenmarkierung klicken, klickt das Skript automatisch auf den Markierungsknopf
// @author          Kurotaku
// @license         MIT
// @match           https://act.hoyolab.com/ys/app/interactive-map/index.html*
// @icon            https://act.hoyolab.com/ys/app/interactive-map/mapicon.png
// @updateURL       https://gist.github.com/Kurotaku-sama/f5c1aec948c8e8157eee0efd95e7e2f3/raw/Genshin%2520Impact%2520Teyvat%2520Interactive%2520Map%2520-%2520Automate%2520mark%2520pins.user.js
// @downloadURL     https://gist.github.com/Kurotaku-sama/f5c1aec948c8e8157eee0efd95e7e2f3/raw/Genshin%2520Impact%2520Teyvat%2520Interactive%2520Map%2520-%2520Automate%2520mark%2520pins.user.js
// @require         https://gist.github.com/Kurotaku-sama/9ebeb659500f6eee2f780344948e1e8f/raw/kuros_library.user.js
// @grant           GM_getValue
// @grant           GM_setValue
// ==/UserScript==


(async function() {
    // Set the switch value if its the first time running the script
    if(GM_getValue("one-click-mark-switch") === undefined)
        GM_setValue("one-click-mark-switch", false);

    // Wait till map is visible
    wait_for_element('#user-guide-underground-map').then(async () => {
        // Wait for the other sliders
        wait_for_element('#user-guide-underground-map').then(async () => {
            // Add the slider
            let one_click_mark_switch = `<div id="k-one_click_mark" class="one_click_mark-switch k-one_click_mark"><div class="one_click_mark-switch__text">Automate mark pins</div> <div class="one_click_mark-switch__pic"></div></div>`;
            document.querySelector("#user-guide-underground-map").insertAdjacentHTML('beforebegin', one_click_mark_switch);
            document.querySelector("#k-one_click_mark").addEventListener("click", toggle_one_click_mark, false);

            // Set switch image
            refresh_switch("one-click-mark-switch", ".one_click_mark-switch__pic", "one_click_mark-switch__pic--active");

            // Put on left side if panel is folded
            wait_for_element('.filter-panel__fold').then(async () => {
                document.querySelector(".filter-panel__fold").addEventListener("click", () => document.querySelector(".k-one_click_mark").classList.toggle("one_click_mark-switch--folded"), false);
                document.querySelector(".filter-panel__icon").addEventListener("click", () => document.querySelector(".k-one_click_mark").classList.remove("one_click_mark-switch--folded"), false);
            });
        });

        wait_for_element('.leaflet-marker-pane').then(async () => {
            let container = document.querySelector(".leaflet-marker-pane");
            container.addEventListener("click", async function() {
                wait_for_element('.map-popup__switch--unmarked').then(async () => { // Wait till a "mark" button appears
                    await Sleep(250);
                    if(GM_getValue("one-click-mark-switch")) // If popup still has content and the switch is enabled
                        document.querySelector(".map-popup__switch--unmarked").click();

                });
            });
        });
    });
})();


function toggle_one_click_mark() {
    GM_setValue("one-click-mark-switch",!GM_getValue("one-click-mark-switch"));
    refresh_switch("one-click-mark-switch", ".one_click_mark-switch__pic", "one_click_mark-switch__pic--active");
}


function refresh_switch(value_name, selector, pictureclass) {
    let switch_image_container = document.querySelector(selector);

    if(GM_getValue(value_name))
        switch_image_container.classList.add(pictureclass);
    else if(!GM_getValue(value_name))
        switch_image_container.classList.remove(pictureclass);
}


// Custom styles variable
let styles = `

.k-one_click_mark {
  position: absolute;
  left: 4.15rem;
  bottom: 1.8rem;
}

.one_click_mark-switch {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  cursor: pointer;
}

.one_click_mark-switch--folded {
  left: .21rem;
}

.one_click_mark-switch__text {
  color: #ece5d8;
  text-shadow: -1px 0 #3b4354,0 1px #3b4354,1px 0 #3b4354,0 -1px #3b4354;
  font-size: .18rem;
  margin-bottom: .04rem;
}

.one_click_mark-switch__pic {
  width: .72rem;
  height: .36rem;
  background-image: url(data:image/png;base64,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);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.one_click_mark-switch__pic--active {
  background-image: url(data:image/png;base64,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);
}`;

// Insert custom Styles
let style_sheet = document.createElement("style");
style_sheet.innerText = styles;
document.head.appendChild(style_sheet);