Cleanup project root

src/js/controller/settings/ApplicationSettingsController.js

@@ -0,0 +1,43 @@
+(function () {
+  var ns = $.namespace("pskl.controller.settings");
+
+  ns.ApplicationSettingsController = function () {};
+
+  /**
+   * @public
+   */
+  ns.ApplicationSettingsController.prototype.init = function() {
+    // Highlight selected background picker:
+    var backgroundClass = pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND);
+    $('#background-picker-wrapper')
+      .find('.background-picker[data-background-class=' + backgroundClass + ']')
+      .addClass('selected');
+
+    // Initial state for grid display:
+    var show_grid = pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID);
+    $('#show-grid').prop('checked', show_grid);
+
+    // Handle grid display changes:
+    $('#show-grid').change(this.onShowGridClick.bind(this));
+
+    // Handle canvas background changes:
+    $('#background-picker-wrapper').click(this.onBackgroundClick.bind(this));
+  };
+
+  ns.ApplicationSettingsController.prototype.onShowGridClick = function (evt) {
+    var checked = $('#show-grid').prop('checked');
+    pskl.UserSettings.set(pskl.UserSettings.SHOW_GRID, checked);
+  };
+
+  ns.ApplicationSettingsController.prototype.onBackgroundClick = function (evt) {
+    var target = $(evt.target).closest('.background-picker');
+    if (target.length) {
+      var backgroundClass = target.data('background-class');
+      pskl.UserSettings.set(pskl.UserSettings.CANVAS_BACKGROUND, backgroundClass);
+
+      $('.background-picker').removeClass('selected');
+      target.addClass('selected');
+    }
+  };
+
+})();

src/js/controller/settings/GifExportController.js

@@ -0,0 +1,159 @@
+(function () {
+  var ns = $.namespace("pskl.controller.settings");
+
+  var URL_MAX_LENGTH = 60;
+
+  ns.GifExportController = function (piskelController) {
+    this.piskelController = piskelController;
+  };
+
+  /**
+   * List of Resolutions applicable for Gif export
+   * @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.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];
+
+    this.uploadForm = $("[name=gif-export-upload-form]");
+    this.uploadForm.submit(this.onUploadFormSubmit_.bind(this));
+
+    this.createRadioElements_();
+  };
+
+  ns.GifExportController.prototype.onUploadFormSubmit_ = function (evt) {
+    evt.originalEvent.preventDefault();
+    var selectedZoom = this.getSelectedZoom_(),
+        fps = this.piskelController.getFPS(),
+        zoom = selectedZoom;
+
+    this.renderAsImageDataAnimatedGIF(zoom, fps, this.onGifRenderingCompleted_.bind(this));
+  };
+
+  ns.GifExportController.prototype.onGifRenderingCompleted_ = function (imageData) {
+    this.updatePreview_(imageData);
+    this.previewContainerEl.classList.add("preview-upload-ongoing");
+    pskl.app.imageUploadService.upload(imageData, this.onImageUploadCompleted_.bind(this));
+  };
+
+  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) {
+    this.previewContainerEl.innerHTML = "<div><img style='max-width:240px;' src='"+src+"'/></div>";
+  };
+
+  ns.GifExportController.prototype.getSelectedZoom_ = function () {
+    var radiosColl = this.uploadForm.get(0).querySelectorAll("[name=gif-zoom-level]"),
+        radios = Array.prototype.slice.call(radiosColl,0);
+    var selectedRadios = radios.filter(function(radio) {return !!radio.checked;});
+
+    if (selectedRadios.length == 1) {
+      return selectedRadios[0].value;
+    } else {
+      throw "Unexpected error when retrieving selected zoom";
+    }
+  };
+
+  ns.GifExportController.prototype.createRadioElements_ = function () {
+    var resolutions = ns.GifExportController.RESOLUTIONS;
+    for (var i = 0 ; i < resolutions.length ; i++) {
+      var radio = this.createRadioForResolution_(resolutions[i]);
+      this.radioGroupEl.appendChild(radio);
+    }
+  };
+
+  ns.GifExportController.prototype.createRadioForResolution_ = function (resolution) {
+    var zoom = resolution.zoom;
+    var label = zoom*this.piskelController.getWidth() + "x" + zoom*this.piskelController.getHeight();
+    var value = zoom;
+
+    var radioHTML = pskl.utils.Template.replace(this.radioTemplate_, {value : value, label : label});
+    var radioEl = pskl.utils.Template.createFromHTML(radioHTML);
+
+    if (resolution['default']) {
+      var input = radioEl.getElementsByTagName("input")[0];
+      input.setAttribute("checked", "checked");
+    }
+
+    return radioEl;
+  };
+
+  ns.GifExportController.prototype.blobToBase64_ = function(blob, cb) {
+    var reader = new FileReader();
+    reader.onload = function() {
+      var dataUrl = reader.result;
+      cb(dataUrl);
+    };
+    reader.readAsDataURL(blob);
+  };
+
+  ns.GifExportController.prototype.renderAsImageDataAnimatedGIF = function(zoom, fps, cb) {
+    var gif = new window.GIF({
+      workers: 2,
+      quality: 10,
+      width: this.piskelController.getWidth()*zoom,
+      height: this.piskelController.getHeight()*zoom
+    });
+
+    for (var i = 0; i < this.piskelController.getFrameCount(); i++) {
+      var frame = this.piskelController.getFrameAt(i);
+      var canvasRenderer = new pskl.rendering.CanvasRenderer(frame, zoom);
+      var canvas = canvasRenderer.render();
+      gif.addFrame(canvas.getContext('2d'), {
+        delay: 1000 / fps
+      });
+    }
+
+    gif.on('finished', function(blob) {
+      this.blobToBase64_(blob, cb);
+    }.bind(this));
+
+    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;
+  };
+})();

src/js/controller/settings/ImportController.js

@@ -0,0 +1,172 @@
+(function () {
+  var ns = $.namespace('pskl.controller.settings');
+  var DEFAULT_FILE_STATUS = 'No file selected ...';
+  var PREVIEW_HEIGHT  = 60;
+
+  ns.ImportController = function (piskelController) {
+    this.piskelController = piskelController;
+    this.importedImage_ = null;
+  };
+
+  ns.ImportController.prototype.init = function () {
+    this.importForm = $('[name=import-form]');
+    this.hiddenFileInput = $('[name=file-upload-input]');
+    this.fileInputButton = $('.file-input-button');
+    this.fileInputStatus = $('.file-input-status');
+    this.fileInputStatus.html(DEFAULT_FILE_STATUS);
+
+    this.importPreview = $('.import-section-preview');
+
+    this.resizeWidth = $('[name=resize-width]');
+    this.resizeHeight = $('[name=resize-height]');
+    this.smoothResize =  $('[name=smooth-resize-checkbox]');
+    this.submitButton =  $('[name=import-submit]');
+
+    this.importForm.submit(this.onImportFormSubmit_.bind(this));
+    this.hiddenFileInput.change(this.onFileUploadChange_.bind(this));
+    this.fileInputButton.click(this.onFileInputClick_.bind(this));
+
+    this.resizeWidth.keyup(this.onResizeInputKeyUp_.bind(this, 'width'));
+    this.resizeHeight.keyup(this.onResizeInputKeyUp_.bind(this, 'height'));
+  };
+
+  ns.ImportController.prototype.reset_ = function () {
+    this.importForm.get(0).reset();
+    this.fileInputStatus.html(DEFAULT_FILE_STATUS);
+    $.publish(Events.CLOSE_SETTINGS_DRAWER);
+  };
+
+  ns.ImportController.prototype.onResizeInputKeyUp_ = function (from, evt) {
+    if (this.importedImage_) {
+      this.synchronizeResizeFields_(evt.target.value, from);
+    }
+  };
+
+  ns.ImportController.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));
+    }
+  };
+
+  ns.ImportController.prototype.onImportFormSubmit_ = function (evt) {
+    evt.originalEvent.preventDefault();
+    this.importImageToPiskel_();
+  };
+
+  ns.ImportController.prototype.onFileUploadChange_ = function (evt) {
+    this.importFromFile_();
+  };
+
+  ns.ImportController.prototype.onFileInputClick_ = function (evt) {
+    this.hiddenFileInput.click();
+  };
+
+  ns.ImportController.prototype.importFromFile_ = function () {
+    var files = this.hiddenFileInput.get(0).files;
+    if (files.length == 1) {
+      var file = files[0];
+      if (this.isImage_(file)) {
+        this.readImageFile_(file);
+        this.enableDisabledSections_();
+      } else {
+        this.reset_();
+        throw 'File is not an image : ' + file.type;
+      }
+    }
+  };
+
+  ns.ImportController.prototype.enableDisabledSections_ = function () {
+    this.resizeWidth.removeAttr('disabled');
+    this.resizeHeight.removeAttr('disabled');
+    this.smoothResize.removeAttr('disabled');
+    this.submitButton.removeAttr('disabled');
+
+    this.fileInputButton.removeClass('button-primary');
+    this.fileInputButton.blur();
+
+    $('.import-section-disabled').removeClass('import-section-disabled');
+  };
+
+  ns.ImportController.prototype.readImageFile_ = function (imageFile) {
+    pskl.utils.FileUtils.readFile(imageFile, this.processImageSource_.bind(this));
+  };
+
+  /**
+   * 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.ImportController.prototype.processImageSource_ = function (imageSource) {
+    this.importedImage_ = new Image();
+    this.importedImage_.onload = this.onImageLoaded_.bind(this);
+    this.importedImage_.src = imageSource;
+  };
+
+  ns.ImportController.prototype.onImageLoaded_ = function (evt) {
+    var w = this.importedImage_.width,
+        h = this.importedImage_.height;
+    var filePath = this.hiddenFileInput.val();
+    var fileName = this.extractFileNameFromPath_(filePath);
+    this.fileInputStatus.html(fileName);
+
+    this.resizeWidth.val(w);
+    this.resizeHeight.val(h);
+
+    this.importPreview.width('auto');
+    this.importPreview.html('');
+    this.importPreview.append(this.createImagePreview_());
+  };
+
+  ns.ImportController.prototype.createImagePreview_ = function () {
+    var image = document.createElement('IMG');
+    image.src = this.importedImage_.src;
+    image.setAttribute('height', PREVIEW_HEIGHT);
+    return image;
+  };
+
+  ns.ImportController.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.ImportController.prototype.importImageToPiskel_ = function () {
+    if (this.importedImage_) {
+      if (window.confirm('You are about to create a new Piskel, unsaved changes will be lost.')) {
+        var w = this.resizeWidth.val(),
+          h = this.resizeHeight.val(),
+          smoothing = !!this.smoothResize.prop('checked');
+
+        var image = pskl.utils.ImageResizer.resize(this.importedImage_, w, h, smoothing);
+        var frame = pskl.utils.FrameUtils.createFromImage(image);
+
+        var layer = pskl.model.Layer.fromFrames('Layer 1', [frame]);
+
+        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);
+        this.reset_();
+      }
+    }
+  };
+
+  ns.ImportController.prototype.isImage_ = function (file) {
+    return file.type.indexOf('image') === 0;
+  };
+
+})();

src/js/controller/settings/LocalStorageController.js

@@ -0,0 +1,70 @@
+(function () {
+  var ns = $.namespace("pskl.controller.settings");
+
+  ns.LocalStorageController = function () {};
+
+  /**
+   * @public
+   */
+  ns.LocalStorageController.prototype.init = function() {
+    this.localStorageItemTemplate_ = pskl.utils.Template.get("local-storage-item-template");
+    this.service_ = pskl.app.localStorageService;
+    this.piskelsList = $('.local-piskels-list');
+
+    this.fillLocalPiskelsList_();
+
+    this.piskelsList.click(this.onPiskelsListClick_.bind(this));
+  };
+
+  ns.LocalStorageController.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);
+        $.publish(Events.CLOSE_SETTINGS_DRAWER);
+      }
+    } else if (action === 'delete') {
+      if (window.confirm('This will permanently DELETE this piskel from your computer. Continue ?')) {
+        this.service_.remove(name);
+        $.publish(Events.CLOSE_SETTINGS_DRAWER);
+      }
+    }
+  };
+
+  ns.LocalStorageController.prototype.fillLocalPiskelsList_ = function () {
+    var html = "";
+    var keys = this.service_.getKeys();
+
+    var pad = function (num) {
+      if (num < 10) {
+        return "0" + num;
+      } else {
+        return "" + num;
+      }
+    };
+
+
+    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 = new Date(key.date);
+      var formattedDate = pskl.utils.Template.replace("{{Y}}/{{M}}/{{D}} {{H}}:{{m}}", {
+        Y : date.getFullYear(),
+        M : pad(date.getMonth() + 1),
+        D : pad(date.getDate()),
+        H : pad(date.getHours()),
+        m : pad(date.getMinutes())
+      });
+      html += pskl.utils.Template.replace(this.localStorageItemTemplate_, {name : key.name, date : formattedDate});
+    }).bind(this));
+
+    var tableBody_ = this.piskelsList.get(0).tBodies[0];
+    tableBody_.innerHTML = html;
+  };
+
+})();

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

src/js/controller/settings/ResizeController.js

@@ -0,0 +1,58 @@
+(function () {
+  var ns = $.namespace('pskl.controller.settings');
+
+  ns.ResizeController = function (piskelController) {
+    this.piskelController = piskelController;
+  };
+
+  ns.ResizeController.prototype.init = function () {
+    this.resizeWidth = $('[name=resize-width]');
+    this.resizeHeight = $('[name=resize-height]');
+
+    this.resizeWidth.val(this.piskelController.getWidth());
+    this.resizeHeight.val(this.piskelController.getHeight());
+
+    this.cancelButton = $('.resize-cancel-button');
+    this.cancelButton.click(this.onCancelButtonClicked_.bind(this));
+
+    this.resizeForm = $("[name=resize-form]");
+    this.resizeForm.submit(this.onResizeFormSubmit_.bind(this));
+  };
+
+  ns.ResizeController.prototype.onResizeFormSubmit_ = function (evt) {
+    evt.originalEvent.preventDefault();
+
+    var width = parseInt(this.resizeWidth.val(), 10);
+    var height = parseInt(this.resizeHeight.val(), 10);
+
+    var layers = [];
+    var fromLayers = this.piskelController.getLayers();
+    for (var i = 0 ; i < fromLayers.length ; i++) {
+      var frames = [];
+      var fromFrames = fromLayers[i].getFrames();
+      for (var j = 0 ; j < fromFrames.length ; j++) {
+        var frame = new pskl.model.Frame(width, height);
+        this.copyFromFrameToFrame(fromFrames[j], frame);
+        frames.push(frame);
+      }
+      var layer = pskl.model.Layer.fromFrames(fromLayers[i].getName(), frames);
+      layers.push(layer);
+    }
+
+    var piskel = pskl.model.Piskel.fromLayers(layers, this.piskelController.piskel.getDescriptor());
+    pskl.app.piskelController.setPiskel(piskel);
+    $.publish(Events.CLOSE_SETTINGS_DRAWER);
+  };
+
+  ns.ResizeController.prototype.copyFromFrameToFrame = function (from, to) {
+    from.forEachPixel(function (color, x, y) {
+      if (x < to.getWidth() && y < to.getHeight()) {
+        to.setPixel(x, y, color);
+      }
+    });
+  };
+
+  ns.ResizeController.prototype.onCancelButtonClicked_ = function (evt) {
+    $.publish(Events.CLOSE_SETTINGS_DRAWER);
+  };
+})();

src/js/controller/settings/SaveController.js

@@ -0,0 +1,115 @@
+(function () {
+  var ns = $.namespace('pskl.controller.settings');
+
+  ns.SaveController = function (piskelController) {
+    this.piskelController = piskelController;
+  };
+
+  /**
+   * @public
+   */
+  ns.SaveController.prototype.init = function () {
+    this.saveForm = $('form[name=save-form]');
+    this.nameInput =  $('#save-name');
+    this.descriptionInput = $('#save-description');
+    this.isPublicCheckbox = $('input[name=save-public-checkbox]');
+    this.saveCloudButton = $('#save-cloud-button');
+    this.saveLocalButton = $('#save-local-button');
+
+    // Only available in app-engine mode ...
+    this.piskelName = $('.piskel-name').get(0);
+
+    this.status = $('#save-status');
+
+    var descriptor = this.piskelController.piskel.getDescriptor();
+    this.nameInput.val(descriptor.name);
+    this.descriptionInput.val(descriptor.description);
+
+    this.isPublicCheckbox.prop('checked', descriptor.isPublic);
+
+    if (!pskl.app.isLoggedIn()) {
+      this.saveCloudButton.attr('disabled', 'disabled');
+      this.status.html('You are not logged in. Only Local Save is available.');
+    } else {
+      this.saveForm.submit(this.onSaveFormSubmit_.bind(this));
+    }
+
+    this.saveLocalButton.click(this.onSaveLocalClick_.bind(this));
+  };
+
+  ns.SaveController.prototype.onSaveFormSubmit_ = function (evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+
+    var name = this.getName();
+    var description = this.getDescription();
+    var isPublic = !!this.isPublicCheckbox.prop('checked');
+
+    var descriptor = new pskl.model.piskel.Descriptor(name, description, isPublic);
+    this.piskelController.piskel.setDescriptor(descriptor);
+
+    this.beforeSaving_();
+    pskl.app.store({
+      success : this.onSaveSuccess_.bind(this),
+      error : this.onSaveError_.bind(this),
+      after : this.afterSaving_.bind(this)
+    });
+  };
+
+  ns.SaveController.prototype.onSaveLocalClick_ = function (evt) {
+    var localStorageService = pskl.app.localStorageService;
+    var isOk = true;
+    var name = this.getName();
+    var description = this.getDescription();
+    if (localStorageService.getPiskel(name)) {
+      isOk = window.confirm('There is already a piskel saved as ' + name + '. Override ?');
+    }
+
+    if (isOk) {
+      this.beforeSaving_();
+      localStorageService.save(name, description, pskl.app.piskelController.serialize());
+      window.setTimeout(function () {
+        this.onSaveSuccess_();
+        this.afterSaving_();
+      }.bind(this), 1000);
+    }
+  };
+
+  ns.SaveController.prototype.getName = function () {
+    return this.nameInput.val();
+  };
+
+  ns.SaveController.prototype.getDescription = function () {
+    return this.descriptionInput.val();
+  };
+
+  ns.SaveController.prototype.beforeSaving_ = function () {
+    this.saveCloudButton.attr('disabled', true);
+    this.status.html('Saving ...');
+
+    if (this.piskelName) {
+      this.piskelName.classList.add('piskel-name-saving');
+    }
+  };
+
+  ns.SaveController.prototype.onSaveSuccess_ = function () {
+    $.publish(Events.CLOSE_SETTINGS_DRAWER);
+    $.publish(Events.SHOW_NOTIFICATION, [{"content": "Successfully saved !"}]);
+    $.publish(Events.PISKEL_SAVED);
+  };
+
+  ns.SaveController.prototype.onSaveError_ = function (status) {
+    $.publish(Events.SHOW_NOTIFICATION, [{"content": "Saving failed ("+status+")"}]);
+  };
+
+  ns.SaveController.prototype.afterSaving_ = function () {
+    this.saveCloudButton.attr('disabled', false);
+    this.status.html('');
+
+    if (this.piskelName) {
+      this.piskelName.classList.remove('piskel-name-saving');
+    }
+
+    window.setTimeout($.publish.bind($, Events.HIDE_NOTIFICATION), 2000);
+  };
+})();

src/js/controller/settings/SettingsController.js

@@ -0,0 +1,100 @@
+(function () {
+  var ns = $.namespace('pskl.controller.settings');
+
+  var settings = {
+    'user' : {
+      template : 'templates/settings/application.html',
+      controller : ns.ApplicationSettingsController
+    },
+    'resize' : {
+      template : 'templates/settings/resize.html',
+      controller : ns.ResizeController
+    },
+    'gif' : {
+      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
+    },
+    'localstorage' : {
+      template : 'templates/settings/localstorage.html',
+      controller : ns.LocalStorageController
+    },
+    'save' : {
+      template : 'templates/settings/save.html',
+      controller : ns.SaveController
+    }
+  };
+
+  var SEL_SETTING_CLS = 'has-expanded-drawer';
+  var EXP_DRAWER_CLS = 'expanded';
+
+  ns.SettingsController = function (piskelController) {
+    this.piskelController = piskelController;
+    this.drawerContainer = document.getElementById('drawer-container');
+    this.settingsContainer = $('[data-pskl-controller=settings]');
+    this.isExpanded = false;
+    this.currentSetting = null;
+  };
+
+  /**
+   * @public
+   */
+  ns.SettingsController.prototype.init = function() {
+    $('[data-setting]').click(this.onSettingIconClick.bind(this));
+    $('body').click(this.onBodyClick.bind(this));
+    $.subscribe(Events.CLOSE_SETTINGS_DRAWER, this.closeDrawer.bind(this));
+  };
+
+  ns.SettingsController.prototype.onSettingIconClick = function (evt) {
+    var el = evt.originalEvent.currentTarget;
+    var setting = el.getAttribute('data-setting');
+    if (this.currentSetting != setting) {
+      this.loadSetting(setting);
+    } else {
+      this.closeDrawer();
+    }
+    evt.originalEvent.stopPropagation();
+    evt.originalEvent.preventDefault();
+  };
+
+  ns.SettingsController.prototype.onBodyClick = function (evt) {
+    var target = evt.target;
+
+    var isInDrawerContainer = pskl.utils.Dom.isParent(target, this.drawerContainer);
+    var isInSettingsIcon = target.getAttribute('data-setting');
+    var isInSettingsContainer = isInDrawerContainer || isInSettingsIcon;
+
+    if (this.isExpanded && !isInSettingsContainer) {
+      this.closeDrawer();
+    }
+  };
+
+  ns.SettingsController.prototype.loadSetting = function (setting) {
+    this.drawerContainer.innerHTML = pskl.utils.Template.get(settings[setting].template);
+    (new settings[setting].controller(this.piskelController)).init();
+
+    this.settingsContainer.addClass(EXP_DRAWER_CLS);
+
+    $('.' + SEL_SETTING_CLS).removeClass(SEL_SETTING_CLS);
+    $('[data-setting='+setting+']').addClass(SEL_SETTING_CLS);
+
+    this.isExpanded = true;
+    this.currentSetting = setting;
+  };
+
+  ns.SettingsController.prototype.closeDrawer = function () {
+    this.settingsContainer.removeClass(EXP_DRAWER_CLS);
+    $('.' + SEL_SETTING_CLS).removeClass(SEL_SETTING_CLS);
+
+    this.isExpanded = false;
+    this.currentSetting = null;
+  };
+
+})();