piskel/js/controller/PaletteController.js

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

  ns.PaletteController = function () {
    this.paletteRoot = null;
    this.paletteColors = [];
  };

  /**
   * @private
   */
  ns.PaletteController.prototype.onPickerChange_ = function(evt, isPrimary) {
    var inputPicker = $(evt.target);
    if(evt.data.isPrimary) {
      $.publish(Events.PRIMARY_COLOR_SELECTED, [inputPicker.val()]);
    }
    else {
      $.publish(Events.SECONDARY_COLOR_SELECTED, [inputPicker.val()]);
    }
  };

  /**
   * @private
   */
  ns.PaletteController.prototype.createPaletteMarkup_ = function (colors) {
    // Always adding transparent color
    this.paletteRoot.html('<span class="palette-color transparent-color" data-color="TRANSPARENT" title="Transparent"></span>');
    
    for(var i=0, l=this.paletteColors.length; i<l; i++) {
      if(color != Constants.TRANSPARENT_COLOR) {
        var color = this.paletteColors[i];
        var colorEl = document.createElement("li");    
        colorEl.className = "palette-color";
        colorEl.setAttribute("data-color", color);
        colorEl.setAttribute("title", color);
        colorEl.style.background = color;
        this.paletteRoot.append(colorEl);
      }
    }
  };

  /**
   * @private
   */
  ns.PaletteController.prototype.addColorToPalette_ = function (color) {
    if (this.paletteColors.indexOf(color) == -1 && color != Constants.TRANSPARENT_COLOR) {
      this.paletteColors.push(color);
    }
  };

  /**
   * @private
   */
  ns.PaletteController.prototype.addColorsToPalette_ = function (colors) {
    for(var color in colors) {
      this.addColorToPalette_(color);
    }
  };

  /**
   * @private
   */
  ns.PaletteController.prototype.onPaletteColorClick_ = function (event) {
    var selectedColor = $(event.target).data("color");
    var isLeftClick = (event.which == 1);
    var isRightClick = (event.which == 3);
    if (isLeftClick) {
      $.publish(Events.PRIMARY_COLOR_SELECTED, [selectedColor]);
    } else if (isRightClick) {
      $.publish(Events.SECONDARY_COLOR_SELECTED, [selectedColor]);
    }
  };

  /**
   * @private
   */
  ns.PaletteController.prototype.updateColorPicker_ = function (color, colorPicker) {
    if (color == Constants.TRANSPARENT_COLOR) {
      // We can set the current palette color to transparent.
      // You can then combine this transparent color with an advanced
      // tool for customized deletions. 
      // Eg: bucket + transparent: Delete a colored area
      //     Stroke + transparent: hollow out the equivalent of a stroke

      // The colorpicker can't be set to a transparent state.
      // We set its background to white and insert the
      // string "TRANSPARENT" to mimic this state:
      colorPicker[0].color.fromString("#fff");
      colorPicker.val(Constants.TRANSPARENT_COLOR);
    } else {
      colorPicker[0].color.fromString(color);
    }
  };

  /**
   * @public
   */
  ns.PaletteController.prototype.init = function(framesheet) {
      
    this.paletteRoot = $("#palette");
    this.framesheet = framesheet;

    // Initialize palette:
    this.addColorsToPalette_(this.framesheet.getUsedColors());
    this.createPaletteMarkup_();

    $.subscribe(Events.FRAMESHEET_RESET, $.proxy(function(evt) {
      this.addColorsToPalette_(this.framesheet.getUsedColors());
      this.createPaletteMarkup_();
    }, this));

    this.paletteRoot.mouseup($.proxy(this.onPaletteColorClick_, this));
    
    // Many interactions can trigger a COLOR_SELECTED event (eg the canvas colorpicker
    // or palette color picker). Only the following code can 
    $.subscribe(Events.PRIMARY_COLOR_UPDATED, $.proxy(function(evt, color) {
      this.updateColorPicker_(color, $('#color-picker'));
      this.addColorToPalette_(color);
      this.createPaletteMarkup_();
    }, this));

    $.subscribe(Events.SECONDARY_COLOR_UPDATED, $.proxy(function(evt, color) {
      this.updateColorPicker_(color, $('#secondary-color-picker'));
      this.addColorToPalette_(color);
      this.createPaletteMarkup_();
    }, this));

    // Initialize colorpickers:
    var colorPicker = $('#color-picker');
    colorPicker.val(Constants.DEFAULT_PEN_COLOR);
    colorPicker.change({isPrimary : true}, $.proxy(this.onPickerChange_, this));


    var secondaryColorPicker = $('#secondary-color-picker');
    secondaryColorPicker.val(Constants.TRANSPARENT_COLOR);
    secondaryColorPicker.change({isPrimary : false}, $.proxy(this.onPickerChange_, this));

  };
})();