Capture events on tmp download link created by FileUtils

src/js/controller/settings/GifExportController.js

@@ -3,6 +3,8 @@
 
   var URL_MAX_LENGTH = 30;
   var MAX_GIF_COLORS = 256;
+  var MAX_EXPORT_ZOOM = 20;
+  var DEFAULT_EXPORT_ZOOM = 10;
 
   ns.GifExportController = function (piskelController) {
     this.piskelController = piskelController;
@@ -13,18 +15,12 @@
    * @static
    * @type {Array} array of Objects {zoom:{Number}, default:{Boolean}}
    */
-  ns.GifExportController.RESOLUTIONS = [
-    {
-      'zoom' : 1
-    },{
-      'zoom' : 5
-    },{
-      'zoom' : 10,
-      'default' : true
-    },{
-      'zoom' : 20
-    }
-  ];
+  ns.GifExportController.RESOLUTIONS = [];
+  for (var i = 1 ; i <= MAX_EXPORT_ZOOM ; i++) {
+    ns.GifExportController.RESOLUTIONS.push({
+      zoom : i
+    });
+  }
 
   ns.GifExportController.prototype.init = function () {
     this.optionTemplate_ = pskl.utils.Template.get("gif-export-option-template");
@@ -40,8 +36,6 @@
     this.downloadButton = $(".gif-download-button");
     this.downloadButton.click(this.onDownloadButtonClick_.bind(this));
 
-    this.exportForm = $(".gif-export-form");
-
     this.exportProgressStatusEl = document.querySelector('.gif-export-progress-status');
     this.exportProgressBarEl = document.querySelector('.gif-export-progress-bar');
 
@@ -62,7 +56,6 @@
         fps = this.piskelController.getFPS();
 
     this.renderAsImageDataAnimatedGIF(zoom, fps, function (imageData) {
-      pskl.app.imageUploadService.upload(imageData, this.onImageUploadCompleted_.bind(this));
       pskl.utils.BlobUtils.dataToBlob(imageData, "image/gif", function(blob) {
         pskl.utils.FileUtils.downloadAsFile(blob, fileName);
       });
@@ -102,7 +95,9 @@
     var label = zoom*this.piskelController.getWidth() + "x" + zoom*this.piskelController.getHeight();
     var value = zoom;
 
-    var optionHTML = pskl.utils.Template.replace(this.optionTemplate_, {value : value, label : label});
+    var isSelected = zoom === DEFAULT_EXPORT_ZOOM;
+    var selected = isSelected ? 'selected' : '';
+    var optionHTML = pskl.utils.Template.replace(this.optionTemplate_, {value : value, label : label, selected : selected});
     var optionEl = pskl.utils.Template.createFromHTML(optionHTML);
 
     return optionEl;

src/js/utils/FileUtils.js

@@ -1,6 +1,10 @@
 (function () {
   var ns = $.namespace('pskl.utils');
 
+  var stopPropagation = function (e) {
+    e.stopPropagation();
+  };
+
   ns.FileUtils = {
     readFile : function (file, callback) {
       var reader = new FileReader();
@@ -20,7 +24,9 @@
         downloadLink.setAttribute('href', content);
         downloadLink.setAttribute('download', filename);
         document.body.appendChild(downloadLink);
+        downloadLink.addEventListener('click', stopPropagation);
         downloadLink.click();
+        downloadLink.removeEventListener('click', stopPropagation);
         document.body.removeChild(downloadLink);
       }
     }

src/templates/settings/export.html

@@ -22,7 +22,7 @@
         <label>Select resolution:</label>
         <select class="gif-export-select-resolution"></select>
         <script type="text/template" id="gif-export-option-template">
-          <option value="{{value}}">{{label}}</option>
+          <option value="{{value}}" {{selected}}>{{label}}</option>
         </script>
       </div>
       <div class="settings-item">