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

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

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