UI : Align PNG export with GIF export

- PNG export now has its own panel
- Lots of code duplication between PNG and GIF controller => FIXIT
- Added a link displayed after image upload

js/controller/settings/GifExportController.js

@@ -1,6 +1,8 @@
 (function () {
   var ns = $.namespace("pskl.controller.settings");
 
+  var URL_MAX_LENGTH = 60;
+
   ns.GifExportController = function (piskelController) {
     this.piskelController = piskelController;
   };
@@ -26,6 +28,8 @@
   ns.GifExportController.prototype.init = function () {
     this.radioTemplate_ = pskl.utils.Template.get("gif-export-radio-template");
 
+    this.uploadStatusContainerEl = document.querySelectorAll(".gif-upload-status")[0];
+
     this.previewContainerEl = document.querySelectorAll(".gif-export-preview")[0];
     this.radioGroupEl = document.querySelectorAll(".gif-export-radio-group")[0];
 
@@ -52,7 +56,9 @@
 
   ns.GifExportController.prototype.onImageUploadCompleted_ = function (imageUrl) {
     this.updatePreview_(imageUrl);
+    this.updateStatus_(imageUrl);
     this.previewContainerEl.classList.remove("preview-upload-ongoing");
+
   };
 
   ns.GifExportController.prototype.updatePreview_ = function (src) {
@@ -127,4 +133,27 @@
 
     gif.render();
   };
+
+  // FIXME : HORRIBLE COPY/PASTA
+
+  ns.GifExportController.prototype.updateStatus_ = function (imageUrl, error) {
+    if (imageUrl) {
+      var linkTpl = "<a class='image-link' href='{{link}}' target='_blank'>{{shortLink}}</a>";
+      var linkHtml = pskl.utils.Template.replace(linkTpl, {
+        link : imageUrl,
+        shortLink : this.shorten_(imageUrl, URL_MAX_LENGTH, '...')
+      });
+      this.uploadStatusContainerEl.innerHTML = 'Your image is now available at : ' + linkHtml;
+    } else {
+      // FIXME : Should display error message instead
+    }
+  };
+
+  ns.GifExportController.prototype.shorten_ = function (url, maxLength, suffix) {
+    if (url.length > maxLength) {
+      url = url.substring(0, maxLength);
+      url += suffix;
+    }
+    return url;
+  };
 })();

js/controller/settings/PngExportController.js

@@ -0,0 +1,63 @@
+(function () {
+  var ns = $.namespace("pskl.controller.settings");
+
+  var URL_MAX_LENGTH = 60;
+
+  ns.PngExportController = function (piskelController) {
+    this.piskelController = piskelController;
+  };
+
+  ns.PngExportController.prototype.init = function () {
+    this.previewContainerEl = document.querySelectorAll(".png-export-preview")[0];
+    this.uploadStatusContainerEl = document.querySelectorAll(".png-upload-status")[0];
+
+    this.uploadForm = $("[name=png-export-upload-form]");
+    this.uploadForm.submit(this.onUploadFormSubmit_.bind(this));
+
+    this.updatePreview_(this.getFramesheetAsBase64Png());
+  };
+
+  ns.PngExportController.prototype.onUploadFormSubmit_ = function (evt) {
+    evt.originalEvent.preventDefault();
+
+    this.previewContainerEl.classList.add("preview-upload-ongoing");
+    pskl.app.imageUploadService.upload(this.getFramesheetAsBase64Png(), this.onImageUploadCompleted_.bind(this));
+  };
+
+  ns.PngExportController.prototype.getFramesheetAsBase64Png = function () {
+    var renderer = new pskl.rendering.PiskelRenderer(this.piskelController);
+    var framesheetCanvas = renderer.renderAsCanvas();
+    return framesheetCanvas.toDataURL("image/png");
+  };
+
+  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>";
+      var linkHtml = pskl.utils.Template.replace(linkTpl, {
+        link : imageUrl,
+        shortLink : this.shorten_(imageUrl, URL_MAX_LENGTH, '...')
+      });
+      this.uploadStatusContainerEl.innerHTML = 'Your image is now available at : ' + linkHtml;
+    } else {
+      // FIXME : Should display error message instead
+    }
+  };
+
+  ns.PngExportController.prototype.updatePreview_ = function (src) {
+    this.previewContainerEl.innerHTML = "<img class='light-picker-background' style='max-width:240px;' src='"+src+"'/>";
+  };
+
+  ns.PngExportController.prototype.shorten_ = function (url, maxLength, suffix) {
+    if (url.length > maxLength) {
+      url = url.substring(0, maxLength);
+      url += suffix;
+    }
+    return url;
+  };
+})();

js/controller/settings/SettingsController.js

@@ -14,6 +14,10 @@
       template : 'templates/settings/export-gif.html',
       controller : ns.GifExportController
     },
+    'png' : {
+      template : 'templates/settings/export-png.html',
+      controller : ns.PngExportController
+    },
     'import' : {
       template : 'templates/settings/import.html',
       controller : ns.ImportController