mirror of
https://bitbucket.org/wisemapping/wisemapping-open-source.git
synced 2024-11-14 02:37:57 +01:00
ColorPalettePanel reimplemented
This commit is contained in:
parent
48c7fe2a96
commit
a438eca3da
@ -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();
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user