From fb9c600b9f4ad13291958ebcbb3ea2142b5a9f26 Mon Sep 17 00:00:00 2001
From: Guillaume Martigny <guillaume.martigny@gmail.com>
Date: Wed, 3 Feb 2016 12:45:44 +0100
Subject: [PATCH] fix #348 Add a proposition to replace the title attribute.
 Signed-off-by:Guillaume Martigny <guillaume.martigny@gmail.com>

---
 src/css/spectrum/spectrum.css          |  2 +-
 src/css/tools.css                      |  7 +++++++
 src/js/controller/PaletteController.js | 28 ++++++++++++++++++--------
 src/templates/drawing-tools.html       |  1 +
 4 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/css/spectrum/spectrum.css b/src/css/spectrum/spectrum.css
index 850e1930..c21fad6a 100644
--- a/src/css/spectrum/spectrum.css
+++ b/src/css/spectrum/spectrum.css
@@ -13,7 +13,7 @@ License: MIT
     *display: inline;
     *zoom: 1;
     /* https://github.com/bgrins/spectrum/issues/40 */
-    z-index: 9999994;
+    z-index: 20000;
     overflow: hidden;
 }
 .sp-container.sp-flat {
diff --git a/src/css/tools.css b/src/css/tools.css
index 0b13b42b..18565425 100644
--- a/src/css/tools.css
+++ b/src/css/tools.css
@@ -159,3 +159,10 @@
   );
 }
 
+.palette-value-displayer{
+    color: #FFF;
+    text-align: center;
+    clear: both;
+    padding-top: 3px;
+    min-height: 1em;
+}
diff --git a/src/js/controller/PaletteController.js b/src/js/controller/PaletteController.js
index 9bc45fff..c44e9993 100644
--- a/src/js/controller/PaletteController.js
+++ b/src/js/controller/PaletteController.js
@@ -1,7 +1,9 @@
 (function () {
   var ns = $.namespace('pskl.controller');
 
-  ns.PaletteController = function () {};
+  ns.PaletteController = function () {
+      this.displayer = $('.palette-value-displayer');
+  };
 
   /**
    * @public
@@ -27,17 +29,19 @@
         tinycolor.setAlpha(1);
       }
     };
-
+    
     // 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.parent().mouseenter({isPrimary : true}, $.proxy(this.showValueDisplayer_, this))
+      .mouseleave($.proxy(this.hideValueDisplayer_, this));
 
     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.parent().mouseenter({isPrimary : false}, $.proxy(this.showValueDisplayer_, this))
+      .mouseleave($.proxy(this.hideValueDisplayer_, this));
 
     var swapColorsIcon = $('.swap-colors-button');
     swapColorsIcon.click(this.swapColors.bind(this));
@@ -106,11 +110,19 @@
     } else {
       colorPicker.spectrum('set', color);
     }
-    this.setTitleOnPicker_(color, colorPicker);
   };
 
-  ns.PaletteController.prototype.setTitleOnPicker_ = function (title, colorPicker) {
-    var spectrumInputSelector = '.sp-replacer';
-    colorPicker.next(spectrumInputSelector).attr('title', title);
+  /**
+   * @private
+   */
+  ns.PaletteController.prototype.showValueDisplayer_ = function (evt) {
+    var color = evt.data.isPrimary ? pskl.app.selectedColorsService.getPrimaryColor() : pskl.app.selectedColorsService.getSecondaryColor();
+    this.displayer.html(color);
+  };
+  /**
+   * @private
+   */
+  ns.PaletteController.prototype.hideValueDisplayer_ = function (evt) {
+    this.displayer.html('');
   };
 })();
diff --git a/src/templates/drawing-tools.html b/src/templates/drawing-tools.html
index 638e6646..f1254817 100644
--- a/src/templates/drawing-tools.html
+++ b/src/templates/drawing-tools.html
@@ -33,6 +33,7 @@
           rel="tooltip"
           data-placement="right"
         ></div>
+        <div class="palette-value-displayer"></div>
       </div>
     </div>
   </div>