Tool to be used for storing and setting options for my SN userscript.

better_settings_menu.js

class better_settings_menu {
    constructor(parent, saved_options, title, style) {
        
        this.open_modal = (event) => {
            console.log(this.modal)
            this.modal.classList.remove("hidden");
        }
    
        this.close_modal = (event) => {
            if (event.target.classList.contains("bsn-modal") || event.target.classList.contains("close-bsn-modal-btn")) {
                console.log(this._modal)
                this.modal.classList.add("hidden");
            }
        }
        
        this.name = title || "Better Service Now";
        
        this.modal = document.createElement("div");
        this.modal.classList.add("bsn-modal", "hidden");
        //this.modal.classList.add("hidden");
        this.modal.onclick = this.close_modal;
        document.body.appendChild(this.modal);

        this.modal_container = document.createElement("div");
        this.modal_container.classList.add("bsn-modal-container");
        this.modal.appendChild(this.modal_container);

        this.style = style || "";
        const stl = document.createElement("style");
        stl.innerHTML = style;
        this.modal.appendChild(stl);
        
        const header = document.createElement("div");
        header.classList.add("bsn-header");
        this.modal_container.appendChild(header);
        
        this.title = title;
        const div = document.createElement("div");
        div.innerHTML = this.title;
        div.classList.add("h4", "bsn-title");
        header.appendChild(div);

        this.close_button = document.createElement("button");
        this.close_button.classList.add("close-bsn-modal-btn");
        header.appendChild(this.close_button);
        this.close_button.onclick = this.close_modal;
        
        this.main_button = document.createElement("button");
        this.main_button.classList.add("open-bsn-modal-button");
        this.main_button.onclick = this.open_modal;
        //this.main_button.innerHTML = "Settings"
        parent.appendChild(this.main_button);

        this.saved_options = saved_options;

        this.update_modal();
        
        return this;
    }

    set_option_item = (name, value) => {
        options = JSON.parse(this.saved_options);
        options[name] = value;
        this.saved_options = JSON.toString(options);
        return this.saved_options;
    }

    get_option_item = (name) => {
        options = JSON.parse(this.saved_options);
        return options[name];
    }

    update_modal = () => {
        //TODO: Update modal code
        //- Read settings
        //- Iterate through entries
        //- Based on type, create appropriate DOM elements
        //- Create and attach event listeners
    }
}


// Style will eventually be moved to it's own separate resource
const menu_style = `
.bsn-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    z-index: 1050;
    background: rgb(0 0 0 / 50%);
}

.bsn-modal-container {
    margin: auto;
    margin-top: 100px;   
    width: 500px;
    height: 500px;
    background: white;
    border-radius: 3px;
}

.bsn-modal-container::after {
    margin: auto 0;
    color: #888;
    content: "Most changes require reloading the page"
}

.bsn-header {
    border-bottom: 1px solid #888;
    display: flex;
}

.bsn-title {
	margin: auto;
	position: relative;
}

.close-bsn-modal-btn {
    float: right;
    padding: 0 !important;
}

`
var settings = JSON.toString({}); //Will normally be pulled from userscript local storage

const menu = new better_settings_menu(document.querySelector(".navbar-right > span"), settings, "Better Settings Menu", menu_style);
console.log(menu);
menu.main_button.classList.add("btn", "btn-default", "action_context", "header", "btn-icon", "icon-cog", "form_action_button"); //Styles set to conform to whichever page it's added to
menu.close_button.classList.add("btn", "btn-icon", "icon-connect-close-sm");