-
Notifications
You must be signed in to change notification settings - Fork 792
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Issue #636 - create Tabs widget and use it application settings panel
- Loading branch information
1 parent
317fda8
commit 2976fd0
Showing
18 changed files
with
401 additions
and
289 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
151 changes: 21 additions & 130 deletions
151
src/js/controller/settings/ApplicationSettingsController.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,144 +1,35 @@ | ||
| (function () { | ||
| var ns = $.namespace('pskl.controller.settings'); | ||
|
|
||
| ns.ApplicationSettingsController = function () {}; | ||
|
|
||
| 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); | ||
| 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 | ||
| } | ||
| 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_); | ||
| }; | ||
|
|
||
| ns.ApplicationSettingsController.prototype.onGridWidthChange_ = function (evt) { | ||
| var width = parseInt(evt.target.value, 10); | ||
| pskl.UserSettings.set(pskl.UserSettings.GRID_WIDTH, width); | ||
| ns.ApplicationSettingsController = function () { | ||
| this.tabsWidget = new pskl.widgets.Tabs(tabs, this, pskl.UserSettings.APPLICATION_SETTINGS_TAB); | ||
| }; | ||
|
|
||
| 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); | ||
| } | ||
| }; | ||
| pskl.utils.inherit(ns.ApplicationSettingsController, pskl.controller.settings.AbstractSettingController); | ||
|
|
||
| ns.ApplicationSettingsController.prototype.updateLayerOpacityText_ = function (opacity) { | ||
| var layerOpacityText = document.querySelector('.layer-opacity-text'); | ||
| layerOpacityText.innerHTML = opacity; | ||
| ns.ApplicationSettingsController.prototype.init = function() { | ||
| var container = document.querySelector('.settings-section-application'); | ||
| this.tabsWidget.init(container); | ||
| }; | ||
|
|
||
| ns.ApplicationSettingsController.prototype.updateSeamlessOpacityText_ = function (opacity) { | ||
| var seamlessOpacityText = document.querySelector('.seamless-opacity-text'); | ||
| seamlessOpacityText.innerHTML = opacity; | ||
| ns.ApplicationSettingsController.prototype.destroy = function () { | ||
| this.tabsWidget.destroy(); | ||
| this.superclass.destroy.call(this); | ||
| }; | ||
|
|
||
| ns.ApplicationSettingsController.prototype.onFormSubmit_ = function (evt) { | ||
| evt.preventDefault(); | ||
| $.publish(Events.CLOSE_SETTINGS_DRAWER); | ||
| }; | ||
| })(); |
26 changes: 26 additions & 0 deletions
26
src/js/controller/settings/application/GridApplicationController.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| }; | ||
| })(); |
88 changes: 88 additions & 0 deletions
88
src/js/controller/settings/application/MainApplicationController.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| }; | ||
| })(); |
Oops, something went wrong.