diff --git a/src/css/dialogs-import-image.css b/src/css/dialogs-import-image.css
index d9433c04..d4eef12c 100644
--- a/src/css/dialogs-import-image.css
+++ b/src/css/dialogs-import-image.css
@@ -6,7 +6,7 @@
display : inline-block;
height : 60px;
width: 60px;
- border : 1px dashed #999;
+ border: 1px dashed #999;
border-radius: 3px;
}
@@ -15,15 +15,7 @@
width: 55px;
}
-.import-size-field,
-.resize-size-field {
- width: 50px;
- margin-right: 8px;
- text-align: right;
-}
-
-.import-size-field:nth-of-type(2),
-.resize-size-field:nth-of-type(2) {
+.import-size-field:nth-of-type(2) {
margin-left: 5px;
}
diff --git a/src/css/forms.css b/src/css/forms.css
index 0b8faafb..58b8db83 100644
--- a/src/css/forms.css
+++ b/src/css/forms.css
@@ -72,4 +72,12 @@
border-color: #666;
border-top-color: #999;
border-bottom-color: #555;
+}
+
+.import-size-field,
+.resize-size-field,
+.export-size-field {
+ width: 50px;
+ margin-right: 8px;
+ text-align: right;
}
\ No newline at end of file
diff --git a/src/js/controller/settings/exportimage/GifExportController.js b/src/js/controller/settings/exportimage/GifExportController.js
index a395220a..14815d13 100644
--- a/src/js/controller/settings/exportimage/GifExportController.js
+++ b/src/js/controller/settings/exportimage/GifExportController.js
@@ -29,29 +29,33 @@
this.optionTemplate_ = pskl.utils.Template.get('gif-export-option-template');
this.uploadStatusContainerEl = document.querySelector('.gif-upload-status');
-
this.previewContainerEl = document.querySelector('.gif-export-preview');
- this.selectResolutionEl = document.querySelector('.gif-export-select-resolution');
-
+ this.widthInput= document.querySelector('.export-gif-resize-width');
+ this.heightInput= document.querySelector('.export-gif-resize-height');
this.uploadButton = document.querySelector('.gif-upload-button');
- this.addEventListener(this.uploadButton, 'click', this.onUploadButtonClick_);
-
this.downloadButton = document.querySelector('.gif-download-button');
- this.addEventListener(this.downloadButton, 'click', this.onDownloadButtonClick_);
- this.createOptionElements_();
+ this.sizeInputWidget = new pskl.widgets.SizeInput(this.widthInput, this.heightInput, this.piskelController.getWidth(), this.piskelController.getHeight());
+
+ this.addEventListener(this.uploadButton, 'click', this.onUploadButtonClick_);
+ this.addEventListener(this.downloadButton, 'click', this.onDownloadButtonClick_);
+ };
+
+ ns.GifExportController.prototype.destroy = function () {
+ this.sizeInputWidget.destroy();
+ this.superclass.destroy.call(this);
};
ns.GifExportController.prototype.onUploadButtonClick_ = function (evt) {
evt.preventDefault();
- var zoom = this.getSelectedZoom_();
+ var zoom = this.getZoom_();
var fps = this.piskelController.getFPS();
this.renderAsImageDataAnimatedGIF(zoom, fps, this.uploadImageData_.bind(this));
};
ns.GifExportController.prototype.onDownloadButtonClick_ = function (evt) {
- var zoom = this.getSelectedZoom_();
+ var zoom = this.getZoom_();
var fps = this.piskelController.getFPS();
this.renderAsImageDataAnimatedGIF(zoom, fps, this.downloadImageData_.bind(this));
@@ -92,31 +96,8 @@
this.previewContainerEl.innerHTML = '';
};
- ns.GifExportController.prototype.getSelectedZoom_ = function () {
- return this.selectResolutionEl.value;
- };
-
- ns.GifExportController.prototype.createOptionElements_ = function () {
- var resolutions = ns.GifExportController.RESOLUTIONS;
- for (var i = 0 ; i < resolutions.length ; i++) {
- var option = this.createOptionForResolution_(resolutions[i]);
- this.selectResolutionEl.appendChild(option);
- }
- };
-
- ns.GifExportController.prototype.createOptionForResolution_ = function (resolution) {
- var zoom = resolution.zoom;
- var label = zoom * this.piskelController.getWidth() + 'x' + zoom * this.piskelController.getHeight();
-
- var isSelected = zoom === DEFAULT_EXPORT_ZOOM;
- var selected = isSelected ? 'selected' : '';
- var optionHTML = pskl.utils.Template.replace(this.optionTemplate_, {
- 'value' : zoom,
- 'label' : label,
- 'selected' : selected
- });
-
- return pskl.utils.Template.createFromHTML(optionHTML);
+ ns.GifExportController.prototype.getZoom_ = function () {
+ return parseInt(this.widthInput.value, 10) / this.piskelController.getWidth();
};
ns.GifExportController.prototype.renderAsImageDataAnimatedGIF = function(zoom, fps, cb) {
diff --git a/src/js/controller/settings/exportimage/ImageExportController.js b/src/js/controller/settings/exportimage/ImageExportController.js
index 13f6437a..3e4bd210 100644
--- a/src/js/controller/settings/exportimage/ImageExportController.js
+++ b/src/js/controller/settings/exportimage/ImageExportController.js
@@ -11,4 +11,9 @@
this.pngExportController.init();
this.gifExportController.init();
};
+
+ ns.ImageExportController.prototype.destroy = function () {
+ this.pngExportController.destroy();
+ this.gifExportController.destroy();
+ };
})();
diff --git a/src/js/controller/settings/exportimage/PngExportController.js b/src/js/controller/settings/exportimage/PngExportController.js
index 7843a8e2..33ff67e7 100644
--- a/src/js/controller/settings/exportimage/PngExportController.js
+++ b/src/js/controller/settings/exportimage/PngExportController.js
@@ -10,7 +10,6 @@
pskl.utils.inherit(ns.PngExportController, pskl.controller.settings.AbstractSettingController);
ns.PngExportController.prototype.init = function () {
- this.previewContainerEl = document.querySelector('.png-export-preview');
this.pngFilePrefixInput = document.getElementById('zip-prefix-name');
this.pngFilePrefixInput.value = 'sprite_';
@@ -19,8 +18,6 @@
var zipButton = document.querySelector('.zip-generate-button');
this.addEventListener(zipButton, 'click', this.onZipButtonClick_);
-
- this.updatePreview_(this.getFramesheetAsCanvas().toDataURL('image/png'));
};
ns.PngExportController.prototype.onPngDownloadButtonClick_ = function (evt) {
@@ -65,12 +62,6 @@
return renderer.renderAsCanvas();
};
- ns.PngExportController.prototype.onImageUploadCompleted_ = function (imageUrl) {
- this.updatePreview_(imageUrl);
- this.updateStatus_(imageUrl);
- this.previewContainerEl.classList.remove('preview-upload-ongoing');
- };
-
ns.PngExportController.prototype.updateStatus_ = function (imageUrl, error) {
if (imageUrl) {
var linkTpl = '{{shortLink}}';
@@ -84,10 +75,6 @@
}
};
- ns.PngExportController.prototype.updatePreview_ = function (src) {
- this.previewContainerEl.innerHTML = '
';
- };
-
ns.PngExportController.prototype.shorten_ = function (url, maxLength, suffix) {
if (url.length > maxLength) {
url = url.substring(0, maxLength);
diff --git a/src/js/controller/settings/resize/ResizeController.js b/src/js/controller/settings/resize/ResizeController.js
index e2d384ac..27771770 100644
--- a/src/js/controller/settings/resize/ResizeController.js
+++ b/src/js/controller/settings/resize/ResizeController.js
@@ -16,30 +16,27 @@
ns.ResizeController.prototype.init = function () {
this.widthInput = this.container.querySelector('[name="resize-width"]');
this.heightInput = this.container.querySelector('[name="resize-height"]');
-
- this.widthInput.value = this.piskelController.getWidth();
- this.heightInput.value = this.piskelController.getHeight();
-
- this.addEventListener(this.widthInput, 'keyup', this.onSizeInputKeyUp_);
- this.addEventListener(this.heightInput, 'keyup', this.onSizeInputKeyUp_);
-
this.resizeForm = this.container.querySelector('form');
- this.addEventListener(this.resizeForm, 'submit', this.onResizeFormSubmit_);
-
this.resizeContentCheckbox = this.container.querySelector('.resize-content-checkbox');
- this.addEventListener(this.resizeContentCheckbox, 'change', this.onResizeContentChange_);
-
this.maintainRatioCheckbox = this.container.querySelector('.resize-ratio-checkbox');
- this.addEventListener(this.maintainRatioCheckbox, 'change', this.onMaintainRatioChange_);
+
+ var initWidth = this.piskelController.getWidth();
+ var initHeight = this.piskelController.getHeight();
+ this.sizeInputWidget = new pskl.widgets.SizeInput(this.widthInput, this.heightInput, initWidth, initHeight);
this.anchorWidget.setOrigin(ns.AnchorWidget.ORIGIN.TOPLEFT);
- this.lastInput = this.widthInput;
+
+ this.addEventListener(this.resizeForm, 'submit', this.onResizeFormSubmit_);
+ this.addEventListener(this.resizeContentCheckbox, 'change', this.onResizeContentChange_);
+ this.addEventListener(this.maintainRatioCheckbox, 'change', this.onMaintainRatioChange_);
+
this.defaultSizeController.init();
};
ns.ResizeController.prototype.destroy = function () {
this.anchorWidget.destroy();
+ this.sizeInputWidget.destroy();
this.superclass.destroy.call(this);
};
@@ -74,36 +71,9 @@
ns.ResizeController.prototype.onMaintainRatioChange_ = function (evt) {
var target = evt.target;
if (target.checked) {
- this.synchronizeSizeInputs_(this.lastInput);
- }
- };
-
- ns.ResizeController.prototype.onSizeInputKeyUp_ = function (evt) {
- var target = evt.target;
- if (this.maintainRatioCheckbox.checked) {
- this.synchronizeSizeInputs_(target);
- }
- this.lastInput = target;
- };
-
- /**
- * Based on the value of the provided sizeInput (considered as emitter)
- * update the value of the other sizeInput to match the current width/height ratio
- * @param {HTMLElement} origin either widthInput or heightInput
- */
- ns.ResizeController.prototype.synchronizeSizeInputs_ = function (sizeInput) {
- var value = parseInt(sizeInput.value, 10);
- if (isNaN(value)) {
- value = 0;
- }
-
- var height = this.piskelController.getHeight();
- var width = this.piskelController.getWidth();
-
- if (sizeInput === this.widthInput) {
- this.heightInput.value = Math.round(value * height / width);
- } else if (sizeInput === this.heightInput) {
- this.widthInput.value = Math.round(value * width / height);
+ this.sizeInputWidget.enableSync();
+ } else {
+ this.sizeInputWidget.disableSync();
}
};
diff --git a/src/js/widgets/SizeInput.js b/src/js/widgets/SizeInput.js
new file mode 100644
index 00000000..91e598c8
--- /dev/null
+++ b/src/js/widgets/SizeInput.js
@@ -0,0 +1,61 @@
+(function () {
+ var ns = $.namespace('pskl.widgets');
+ ns.SizeInput = function (widthInput, heightInput, initWidth, initHeight) {
+ this.widthInput = widthInput;
+ this.heightInput = heightInput;
+ this.initWidth = initWidth;
+ this.initHeight = initHeight;
+ this.syncEnabled = true;
+ this.lastInput = this.widthInput;
+
+ this.widthInput.value = initWidth;
+ this.heightInput.value = initHeight;
+
+ pskl.utils.Event.addEventListener(this.widthInput, 'keyup', this.onSizeInputKeyUp_, this);
+ pskl.utils.Event.addEventListener(this.heightInput, 'keyup', this.onSizeInputKeyUp_, this);
+ };
+
+ ns.SizeInput.prototype.destroy = function () {
+ pskl.utils.Event.removeAllEventListeners(this);
+
+ this.widthInput = null;
+ this.heightInput = null;
+ this.lastInput = null;
+ };
+
+ ns.SizeInput.prototype.enableSync = function () {
+ this.syncEnabled = true;
+ this.synchronize_(this.lastInput);
+ };
+
+ ns.SizeInput.prototype.enableSync = function () {
+ this.syncEnabled = false;
+ };
+
+ ns.SizeInput.prototype.onSizeInputKeyUp_ = function (evt) {
+ var target = evt.target;
+ if (this.syncEnabled) {
+ this.synchronize_(target);
+ }
+ this.lastInput = target;
+ };
+
+ /**
+ * Based on the value of the provided sizeInput (considered as emitter)
+ * update the value of the other sizeInput to match the current width/height ratio
+ * @param {HTMLElement} origin either widthInput or heightInput
+ */
+ ns.SizeInput.prototype.synchronize_ = function (sizeInput) {
+ var value = parseInt(sizeInput.value, 10);
+ if (isNaN(value)) {
+ value = 0;
+ }
+
+ if (sizeInput === this.widthInput) {
+ this.heightInput.value = Math.round(value * this.initHeight / this.initWidth);
+ } else if (sizeInput === this.heightInput) {
+ this.widthInput.value = Math.round(value * this.initWidth / this.initHeight);
+ }
+ };
+
+})();
\ No newline at end of file
diff --git a/src/piskel-script-list.js b/src/piskel-script-list.js
index 783a01de..98a67e3e 100644
--- a/src/piskel-script-list.js
+++ b/src/piskel-script-list.js
@@ -133,6 +133,7 @@
// Widgets
"js/widgets/ColorsList.js",
"js/widgets/HslRgbColorPicker.js",
+ "js/widgets/SizeInput.js",
// Services
"js/service/LocalStorageService.js",
diff --git a/src/templates/settings/export.html b/src/templates/settings/export.html
index ff640f3c..d3d61870 100644
--- a/src/templates/settings/export.html
+++ b/src/templates/settings/export.html
@@ -2,7 +2,6 @@
Export Spritesheet
-
PNG with all frames side by side.
@@ -26,10 +25,16 @@