Prototypization of PaletteController

I love new words

js/controller/PaletteController.js

@@ -1,113 +1,114 @@
-/*
+(function () {
- * @provide pskl.Palette
+  var ns = $.namespace("pskl.controller");
- *
- * @require Constants
- * @require Events
- */
-$.namespace("pskl");
 
-pskl.Palette = (function() {
+  ns.PaletteController = function () {
-  
+    this.paletteRoot = null;
-  var paletteRoot,
+    this.paletteColors = [];
-    paletteColors = [];
+  };
 
   /**
    * @private
    */
-   var onPickerChange_ = function(evt, isPrimary) {
+  ns.PaletteController.prototype.onPickerChange_ = function(evt, isPrimary) {
-        var inputPicker = $(evt.target);
+    var inputPicker = $(evt.target);
-        $.publish(Events.COLOR_SELECTED, [inputPicker.val(), evt.data.isPrimary]);
+    $.publish(Events.COLOR_SELECTED, [inputPicker.val(), evt.data.isPrimary]);
-   };
+  };
 
    /**
-    * @private
+   * @private
-    */
+   */
-   var createPalette_ = function (colors) {
+  ns.PaletteController.prototype.createPalette_ = function (colors) {
     // Always adding transparent color
-    paletteRoot.html('<span class="palette-color transparent-color" data-color="TRANSPARENT" title="Transparent"></span>');
+    this.paletteRoot.html('<span class="palette-color transparent-color" data-color="TRANSPARENT" title="Transparent"></span>');
     for(var color in colors) {
       if(color != Constants.TRANSPARENT_COLOR) {
-        addColorToPalette_(color);
+        this.addColorToPalette_(color);
       }
     }
-   };
+  };
-
-   /**
-    * @private
-    */
-   var addColorToPalette_ = function (color) {
-      if (paletteColors.indexOf(color) == -1 && color != Constants.TRANSPARENT_COLOR) {
-        var colorEl = document.createElement("li");    
-        colorEl.className = "palette-color";
-        colorEl.setAttribute("data-color", color);
-        colorEl.setAttribute("title", color);
-        colorEl.style.background = color;
-        paletteRoot[0].appendChild(colorEl);
-        paletteColors.push(color);
-      }
-    };
-
-    /**
-     * @private
-     */
-    var onPaletteColorClick_ = function (event) {
-      var selectedColor = $(event.target).data("color");
-      if (event.which == 1) { // left button 
-        updateColorPicker(selectedColor, $('#color-picker'));
-        $.publish(Events.COLOR_SELECTED, [selectedColor, true]);
-      } else if (event.which == 3) { // right button
-        updateColorPicker(selectedColor, $('#secondary-color-picker'));
-        $.publish(Events.COLOR_SELECTED, [selectedColor, false]);
-      }
-    };
-
-    var 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);
-      }
-    };
-
-  return {
-    init: function(framesheet) {
-      
-      paletteRoot = $("#palette");
-
-      // Initialize palette:
-      createPalette_(framesheet.getUsedColors());
-
-          $.subscribe(Events.FRAMESHEET_RESET, function(evt) {
-            createPalette_(framesheet.getUsedColors());
-          });
-
-          paletteRoot.mouseup(onPaletteColorClick_);
-          $.subscribe(Events.COLOR_SELECTED, function(evt, color) {
-            addColorToPalette_(color);
-          });
-
-          // Initialize colorpicker:
-          var colorPicker = $('#color-picker');
-          colorPicker.val(Constants.DEFAULT_PEN_COLOR);
-          colorPicker.change({isPrimary : true}, onPickerChange_);
-
-
-          var secondaryColorPicker = $('#secondary-color-picker');
-          secondaryColorPicker.val(Constants.TRANSPARENT_COLOR);
-          secondaryColorPicker.change({isPrimary : false}, onPickerChange_);
 
+  /**
+   * @private
+   */
+  ns.PaletteController.prototype.addColorToPalette_ = function (color) {
+    if (this.paletteColors.indexOf(color) == -1 && color != Constants.TRANSPARENT_COLOR) {
+      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);
+      this.paletteColors.push(color);
     }
   };
+
+  /**
+   * @private
+   */
+  ns.PaletteController.prototype.onPaletteColorClick_ = function (event) {
+    var selectedColor = $(event.target).data("color");
+    if (event.which == 1) { // left button 
+      this.updateColorPicker_(selectedColor, $('#color-picker'));
+      $.publish(Events.COLOR_SELECTED, [selectedColor, true]);
+    } else if (event.which == 3) { // right button
+      this.updateColorPicker_(selectedColor, $('#secondary-color-picker'));
+      $.publish(Events.COLOR_SELECTED, [selectedColor, false]);
+    }
+  };
+
+  /**
+   * @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.createPalette_(this.framesheet.getUsedColors());
+
+    $.subscribe(Events.FRAMESHEET_RESET, $.proxy(function(evt) {
+      this.createPalette_(this.framesheet.getUsedColors());
+    }, this));
+
+    this.paletteRoot.mouseup($.proxy(this.onPaletteColorClick_, this));
+    
+    $.subscribe(Events.COLOR_SELECTED, $.proxy(function(evt, color) {
+      this.addColorToPalette_(color);
+    }, 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));
+
+  };
 })();
 
 

js/piskel.js

@@ -149,7 +149,8 @@ $.namespace("pskl");
       var toolController = new pskl.controller.ToolController();
       toolController.init();
       
-      pskl.Palette.init(frameSheet);
+      var paletteController = new pskl.controller.PaletteController();
+      paletteController.init(frameSheet);
     },
 
     getFramesheetIdFromUrl : function() {