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

Removed JQuery from ApplicationSettings

Browse Source
This commit is contained in:
juliandescottes 2015-02-21 15:41:32 +01:00
parent 334d6ad21f
commit beb2fa6ba9
2 changed files with 53 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/js/controller/settings/ApplicationSettingsController.js
View File

@ -3,38 +3,42 @@
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');
this.backgroundContainer = document.querySelector('.background-picker-wrapper');
this.backgroundContainer.addEventListener('click', this.onBackgroundClick_.bind(this));
// Highlight selected background :
var background = pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND);
var selectedBackground = this.backgroundContainer.querySelector('[data-background=' + background + ']');
if (selectedBackground) {
selectedBackground.classList.add('selected');
}
// Grid display and size
var gridWidth = pskl.UserSettings.get(pskl.UserSettings.GRID_WIDTH);
$('#grid-width').val(gridWidth);
$('#grid-width').change(this.onGridWidthChange.bind(this));
// Handle canvas background changes:
$('#background-picker-wrapper').click(this.onBackgroundClick.bind(this));
var gridSelect = document.querySelector('.grid-width-select');
var selectedOption = gridSelect.querySelector('option[value="'+gridWidth+'"]');
if (selectedOption) {
selectedOption.setAttribute('selected', 'selected');
}
gridSelect.addEventListener('change', this.onGridWidthChange_.bind(this));
};
ns.ApplicationSettingsController.prototype.onGridWidthChange = function (evt) {
ns.ApplicationSettingsController.prototype.onGridWidthChange_ = function (evt) {
var width = $('#grid-width').val();
pskl.UserSettings.set(pskl.UserSettings.GRID_WIDTH, parseInt(width, 10));
};
ns.ApplicationSettingsController.prototype.onBackgroundClick = 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');
ns.ApplicationSettingsController.prototype.onBackgroundClick_ = function (evt) {
var target = evt.target;
var background = target.dataset.background;
if (background) {
pskl.UserSettings.set(pskl.UserSettings.CANVAS_BACKGROUND, background);
var selected = this.backgroundContainer.querySelector('.selected');
if (selected) {
selected.classList.remove('selected');
}
target.classList.add('selected');
}
};

43
src/templates/settings/application.html
View File

@ -1,38 +1,49 @@
<div class="settings-section">
<div class="settings-title">
Preferences:
General
</div>
<div class="settings-item">
<label>Background:</label>
<div id="background-picker-wrapper" class="background-picker-wrapper">
<div class="background-picker light-picker-background" data-background-class="light-canvas-background"
<div class="background-picker-wrapper">
<div class="background-picker light-picker-background" data-background="light-canvas-background"
rel="tooltip" data-placement="bottom" title="light / high contrast">
</div>
<div class="background-picker medium-picker-background" data-background-class="medium-canvas-background"
<div class="background-picker medium-picker-background" data-background="medium-canvas-background"
rel="tooltip" data-placement="bottom" title="medium / high contrast">
</div>
<div class="background-picker lowcont-medium-picker-background" data-background-class="lowcont-medium-canvas-background"
<div class="background-picker lowcont-medium-picker-background" data-background="lowcont-medium-canvas-background"
rel="tooltip" data-placement="bottom" title="medium / low contrast">
</div>
<div class="background-picker lowcont-dark-picker-background" data-background-class="lowcont-dark-canvas-background"
<div class="background-picker lowcont-dark-picker-background" data-background="lowcont-dark-canvas-background"
rel="tooltip" data-placement="bottom" title="dark / low contrast">
</div>
</div>
</div>
<div class="settings-item">
<label for="grid-width">Grid :</label>
<select id="grid-width">
<select id="grid-width" class="grid-width-select">
<option value="0">Disabled</option>
<option value="1">Enabled - 1px wide</option>
<option value="2">Enabled - 2px wide</option>
<option value="3">Enabled - 3px wide</option>
<option value="4">Enabled - 4px wide</option>
<option value="1">1px</option>
<option value="2">2px</option>
<option value="3">3px</option>
<option value="4">4px</option>
</select>
</div>
<!-- <div class="settings-item">
<label for="tiled-preview">Display tiled preview :</label>
<input type="checkbox" value="1" id="tiled-preview" name="tiled-preview-checkbox"/>
</div> -->
</div>
<div class="settings-section">
<div class="settings-title">
Preview
</div>
<div class="settings-item">
<label for="tiled-preview">Display tiled preview :</label>
<input type="checkbox" value="1" id="tiled-preview" name="tiled-preview-checkbox"/>
</div>
<div class="settings-item">
<label for="tiled-preview">Max FPS :</label>
<input type="text" class="textfield max-fps-field" name="max-fps"/>
</div>
</div>