diff --git a/src/css/settings-export.css b/src/css/settings-export.css
index de801b9f..593584b1 100644
--- a/src/css/settings-export.css
+++ b/src/css/settings-export.css
@@ -172,3 +172,9 @@
font-weight: normal;
margin-left: 5px;
}
+
+#png-export-columns {
+ /* Override default textfield padding-right to keep the number spinners
+ aligned to the right. */
+ padding-right: 0;
+}
diff --git a/src/js/controller/settings/exportimage/PngExportController.js b/src/js/controller/settings/exportimage/PngExportController.js
index 5dd84745..838426be 100644
--- a/src/js/controller/settings/exportimage/PngExportController.js
+++ b/src/js/controller/settings/exportimage/PngExportController.js
@@ -2,17 +2,22 @@
var ns = $.namespace('pskl.controller.settings.exportimage');
var dimensionInfoPattern = '{{width}} x {{height}} px, {{frames}}
{{rows}}, {{columns}}.';
+
+ // Shortcut to pskl.utils.Template.replace
var replace = pskl.utils.Template.replace;
+
+ // Helper to return "X items" or "1 item" if X is 1.
var pluralize = function (word, count) {
if (count === 1) {
return '1 ' + word;
}
return count + ' ' + word + 's';
};
- var getNearestPowerOfTwo = function (number) {
- return Math.pow(2, Math.ceil(Math.log(number)/Math.log(2)));
- };
+ // Compute the nearest power of two for the provided number.
+ var getNearestPowerOfTwo = function (number) {
+ return Math.pow(2, Math.ceil(Math.log(number) / Math.log(2)));
+ };
ns.PngExportController = function (piskelController, exportController) {
this.piskelController = piskelController;
@@ -33,7 +38,6 @@
this.updateDimensionLabel_();
this.addEventListener(downloadButton, 'click', this.onDownloadClick_);
- this.addEventListener(this.columnsInput, 'keydown', this.onColumnsKeydown_);
this.addEventListener(this.columnsInput, 'input', this.onColumnsChanged_);
this.addEventListener(this.powerTwo, 'change', this.onPowerTwoChanged_);
$.subscribe(Events.EXPORT_SCALE_CHANGED, this.onScaleChanged_);
@@ -51,7 +55,7 @@
var frames = this.piskelController.getFrameCount();
if (frames === 1) {
// Hide the layout section if only one frame is defined.
- this.layoutContainer.style.display = "none";
+ this.layoutContainer.style.display = 'none';
} else {
this.columnsInput.value = this.getBestFit_();
this.powerTwo.checked = pskl.UserSettings.get('EXPORT_PNG_POWER_TWO');
@@ -77,10 +81,10 @@
this.dimensionInfo.innerHTML = replace(dimensionInfoPattern, {
width: width,
height: height,
- rows: pluralize("row", rows),
- columns: pluralize("column", columns),
- frames: pluralize("frame", frames),
- })
+ rows: pluralize('row', rows),
+ columns: pluralize('column', columns),
+ frames: pluralize('frame', frames),
+ });
};
ns.PngExportController.prototype.getColumns_ = function () {
@@ -112,19 +116,6 @@
this.updateDimensionLabel_();
};
- ns.PngExportController.prototype.onColumnsKeydown_ = function (evt) {
- var key = pskl.service.keyboard.KeycodeTranslator.toChar(evt.keyCode);
- if (key === 'up') {
- evt.preventDefault();
- this.columnsInput.value = this.getColumns_() + 1;
- this.onColumnsChanged_();
- } else if (key === 'down') {
- evt.preventDefault();
- this.columnsInput.value = this.getColumns_() - 1;
- this.onColumnsChanged_();
- }
- }
-
ns.PngExportController.prototype.onPowerTwoChanged_ = function () {
pskl.UserSettings.set('EXPORT_PNG_POWER_TWO', this.powerTwo.checked);
this.updateDimensionLabel_();
diff --git a/src/templates/settings/export/png.html b/src/templates/settings/export/png.html
index d50ff8f0..7e4114d3 100644
--- a/src/templates/settings/export/png.html
+++ b/src/templates/settings/export/png.html
@@ -6,7 +6,7 @@