아카콘 버튼 눌렀을때를 감지해야되는데 이벤트가 아예 안뜸 ㅋㅋ

$(document).on("click") 해봐도 안뜨고..

그래서 아카콘 목록 뜨는지 안뜨는지로 인식해서 겨우 구현했음

$(document).ready(() => {

    if(!["write", "edit"].includes(location.pathname.split("/")[3])) //https://arca.live/b/*/write(edit)

        return;

    console.log("[Arcacon Searcher] onWrite.js Loaded.");

    const aS = "ArcaconSearcher_w";

    var searcherActive = false;

    var observer = new MutationObserver(mutations => {

        var conActive = mutations[0].target.classList.contains("fr-active");

        if(conActive && !searcherActive) {

            activateSearcher($(`.${aS}`));

            searcherActive = true;

        } else if(!conActive && searcherActive) {

            deactivateSearcher($(`.${aS}`));

            searcherActive = false;

        }

    });

    const obsConfig = {

        attributes: true

    };

    $(document).arrive("#arcacon-1", function() {

        var input = document.createElement("input");

        input.className = aS;

        input.placeholder = "아카콘 검색하기";

        $(this).before($(input));

    });

    $(document).arrive(".namlacon", function() {

        activateSearcher($(`.${aS}`));

        searcherActive = true;

        observer.observe(this.parentNode, obsConfig);

    });

    $(document).on("click", `.${aS}`, () => {

        $(".fr-toolbar").css("z-index", "5");

        $("#arcacon-1").addClass("fr-btn-active-popup");

        $(".namlacon").parent().addClass("fr-active");

    });

    const width = "200px";

    const margin = "10px";

    function activateSearcher(target) {

        target.prop("active", true);

        target.css("opacity", "1");

        target.css("width", width);

        target.css("border-width", "2px");

        target.css({ transform: `translate(calc((${width} + ${margin}) * -1), -50%)` });

    }

    function deactivateSearcher(target) {

        target.prop("active", false);

        target.css("opacity", "0");

        target.css("width", "0");

        target.css("border-width", "0");

        target.css({ transform: "translate(0, -50%)" });

    }

});

input 클릭하면 또 포커스 아웃되는걸로 인식됐는지 목록이 사라지길래

css 다시 원래대로 복구해줘야되고..

좀 많이 복잡하긴 했는데 구현은 어떻게 잘 됐네요

이제 검색기능 만들러 감