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

Plug canvas background settings on UserSettings storage

Browse Source 
Canvas background class are now manager at the FrameRenderer level
instead of CSS classes at the top of the DOM.
This commit is contained in:
Vince 2013-06-17 23:10:35 +02:00
parent 9eac3414a3
commit 5913b19641
4 changed files with 37 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -15,7 +15,7 @@
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap-tooltip-custom.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap-tooltip-custom.css">
<link rel="stylesheet" type="text/css" href="css/preview-film-section.css"> <link rel="stylesheet" type="text/css" href="css/preview-film-section.css">
</head> </head>
<body class="medium-canvas-background" data-current-background="medium-canvas-background"> <body>
<div class="sticky-section left-sticky-section" id="tool-section"> <div class="sticky-section left-sticky-section" id="tool-section">
<div class="wrap"> <div class="wrap">
<ul id="tools-container" class="tools-wrapper"></ul> <ul id="tools-container" class="tools-wrapper"></ul>
@ -54,16 +54,16 @@
<div class="settings-item"> <div class="settings-item">
<label>Background:</label> <label>Background:</label>
<div id="background-picker-wrapper" class="background-picker-wrapper"> <div id="background-picker-wrapper" class="background-picker-wrapper">
<div class="background-picker light-picker-background" data-background="light-canvas-background" <div class="background-picker light-picker-background" data-background-class="light-canvas-background"
rel="tooltip" data-placement="bottom" title="light / high contrast"> rel="tooltip" data-placement="bottom" title="light / high contrast">
</div> </div>
<div class="background-picker medium-picker-background selected" data-background="medium-canvas-background" <div class="background-picker medium-picker-background" data-background-class="medium-canvas-background"
rel="tooltip" data-placement="bottom" title="medium / high contrast"> rel="tooltip" data-placement="bottom" title="medium / high contrast">
</div> </div>
<div class="background-picker lowcont-medium-picker-background" data-background="lowcont-medium-canvas-background" <div class="background-picker lowcont-medium-picker-background" data-background-class="lowcont-medium-canvas-background"
rel="tooltip" data-placement="bottom" title="medium / low contrast"> rel="tooltip" data-placement="bottom" title="medium / low contrast">
</div> </div>
<div class="background-picker lowcont-dark-picker-background" data-background="lowcont-dark-canvas-background" <div class="background-picker lowcont-dark-picker-background" data-background-class="lowcont-dark-canvas-background"
rel="tooltip" data-placement="bottom" title="dark / low contrast"> rel="tooltip" data-placement="bottom" title="dark / low contrast">
</div> </div>
</div> </div>

14
js/controller/SettingsController.js
View File

@ -8,6 +8,13 @@
*/ */
ns.SettingsController.prototype.init = function() { 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); var show_grid = pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID);
$('#show-grid').prop('checked', show_grid); $('#show-grid').prop('checked', show_grid);
@ -27,11 +34,8 @@
$('#background-picker-wrapper').click(function(evt) { $('#background-picker-wrapper').click(function(evt) {
var target = $(evt.target).closest('.background-picker'); var target = $(evt.target).closest('.background-picker');
if (target.length) { if (target.length) {
var backgroundClass = target.data('background'); var backgroundClass = target.data('background-class');
var body = $('body'); pskl.UserSettings.set(pskl.UserSettings.CANVAS_BACKGROUND, backgroundClass);
body.removeClass(body.data('current-background'));
body.addClass(backgroundClass);
body.data('current-background', backgroundClass);
$('.background-picker').removeClass('selected'); $('.background-picker').removeClass('selected');
target.addClass('selected'); target.addClass('selected');

30
js/rendering/FrameRenderer.js
View File

@ -25,10 +25,8 @@
// Flag to know if the config was altered // Flag to know if the config was altered
this.canvasConfigDirty = true; this.canvasConfigDirty = true;
this.updateBackgroundClass_(pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND));
if(this.hasGrid) { $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
$.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
}
}; };
ns.FrameRenderer.prototype.init = function (frame) { ns.FrameRenderer.prototype.init = function (frame) {
@ -44,19 +42,27 @@
/** /**
* @private * @private
*/ */
ns.FrameRenderer.prototype.onUserSettingsChange_ = function (evt, settingsName, settingsValue) { ns.FrameRenderer.prototype.onUserSettingsChange_ = function (evt, settingName, settingValue) {
if(settingsName == pskl.UserSettings.SHOW_GRID) { if(settingName == pskl.UserSettings.SHOW_GRID) {
this.enableGrid(settingsValue); this.enableGrid(settingValue);
}
else if (settingName == pskl.UserSettings.CANVAS_BACKGROUND) {
this.updateBackgroundClass_(settingValue);
} }
}; };
ns.FrameRenderer.prototype.enableGrid = function (show) { /**
* @private
this.gridStrokeWidth = 0; */
if(show) { ns.FrameRenderer.prototype.updateBackgroundClass_ = function (newClass) {
this.gridStrokeWidth = Constants.GRID_STROKE_WIDTH; var currentClass = this.container.data('current-background-class');
if (currentClass) {
this.container.removeClass(currentClass);
} }
this.container.addClass(newClass);
this.container.data('current-background-class', newClass);
};
ns.FrameRenderer.prototype.enableGrid = function (flag) { ns.FrameRenderer.prototype.enableGrid = function (flag) {
this.gridStrokeWidth = (flag && this.supportGridRendering) ? Constants.GRID_STROKE_WIDTH : 0; this.gridStrokeWidth = (flag && this.supportGridRendering) ? Constants.GRID_STROKE_WIDTH : 0;

4
js/utils/UserSettings.js
View File

@ -4,9 +4,11 @@
ns.UserSettings = { ns.UserSettings = {
SHOW_GRID : 'SHOW_GRID', SHOW_GRID : 'SHOW_GRID',
CANVAS_BACKGROUND : 'CANVAS_BACKGROUND',
KEY_TO_DEFAULT_VALUE_MAP_ : { KEY_TO_DEFAULT_VALUE_MAP_ : {
'SHOW_GRID' : false 'SHOW_GRID' : false,
'CANVAS_BACKGROUND' : 'medium-canvas-background'
}, },
/** /**