From b9cc2eb4f85555787431057553cb529c4f7e0b10 Mon Sep 17 00:00:00 2001
From: Julian Descottes <julian.descottes@gmail.com>
Date: Sun, 8 Apr 2018 16:08:51 +0200
Subject: [PATCH] Remove jquery from PaletteController.js

---
 src/js/controller/PaletteController.js | 36 +++++++++++++-------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/js/controller/PaletteController.js b/src/js/controller/PaletteController.js
index 2ee8b9c4..d3a73216 100644
--- a/src/js/controller/PaletteController.js
+++ b/src/js/controller/PaletteController.js
@@ -35,24 +35,24 @@
     // Initialize colorpickers:
     var colorPicker = $('#color-picker');
     colorPicker.spectrum($.extend({color: Constants.DEFAULT_PEN_COLOR}, spectrumCfg));
-    colorPicker.change({isPrimary : true}, $.proxy(this.onPickerChange_, this));
-    this.setTitleOnPicker_(Constants.DEFAULT_PEN_COLOR, colorPicker);
+    colorPicker.change({isPrimary : true}, this.onPickerChange_.bind(this));
+    this.setTitleOnPicker_(Constants.DEFAULT_PEN_COLOR, colorPicker.get(0));
 
     var secondaryColorPicker = $('#secondary-color-picker');
     secondaryColorPicker.spectrum($.extend({color: Constants.TRANSPARENT_COLOR}, spectrumCfg));
-    secondaryColorPicker.change({isPrimary : false}, $.proxy(this.onPickerChange_, this));
-    this.setTitleOnPicker_(Constants.TRANSPARENT_COLOR, secondaryColorPicker);
+    secondaryColorPicker.change({isPrimary : false}, this.onPickerChange_.bind(this));
+    this.setTitleOnPicker_(Constants.TRANSPARENT_COLOR, secondaryColorPicker.get(0));
 
-    var swapColorsIcon = $('.swap-colors-button');
-    swapColorsIcon.click(this.swapColors.bind(this));
+    var swapColorsIcon = document.querySelector('.swap-colors-button');
+    swapColorsIcon.addEventListener('click', this.swapColors.bind(this));
   };
 
   /**
    * @private
    */
-  ns.PaletteController.prototype.onPickerChange_ = function(evt, isPrimary) {
-    var inputPicker = $(evt.target);
-    var color = inputPicker.val();
+  ns.PaletteController.prototype.onPickerChange_ = function(evt) {
+    var inputPicker = evt.target;
+    var color = inputPicker.value;
 
     if (color != Constants.TRANSPARENT_COLOR) {
       // Unless the color is TRANSPARENT_COLOR, format it to hexstring, as
@@ -71,7 +71,6 @@
    * @private
    */
   ns.PaletteController.prototype.onColorSelected_ = function(args, evt, color) {
-    var inputPicker = $(evt.target);
     if (args.isPrimary) {
       this.setPrimaryColor_(color);
     } else {
@@ -80,12 +79,12 @@
   };
 
   ns.PaletteController.prototype.setPrimaryColor_ = function (color) {
-    this.updateColorPicker_(color, $('#color-picker'));
+    this.updateColorPicker_(color, document.querySelector('#color-picker'));
     $.publish(Events.PRIMARY_COLOR_SELECTED, [color]);
   };
 
   ns.PaletteController.prototype.setSecondaryColor_ = function (color) {
-    this.updateColorPicker_(color, $('#secondary-color-picker'));
+    this.updateColorPicker_(color, document.querySelector('#secondary-color-picker'));
     $.publish(Events.SECONDARY_COLOR_SELECTED, [color]);
   };
 
@@ -104,6 +103,7 @@
    * @private
    */
   ns.PaletteController.prototype.updateColorPicker_ = function (color, colorPicker) {
+    var jqueryColorPicker = $(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
@@ -114,17 +114,17 @@
       // 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.spectrum('set', Constants.TRANSPARENT_COLOR);
-      colorPicker.val(Constants.TRANSPARENT_COLOR);
+      jqueryColorPicker.spectrum('set', Constants.TRANSPARENT_COLOR);
+      colorPicker.value = Constants.TRANSPARENT_COLOR;
     } else {
-      colorPicker.spectrum('set', color);
+      jqueryColorPicker.spectrum('set', color);
     }
     this.setTitleOnPicker_(color, colorPicker);
   };
 
   ns.PaletteController.prototype.setTitleOnPicker_ = function (title, colorPicker) {
-    var parent = colorPicker.parent();
-    title = parent.data('initial-title') + '<br/>' + title;
-    parent.attr('data-original-title', title);
+    var parent = colorPicker.parentNode;
+    title = parent.dataset.initialTitle + '<br/>' + title;
+    parent.dataset.originalTitle = title;
   };
 })();