Completed Dimming

[AZaletski24]

Leaderboard

• Created a new backgroundDim method under the existing leaderboard object
• Added two functions create and remove
• Create generates the background div element and assigns its properties, including the z-index
• z-index had to be adjusted for the leaderboard table in index.md

create () {
            this.dim = true // sets the dim to be true when the leaderboard is opened
            console.log("CREATE DIM")
            const dimDiv = document.createElement("div");
            dimDiv.id = "dim";
            dimDiv.style.backgroundColor = "black";
            dimDiv.style.width = "100%";
            dimDiv.style.height = "100%";
            dimDiv.style.position = "absolute";
            dimDiv.style.opacity = "0.8";
            document.body.append(dimDiv);
            dimDiv.style.zIndex = "9998"
            dimDiv.addEventListener("click", Leaderboard.backgroundDim.remove)
        },

• Remove closes the div element and clears the leaderboard object

remove () {
            this.dim = false
            console.log("REMOVE DIM");
            const dimDiv = document.getElementById("dim");
            dimDiv.remove();
            Leaderboard.isOpen = false
            leaderboardDropDown.style.width = this.isOpen?"70%":"0px";
            leaderboardDropDown.style.top = this.isOpen?"15%":"0px";
            leaderboardDropDown.style.left = this.isOpen?"15%":"0px";
        },

• In order to accomplish the click away feature, I had to disable the toggle feature of the button by changing isOpen to static conditions at multiple points throughout the file

SettingsControl

• SettingsControl is structured a bit differently from the leaderboard, so I had to make this a const as opposed to a method
• Aside from that one small difference the same principle is applied with the creation and removal of a div element as well as the removal of the toggle feature

onst backgroundDim = {
    create () {
        this.dim = true // sets the dim to be true when settingControl is opened
        console.log("CREATE DIM")
        const dimDiv = document.createElement("div");
        dimDiv.id = "dim";
        dimDiv.style.backgroundColor = "black";
        dimDiv.style.width = "100%";
        dimDiv.style.height = "100%";
        dimDiv.style.position = "absolute";
        dimDiv.style.opacity = "0.8";
        document.body.append(dimDiv);
        dimDiv.style.zIndex = "9998"
        dimDiv.addEventListener("click", this.remove)
    },
    remove () {
        this.dim = false
        console.log("REMOVE DIM");
        const dimDiv = document.getElementById("dim");
        dimDiv.remove();
        isOpen = false
        const sidebar = document.getElementById("sidebar")
        sidebar.style.width = isOpen?"70%":"0px";
        sidebar.style.top = isOpen?"15%":"0px";
        sidebar.style.left = isOpen?"15%":"0px";
    }
}

Example picture of what the working dim looks like