enhancement : use size-input instead of select for export

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,
+.import-size-field:nth-of-type(2) {
-.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) {
   margin-left: 5px;
 }
 

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

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 = '<div><img style="max-width:32px;"src="' + src + '"/></div>';
   };
 
-  ns.GifExportController.prototype.getSelectedZoom_ = function () {
+  ns.GifExportController.prototype.getZoom_ = function () {
-    return this.selectResolutionEl.value;
+    return parseInt(this.widthInput.value, 10) / this.piskelController.getWidth();
-  };
-
-  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.renderAsImageDataAnimatedGIF = function(zoom, fps, cb) {

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

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 = '<a class="image-link" href="{{link}}" target="_blank">{{shortLink}}</a>';
@@ -84,10 +75,6 @@
     }
   };
 
-  ns.PngExportController.prototype.updatePreview_ = function (src) {
-    this.previewContainerEl.innerHTML = '<img class="light-picker-background" src="' + src + '"/>';
-  };
-
   ns.PngExportController.prototype.shorten_ = function (url, maxLength, suffix) {
     if (url.length > maxLength) {
       url = url.substring(0, maxLength);

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);
+      this.sizeInputWidget.enableSync();
-    }
+    } else {
-  };
+      this.sizeInputWidget.disableSync();
-
-  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);
     }
   };
 

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

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

src/templates/settings/export.html

@@ -2,7 +2,6 @@
   <div class="settings-title">
     Export Spritesheet
   </div>
-  <div class="png-export-preview  settings-item"></div>
   <div class="settings-item">
     <span class="settings-description">PNG with all frames side by side.</span>
     <button type="button" class="button button-primary png-download-button">Download PNG</button>
@@ -26,10 +25,16 @@
     <form action="" method="POST" class="gif-export-form">
       <div class="settings-item">
         <label>Select resolution:</label>
-        <select class="gif-export-select-resolution"></select>
+        <div class="resize-section">
-        <script type="text/template" id="gif-export-option-template">
+          <span  class="resize-section-title">Width</span>
-          <option value="{{value}}" {{selected}}>{{label}}</option>
+          <input type="text" class="textfield  export-size-field  export-gif-resize-width" name="resize-width"/>
-        </script>
+          <span>px</span>
+        </div>
+        <div class="resize-section">
+          <span  class="resize-section-title">Height</span>
+          <input type="text" class="textfield  export-size-field  export-gif-resize-height" name="resize-height"/>
+          <span>px</span>
+        </div>
       </div>
       <div class="settings-item">
         <button type="button" class="button button-primary gif-download-button">Download GIF</button>