mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Plug canvas background settings on UserSettings storage
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:
parent
9eac3414a3
commit
5913b19641
10
index.html
10
index.html
|
@ -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>
|
||||||
|
|
|
@ -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');
|
||||||
|
|
|
@ -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,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'
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
Loading…
Reference in New Issue
Block a user