Create 2 new dialog controllers

Image import is now triggering a popup after selecting the file.
Same for local saves.

Drag and drop of .piskel files opens the piskel immediately !

Remains to do :
- redesign the dialog for import image and browse local
- create dialog for recover session
- improve recover session to handle more than the last session

src/js/controller/dialogs/AbstractDialogController.js

@@ -0,0 +1,18 @@
+(function () {
+  var ns = $.namespace('pskl.controller.dialogs');
+
+  ns.AbstractDialogController = function () {};
+
+
+  ns.AbstractDialogController.prototype.init = function () {
+    this.closeButton = document.querySelector('.dialog-close');
+    this.closeButton.addEventListener('click', this.closeDialog.bind(this));
+  };
+
+  ns.AbstractDialogController.prototype.destroy = function () {};
+
+  ns.AbstractDialogController.prototype.closeDialog = function () {
+    $.publish(Events.DIALOG_HIDE);
+  };
+
+})();

src/js/controller/dialogs/BrowseLocalController.js

@@ -0,0 +1,57 @@
+(function () {
+  var ns = $.namespace('pskl.controller.dialogs');
+
+  ns.BrowseLocalController = function (piskelController) {
+  };
+
+  pskl.utils.inherit(ns.BrowseLocalController, ns.AbstractDialogController);
+
+  ns.BrowseLocalController.prototype.init = function () {
+    this.superclass.init.call(this);
+
+    this.localStorageItemTemplate_ = pskl.utils.Template.get("local-storage-item-template");
+
+    this.service_ = pskl.app.localStorageService;
+    this.piskelsList = $('.local-piskels-list');
+    this.prevSessionContainer = $('.previous-session');
+
+    this.fillLocalPiskelsList_();
+
+    this.piskelsList.click(this.onPiskelsListClick_.bind(this));
+  };
+
+  ns.BrowseLocalController.prototype.onPiskelsListClick_ = function (evt) {
+    var action = evt.target.getAttribute('data-action');
+    var name = evt.target.getAttribute('data-name');
+    if (action === 'load') {
+      if (window.confirm('This will erase your current piskel. Continue ?')) {
+        this.service_.load(name);
+        this.closeDialog();
+      }
+    } else if (action === 'delete') {
+      if (window.confirm('This will permanently DELETE this piskel from your computer. Continue ?')) {
+        this.service_.remove(name);
+        this.fillLocalPiskelsList_();
+      }
+    }
+  };
+
+  ns.BrowseLocalController.prototype.fillLocalPiskelsList_ = function () {
+    var html = "";
+    var keys = this.service_.getKeys();
+
+    keys.sort(function (k1, k2) {
+      if (k1.date < k2.date) {return 1;}
+      if (k1.date > k2.date) {return -1;}
+      return 0;
+    });
+
+    keys.forEach((function (key) {
+      var date = pskl.utils.DateUtils.format(key.date, "{{Y}}/{{M}}/{{D}} {{H}}:{{m}}");
+      html += pskl.utils.Template.replace(this.localStorageItemTemplate_, {name : key.name, date : date});
+    }).bind(this));
+
+    var tableBody_ = this.piskelsList.get(0).tBodies[0];
+    tableBody_.innerHTML = html;
+  };
+})();

src/js/controller/dialogs/DialogsController.js

@@ -5,6 +5,14 @@
     'manage-palettes' : {
       template : 'templates/dialogs/manage-palettes.html',
       controller : ns.PaletteManagerController
+    },
+    'browse-local' : {
+      template : 'templates/dialogs/browse-local.html',
+      controller : ns.BrowseLocalController
+    },
+    'import-image' : {
+      template : 'templates/dialogs/import-image.html',
+      controller : ns.ImportImageController
     }
   };
 
@@ -22,13 +30,20 @@
     pskl.app.shortcutService.addShortcut('alt+P', this.onDialogDisplayEvent_.bind(this, null, 'manage-palettes'));
   };
 
-  ns.DialogsController.prototype.onDialogDisplayEvent_ = function (evt, dialogId) {
+  ns.DialogsController.prototype.onDialogDisplayEvent_ = function (evt, args) {
+    var dialogId, initArgs;
+    if (typeof args === 'string') {
+      dialogId = args;
+    } else {
+      dialogId = args.dialogId;
+      initArgs = args.initArgs;
+    }
     if (!this.isDisplayed()) {
       var config = dialogs[dialogId];
       if (config) {
         this.dialogContainer_.innerHTML = pskl.utils.Template.get(config.template);
         var controller = new config.controller(this.piskelController);
-        controller.init();
+        controller.init(initArgs);
 
         this.showDialogWrapper_();
         this.currentDialog_ = {

src/js/controller/dialogs/ImportImageController.js

@@ -0,0 +1,154 @@
+(function () {
+  var ns = $.namespace('pskl.controller.dialogs');
+  var PREVIEW_HEIGHT  = 60;
+
+  ns.ImportImageController = function (piskelController) {
+    this.importedImage_ = null;
+    this.file_ = null;
+  };
+
+  pskl.utils.inherit(ns.ImportImageController, ns.AbstractDialogController);
+
+  ns.ImportImageController.prototype.init = function (file) {
+    this.superclass.init.call(this);
+
+    this.file_ = file;
+
+    this.importPreview = $('.import-section-preview');
+
+    this.fileNameContainer = $('.import-image-file-name');
+
+    this.resizeWidth = $('[name=resize-width]');
+    this.resizeHeight = $('[name=resize-height]');
+    this.smoothResize =  $('[name=smooth-resize-checkbox]');
+
+    this.resizeWidth.keyup(this.onResizeInputKeyUp_.bind(this, 'width'));
+    this.resizeHeight.keyup(this.onResizeInputKeyUp_.bind(this, 'height'));
+
+    this.importImageForm = $('[name=import-image-form]');
+    this.importImageForm.submit(this.onImportFormSubmit_.bind(this));
+
+    pskl.utils.FileUtils.readFile(this.file_, this.processImageSource_.bind(this));
+  };
+
+  ns.ImportImageController.prototype.onImportFormSubmit_ = function (evt) {
+    evt.originalEvent.preventDefault();
+    this.importImageToPiskel_();
+  };
+
+  ns.ImportImageController.prototype.onResizeInputKeyUp_ = function (from, evt) {
+    if (this.importedImage_) {
+      this.synchronizeResizeFields_(evt.target.value, from);
+    }
+  };
+
+  ns.ImportImageController.prototype.synchronizeResizeFields_ = function (value, from) {
+    value = parseInt(value, 10);
+    if (isNaN(value)) {
+      value = 0;
+    }
+    var height = this.importedImage_.height, width = this.importedImage_.width;
+    if (from === 'width') {
+      this.resizeHeight.val(Math.round(value * height / width));
+    } else {
+      this.resizeWidth.val(Math.round(value * width / height));
+    }
+  };
+
+  /**
+   * Create an image from the given source (url or data-url), and onload forward to onImageLoaded
+   * TODO : should be a generic utility method, should take a callback
+   * @param  {String} imageSource url or data-url, will be used as src for the image
+   */
+  ns.ImportImageController.prototype.processImageSource_ = function (imageSource) {
+    this.importedImage_ = new Image();
+    this.importedImage_.onload = this.onImageLoaded_.bind(this);
+    this.importedImage_.src = imageSource;
+  };
+
+  ns.ImportImageController.prototype.onImageLoaded_ = function (evt) {
+    var w = this.importedImage_.width,
+        h = this.importedImage_.height;
+
+    // FIXME : We remove the onload callback here because JsGif will insert
+    // the image again and we want to avoid retriggering the image onload
+    this.importedImage_.onload = function () {};
+
+    var fileName = this.extractFileNameFromPath_(this.file_.name);
+    this.fileNameContainer.html(fileName);
+
+    this.resizeWidth.val(w);
+    this.resizeHeight.val(h);
+
+    this.importPreview.width('auto');
+    this.importPreview.html('');
+    this.importPreview.append(this.createImagePreview_());
+  };
+
+  ns.ImportImageController.prototype.createImagePreview_ = function () {
+    var image = document.createElement('IMG');
+    image.src = this.importedImage_.src;
+    image.setAttribute('height', PREVIEW_HEIGHT);
+    return image;
+  };
+
+  ns.ImportImageController.prototype.extractFileNameFromPath_ = function (path) {
+    var parts = [];
+    if (path.indexOf('/') !== -1) {
+      parts = path.split('/');
+    } else if (path.indexOf('\\') !== -1) {
+      parts = path.split('\\');
+    } else {
+      parts = [path];
+    }
+    return parts[parts.length-1];
+  };
+
+  ns.ImportImageController.prototype.importImageToPiskel_ = function () {
+    var image = this.importedImage_;
+    if (image) {
+      if (window.confirm('You are about to create a new Piskel, unsaved changes will be lost.')) {
+        var gifLoader = new window.SuperGif({
+          gif : image
+        });
+
+        gifLoader.load({
+          success : function(){
+            var images = gifLoader.getFrames().map(function (frame) {
+              return pskl.CanvasUtils.createFromImageData(frame.data);
+            });
+            this.createPiskelFromImages_(images);
+            this.closeDialog();
+          }.bind(this),
+          error : function () {
+            this.createPiskelFromImages_([image]);
+            this.closeDialog();
+          }.bind(this)
+        });
+
+      }
+    }
+  };
+
+  ns.ImportImageController.prototype.createFramesFromImages_ = function (images) {
+    var w = this.resizeWidth.val();
+    var h = this.resizeHeight.val();
+    var smoothing = !!this.smoothResize.prop('checked');
+
+    var frames = images.map(function (image) {
+      var resizedImage = pskl.utils.ImageResizer.resize(image, w, h, smoothing);
+      return pskl.utils.FrameUtils.createFromImage(resizedImage);
+    });
+    return frames;
+  };
+
+  ns.ImportImageController.prototype.createPiskelFromImages_ = function (images) {
+    var frames = this.createFramesFromImages_(images);
+    var layer = pskl.model.Layer.fromFrames('Layer 1', frames);
+    var descriptor = new pskl.model.piskel.Descriptor('Imported piskel', '');
+    var piskel = pskl.model.Piskel.fromLayers([layer], descriptor);
+
+    pskl.app.piskelController.setPiskel(piskel);
+    pskl.app.animationController.setFPS(Constants.DEFAULT.FPS);
+  };
+})();

src/js/controller/dialogs/PaletteManagerController.js

@@ -18,13 +18,16 @@
     this.spectrumContainers = [];
   };
 
+  pskl.utils.inherit(ns.PaletteManagerController, ns.AbstractDialogController);
+
   ns.PaletteManagerController.prototype.init = function () {
+    this.superclass.init.call(this);
+
     this.palettesList = document.querySelector('.palette-manager-list');
     this.paletteBody = document.querySelector('.palette-manager-details-body');
     this.paletteHead = document.querySelector('.palette-manager-details-head');
     this.createButton = document.querySelector('.palette-manager-actions-button[data-action="create"]');
     this.saveAllButton = document.querySelector('.palette-manager-actions-button[data-action="save-all"]');
-    this.closeButton = document.querySelector('.palette-manager-close');
 
     this.colorCardTemplate = pskl.utils.Template.get('palette-color-card-template');
     this.newColorTemplate = pskl.utils.Template.get('palette-new-color-template');
@@ -37,7 +40,6 @@
     this.paletteHead.addEventListener('click', this.delegatedPaletteHeadClick.bind(this));
     this.createButton.addEventListener('click', this.onCreateClick_.bind(this));
     this.saveAllButton.addEventListener('click', this.saveAll.bind(this));
-    this.closeButton.addEventListener('click', this.closeDialog.bind(this));
 
     // Init markup
     this.createPaletteListMarkup();
@@ -52,10 +54,6 @@
     this.destroySpectrumPickers();
   };
 
-  ns.PaletteManagerController.prototype.closeDialog = function () {
-    $.publish(Events.DIALOG_HIDE);
-  };
-
   ns.PaletteManagerController.prototype.onCreateClick_ = function (evt) {
     this.createPalette();
   };