mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Issue #636 - create Tabs widget and use it application settings panel
This commit is contained in:
parent
317fda83c3
commit
2976fd09ea
@ -1,11 +1,9 @@
|
||||
/*******************************/
|
||||
/* Application Setting panel */
|
||||
/*******************************/
|
||||
.application-settings-form {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.settings-section-application {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 0 20px;
|
||||
|
@ -100,45 +100,6 @@
|
||||
line-height: 23px;
|
||||
}
|
||||
|
||||
.export-tabs {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.export-tabs:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
z-index: 0;
|
||||
background-color: var(--highlight-color);
|
||||
}
|
||||
|
||||
.export-tab {
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 2px 2px 0 0;
|
||||
/* Make sure the tab and its border are positioned above the :after element; */
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.export-tab.selected,
|
||||
.export-tab:hover {
|
||||
color: var(--highlight-color);
|
||||
}
|
||||
|
||||
.export-tab.selected {
|
||||
border-color: var(--highlight-color);
|
||||
border-bottom-color: #444;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.export-panel-header {
|
||||
padding: 10px 5px 0px;
|
||||
}
|
||||
|
42
src/css/widgets-tabs.css
Normal file
42
src/css/widgets-tabs.css
Normal file
@ -0,0 +1,42 @@
|
||||
/*****************/
|
||||
/* TABS WIDGET */
|
||||
/*****************/
|
||||
|
||||
.tab-list {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tab-list:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
z-index: 0;
|
||||
background-color: var(--highlight-color);
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 2px 2px 0 0;
|
||||
/* Make sure the tab and its border are positioned above the :after element; */
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tab-item.selected,
|
||||
.tab-item:hover {
|
||||
color: var(--highlight-color);
|
||||
}
|
||||
|
||||
.tab-item.selected {
|
||||
border-color: var(--highlight-color);
|
||||
border-bottom-color: #444;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
}
|
@ -84,6 +84,9 @@
|
||||
|
||||
<!-- settings-panel partials -->
|
||||
@@include('templates/settings/application.html', {})
|
||||
@@include('templates/settings/application/grid.html', {})
|
||||
@@include('templates/settings/application/main.html', {})
|
||||
@@include('templates/settings/application/tile.html', {})
|
||||
@@include('templates/settings/resize.html', {})
|
||||
@@include('templates/settings/save.html', {})
|
||||
@@include('templates/settings/import.html', {})
|
||||
|
@ -1,144 +1,35 @@
|
||||
(function () {
|
||||
var ns = $.namespace('pskl.controller.settings');
|
||||
|
||||
ns.ApplicationSettingsController = function () {};
|
||||
var tabs = {
|
||||
'main' : {
|
||||
template : 'templates/settings/application/main.html',
|
||||
controller : ns.application.MainApplicationController
|
||||
},
|
||||
'grid' : {
|
||||
template : 'templates/settings/application/grid.html',
|
||||
controller : ns.application.GridApplicationController
|
||||
},
|
||||
'tile' : {
|
||||
template : 'templates/settings/application/tile.html',
|
||||
controller : ns.application.TileApplicationController
|
||||
}
|
||||
};
|
||||
|
||||
ns.ApplicationSettingsController = function () {
|
||||
this.tabsWidget = new pskl.widgets.Tabs(tabs, this, pskl.UserSettings.APPLICATION_SETTINGS_TAB);
|
||||
};
|
||||
|
||||
pskl.utils.inherit(ns.ApplicationSettingsController, pskl.controller.settings.AbstractSettingController);
|
||||
|
||||
ns.ApplicationSettingsController.prototype.init = function() {
|
||||
this.backgroundContainer = document.querySelector('.background-picker-wrapper');
|
||||
this.addEventListener(this.backgroundContainer, 'click', this.onBackgroundClick_);
|
||||
|
||||
// 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);
|
||||
var gridSelect = document.querySelector('.grid-width-select');
|
||||
var selectedOption = gridSelect.querySelector('option[value="' + gridWidth + '"]');
|
||||
if (selectedOption) {
|
||||
selectedOption.setAttribute('selected', 'selected');
|
||||
}
|
||||
|
||||
this.addEventListener(gridSelect, 'change', this.onGridWidthChange_);
|
||||
|
||||
// Seamless mode
|
||||
var seamlessMode = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_MODE);
|
||||
var seamlessModeCheckbox = document.querySelector('.seamless-mode-checkbox');
|
||||
if (seamlessMode) {
|
||||
seamlessModeCheckbox.setAttribute('checked', seamlessMode);
|
||||
}
|
||||
this.addEventListener(seamlessModeCheckbox, 'change', this.onSeamlessModeChange_);
|
||||
|
||||
// Max FPS
|
||||
var maxFpsInput = document.querySelector('.max-fps-input');
|
||||
maxFpsInput.value = pskl.UserSettings.get(pskl.UserSettings.MAX_FPS);
|
||||
this.addEventListener(maxFpsInput, 'change', this.onMaxFpsChange_);
|
||||
|
||||
// Color format
|
||||
var colorFormat = pskl.UserSettings.get(pskl.UserSettings.COLOR_FORMAT);
|
||||
var colorFormatSelect = document.querySelector('.color-format-select');
|
||||
var selectedColorFormatOption = colorFormatSelect.querySelector('option[value="' + colorFormat + '"]');
|
||||
if (selectedColorFormatOption) {
|
||||
selectedColorFormatOption.setAttribute('selected', 'selected');
|
||||
}
|
||||
|
||||
this.addEventListener(colorFormatSelect, 'change', this.onColorFormatChange_);
|
||||
|
||||
// Layer preview opacity
|
||||
var layerOpacityInput = document.querySelector('.layer-opacity-input');
|
||||
layerOpacityInput.value = pskl.UserSettings.get(pskl.UserSettings.LAYER_OPACITY);
|
||||
this.addEventListener(layerOpacityInput, 'change', this.onLayerOpacityChange_);
|
||||
this.addEventListener(layerOpacityInput, 'input', this.onLayerOpacityChange_);
|
||||
this.updateLayerOpacityText_(layerOpacityInput.value);
|
||||
|
||||
// Seamless mask opacity
|
||||
var seamlessOpacityInput = document.querySelector('.seamless-opacity-input');
|
||||
seamlessOpacityInput.value = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_OPACITY);
|
||||
this.addEventListener(seamlessOpacityInput, 'change', this.onSeamlessOpacityChange_);
|
||||
this.addEventListener(seamlessOpacityInput, 'input', this.onSeamlessOpacityChange_);
|
||||
this.updateSeamlessOpacityText_(seamlessOpacityInput.value);
|
||||
|
||||
// Form
|
||||
this.applicationSettingsForm = document.querySelector('[name="application-settings-form"]');
|
||||
this.addEventListener(this.applicationSettingsForm, 'submit', this.onFormSubmit_);
|
||||
var container = document.querySelector('.settings-section-application');
|
||||
this.tabsWidget.init(container);
|
||||
};
|
||||
|
||||
ns.ApplicationSettingsController.prototype.onGridWidthChange_ = function (evt) {
|
||||
var width = parseInt(evt.target.value, 10);
|
||||
pskl.UserSettings.set(pskl.UserSettings.GRID_WIDTH, width);
|
||||
ns.ApplicationSettingsController.prototype.destroy = function () {
|
||||
this.tabsWidget.destroy();
|
||||
this.superclass.destroy.call(this);
|
||||
};
|
||||
|
||||
ns.ApplicationSettingsController.prototype.onColorFormatChange_ = function (evt) {
|
||||
pskl.UserSettings.set(pskl.UserSettings.COLOR_FORMAT, evt.target.value);
|
||||
};
|
||||
|
||||
ns.ApplicationSettingsController.prototype.onSeamlessModeChange_ = function (evt) {
|
||||
pskl.UserSettings.set(pskl.UserSettings.SEAMLESS_MODE, evt.currentTarget.checked);
|
||||
};
|
||||
|
||||
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');
|
||||
}
|
||||
};
|
||||
|
||||
ns.ApplicationSettingsController.prototype.onMaxFpsChange_ = function (evt) {
|
||||
var target = evt.target;
|
||||
var fps = parseInt(target.value, 10);
|
||||
if (fps && !isNaN(fps)) {
|
||||
pskl.UserSettings.set(pskl.UserSettings.MAX_FPS, fps);
|
||||
} else {
|
||||
target.value = pskl.UserSettings.get(pskl.UserSettings.MAX_FPS);
|
||||
}
|
||||
};
|
||||
|
||||
ns.ApplicationSettingsController.prototype.onLayerOpacityChange_ = function (evt) {
|
||||
var target = evt.target;
|
||||
var opacity = parseFloat(target.value);
|
||||
if (!isNaN(opacity)) {
|
||||
pskl.UserSettings.set(pskl.UserSettings.LAYER_OPACITY, opacity);
|
||||
pskl.UserSettings.set(pskl.UserSettings.LAYER_PREVIEW, opacity !== 0);
|
||||
this.updateLayerOpacityText_(opacity);
|
||||
} else {
|
||||
target.value = pskl.UserSettings.get(pskl.UserSettings.LAYER_OPACITY);
|
||||
}
|
||||
};
|
||||
|
||||
ns.ApplicationSettingsController.prototype.onSeamlessOpacityChange_ = function (evt) {
|
||||
var target = evt.target;
|
||||
var opacity = parseFloat(target.value);
|
||||
if (!isNaN(opacity)) {
|
||||
pskl.UserSettings.set(pskl.UserSettings.SEAMLESS_OPACITY, opacity);
|
||||
this.updateSeamlessOpacityText_(opacity);
|
||||
} else {
|
||||
target.value = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_OPACITY);
|
||||
}
|
||||
};
|
||||
|
||||
ns.ApplicationSettingsController.prototype.updateLayerOpacityText_ = function (opacity) {
|
||||
var layerOpacityText = document.querySelector('.layer-opacity-text');
|
||||
layerOpacityText.innerHTML = opacity;
|
||||
};
|
||||
|
||||
ns.ApplicationSettingsController.prototype.updateSeamlessOpacityText_ = function (opacity) {
|
||||
var seamlessOpacityText = document.querySelector('.seamless-opacity-text');
|
||||
seamlessOpacityText.innerHTML = opacity;
|
||||
};
|
||||
|
||||
ns.ApplicationSettingsController.prototype.onFormSubmit_ = function (evt) {
|
||||
evt.preventDefault();
|
||||
$.publish(Events.CLOSE_SETTINGS_DRAWER);
|
||||
};
|
||||
})();
|
||||
|
@ -0,0 +1,26 @@
|
||||
(function () {
|
||||
var ns = $.namespace('pskl.controller.settings.application');
|
||||
|
||||
ns.GridApplicationController = function (piskelController, applicationController) {
|
||||
this.piskelController = piskelController;
|
||||
this.applicationController = applicationController;
|
||||
};
|
||||
|
||||
pskl.utils.inherit(ns.GridApplicationController, pskl.controller.settings.AbstractSettingController);
|
||||
|
||||
ns.GridApplicationController.prototype.init = function () {
|
||||
// Grid display and size
|
||||
var gridWidth = pskl.UserSettings.get(pskl.UserSettings.GRID_WIDTH);
|
||||
var gridSelect = document.querySelector('.grid-width-select');
|
||||
var selectedOption = gridSelect.querySelector('option[value="' + gridWidth + '"]');
|
||||
if (selectedOption) {
|
||||
selectedOption.setAttribute('selected', 'selected');
|
||||
}
|
||||
this.addEventListener(gridSelect, 'change', this.onGridWidthChange_);
|
||||
};
|
||||
|
||||
ns.GridApplicationController.prototype.onGridWidthChange_ = function (evt) {
|
||||
var width = parseInt(evt.target.value, 10);
|
||||
pskl.UserSettings.set(pskl.UserSettings.GRID_WIDTH, width);
|
||||
};
|
||||
})();
|
@ -0,0 +1,88 @@
|
||||
(function () {
|
||||
var ns = $.namespace('pskl.controller.settings.application');
|
||||
|
||||
ns.MainApplicationController = function (piskelController, applicationController) {
|
||||
this.piskelController = piskelController;
|
||||
this.applicationController = applicationController;
|
||||
};
|
||||
|
||||
pskl.utils.inherit(ns.MainApplicationController, pskl.controller.settings.AbstractSettingController);
|
||||
|
||||
ns.MainApplicationController.prototype.init = function () {
|
||||
|
||||
this.backgroundContainer = document.querySelector('.background-picker-wrapper');
|
||||
this.addEventListener(this.backgroundContainer, 'click', this.onBackgroundClick_);
|
||||
|
||||
// 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');
|
||||
}
|
||||
|
||||
// Max FPS
|
||||
var maxFpsInput = document.querySelector('.max-fps-input');
|
||||
maxFpsInput.value = pskl.UserSettings.get(pskl.UserSettings.MAX_FPS);
|
||||
this.addEventListener(maxFpsInput, 'change', this.onMaxFpsChange_);
|
||||
|
||||
// Color format
|
||||
var colorFormat = pskl.UserSettings.get(pskl.UserSettings.COLOR_FORMAT);
|
||||
var colorFormatSelect = document.querySelector('.color-format-select');
|
||||
var selectedColorFormatOption = colorFormatSelect.querySelector('option[value="' + colorFormat + '"]');
|
||||
if (selectedColorFormatOption) {
|
||||
selectedColorFormatOption.setAttribute('selected', 'selected');
|
||||
}
|
||||
this.addEventListener(colorFormatSelect, 'change', this.onColorFormatChange_);
|
||||
|
||||
// Layer preview opacity
|
||||
var layerOpacityInput = document.querySelector('.layer-opacity-input');
|
||||
layerOpacityInput.value = pskl.UserSettings.get(pskl.UserSettings.LAYER_OPACITY);
|
||||
this.addEventListener(layerOpacityInput, 'change', this.onLayerOpacityChange_);
|
||||
this.addEventListener(layerOpacityInput, 'input', this.onLayerOpacityChange_);
|
||||
this.updateLayerOpacityText_(layerOpacityInput.value);
|
||||
};
|
||||
|
||||
ns.MainApplicationController.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');
|
||||
}
|
||||
};
|
||||
|
||||
ns.MainApplicationController.prototype.onColorFormatChange_ = function (evt) {
|
||||
pskl.UserSettings.set(pskl.UserSettings.COLOR_FORMAT, evt.target.value);
|
||||
};
|
||||
|
||||
ns.MainApplicationController.prototype.onMaxFpsChange_ = function (evt) {
|
||||
var target = evt.target;
|
||||
var fps = parseInt(target.value, 10);
|
||||
if (fps && !isNaN(fps)) {
|
||||
pskl.UserSettings.set(pskl.UserSettings.MAX_FPS, fps);
|
||||
} else {
|
||||
target.value = pskl.UserSettings.get(pskl.UserSettings.MAX_FPS);
|
||||
}
|
||||
};
|
||||
|
||||
ns.MainApplicationController.prototype.onLayerOpacityChange_ = function (evt) {
|
||||
var target = evt.target;
|
||||
var opacity = parseFloat(target.value);
|
||||
if (!isNaN(opacity)) {
|
||||
pskl.UserSettings.set(pskl.UserSettings.LAYER_OPACITY, opacity);
|
||||
pskl.UserSettings.set(pskl.UserSettings.LAYER_PREVIEW, opacity !== 0);
|
||||
this.updateLayerOpacityText_(opacity);
|
||||
} else {
|
||||
target.value = pskl.UserSettings.get(pskl.UserSettings.LAYER_OPACITY);
|
||||
}
|
||||
};
|
||||
|
||||
ns.MainApplicationController.prototype.updateLayerOpacityText_ = function (opacity) {
|
||||
var layerOpacityText = document.querySelector('.layer-opacity-text');
|
||||
layerOpacityText.innerHTML = (opacity * 1).toFixed(2);
|
||||
};
|
||||
})();
|
@ -0,0 +1,47 @@
|
||||
(function () {
|
||||
var ns = $.namespace('pskl.controller.settings.application');
|
||||
|
||||
ns.TileApplicationController = function (piskelController, applicationController) {
|
||||
this.piskelController = piskelController;
|
||||
this.applicationController = applicationController;
|
||||
};
|
||||
|
||||
pskl.utils.inherit(ns.TileApplicationController, pskl.controller.settings.AbstractSettingController);
|
||||
|
||||
ns.TileApplicationController.prototype.init = function () {
|
||||
// Seamless mode
|
||||
var seamlessMode = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_MODE);
|
||||
var seamlessModeCheckbox = document.querySelector('.seamless-mode-checkbox');
|
||||
if (seamlessMode) {
|
||||
seamlessModeCheckbox.setAttribute('checked', seamlessMode);
|
||||
}
|
||||
this.addEventListener(seamlessModeCheckbox, 'change', this.onSeamlessModeChange_);
|
||||
|
||||
// Seamless mask opacity
|
||||
var seamlessOpacityInput = document.querySelector('.seamless-opacity-input');
|
||||
seamlessOpacityInput.value = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_OPACITY);
|
||||
this.addEventListener(seamlessOpacityInput, 'change', this.onSeamlessOpacityChange_);
|
||||
this.addEventListener(seamlessOpacityInput, 'input', this.onSeamlessOpacityChange_);
|
||||
this.updateSeamlessOpacityText_(seamlessOpacityInput.value);
|
||||
};
|
||||
|
||||
ns.TileApplicationController.prototype.onSeamlessModeChange_ = function (evt) {
|
||||
pskl.UserSettings.set(pskl.UserSettings.SEAMLESS_MODE, evt.currentTarget.checked);
|
||||
};
|
||||
|
||||
ns.TileApplicationController.prototype.onSeamlessOpacityChange_ = function (evt) {
|
||||
var target = evt.target;
|
||||
var opacity = parseFloat(target.value);
|
||||
if (!isNaN(opacity)) {
|
||||
pskl.UserSettings.set(pskl.UserSettings.SEAMLESS_OPACITY, opacity);
|
||||
this.updateSeamlessOpacityText_(opacity);
|
||||
} else {
|
||||
target.value = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_OPACITY);
|
||||
}
|
||||
};
|
||||
|
||||
ns.TileApplicationController.prototype.updateSeamlessOpacityText_ = function (opacity) {
|
||||
var seamlessOpacityText = document.querySelector('.seamless-opacity-text');
|
||||
seamlessOpacityText.innerHTML = (opacity * 1).toFixed(2);
|
||||
};
|
||||
})();
|
@ -22,6 +22,7 @@
|
||||
|
||||
ns.ExportController = function (piskelController) {
|
||||
this.piskelController = piskelController;
|
||||
this.tabsWidget = new pskl.widgets.Tabs(tabs, this, pskl.UserSettings.EXPORT_TAB);
|
||||
this.onSizeInputChange_ = this.onSizeInputChange_.bind(this);
|
||||
};
|
||||
|
||||
@ -47,47 +48,16 @@
|
||||
this.onSizeInputChange_();
|
||||
|
||||
// Initialize tabs and panel
|
||||
this.exportPanel = document.querySelector('.export-panel');
|
||||
this.exportTabs = document.querySelector('.export-tabs');
|
||||
this.addEventListener(this.exportTabs, 'click', this.onTabsClicked_);
|
||||
|
||||
var tab = pskl.UserSettings.get(pskl.UserSettings.EXPORT_TAB);
|
||||
this.selectTab(tab);
|
||||
var container = document.querySelector('.settings-section-export');
|
||||
this.tabsWidget.init(container);
|
||||
};
|
||||
|
||||
ns.ExportController.prototype.destroy = function () {
|
||||
this.sizeInputWidget.destroy();
|
||||
this.currentController.destroy();
|
||||
this.tabsWidget.destroy();
|
||||
this.superclass.destroy.call(this);
|
||||
};
|
||||
|
||||
ns.ExportController.prototype.selectTab = function (tabId) {
|
||||
if (!tabs[tabId] || this.currentTab == tabId) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.currentController) {
|
||||
this.currentController.destroy();
|
||||
}
|
||||
|
||||
this.exportPanel.innerHTML = pskl.utils.Template.get(tabs[tabId].template);
|
||||
this.currentController = new tabs[tabId].controller(this.piskelController, this);
|
||||
this.currentController.init();
|
||||
this.currentTab = tabId;
|
||||
pskl.UserSettings.set(pskl.UserSettings.EXPORT_TAB, tabId);
|
||||
|
||||
var selectedTab = this.exportTabs.querySelector('.selected');
|
||||
if (selectedTab) {
|
||||
selectedTab.classList.remove('selected');
|
||||
}
|
||||
this.exportTabs.querySelector('[data-tab-id="' + tabId + '"]').classList.add('selected');
|
||||
};
|
||||
|
||||
ns.ExportController.prototype.onTabsClicked_ = function (e) {
|
||||
var tabId = pskl.utils.Dom.getData(e.target, 'tabId');
|
||||
this.selectTab(tabId);
|
||||
};
|
||||
|
||||
ns.ExportController.prototype.onScaleChange_ = function () {
|
||||
var value = parseFloat(this.scaleInput.value);
|
||||
if (!isNaN(value)) {
|
||||
|
@ -19,6 +19,7 @@
|
||||
RESIZE_SETTINGS: 'RESIZE_SETTINGS',
|
||||
COLOR_FORMAT: 'COLOR_FORMAT',
|
||||
TRANSFORM_SHOW_MORE: 'TRANSFORM_SHOW_MORE',
|
||||
APPLICATION_SETTINGS_TAB: 'APPLICATION_SETTINGS_TAB',
|
||||
KEY_TO_DEFAULT_VALUE_MAP_ : {
|
||||
'GRID_WIDTH' : 0,
|
||||
'MAX_FPS' : 24,
|
||||
@ -44,6 +45,7 @@
|
||||
},
|
||||
COLOR_FORMAT: 'hex',
|
||||
TRANSFORM_SHOW_MORE: false,
|
||||
APPLICATION_SETTINGS_TAB: 'main',
|
||||
},
|
||||
|
||||
/**
|
||||
|
70
src/js/widgets/Tabs.js
Normal file
70
src/js/widgets/Tabs.js
Normal file
@ -0,0 +1,70 @@
|
||||
(function () {
|
||||
var ns = $.namespace('pskl.widgets');
|
||||
|
||||
/**
|
||||
* Simple layout widget to display one step element (DOM Element) at a time.
|
||||
* When switching to another step, the new step element will slide over the
|
||||
* current step element. When going back to the previous step, the current
|
||||
* step element will slide out from the container to reveal the previous one.
|
||||
*
|
||||
* @param {Object} steps map of step descriptions with the step name as the key.
|
||||
* Each step description contains:
|
||||
* - el {Element} the DOM Element corresponding to this step
|
||||
* - name {String} the name of the step (redundant with the key)
|
||||
* @param {Element} container the DOM Element in which the wizard should be
|
||||
* displayed.
|
||||
*/
|
||||
ns.Tabs = function (tabs, parentController, settingsName) {
|
||||
this.tabs = tabs;
|
||||
this.parentController = parentController;
|
||||
this.settingsName = settingsName;
|
||||
|
||||
this.currentTab = null;
|
||||
this.currentController = null;
|
||||
};
|
||||
|
||||
ns.Tabs.prototype.init = function (container) {
|
||||
this.tabListEl = container.querySelector('.tab-list');
|
||||
this.tabContentlEl = container.querySelector('.tab-content');
|
||||
pskl.utils.Event.addEventListener(this.tabListEl, 'click', this.onTabsClicked_, this);
|
||||
|
||||
var tab = pskl.UserSettings.get(this.settingsName);
|
||||
if (tab) {
|
||||
this.selectTab(tab);
|
||||
}
|
||||
};
|
||||
|
||||
ns.Tabs.prototype.destroy = function () {
|
||||
if (this.currentController) {
|
||||
this.currentController.destroy();
|
||||
}
|
||||
pskl.utils.Event.removeAllEventListeners(this);
|
||||
};
|
||||
|
||||
ns.Tabs.prototype.selectTab = function (tabId) {
|
||||
if (!this.tabs[tabId] || this.currentTab == tabId) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.currentController) {
|
||||
this.currentController.destroy();
|
||||
}
|
||||
|
||||
this.tabContentlEl.innerHTML = pskl.utils.Template.get(this.tabs[tabId].template);
|
||||
this.currentController = new this.tabs[tabId].controller(pskl.app.piskelController, this.parentController);
|
||||
this.currentController.init();
|
||||
this.currentTab = tabId;
|
||||
pskl.UserSettings.set(this.settingsName, tabId);
|
||||
|
||||
var selectedTab = this.tabListEl.querySelector('.selected');
|
||||
if (selectedTab) {
|
||||
selectedTab.classList.remove('selected');
|
||||
}
|
||||
this.tabListEl.querySelector('[data-tab-id="' + tabId + '"]').classList.add('selected');
|
||||
};
|
||||
|
||||
ns.Tabs.prototype.onTabsClicked_ = function (e) {
|
||||
var tabId = pskl.utils.Dom.getData(e.target, 'tabId');
|
||||
this.selectTab(tabId);
|
||||
};
|
||||
})();
|
@ -122,6 +122,9 @@
|
||||
|
||||
// Settings sub-controllers
|
||||
"js/controller/settings/AbstractSettingController.js",
|
||||
"js/controller/settings/application/GridApplicationController.js",
|
||||
"js/controller/settings/application/MainApplicationController.js",
|
||||
"js/controller/settings/application/TileApplicationController.js",
|
||||
"js/controller/settings/ApplicationSettingsController.js",
|
||||
"js/controller/settings/exportimage/GifExportController.js",
|
||||
"js/controller/settings/exportimage/PngExportController.js",
|
||||
@ -160,6 +163,7 @@
|
||||
"js/widgets/HslRgbColorPicker.js",
|
||||
"js/widgets/SizeInput.js",
|
||||
"js/widgets/SynchronizedInputs.js",
|
||||
"js/widgets/Tabs.js",
|
||||
"js/widgets/Wizard.js",
|
||||
|
||||
// Services
|
||||
|
@ -39,5 +39,6 @@
|
||||
"css/minimap.css",
|
||||
"css/widgets-anchor.css",
|
||||
"css/widgets-frame-picker.css",
|
||||
"css/widgets-tabs.css",
|
||||
"css/widgets-wizard.css"
|
||||
];
|
@ -1,71 +1,12 @@
|
||||
<script type="text/html" id="templates/settings/application.html">
|
||||
<form action="" method="POST" name="application-settings-form" class="application-settings-form">
|
||||
<div class="settings-section settings-section-application">
|
||||
<div class="settings-title">
|
||||
General
|
||||
<div class="settings-title">Settings</div>
|
||||
<div class="tab-list">
|
||||
<div class="tab-item" data-tab-id="main">Main</div>
|
||||
<div class="tab-item" data-tab-id="grid">Grid</div>
|
||||
<div class="tab-item" data-tab-id="tile">Tile mode</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label>Background</label>
|
||||
<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="medium-canvas-background"
|
||||
rel="tooltip" data-placement="bottom" title="medium / high contrast">
|
||||
</div>
|
||||
<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="lowcont-dark-canvas-background"
|
||||
rel="tooltip" data-placement="bottom" title="dark / low contrast">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="grid-width">Pixel grid</label>
|
||||
<select id="grid-width" class="grid-width-select">
|
||||
<option value="0">Disabled</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>Layer opacity</label>
|
||||
<input type="range" class="settings-opacity-input layer-opacity-input" name="layer-opacity" min="0" max="1" step="0.05"/>
|
||||
<span class="settings-opacity-text layer-opacity-text"></span>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label>
|
||||
Seamless drawing mode
|
||||
<input type="checkbox" value="1" class="seamless-mode-checkbox" name="seamless-mode-checkbox"/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label>Seamless opacity</label>
|
||||
<input type="range" class="settings-opacity-input seamless-opacity-input" name="seamless-opacity" min="0" max="0.5" step="0.01"/>
|
||||
<span class="settings-opacity-text seamless-opacity-text"></span>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label>Maximum FPS</label>
|
||||
<input type="text" class="textfield textfield-small max-fps-input" autocomplete="off" name="max-fps"/>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="color-format">Color format</label>
|
||||
<select id="color-format" class="color-format-select">
|
||||
<option value="hex">Hex</option>
|
||||
<option value="rgb">RGB</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="tab-content"></div>
|
||||
<div class="settings-version-info">
|
||||
Piskel
|
||||
<span rel="tooltip" data-placement="bottom" title="View release notes">
|
||||
@ -73,8 +14,6 @@
|
||||
href="https://github.com/piskelapp/piskel/releases/tag/v@@releaseVersion">v@@releaseVersion</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<input type="submit" class="button button-primary" value="Apply settings" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</script>
|
||||
|
14
src/templates/settings/application/grid.html
Normal file
14
src/templates/settings/application/grid.html
Normal file
@ -0,0 +1,14 @@
|
||||
<script type="text/html" id="templates/settings/application/grid.html">
|
||||
<div class="application-panel-grid">
|
||||
<div class="settings-item">
|
||||
<label for="grid-width">Pixel grid</label>
|
||||
<select id="grid-width" class="grid-width-select">
|
||||
<option value="0">Disabled</option>
|
||||
<option value="1">1px</option>
|
||||
<option value="2">2px</option>
|
||||
<option value="3">3px</option>
|
||||
<option value="4">4px</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
40
src/templates/settings/application/main.html
Normal file
40
src/templates/settings/application/main.html
Normal file
@ -0,0 +1,40 @@
|
||||
<script type="text/html" id="templates/settings/application/main.html">
|
||||
<div class="application-panel-main">
|
||||
<div class="settings-item">
|
||||
<label>Background</label>
|
||||
<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="medium-canvas-background"
|
||||
rel="tooltip" data-placement="bottom" title="medium / high contrast">
|
||||
</div>
|
||||
<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="lowcont-dark-canvas-background"
|
||||
rel="tooltip" data-placement="bottom" title="dark / low contrast">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label>Layer opacity</label>
|
||||
<input type="range" class="settings-opacity-input layer-opacity-input" name="layer-opacity" min="0" max="1" step="0.05"/>
|
||||
<span class="settings-opacity-text layer-opacity-text"></span>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label>Maximum FPS</label>
|
||||
<input type="text" class="textfield textfield-small max-fps-input" autocomplete="off" name="max-fps"/>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label for="color-format">Color format</label>
|
||||
<select id="color-format" class="color-format-select">
|
||||
<option value="hex">Hex</option>
|
||||
<option value="rgb">RGB</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
16
src/templates/settings/application/tile.html
Normal file
16
src/templates/settings/application/tile.html
Normal file
@ -0,0 +1,16 @@
|
||||
<script type="text/html" id="templates/settings/application/tile.html">
|
||||
<div class="application-panel-tile">
|
||||
<div class="settings-item">
|
||||
<label>
|
||||
Seamless drawing mode
|
||||
<input type="checkbox" value="1" class="seamless-mode-checkbox" name="seamless-mode-checkbox"/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="settings-item">
|
||||
<label>Seamless opacity</label>
|
||||
<input type="range" class="settings-opacity-input seamless-opacity-input" name="seamless-opacity" min="0" max="0.5" step="0.01"/>
|
||||
<span class="settings-opacity-text seamless-opacity-text"></span>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
@ -14,12 +14,12 @@
|
||||
<div class="resize-label">x</div>
|
||||
<input type="text" class="textfield resize-field resize-height" autocomplete="off" name="resize-height"/>
|
||||
</div>
|
||||
<div class="export-tabs">
|
||||
<div class="export-tab" data-tab-id="gif">GIF</div>
|
||||
<div class="export-tab" data-tab-id="png">PNG</div>
|
||||
<div class="export-tab" data-tab-id="zip">Zip</div>
|
||||
<div class="export-tab" data-tab-id="misc">Others</div>
|
||||
<div class="export-tabs tab-list">
|
||||
<div class="export-tab tab-item" data-tab-id="gif">GIF</div>
|
||||
<div class="export-tab tab-item" data-tab-id="png">PNG</div>
|
||||
<div class="export-tab tab-item" data-tab-id="zip">Zip</div>
|
||||
<div class="export-tab tab-item" data-tab-id="misc">Others</div>
|
||||
</div>
|
||||
<div class="export-panel"></div>
|
||||
<div class="export-panel tab-content"></div>
|
||||
</div>
|
||||
</script>
|
||||
|
Loading…
Reference in New Issue
Block a user