vmario/wisemapping-open-source
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-open-source.git synced 2024-11-14 10:47:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

ColorPalettePanel reimplemented

Browse Source
This commit is contained in:
Ezequiel Bergamaschi 2014-03-16 22:15:16 -03:00
parent 48c7fe2a96
commit a438eca3da
1 changed files with 19 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,9 +21,8 @@ mindplot.widget.ColorPalettePanel = new Class({
initialize:function (buttonId, model, baseUrl) { initialize:function (buttonId, model, baseUrl) {
this._baseUrl = baseUrl; this._baseUrl = baseUrl;
console.error("mindplot.widget.ColorPalettePanel must be implemented..."); this.parent(buttonId, model);
// this.parent(buttonId, model); $assert($defined(baseUrl), "baseUrl can not be null");
// $assert($defined(baseUrl), "baseUrl can not be null");
}, },
_load:function () { _load:function () {
@ -31,24 +30,26 @@ 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 ...
Asset.css(this._baseUrl + '/colorPalette.css', {id:'colorPaletteStyle', title:'colorPalette'}); $.ajax({
url: this._baseUrl + '/colorPalette.css',
method: 'GET',
async: true
});
// Load panel html fragment ... // Load panel html fragment ...
var result; var result;
var request = new Request({ $.ajax({
url:this._baseUrl + '/colorPalette.html', url:this._baseUrl + '/colorPalette.html',
method:'get', method:'get',
async:false, async:false,
onRequest:function () { success:function (responseText) {
},
onSuccess:function (responseText) {
result = responseText; result = responseText;
}, },
onFailure:function () { error:function () {
result = '<div>Sorry, your request failed :(</div>'; result = '<div>Sorry, your request failed :(</div>';
} }
}); });
request.send();
mindplot.widget.ColorPalettePanel._panelContent = result; mindplot.widget.ColorPalettePanel._panelContent = result;
} }
@ -57,15 +58,15 @@ mindplot.widget.ColorPalettePanel = new Class({
buildPanel:function () { buildPanel:function () {
var content = new Element("div", {'class':'toolbarPanel', 'id':this._buttonId + 'colorPalette'}); var content = $('<div class="toolbarPanel"></div>').attr('id', this._buttonId + 'colorPalette');
content.innerHTML = this._load(); content.html(this._load());
// Register on toolbar elements ... // Register on toolbar elements ...
var colorCells = content.getElements('div[class=palette-colorswatch]'); var colorCells = content.find('div[class=palette-colorswatch]');
var model = this.getModel(); var model = this.getModel();
colorCells.each(function (elem) { colorCells.each(function (elem) {
elem.addEvent('click', function () { $(elem).on('click', function () {
var color = elem.getStyle("background-color"); var color = elem.css("background-color");
model.setValue(color); model.setValue(color);
this.hide(); this.hide();
}.bind(this)); }.bind(this));
@ -78,17 +79,17 @@ 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.getElements("td[class='palette-cell palette-cell-selected']"); var tdCells = panelElem.find("td[class='palette-cell palette-cell-selected']");
tdCells.each(function (elem) { tdCells.each(function (elem) {
elem.className = 'palette-cell'; elem.className = 'palette-cell';
}); });
// Mark the cell as selected ... // Mark the cell as selected ...
var colorCells = panelElem.getElements('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();
colorCells.each(function (elem) { colorCells.each(function (elem) {
var color = elem.getStyle("background-color"); var color = elem.css("background-color");
if (modelValue != null && modelValue[0] == 'r') { if (modelValue != null && modelValue[0] == 'r') {
modelValue = modelValue.rgbToHex(); modelValue = modelValue.rgbToHex();
} }