Change color on click, add history to color picker [MAILPOET-1087]

assets/js/src/newsletter_editor/behaviors/ColorPickerBehavior.js

@@ -13,15 +13,30 @@ define([
 
   BL.ColorPickerBehavior = Marionette.Behavior.extend({
     onRender: function() {
-      this.view.$('.mailpoet_color').spectrum({
+      var that = this, 
-        clickoutFiresChange: true,
+        preferredFormat = 'hex6';
-        showInput: true,
+      this.view.$('.mailpoet_color').each(function () {
-        showInitial: true,
+        var $input = that.view.$(this);
-        preferredFormat: 'hex6',
+        var updateColorInput = function(color) {
-        allowEmpty: true,
+          $input.val(color.toString(preferredFormat));
-        chooseText: MailPoet.I18n.t('selectColor'),
+          $input.trigger('change');
-        cancelText: MailPoet.I18n.t('cancelColorSelection')
+        };
-      });
+        $input.spectrum({
+          clickoutFiresChange: true,
+          showInput: true,
+          showInitial: true,
+          showPalette: true,
+          showSelectionPalette: true,
+          palette: [],
+          localStorageKey: 'newsletter_editor.spectrum.palette',
+          preferredFormat: preferredFormat,
+          allowEmpty: true,
+          chooseText: MailPoet.I18n.t('selectColor'),
+          cancelText: MailPoet.I18n.t('cancelColorSelection'),
+          move: updateColorInput,
+          hide: updateColorInput
+        });
+      });        
     }
   });
 });