mimouchat/cli/uiSettings.js

var Settings = (function() {
    var displayed = false,
        currentPage = null,

    pages = {
        services: "services",
        display: "display",
        privacy: "privacy"
    },

    spawn = function() {
        document.getElementById(R.id.settings.wrapper).classList.remove(R.klass.hidden);

        var emojiFrag = document.createDocumentFragment(),
            emojiList = document.getElementById(R.id.settings.display.emojiProvider);
        for (var i in EmojiProvider) {
            var opt = document.createElement("option");
            opt.value = i;
            opt.textContent = EmojiProvider[i].name;
            if (EmojiProvider[i] === CURRENT_EMOJI_PROVIDER)
                opt.selected = true;
            emojiFrag.appendChild(opt);
        }
        emojiList.textContent = "";
        emojiList.appendChild(emojiFrag);

        displayed = true;
    },

    setVisiblePage = function(page) {
        if (currentPage) {
            document.getElementById(R.id.settings.wrapper).classList.remove("display-" +currentPage);
            document.getElementById("setting-menu-" +currentPage).classList.remove(R.klass.selected);

            document.getElementById(R.id.settings.services.addSection).classList.add(R.klass.hidden);
        }
        document.getElementById(R.id.settings.wrapper).classList.add("display-" +page);
        document.getElementById("setting-menu-" +page).classList.add(R.klass.selected);
        currentPage = page;
    },

    close = function() {
        document.getElementById(R.id.settings.wrapper).classList.add(R.klass.hidden);
        displayed = false;
    };

    document.getElementById(R.id.settings.menu.list).addEventListener("click", function(e) {
        for (var target = e.target; e.currentTarget !== target && target; target = target.parentNode) {
            if (target.dataset && target.dataset["target"]) {
                for (var i in pages) {
                    if (pages[i] === target.dataset["target"]) {
                        setVisiblePage(pages[i]);
                        return;
                    }
                }
            }
        }
    });

    document.getElementById(R.id.settings.closeButton).addEventListener("click", close);

    document.getElementById(R.id.settings.services.addButton).addEventListener("click", function(e) {
        e.preventDefault();
        document.getElementById(R.id.settings.services.addSection).classList.remove(R.klass.hidden);
        return false;
    });

    document.getElementById(R.id.settings.services.serviceAddConfirm).addEventListener("click", function(e) {
        e.preventDefault();
        document.location.href = document.getElementById(R.id.settings.services.serviceProviderList).value;
        return false;
    });

    document.getElementById(R.id.settings.commitBt).addEventListener("click", function() {
        loadEmojiProvider(document.getElementById(R.id.settings.display.emojiProvider).value);
        close();
    });

    return {
        /** @type {function(string=)} */
        display: function(page) {
            if (!displayed)
                spawn();
            setVisiblePage(page || pages.services);
            return this;
        },

        /** @type {function(boolean)} */
        setClosable: function(closable) {
            return this;
        },

        pages: pages
    };
})();