From 2976fd09ea1f901cbb3fff81c0cfaa8aa24b35c2 Mon Sep 17 00:00:00 2001 From: Julian Descottes Date: Mon, 5 Jun 2017 00:54:23 +0200 Subject: [PATCH] Issue #636 - create Tabs widget and use it application settings panel --- src/css/settings-application.css | 4 +- src/css/settings-export.css | 39 ----- src/css/widgets-tabs.css | 42 +++++ src/index.html | 3 + .../settings/ApplicationSettingsController.js | 155 +++--------------- .../application/GridApplicationController.js | 26 +++ .../application/MainApplicationController.js | 88 ++++++++++ .../application/TileApplicationController.js | 47 ++++++ .../settings/exportimage/ExportController.js | 38 +---- src/js/utils/UserSettings.js | 2 + src/js/widgets/Tabs.js | 70 ++++++++ src/piskel-script-list.js | 4 + src/piskel-style-list.js | 1 + src/templates/settings/application.html | 93 ++--------- src/templates/settings/application/grid.html | 14 ++ src/templates/settings/application/main.html | 40 +++++ src/templates/settings/application/tile.html | 16 ++ src/templates/settings/export.html | 12 +- 18 files changed, 403 insertions(+), 291 deletions(-) create mode 100644 src/css/widgets-tabs.css create mode 100644 src/js/controller/settings/application/GridApplicationController.js create mode 100644 src/js/controller/settings/application/MainApplicationController.js create mode 100644 src/js/controller/settings/application/TileApplicationController.js create mode 100644 src/js/widgets/Tabs.js create mode 100644 src/templates/settings/application/grid.html create mode 100644 src/templates/settings/application/main.html create mode 100644 src/templates/settings/application/tile.html diff --git a/src/css/settings-application.css b/src/css/settings-application.css index 19c3bd86..e100e72b 100644 --- a/src/css/settings-application.css +++ b/src/css/settings-application.css @@ -1,11 +1,9 @@ /*******************************/ /* Application Setting panel */ /*******************************/ -.application-settings-form { - height: 100%; -} .settings-section-application { + height: 100%; position: relative; overflow: hidden; margin: 0 20px; diff --git a/src/css/settings-export.css b/src/css/settings-export.css index b667c0d7..195e95e6 100644 --- a/src/css/settings-export.css +++ b/src/css/settings-export.css @@ -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; } diff --git a/src/css/widgets-tabs.css b/src/css/widgets-tabs.css new file mode 100644 index 00000000..c113f63a --- /dev/null +++ b/src/css/widgets-tabs.css @@ -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; +} \ No newline at end of file diff --git a/src/index.html b/src/index.html index c8580157..d7cfe429 100644 --- a/src/index.html +++ b/src/index.html @@ -84,6 +84,9 @@ @@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', {}) diff --git a/src/js/controller/settings/ApplicationSettingsController.js b/src/js/controller/settings/ApplicationSettingsController.js index 93d71ca4..1b11d03b 100644 --- a/src/js/controller/settings/ApplicationSettingsController.js +++ b/src/js/controller/settings/ApplicationSettingsController.js @@ -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); - }; })(); diff --git a/src/js/controller/settings/application/GridApplicationController.js b/src/js/controller/settings/application/GridApplicationController.js new file mode 100644 index 00000000..91ba09a7 --- /dev/null +++ b/src/js/controller/settings/application/GridApplicationController.js @@ -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); + }; +})(); diff --git a/src/js/controller/settings/application/MainApplicationController.js b/src/js/controller/settings/application/MainApplicationController.js new file mode 100644 index 00000000..6da0b18c --- /dev/null +++ b/src/js/controller/settings/application/MainApplicationController.js @@ -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); + }; +})(); diff --git a/src/js/controller/settings/application/TileApplicationController.js b/src/js/controller/settings/application/TileApplicationController.js new file mode 100644 index 00000000..3d1e5543 --- /dev/null +++ b/src/js/controller/settings/application/TileApplicationController.js @@ -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); + }; +})(); diff --git a/src/js/controller/settings/exportimage/ExportController.js b/src/js/controller/settings/exportimage/ExportController.js index 32342cd6..e1f76c4a 100644 --- a/src/js/controller/settings/exportimage/ExportController.js +++ b/src/js/controller/settings/exportimage/ExportController.js @@ -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)) { diff --git a/src/js/utils/UserSettings.js b/src/js/utils/UserSettings.js index 3d095b4c..b1af51bd 100644 --- a/src/js/utils/UserSettings.js +++ b/src/js/utils/UserSettings.js @@ -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', }, /** diff --git a/src/js/widgets/Tabs.js b/src/js/widgets/Tabs.js new file mode 100644 index 00000000..dd4c7fab --- /dev/null +++ b/src/js/widgets/Tabs.js @@ -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); + }; +})(); diff --git a/src/piskel-script-list.js b/src/piskel-script-list.js index 1d95dccf..fceedccd 100644 --- a/src/piskel-script-list.js +++ b/src/piskel-script-list.js @@ -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 diff --git a/src/piskel-style-list.js b/src/piskel-style-list.js index e4a9b376..6594a9e9 100644 --- a/src/piskel-style-list.js +++ b/src/piskel-style-list.js @@ -39,5 +39,6 @@ "css/minimap.css", "css/widgets-anchor.css", "css/widgets-frame-picker.css", + "css/widgets-tabs.css", "css/widgets-wizard.css" ]; \ No newline at end of file diff --git a/src/templates/settings/application.html b/src/templates/settings/application.html index 0509ddd6..d4c94842 100644 --- a/src/templates/settings/application.html +++ b/src/templates/settings/application.html @@ -1,80 +1,19 @@ diff --git a/src/templates/settings/application/grid.html b/src/templates/settings/application/grid.html new file mode 100644 index 00000000..f6cd6cec --- /dev/null +++ b/src/templates/settings/application/grid.html @@ -0,0 +1,14 @@ + \ No newline at end of file diff --git a/src/templates/settings/application/main.html b/src/templates/settings/application/main.html new file mode 100644 index 00000000..a7c51deb --- /dev/null +++ b/src/templates/settings/application/main.html @@ -0,0 +1,40 @@ + \ No newline at end of file diff --git a/src/templates/settings/application/tile.html b/src/templates/settings/application/tile.html new file mode 100644 index 00000000..da7a4f47 --- /dev/null +++ b/src/templates/settings/application/tile.html @@ -0,0 +1,16 @@ + \ No newline at end of file diff --git a/src/templates/settings/export.html b/src/templates/settings/export.html index 526c8b8e..878fe662 100644 --- a/src/templates/settings/export.html +++ b/src/templates/settings/export.html @@ -14,12 +14,12 @@
x
-
-
GIF
-
PNG
-
Zip
-
Others
+
+
GIF
+
PNG
+
Zip
+
Others
-
+