vmario/wisemapping-open-source
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-open-source.git synced 2024-11-26 07:44:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

color palette tooltip reimplemented

Browse Source
This commit is contained in:
Ezequiel Bergamaschi 2014-05-02 01:00:32 -03:00
parent ddc5b933ad
commit f8fee50076
1 changed files with 11 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
mindplot/src/main/javascript/widget/ColorPalettePanel.js
View File

@ -30,11 +30,10 @@ mindplot.widget.ColorPalettePanel = new Class({
if (!mindplot.widget.ColorPalettePanel._panelContent) { if (!mindplot.widget.ColorPalettePanel._panelContent) {
// Load all the CSS styles ... // Load all the CSS styles ...
$.ajax({ $('<link>')
url: this._baseUrl + '/colorPalette.css', .appendTo($('head'))
method: 'GET', .attr({type : 'text/css', rel : 'stylesheet'})
async: true .attr('href', this._baseUrl + '/colorPalette.css');
});
// Load panel html fragment ... // Load panel html fragment ...
var result; var result;
@ -64,13 +63,14 @@ mindplot.widget.ColorPalettePanel = new Class({
// Register on toolbar elements ... // Register on toolbar elements ...
var colorCells = content.find('div[class=palette-colorswatch]'); var colorCells = content.find('div[class=palette-colorswatch]');
var model = this.getModel(); var model = this.getModel();
var me = this;
_.each(colorCells, function (elem) { _.each(colorCells, function (elem) {
$(elem).on('click', function () { $(elem).on('click', function () {
var color = $(elem).css("background-color"); var color = $(elem).css("background-color");
model.setValue(color); model.setValue(color);
this.hide(); me.hide();
}.bind(this)); });
}.bind(this)); });
return content; return content;
}, },
@ -79,23 +79,20 @@ mindplot.widget.ColorPalettePanel = new Class({
var panelElem = this.getPanelElem(); var panelElem = this.getPanelElem();
// Clear selected cell based on the color ... // Clear selected cell based on the color ...
var tdCells = panelElem.find("td[class='palette-cell palette-cell-selected']"); panelElem.find("td[class='palette-cell palette-cell-selected']").attr('class', 'palette-cell');
_.each(tdCells, function (elem) {
elem.className = 'palette-cell';
});
// Mark the cell as selected ... // Mark the cell as selected ...
var colorCells = panelElem.find('div[class=palette-colorswatch]'); var colorCells = panelElem.find('div[class=palette-colorswatch]');
var model = this.getModel(); var model = this.getModel();
var modelValue = model.getValue(); var modelValue = model.getValue();
_.each(colorCells, function (elem) { _.each(colorCells, function (elem) {
var color = elem.css("background-color"); var color = $(elem).css("background-color").rgbToHex();
if (modelValue != null && modelValue[0] == 'r') { if (modelValue != null && modelValue[0] == 'r') {
modelValue = modelValue.rgbToHex(); modelValue = modelValue.rgbToHex();
} }
if (modelValue != null && modelValue.toUpperCase() == color.toUpperCase()) { if (modelValue != null && modelValue.toUpperCase() == color.toUpperCase()) {
elem.parentNode.className = 'palette-cell palette-cell-selected'; $(elem).parent().attr('class', 'palette-cell palette-cell-selected');
} }
}); });
return panelElem; return panelElem;