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

Moved resize+app settings to AbstractSettingController

Browse Source
This commit is contained in:
jdescottes
2015-02-23 00:23:11 +01:00
parent b4c1a4c714
commit 8592cd2e53
12 changed files with 71 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/css/forms.css
View File

@ -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;

1
src/css/settings-application.css
View File

@ -1,3 +1,4 @@
.tiled-preview-checkbox {
vertical-align: -2px;
margin-left: 0;
}

26
src/js/controller/settings/AbstractSettingController.js Normal file
View File

@ -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;
}
}
}
};
})();

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

@ -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
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) {

10
src/js/controller/settings/resize/AnchorWidget.js
View File

@ -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);
}
};

26
src/js/controller/settings/resize/ResizeController.js
View File

@ -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) {

5
src/js/utils/Event.js
View File

@ -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;
}
}

1
src/piskel-script-list.js
View File

@ -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",

1
src/piskel-style-list.js
View File

@ -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",

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

@ -39,13 +39,13 @@
<div class="settings-item">
<label>
<input type="checkbox" value="1" class="tiled-preview-checkbox" name="tiled-preview-checkbox"/>
Display tiled preview
Repeated preview
</label>
</div>
<div class="settings-item">
<label for="tiled-preview">Max FPS :</label>
<input type="text" class="textfield max-fps-input" name="max-fps"/>
<label for="tiled-preview">Maximum FPS </label>
<input type="text" class="textfield textfield-small max-fps-input" name="max-fps"/>
</div>
</div>

2
src/templates/settings/import.html
View File

@ -26,7 +26,7 @@
Import From Picture
</div>
<div class="settings-item">
<div style="margin-top:5px;margin-bottom:5px;">Supports : <span class="import-highlight">PNG, JPG, BMP, Animated GIF ...</span></div>
<div style="margin-top:5px;margin-bottom:5px;">Supports <span class="import-highlight">PNG, JPG, BMP, Animated GIF</span></div>
<div class="import-section">
<button type="button" class="button button-primary file-input-button">Browse images</button>
<input style="display:none"

3
src/templates/settings/resize.html
View File

@ -1,7 +1,7 @@
<div class="settings-section">
<!-- RESIZE DRAWING AREA -->
<div class="settings-title">
Canvas size
Resize
</div>
<div class="settings-item resize-canvas">
<form action="" method="POST" name="resize-canvas-form">
@ -42,7 +42,6 @@
</div>
</div>
<input type="submit" class="button button-primary resize-button" value="Resize" />
<input type="button" class="button resize-cancel-button" value="Cancel" />
</form>
</div>
</div>