src/view/ThemeSettings.js
function showDialog() {
        var currentSettings = getValues();
        var newSettings     = {};
        var themes          = _.map(loadedThemes, function (theme) { return theme; });
        var template        = $("<div>").append($settings).html();
        var $template       = $(Mustache.render(template, {"settings": currentSettings, "themes": themes, "Strings": Strings}));

        // Select the correct theme.
        var $currentThemeOption = $template
            .find("[value='" + currentSettings.theme + "']");

        if ($currentThemeOption.length === 0) {
            $currentThemeOption = $template.find("[value='" + defaults.theme + "']");
        }
        $currentThemeOption.attr("selected", "selected");

        $template
            .find("[data-toggle=tab].default")
            .tab("show");

        $template
            .on("change", "[data-target]:checkbox", function () {
                var $target = $(this);
                var attr = $target.attr("data-target");
                newSettings[attr] = $target.is(":checked");
            })
            .on("input", "[data-target='fontSize']", function () {
                var target = this;
                var targetValue = $(this).val();
                var $btn = $("#theme-settings-done-btn")[0];

                // Make sure that the font size is expressed in terms
                // we can handle (px or em). If not, 'done' button is
                // disabled until input has been corrected.

                if (target.checkValidity() === true) {
                    $btn.disabled = false;
                    newSettings["fontSize"] = targetValue;
                } else {
                    $btn.disabled = true;
                }
            })
            .on("input", "[data-target='fontFamily']", function () {
                var targetValue = $(this).val();
                newSettings["fontFamily"] = targetValue;
            })
            .on("change", "select", function () {
                var $target = $(":selected", this);
                var attr = $target.attr("data-target");

                if (attr) {
                    prefs.set(attr, $target.val());
                }
            });

        Dialogs.showModalDialogUsingTemplate($template).done(function (id) {
            var setterFn;

            if (id === "save") {
                // Go through each new setting and apply it
                Object.keys(newSettings).forEach(function (setting) {
                    if (defaults.hasOwnProperty(setting)) {
                        prefs.set(setting, newSettings[setting]);
                    } else {
                        // Figure out if the setting is in the ViewCommandHandlers, which means it is
                        // a font setting
                        setterFn = "set" + setting[0].toLocaleUpperCase() + setting.substr(1);
                        if (typeof ViewCommandHandlers[setterFn] === "function") {
                            ViewCommandHandlers[setterFn](newSettings[setting]);
                        }
                    }
                });
            } else if (id === "cancel") {
                // Make sure we revert any changes to theme selection
                prefs.set("theme", currentSettings.theme);
            }
        });
    }
function showDialog() {
        var currentSettings = getValues();
        var newSettings     = {};
        var themes          = _.map(loadedThemes, function (theme) { return theme; });
        var template        = $("<div>").append($settings).html();
        var $template       = $(Mustache.render(template, {"settings": currentSettings, "themes": themes, "Strings": Strings}));

        // Select the correct theme.
        var $currentThemeOption = $template
            .find("[value='" + currentSettings.theme + "']");

        if ($currentThemeOption.length === 0) {
            $currentThemeOption = $template.find("[value='" + defaults.theme + "']");
        }
        $currentThemeOption.attr("selected", "selected");

        $template
            .find("[data-toggle=tab].default")
            .tab("show");

        $template
            .on("change", "[data-target]:checkbox", function () {
                var $target = $(this);
                var attr = $target.attr("data-target");
                newSettings[attr] = $target.is(":checked");
            })
            .on("input", "[data-target='fontSize']", function () {
                var target = this;
                var targetValue = $(this).val();
                var $btn = $("#theme-settings-done-btn")[0];

                // Make sure that the font size is expressed in terms
                // we can handle (px or em). If not, 'done' button is
                // disabled until input has been corrected.

                if (target.checkValidity() === true) {
                    $btn.disabled = false;
                    newSettings["fontSize"] = targetValue;
                } else {
                    $btn.disabled = true;
                }
            })
            .on("input", "[data-target='fontFamily']", function () {
                var targetValue = $(this).val();
                newSettings["fontFamily"] = targetValue;
            })
            .on("change", "select", function () {
                var $target = $(":selected", this);
                var attr = $target.attr("data-target");

                if (attr) {
                    prefs.set(attr, $target.val());
                }
            });

        Dialogs.showModalDialogUsingTemplate($template).done(function (id) {
            var setterFn;

            if (id === "save") {
                // Go through each new setting and apply it
                Object.keys(newSettings).forEach(function (setting) {
                    if (defaults.hasOwnProperty(setting)) {
                        prefs.set(setting, newSettings[setting]);
                    } else {
                        // Figure out if the setting is in the ViewCommandHandlers, which means it is
                        // a font setting
                        setterFn = "set" + setting[0].toLocaleUpperCase() + setting.substr(1);
                        if (typeof ViewCommandHandlers[setterFn] === "function") {
                            ViewCommandHandlers[setterFn](newSettings[setting]);
                        }
                    }
                });
            } else if (id === "cancel") {
                // Make sure we revert any changes to theme selection
                prefs.set("theme", currentSettings.theme);
            }
        });
    }
function showDialog ( ) { var currentSettings = getValues ( ) ; var newSettings = { } ; var themes = _ . map ( loadedThemes , function ( theme ) { return theme ; } ) ; var template = $ ( "<div>" ) . append ( $settings ) . html ( ) ; var $template = $ ( Mustache . render ( template , { "settings" : currentSettings , "themes" : themes , "Strings" : Strings } ) ) ; // Select the correct theme. var $currentThemeOption = $template . find ( "[value='" + currentSettings . theme + "']" ) ; if ( $currentThemeOption . length === 0 ) { $currentThemeOption = $template . find ( "[value='" + defaults . theme + "']" ) ; } $currentThemeOption . attr ( "selected" , "selected" ) ; $template . find ( "[data-toggle=tab].default" ) . tab ( "show" ) ; $template . on ( "change" , "[data-target]:checkbox" , function ( ) { var $target = $ ( this ) ; var attr = $target . attr ( "data-target" ) ; newSettings [ attr ] = $target . is ( ":checked" ) ; } ) . on ( "input" , "[data-target='fontSize']" , function ( ) { var target = this ; var targetValue = $ ( this ) . val ( ) ; var $btn = $ ( "#theme-settings-done-btn" ) [ 0 ] ; // Make sure that the font size is expressed in terms // we can handle (px or em). If not, 'done' button is // disabled until input has been corrected. if ( target . checkValidity ( ) === true ) { $btn . disabled = false ; newSettings [ "fontSize" ] = targetValue ; } else { $btn . disabled = true ; } } ) . on ( "input" , "[data-target='fontFamily']" , function ( ) { var targetValue = $ ( this ) . val ( ) ; newSettings [ "fontFamily" ] = targetValue ; } ) . on ( "change" , "select" , function ( ) { var $target = $ ( ":selected" , this ) ; var attr = $target . attr ( "data-target" ) ; if ( attr ) { prefs . set ( attr , $target . val ( ) ) ; } } ) ; Dialogs . showModalDialogUsingTemplate ( $template ) . done ( function ( id ) { var setterFn ; if ( id === "save" ) { // Go through each new setting and apply it Object . keys ( newSettings ) . forEach ( function ( setting ) { if ( defaults . hasOwnProperty ( setting ) ) { prefs . set ( setting , newSettings [ setting ] ) ; } else { // Figure out if the setting is in the ViewCommandHandlers, which means it is // a font setting setterFn = "set" + setting [ 0 ] . toLocaleUpperCase ( ) + setting . substr ( 1 ) ; if ( typeof ViewCommandHandlers [ setterFn ] === "function" ) { ViewCommandHandlers [ setterFn ] ( newSettings [ setting ] ) ; } } } ) ; } else if ( id === "cancel" ) { // Make sure we revert any changes to theme selection prefs . set ( "theme" , currentSettings . theme ) ; } } ) ; }
Opens the settings dialog
Opens the settings dialog