mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

Added cheap lazy templates + logic to switch between setting controllers

Browse Source
This commit is contained in:
jdescottes
2013-08-12 07:31:09 +02:00
parent d8d6f27462
commit 73b98850db
12 changed files with 185 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
js/controller/SettingsController.js
View File

@ -1,45 +1,69 @@
(function () {
var ns = $.namespace("pskl.controller");
ns.SettingsController = function () {};
var settings = {
user : {
template : 'templates/settings-application.html',
controller : ns.settings.ApplicationSettingsController
},
gif : {
template : 'templates/settings-export-gif.html',
controller : ns.settings.GifExportController
}
};
var SEL_SETTING_CLS = 'has-expanded-drawer';
var EXP_DRAWER_CLS = 'expanded';
ns.SettingsController = function () {
this.drawerContainer = document.getElementById("drawer-container");
this.settingsContainer = $('.right-sticky-section');
this.expanded = false;
this.currentSetting = null;
};
/**
* @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');
$('[data-setting]').click(function(evt) {
var el = event.currentTarget;
var setting = el.dataset.setting;
if (this.currentSetting != setting) {
this.loadSetting(setting);
} else {
this.closeDrawer();
}
});
}.bind(this));
};
ns.SettingsController.prototype.loadSetting = function (setting) {
this.drawerContainer.innerHTML = this.getTemplate_(settings[setting].template);
(new settings[setting].controller()).init();
this.settingsContainer.addClass(EXP_DRAWER_CLS);
$('.' + SEL_SETTING_CLS).removeClass(SEL_SETTING_CLS);
$('[data-setting='+setting+']').addClass(SEL_SETTING_CLS);
this.currentSetting = setting;
};
ns.SettingsController.prototype.closeDrawer = function () {
this.settingsContainer.removeClass(EXP_DRAWER_CLS);
$('.' + SEL_SETTING_CLS).removeClass(SEL_SETTING_CLS);
this.currentSetting = null;
};
ns.SettingsController.prototype.getTemplate_ = function (templateId) {
var template = document.getElementById(templateId);
if (template) {
return template.innerHTML;
} else {
console.error("Could not find template for id :", templateId);
}
};
})();

38
js/controller/settings/ApplicationSettingsController.js Normal file
View File

@ -0,0 +1,38 @@
(function () {
var ns = $.namespace("pskl.controller.settings");
ns.ApplicationSettingsController = function () {};
/**
* @public
*/
ns.ApplicationSettingsController.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);
// 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');
}
});
};
})();

8
js/controller/settings/GifExportController.js Normal file
View File

@ -0,0 +1,8 @@
(function () {
var ns = $.namespace("pskl.controller.settings");
ns.GifExportController = function () {
};
ns.GifExportController.prototype.init = function () {};
})();