piskel/js/controller/SettingsController.js

(function () {
    var ns = $.namespace("pskl.controller");
  
    ns.SettingsController = function () {};

    /**
     * @public
     */
    ns.SettingsController.prototype.init = function() {

        // Highlight selected background picker:
        var backgroundClass = pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND);
        $('#background-picker-wrapper')
            .find('.background-picker[data-background-class=' + backgroundClass + ']')
            .addClass('selected');

        // Initial state for grid display:
        var show_grid = pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID);
        $('#show-grid').prop('checked', show_grid);

        // Expand drawer when clicking 'Settings' tab.
        $('#settings').click(function(evt) {
            $('.right-sticky-section').toggleClass('expanded');
            $('#settings').toggleClass('has-expanded-drawer');
        });

        // Handle grid display changes:
        $('#show-grid').change($.proxy(function(evt) {
            var checked = $('#show-grid').prop('checked');
            pskl.UserSettings.set(pskl.UserSettings.SHOW_GRID, checked);
        }, this));

        // Handle canvas background changes:
        $('#background-picker-wrapper').click(function(evt) {
          var target = $(evt.target).closest('.background-picker');
          if (target.length) {
            var backgroundClass = target.data('background-class');
            pskl.UserSettings.set(pskl.UserSettings.CANVAS_BACKGROUND, backgroundClass);

            $('.background-picker').removeClass('selected');
            target.addClass('selected');
          }
        });
    };
})();