Dropdown JS

[gdude2002]

From https://github.com/python-discord/site/pull/202

(function() {
    window.dropdowns = {};

    let elements = document.getElementsByClassName("dropdown");

    for (let element of elements) {
        let menu_element = element.getElementsByClassName("dropdown-menu")[0];

        function show() {
            $(element).addClass("is-active");
        }

        function hide() {
            $(element).removeClass("is-active");
        }

        function handle_event(e) {
            show();

            $(document.body).on("click." + menu_element.id, function() {
                hide();

                $(document.body).off("click." + menu_element.id);
            });

            e.stopPropagation();
        }

        $(element).click(handle_event);
        $(element).hover(handle_event);
        $(element).mouseleave(hide);

        window.dropdowns[menu_element.id] = element;
    }
})();

[JonasUJ]

Doesn't this require jQuery? Do we want to add this dependency when this script is included or just refactor this script to not use jQuery. I vote that using jQuery shouldn't be our choice to make, but the users.

[gdude2002]

This specific snippet comes from python-discord/site#202, where dropdowns were implemented using JQuery (if I remember correctly) - this issue was just to remind people that this should be ported over to this repo for everyone to use.

The specific solution doesn't need to use JQuery though, and I agree on principle with not requiring it unnecessarily.