moving palette.js to controller directory

2023-08-10 21:12:52 +03:00 · 2012-09-16 13:28:53 +02:00
parent 12680b7b8b
commit b671d46dbf
2 changed files with 1 additions and 1 deletions
--- a/js/controller/PaletteController.js
+++ b/js/controller/PaletteController.js
@@ -0,0 +1,114 @@
+/*
+ * @provide pskl.Palette
+ *
+ * @require Constants
+ * @require Events
+ */
+$.namespace("pskl");
+
+pskl.Palette = (function() {
+  
+  var paletteRoot,
+    paletteColors = [];
+
+  /**
+   * @private
+   */
+   var onPickerChange_ = function(evt, isPrimary) {
+        var inputPicker = $(evt.target);
+        $.publish(Events.COLOR_SELECTED, [inputPicker.val(), evt.data.isPrimary]);
+   };
+
+   /**
+    * @private
+    */
+   var createPalette_ = function (colors) {
+    // Always adding transparent color
+    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);
+      }
+    }
+   };
+
+   /**
+    * @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_);
+
+    }
+  };
+})();
+
+
+