diff --git a/src/css/forms.css b/src/css/forms.css index dcf706c1..0b8faafb 100644 --- a/src/css/forms.css +++ b/src/css/forms.css @@ -3,14 +3,13 @@ } .textfield { + box-sizing:border-box; + background : black; border : 1px solid #888; border-radius : 2px; padding : 3px 10px; color : white; - - box-sizing:border-box; - -moz-box-sizing:border-box; } .textfield[disabled=disabled] { @@ -22,8 +21,8 @@ } .button { - height: 24px; box-sizing: border-box; + height: 24px; background-color: #3f3f3f; border: 1px solid #333; @@ -34,7 +33,7 @@ text-decoration: none; color: white; - text-shadow: 0px -1px 0 black; + text-shadow: 0 -1px 0 black; font-weight: bold; font-size: 1rem; text-align: center; @@ -56,7 +55,7 @@ border-bottom-color: rgb(151, 133, 0); color: black; - text-shadow: 0px 1px 0 #fff; + text-shadow: 0 1px 0 #fff; } .button-primary:hover { @@ -69,7 +68,7 @@ cursor:default; background-color: #aaa; color: #777; - text-shadow: 0px 1px 0 #bbb; + text-shadow: 0 1px 0 #bbb; border-color: #666; border-top-color: #999; border-bottom-color: #555; diff --git a/src/css/settings-application.css b/src/css/settings-application.css index 50184416..09d60b8a 100644 --- a/src/css/settings-application.css +++ b/src/css/settings-application.css @@ -1,3 +1,4 @@ .tiled-preview-checkbox { vertical-align: -2px; + margin-left: 0; } \ No newline at end of file diff --git a/src/js/controller/settings/AbstractSettingController.js b/src/js/controller/settings/AbstractSettingController.js new file mode 100644 index 00000000..cfe5e1e7 --- /dev/null +++ b/src/js/controller/settings/AbstractSettingController.js @@ -0,0 +1,26 @@ +(function () { + var ns = $.namespace('pskl.controller.settings'); + ns.AbstractSettingController = function () {}; + + ns.AbstractSettingController.prototype.addEventListener = function (el, type, callback) { + pskl.utils.Event.addEventListener(el, type, callback, this); + }; + + + ns.AbstractSettingController.prototype.destroy = function () { + pskl.utils.Event.removeAllEventListeners(this); + this.nullifyDomReferences_(); + }; + + ns.AbstractSettingController.prototype.nullifyDomReferences_ = function () { + for (var key in this) { + if (this.hasOwnProperty(key)) { + var isHTMLElement = this[key] && this[key].nodeName; + if (isHTMLElement) { + this[key] = null; + } + } + } + }; + +})(); \ No newline at end of file diff --git a/src/js/controller/settings/ApplicationSettingsController.js b/src/js/controller/settings/ApplicationSettingsController.js index 9f1bc563..dd7e1f49 100644 --- a/src/js/controller/settings/ApplicationSettingsController.js +++ b/src/js/controller/settings/ApplicationSettingsController.js @@ -3,9 +3,11 @@ ns.ApplicationSettingsController = function () {}; + pskl.utils.inherit(ns.ApplicationSettingsController, pskl.controller.settings.AbstractSettingController); + ns.ApplicationSettingsController.prototype.init = function() { this.backgroundContainer = document.querySelector('.background-picker-wrapper'); - pskl.utils.Event.addEventListener(this.backgroundContainer, 'click', this.onBackgroundClick_, this); + this.addEventListener(this.backgroundContainer, 'click', this.onBackgroundClick_); // Highlight selected background : var background = pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND); @@ -22,7 +24,7 @@ selectedOption.setAttribute('selected', 'selected'); } - pskl.utils.Event.addEventListener(gridSelect, 'change', this.onGridWidthChange_, this); + this.addEventListener(gridSelect, 'change', this.onGridWidthChange_); // Tiled preview var tiledPreview = pskl.UserSettings.get(pskl.UserSettings.TILED_PREVIEW); @@ -30,17 +32,12 @@ if (tiledPreview) { tiledPreviewCheckbox.setAttribute('checked', true); } - pskl.utils.Event.addEventListener(tiledPreviewCheckbox, 'change', this.onTiledPreviewChange_, this); + this.addEventListener(tiledPreviewCheckbox, 'change', this.onTiledPreviewChange_); - // Max FPS + // Max FPS var maxFpsInput = document.querySelector('.max-fps-input'); maxFpsInput.value = pskl.UserSettings.get(pskl.UserSettings.MAX_FPS); - pskl.utils.Event.addEventListener(maxFpsInput, 'change', this.onMaxFpsChange_, this); - }; - - ns.ApplicationSettingsController.prototype.destroy = function () { - pskl.utils.Event.removeAllEventListeners(this); - this.backgroundContainer = null; + this.addEventListener(maxFpsInput, 'change', this.onMaxFpsChange_); }; ns.ApplicationSettingsController.prototype.onGridWidthChange_ = function (evt) { diff --git a/src/js/controller/settings/resize/AnchorWidget.js b/src/js/controller/settings/resize/AnchorWidget.js index afb82df7..b9a6df95 100644 --- a/src/js/controller/settings/resize/AnchorWidget.js +++ b/src/js/controller/settings/resize/AnchorWidget.js @@ -5,7 +5,8 @@ ns.AnchorWidget = function (container) { this.container = container; - this.container.addEventListener('click', this.onResizeOriginClick_.bind(this)); + this.disabled = false; + pskl.utils.Event.addEventListener(this.container, 'click', this.onResizeOriginClick_, this); }; ns.AnchorWidget.ORIGIN = { @@ -20,9 +21,14 @@ BOTTOMRIGHT : 'BOTTOMRIGHT' }; + ns.AnchorWidget.prototype.destroy = function (evt) { + pskl.utils.Event.removeAllEventListeners(this); + this.container = null; + }; + ns.AnchorWidget.prototype.onResizeOriginClick_ = function (evt) { var origin = evt.target.dataset.origin; - if (origin && ns.AnchorWidget.ORIGIN[origin]) { + if (origin && ns.AnchorWidget.ORIGIN[origin] && !this.disabled) { this.setOrigin(origin); } }; diff --git a/src/js/controller/settings/resize/ResizeController.js b/src/js/controller/settings/resize/ResizeController.js index ce1af24e..60805ced 100644 --- a/src/js/controller/settings/resize/ResizeController.js +++ b/src/js/controller/settings/resize/ResizeController.js @@ -10,6 +10,8 @@ this.anchorWidget = new ns.AnchorWidget(anchorWidgetContainer); }; + pskl.utils.inherit(ns.ResizeController, pskl.controller.settings.AbstractSettingController); + ns.ResizeController.prototype.init = function () { this.widthInput = this.container.querySelector('[name="resize-width"]'); this.heightInput = this.container.querySelector('[name="resize-height"]'); @@ -17,25 +19,27 @@ this.widthInput.value = this.piskelController.getWidth(); this.heightInput.value = this.piskelController.getHeight(); - this.widthInput.addEventListener('keyup', this.onSizeInputKeyUp_.bind(this)); - this.heightInput.addEventListener('keyup', this.onSizeInputKeyUp_.bind(this)); - - this.cancelButton = this.container.querySelector('.resize-cancel-button'); - this.cancelButton.addEventListener('click', this.onCancelButtonClicked_.bind(this)); + this.addEventListener(this.widthInput, 'keyup', this.onSizeInputKeyUp_); + this.addEventListener(this.heightInput, 'keyup', this.onSizeInputKeyUp_); this.resizeForm = this.container.querySelector('form'); - this.resizeForm.addEventListener('submit', this.onResizeFormSubmit_.bind(this)); + this.addEventListener(this.resizeForm, 'submit', this.onResizeFormSubmit_); this.resizeContentCheckbox = this.container.querySelector('.resize-content-checkbox'); - this.resizeContentCheckbox.addEventListener('change', this.onResizeContentChange_.bind(this)); + this.addEventListener(this.resizeContentCheckbox, 'change', this.onResizeContentChange_); this.maintainRatioCheckbox = this.container.querySelector('.resize-ratio-checkbox'); - this.maintainRatioCheckbox.addEventListener('change', this.onMaintainRatioChange_.bind(this)); + this.addEventListener(this.maintainRatioCheckbox, 'change', this.onMaintainRatioChange_); this.anchorWidget.setOrigin(ns.AnchorWidget.ORIGIN.TOPLEFT); this.lastInput = this.widthInput; }; + ns.ResizeController.prototype.destroy = function () { + this.anchorWidget.destroy(); + this.superclass.destroy.call(this); + }; + ns.ResizeController.prototype.onResizeFormSubmit_ = function (evt) { evt.preventDefault(); @@ -53,10 +57,6 @@ return pskl.model.Layer.fromFrames(layer.getName(), resizedFrames); }; - ns.ResizeController.prototype.onCancelButtonClicked_ = function () { - $.publish(Events.CLOSE_SETTINGS_DRAWER); - }; - ns.ResizeController.prototype.onResizeContentChange_ = function (evt) { var target = evt.target; if (target.checked) { @@ -103,7 +103,7 @@ }; /***********************/ - /* RESIZE CANVAS LOGIC */ + /* RESIZE LOGIC */ /***********************/ ns.ResizeController.prototype.resizeFrame_ = function (frame) { diff --git a/src/js/utils/Event.js b/src/js/utils/Event.js index 58849ce7..71765701 100644 --- a/src/js/utils/Event.js +++ b/src/js/utils/Event.js @@ -20,9 +20,10 @@ if (scope && scope.__pskl_listeners) { var listeners = scope.__pskl_listeners; for (var i = 0 ; i < listeners.length ; i++) { - if (listeners[i].callback === callback) { + var listener = listeners[i]; + if (listener.callback === callback && listener.el === el && listener.type === type) { el.removeEventListener(type, listeners[i].handler); - listeners.slice(i, 1); + listeners.splice(i, 1); break; } } diff --git a/src/piskel-script-list.js b/src/piskel-script-list.js index dea5c4f9..8bdaa642 100644 --- a/src/piskel-script-list.js +++ b/src/piskel-script-list.js @@ -96,6 +96,7 @@ "js/controller/CanvasBackgroundController.js", // Settings sub-controllers + "js/controller/settings/AbstractSettingController.js", "js/controller/settings/ApplicationSettingsController.js", "js/controller/settings/exportimage/ImageExportController.js", "js/controller/settings/exportimage/GifExportController.js", diff --git a/src/piskel-style-list.js b/src/piskel-style-list.js index f053e6b8..a9a2855a 100644 --- a/src/piskel-style-list.js +++ b/src/piskel-style-list.js @@ -7,6 +7,7 @@ "css/font-icon.css", "css/forms.css", "css/settings.css", + "css/settings-application.css", "css/settings-export.css", "css/settings-import.css", "css/settings-resize.css", diff --git a/src/templates/settings/application.html b/src/templates/settings/application.html index 11643bd2..836e1ca7 100644 --- a/src/templates/settings/application.html +++ b/src/templates/settings/application.html @@ -39,13 +39,13 @@
- - + +
diff --git a/src/templates/settings/import.html b/src/templates/settings/import.html index 733aee4b..0508d22e 100644 --- a/src/templates/settings/import.html +++ b/src/templates/settings/import.html @@ -26,7 +26,7 @@ Import From Picture
-
Supports : PNG, JPG, BMP, Animated GIF ...
+
Supports PNG, JPG, BMP, Animated GIF
- Canvas size + Resize
@@ -42,7 +42,6 @@
-
\ No newline at end of file