piskel/dev/js/controller/dialogs/CreatePaletteController.js

(function () {
  var ns = $.namespace('pskl.controller.dialogs');

  ns.CreatePaletteController = function (piskelController) {
    this.paletteService = pskl.app.paletteService;
    this.paletteImportService = pskl.app.paletteImportService;
  };

  pskl.utils.inherit(ns.CreatePaletteController, ns.AbstractDialogController);

  ns.CreatePaletteController.prototype.init = function (paletteId) {
    this.superclass.init.call(this);

    this.hiddenFileInput = document.querySelector('.create-palette-import-input');
    this.nameInput = document.querySelector('input[name="palette-name"]');

    var buttonsContainer = document.querySelector('.create-palette-actions');
    var deleteButton = document.querySelector('.create-palette-delete');
    var downloadButton = document.querySelector('.create-palette-download-button');
    var importFileButton = document.querySelector('.create-palette-import-button');

    this.addEventListener(this.nameInput, 'input', this.onNameInputChange_);
    this.addEventListener(this.hiddenFileInput, 'change', this.onFileInputChange_);

    this.addEventListener(buttonsContainer, 'click', this.onButtonClick_);
    this.addEventListener(downloadButton, 'click', this.onDownloadButtonClick_);
    this.addEventListener(importFileButton, 'click', this.onImportFileButtonClick_);

    var colorsListContainer = document.querySelector('.colors-container');
    this.colorsListWidget = new pskl.widgets.ColorsList(colorsListContainer);

    var palette;
    var isCurrentColorsPalette = paletteId == Constants.CURRENT_COLORS_PALETTE_ID;
    if (paletteId && !isCurrentColorsPalette) {
      importFileButton.style.display = 'none';
      this.setTitle('Edit Palette');

      var paletteObject = this.paletteService.getPaletteById(paletteId);
      palette = pskl.model.Palette.fromObject(paletteObject);
    } else {
      downloadButton.style.display = 'none';
      deleteButton.style.display = 'none';
      this.setTitle('Create Palette');

      var uuid = pskl.utils.Uuid.generate();
      if (isCurrentColorsPalette) {
        palette = new pskl.model.Palette(uuid, 'Current colors clone', this.getCurrentColors_());
      } else {
        palette = new pskl.model.Palette(uuid, 'New palette', []);
      }
    }

    this.setPalette_(palette);
  };

  ns.CreatePaletteController.prototype.getCurrentColors_ = function () {
    var palette = this.paletteService.getPaletteById(Constants.CURRENT_COLORS_PALETTE_ID);
    return palette.getColors();
  };

  ns.CreatePaletteController.prototype.setPalette_ = function (palette) {
    this.palette = palette;
    this.nameInput.value = pskl.utils.unescapeHtml(palette.name);
    this.colorsListWidget.setColors(palette.getColors());
  };

  ns.CreatePaletteController.prototype.destroy = function () {
    this.colorsListWidget.destroy();
    this.superclass.destroy.call(this);

    this.nameInput = null;
    this.hiddenFileInput = null;
  };

  ns.CreatePaletteController.prototype.onButtonClick_ = function (evt) {
    var target = evt.target;
    if (target.dataset.action === 'submit') {
      this.saveAndSelectPalette_();
    } else if (target.dataset.action === 'cancel') {
      this.closeDialog();
    } else if (target.dataset.action === 'delete') {
      this.deletePalette_();
    }
  };

  ns.CreatePaletteController.prototype.saveAndSelectPalette_ = function () {
    this.palette.setColors(this.colorsListWidget.getColors());
    this.paletteService.savePalette(this.palette);
    pskl.UserSettings.set(pskl.UserSettings.SELECTED_PALETTE, this.palette.id);
    this.closeDialog();
  };

  ns.CreatePaletteController.prototype.deletePalette_ = function () {
    if (window.confirm('Are you sure you want to delete palette ' + this.palette.name)) {
      this.paletteService.deletePaletteById(this.palette.id);
      pskl.UserSettings.set(pskl.UserSettings.SELECTED_PALETTE, Constants.CURRENT_COLORS_PALETTE_ID);
      this.closeDialog();
    }
  };

  ns.CreatePaletteController.prototype.onDownloadButtonClick_ = function () {
    var paletteWriter = new pskl.service.palette.PaletteGplWriter(this.palette);
    var paletteAsString = paletteWriter.write();

    pskl.utils.BlobUtils.stringToBlob(paletteAsString, function(blob) {
      pskl.utils.FileUtils.downloadAsFile(blob, this.palette.name + '.gpl');
    }.bind(this), 'application/json');
  };

  ns.CreatePaletteController.prototype.onImportFileButtonClick_ = function () {
    this.hiddenFileInput.click();
  };

  ns.CreatePaletteController.prototype.onFileInputChange_ = function (evt) {
    var files = this.hiddenFileInput.files;
    if (files.length == 1) {
      this.paletteImportService.read(files[0], this.setPalette_.bind(this), this.displayErrorMessage_.bind(this));
    }
  };

  ns.CreatePaletteController.prototype.displayErrorMessage_ = function (message) {
    message = 'Could not import palette : ' + message;
    $.publish(Events.SHOW_NOTIFICATION, [{
      'content' : message
    }]);
    window.setTimeout($.publish.bind($, Events.HIDE_NOTIFICATION), 2000);
  };

  ns.CreatePaletteController.prototype.onNameInputChange_ = function (evt) {
    this.palette.name = pskl.utils.escapeHtml(this.nameInput.value);
  };
})();