Add a new color picker...
This commit is contained in:
Paulo Veiga
@@ -176,6 +176,8 @@
|
||||
files="widget/ToolbarItem.js"/>
|
||||
<filelist dir="${basedir}/src/main/javascript/"
|
||||
files="widget/ColorPickerPanel.js"/>
|
||||
<filelist dir="${basedir}/src/main/javascript/"
|
||||
files="widget/ColorPalettePanel.js"/>
|
||||
<filelist dir="${basedir}/src/main/javascript/"
|
||||
files="widget/IconPanel.js"/>
|
||||
<filelist dir="${basedir}/src/main/javascript/"
|
||||
@@ -236,7 +238,6 @@
|
||||
<include>DragTopic-min.js</include>
|
||||
<include>DragManager-min.js</include>
|
||||
<include>DragPivot-min.js</include>
|
||||
<include>TopicBoard-min.js</include>
|
||||
<include>CentralTopicBoard-min.js</include>
|
||||
<include>MainTopicBoard-min.js</include>
|
||||
<include>ConnectionLine-min.js</include>
|
||||
@@ -324,6 +325,7 @@
|
||||
</aggregations>
|
||||
<nomunge>true</nomunge>
|
||||
<jswarn>false</jswarn>
|
||||
<force>true</force>
|
||||
</configuration>
|
||||
</execution>
|
||||
</executions>
|
||||
|
||||
140
mindplot/src/main/javascript/widget/ColorPalettePanel.js
Normal file
140
mindplot/src/main/javascript/widget/ColorPalettePanel.js
Normal file
@@ -0,0 +1,140 @@
|
||||
/*
|
||||
* Copyright [2011] [wisemapping]
|
||||
*
|
||||
* Licensed under WiseMapping Public License, Version 1.0 (the "License").
|
||||
* It is basically the Apache License, Version 2.0 (the "License") plus the
|
||||
* "powered by wisemapping" text requirement on every single page;
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the license at
|
||||
*
|
||||
* http://www.wisemapping.org/license
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
mindplot.widget.ColorPalettePanel = new Class({
|
||||
Extends: mindplot.widget.ToolbarItem,
|
||||
|
||||
initialize : function(buttonId, model, baseUrl) {
|
||||
this.parent(buttonId, model);
|
||||
$assert(baseUrl, "baseUrl can not be null");
|
||||
|
||||
this.getButtonElem().addEvent('click', function() {
|
||||
// Is the panel being displayed ?
|
||||
if (this.isVisible()) {
|
||||
this.hide();
|
||||
} else {
|
||||
this.show();
|
||||
}
|
||||
|
||||
}.bind(this));
|
||||
this._baseUrl = baseUrl;
|
||||
},
|
||||
|
||||
_load : function() {
|
||||
|
||||
if (!mindplot.widget.ColorPalettePanel._panelContent) {
|
||||
|
||||
// Load all the CSS styles ...
|
||||
Asset.css(this._baseUrl + '/colorPalette.css', {id: 'colorPaletteStyle', title: 'colorPalette'});
|
||||
|
||||
// Load panel html fragment ...
|
||||
var result;
|
||||
var request = new Request({
|
||||
url: this._baseUrl + '/colorPalette.html',
|
||||
method: 'get',
|
||||
async: false,
|
||||
onRequest: function() {
|
||||
console.log("loading ...");
|
||||
},
|
||||
onSuccess: function(responseText) {
|
||||
result = responseText;
|
||||
},
|
||||
onFailure: function() {
|
||||
result = '<div>Sorry, your request failed :(</div>';
|
||||
}
|
||||
});
|
||||
request.send();
|
||||
mindplot.widget.ColorPalettePanel._panelContent = result;
|
||||
|
||||
}
|
||||
return mindplot.widget.ColorPalettePanel._panelContent;
|
||||
},
|
||||
|
||||
_init : function() {
|
||||
if (!this._panelContent) {
|
||||
var buttonElem = this.getButtonElem();
|
||||
|
||||
// Add panel content ..
|
||||
var panelElem = this.buildPanel();
|
||||
panelElem.setStyle('display', 'none');
|
||||
panelElem.inject(buttonElem);
|
||||
|
||||
// Register on toolbar elements ...
|
||||
var colorCells = panelElem.getElements('div[class=palette-colorswatch]');
|
||||
var model = this.getModel();
|
||||
colorCells.forEach(function(elem) {
|
||||
elem.addEvent('click', function() {
|
||||
var color = elem.getStyle("background-color");
|
||||
model.setValue(color);
|
||||
});
|
||||
});
|
||||
this._panelId = panelElem.id;
|
||||
this._panelContent = true;
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
buildPanel: function() {
|
||||
var content = new Element("div", {'class':'toolbarPanel','id': this._buttonId + 'colorPalette'});
|
||||
content.innerHTML = this._load();
|
||||
return content;
|
||||
},
|
||||
|
||||
_getPanelElem : function () {
|
||||
this._init();
|
||||
return $(this._panelId);
|
||||
},
|
||||
|
||||
show : function() {
|
||||
if (!this.isVisible()) {
|
||||
|
||||
this.parent();
|
||||
var panelElem = this._getPanelElem();
|
||||
|
||||
// Clear selected cell based on the color ...
|
||||
var tdCells = panelElem.getElements("td[class='palette-cell palette-cell-selected']");
|
||||
tdCells.forEach(function(elem) {
|
||||
elem.className = 'palette-cell';
|
||||
});
|
||||
|
||||
// Mark the cell as selected ...
|
||||
var colorCells = panelElem.getElements('div[class=palette-colorswatch]');
|
||||
var model = this.getModel();
|
||||
colorCells.forEach(function(elem) {
|
||||
var color = elem.getStyle("background-color");
|
||||
if (model.getValue() == color) {
|
||||
elem.parentNode.className = 'palette-cell palette-cell-selected';
|
||||
}
|
||||
});
|
||||
|
||||
// Finally, display the dialog ...
|
||||
panelElem.setStyle('display', 'block');
|
||||
}
|
||||
},
|
||||
|
||||
hide : function() {
|
||||
if (this.isVisible()) {
|
||||
this.parent();
|
||||
this._getPanelElem().setStyle('display', 'none');
|
||||
}
|
||||
},
|
||||
|
||||
isVisible : function() {
|
||||
return this._getPanelElem().getStyle('display') == 'block';
|
||||
}
|
||||
});
|
||||
@@ -16,7 +16,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
mindplot.widget.ColorPicker = new Class({
|
||||
mindplot.widget.ColorPickerPanel = new Class({
|
||||
Extends: mindplot.widget.ToolbarItem,
|
||||
initialize : function(buttonId, model) {
|
||||
this.parent(buttonId, model);
|
||||
@@ -29,7 +29,7 @@ mindplot.widget.ColorPicker = new Class({
|
||||
}.bind(this),
|
||||
onChange: function(color) {
|
||||
this.getModel().setValue(color.hex);
|
||||
},
|
||||
}.bind(this),
|
||||
onComplete: function() {
|
||||
this.hide();
|
||||
}.bind(this)
|
||||
|
||||
@@ -39,16 +39,17 @@ mindplot.widget.IconPanel = new Class({
|
||||
var buttonElem = this.getButtonElem();
|
||||
|
||||
var coord = buttonElem.getCoordinates();
|
||||
var top = buttonElem.getTop() + coord.height + 2;
|
||||
var left = buttonElem.getLeft();
|
||||
var top = buttonElem.getTop() + coord.height + 7;
|
||||
var left = buttonElem.getLeft() - 6;
|
||||
|
||||
panel.setStyles({
|
||||
width:this.options.initialWidth,
|
||||
height:0,position:'absolute',
|
||||
height:0,
|
||||
position:'absolute',
|
||||
top:top,
|
||||
left:left,
|
||||
background:'#e5e5e5',
|
||||
border:'1px solid #BBB4D6',
|
||||
background:'#ffffff',
|
||||
'border-color':'#CCC #666 #666 #CCC;',
|
||||
zIndex:20,
|
||||
overflow:'hidden'}
|
||||
);
|
||||
|
||||
@@ -20,6 +20,8 @@ mindplot.widget.Menu = new Class({
|
||||
initialize : function(designer, containerId) {
|
||||
$assert(designer, "designer can not be null");
|
||||
$assert(containerId, "containerId can not be null");
|
||||
// @Todo: Remove hardcode ...
|
||||
var baseUrl = "/mindplot/src/main/javascript/widget";
|
||||
|
||||
// Init variables ...
|
||||
this._designer = designer;
|
||||
@@ -29,18 +31,19 @@ mindplot.widget.Menu = new Class({
|
||||
// Stop event propagation ...
|
||||
$(this._containerId).addEvent('click', function(event) {
|
||||
event.stopPropagation();
|
||||
return false;
|
||||
});
|
||||
|
||||
$(this._containerId).addEvent('dblclick', function(event) {
|
||||
event.stopPropagation();
|
||||
return false;
|
||||
});
|
||||
|
||||
// Create panels ...
|
||||
var fontFamilyModel = {
|
||||
getValue: function() {
|
||||
var nodes = designer.getSelectedNodes();
|
||||
var length = nodes.length;
|
||||
if (length == 1) {
|
||||
if (nodes.length == 1) {
|
||||
return nodes[0].getFontFamily();
|
||||
}
|
||||
},
|
||||
@@ -55,8 +58,7 @@ mindplot.widget.Menu = new Class({
|
||||
var fontSizeModel = {
|
||||
getValue: function() {
|
||||
var nodes = designer.getSelectedNodes();
|
||||
var length = nodes.length;
|
||||
if (length == 1) {
|
||||
if (nodes.length == 1) {
|
||||
return nodes[0].getFontSize();
|
||||
}
|
||||
},
|
||||
@@ -69,8 +71,7 @@ mindplot.widget.Menu = new Class({
|
||||
var topicShapeModel = {
|
||||
getValue: function() {
|
||||
var nodes = designer.getSelectedNodes();
|
||||
var length = nodes.length;
|
||||
if (length == 1) {
|
||||
if (nodes.length == 1) {
|
||||
return nodes[0].getShapeType();
|
||||
}
|
||||
},
|
||||
@@ -95,38 +96,47 @@ mindplot.widget.Menu = new Class({
|
||||
var topicColorModel =
|
||||
{
|
||||
getValue : function() {
|
||||
var nodes = designer.getSelectedNodes();
|
||||
if (nodes.length == 1) {
|
||||
return nodes[0].getBackgroundColor();
|
||||
}
|
||||
return null;
|
||||
},
|
||||
setValue : function (hex) {
|
||||
designer.setBackColor2SelectedNode(hex);
|
||||
}
|
||||
};
|
||||
this._toolbarElems.push(new mindplot.widget.ColorPicker('topicColor', topicColorModel));
|
||||
this._toolbarElems.push(new mindplot.widget.ColorPalettePanel('topicColor', topicColorModel, baseUrl));
|
||||
|
||||
// Border color item ...
|
||||
var borderColorModel =
|
||||
{
|
||||
getValue : function() {
|
||||
return null;
|
||||
var nodes = designer.getSelectedNodes();
|
||||
if (nodes.length == 1) {
|
||||
return nodes[0].getBorderColor();
|
||||
}
|
||||
},
|
||||
setValue : function (hex) {
|
||||
designer.setBorderColor2SelectedNode(hex);
|
||||
}
|
||||
};
|
||||
this._toolbarElems.push(new mindplot.widget.ColorPicker('topicBorder', borderColorModel));
|
||||
this._toolbarElems.push(new mindplot.widget.ColorPalettePanel('topicBorder', borderColorModel, baseUrl));
|
||||
|
||||
// Font color item ...
|
||||
var fontColorModel =
|
||||
{
|
||||
getValue : function() {
|
||||
return null;
|
||||
var nodes = designer.getSelectedNodes();
|
||||
if (nodes.length == 1) {
|
||||
return nodes[0].getFontColor();
|
||||
}
|
||||
},
|
||||
setValue : function (hex) {
|
||||
designer.setFontColor2SelectedNode(hex);
|
||||
}
|
||||
};
|
||||
var fontColorPicker = new mindplot.widget.ColorPicker('fontColor', fontColorModel);
|
||||
this._toolbarElems.push(fontColorPicker);
|
||||
this._toolbarElems.push(new mindplot.widget.ColorPalettePanel('fontColor', fontColorModel, baseUrl));
|
||||
|
||||
// Register on close events ...
|
||||
this._toolbarElems.forEach(function(elem) {
|
||||
@@ -198,8 +208,6 @@ mindplot.widget.Menu = new Class({
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
|
||||
clear : function() {
|
||||
|
||||
@@ -41,6 +41,7 @@ mindplot.widget.ToolbarPanel = new Class({
|
||||
elem.addEvent('click', function(event) {
|
||||
var value = $defined(elem.getAttribute('model')) ? elem.getAttribute('model') : elem.id;
|
||||
this.getModel().setValue(value);
|
||||
event.stopPropagation();
|
||||
this.hide();
|
||||
}.bind(this));
|
||||
}.bind(this));
|
||||
@@ -54,31 +55,31 @@ mindplot.widget.ToolbarPanel = new Class({
|
||||
} else {
|
||||
this.show();
|
||||
}
|
||||
|
||||
}.bind(this));
|
||||
return panelElem.id;
|
||||
},
|
||||
|
||||
show : function() {
|
||||
this.parent();
|
||||
|
||||
var menuElems = $(this._panelId).getElements('div');
|
||||
var value = this.getModel().getValue();
|
||||
menuElems.forEach(function(elem) {
|
||||
var elemValue = $defined(elem.getAttribute('model')) ? elem.getAttribute('model') : elem.id;
|
||||
if (elemValue == value)
|
||||
elem.className = "toolbarPanelLinkSelectedLink";
|
||||
else
|
||||
elem.className = "toolbarPanelLink";
|
||||
});
|
||||
$(this._panelId).setStyle('display', 'block');
|
||||
|
||||
if (!this.isVisible()) {
|
||||
this.parent();
|
||||
var menuElems = $(this._panelId).getElements('div');
|
||||
var value = this.getModel().getValue();
|
||||
menuElems.forEach(function(elem) {
|
||||
var elemValue = $defined(elem.getAttribute('model')) ? elem.getAttribute('model') : elem.id;
|
||||
if (elemValue == value)
|
||||
elem.className = "toolbarPanelLinkSelectedLink";
|
||||
else
|
||||
elem.className = "toolbarPanelLink";
|
||||
});
|
||||
$(this._panelId).setStyle('display', 'block');
|
||||
}
|
||||
},
|
||||
|
||||
hide : function() {
|
||||
this.parent();
|
||||
$(this._panelId).setStyle('display', 'none');
|
||||
|
||||
if (this.isVisible()) {
|
||||
this.parent();
|
||||
$(this._panelId).setStyle('display', 'none');
|
||||
}
|
||||
},
|
||||
|
||||
isVisible : function() {
|
||||
|
||||
74
mindplot/src/main/javascript/widget/colorPalette.css
Normal file
74
mindplot/src/main/javascript/widget/colorPalette.css
Normal file
@@ -0,0 +1,74 @@
|
||||
.palette-panel {
|
||||
/*background: white;*/
|
||||
/*border-color: #CCC #666 #666 #CCC;*/
|
||||
/*border-style: solid;*/
|
||||
/*border-width: 1px;*/
|
||||
cursor: default;
|
||||
font: normal 13px Arial, sans-serif;
|
||||
margin: 0;
|
||||
outline: none;
|
||||
padding: 4px 0;
|
||||
z-index: 20000;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.palette {
|
||||
cursor: default;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.palette-table {
|
||||
border: 1px solid #666;
|
||||
border-collapse: collapse;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
tbody {
|
||||
display: table-row-group;
|
||||
vertical-align: middle;
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
.palette-table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
tr {
|
||||
display: table-row;
|
||||
vertical-align: inherit;
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
.palette-cell {
|
||||
border: 0;
|
||||
border-right: 1px solid #666;
|
||||
cursor: pointer;
|
||||
height: 18px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.palette-cell .palette-colorswatch {
|
||||
border: none;
|
||||
font-size: x-small;
|
||||
height: 18px;
|
||||
position: relative;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.palette-cell-selected .palette-colorswatch {
|
||||
background: url(//ssl.gstatic.com/editor/editortoolbar.png) no-repeat -368px 0;
|
||||
border: 1px solid #333;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.palette-colorswatch:hover {
|
||||
border: 1px solid white;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
401
mindplot/src/main/javascript/widget/colorPalette.html
Normal file
401
mindplot/src/main/javascript/widget/colorPalette.html
Normal file
@@ -0,0 +1,401 @@
|
||||
<div id="color-palette" class="palette-panel palette-panel-vertical palette-panel-noaccel"
|
||||
style="-webkit-user-select: none; left: 451px; top: 128px; visibility: visible; " role="menu" aria-haspopup="true"
|
||||
aria-activedescendant="">
|
||||
<div class="palette" id=":3p">
|
||||
<table class="palette-table" cellspacing="0" cellpadding="0" role="grid"
|
||||
aria-activedescendent="palette-cell-244">
|
||||
<tbody class="palette-body">
|
||||
<tr class="palette-row">
|
||||
<td class="palette-cell">
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(0, 0, 0);"
|
||||
title="RGB (0, 0, 0)"></div>
|
||||
</td>
|
||||
<td class="palette-cell palette-cell-selected">
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(68, 68, 68);"
|
||||
title="RGB (68, 68, 68)"></div>
|
||||
</td>
|
||||
<td class="palette-cell">
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(102, 102, 102);"
|
||||
title="RGB (102, 102, 102)"></div>
|
||||
</td>
|
||||
<td class="palette-cell">
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(153, 153, 153);"
|
||||
title="RGB (153, 153, 153)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(204, 204, 204);"
|
||||
title="RGB (204, 204, 204)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(238, 238, 238);"
|
||||
title="RGB (238, 238, 238)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(243, 243, 243);"
|
||||
title="RGB (243, 243, 243)"></div>
|
||||
</td>
|
||||
<td class="palette-cell">
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(255, 255, 255);"
|
||||
title="RGB (255, 255, 255)"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="palette" id=":3q">
|
||||
<table class="palette-table" cellspacing="0" cellpadding="0" role="grid"
|
||||
>
|
||||
<tbody class="palette-body">
|
||||
<tr class="palette-row">
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(255, 0, 0);"
|
||||
title="RGB (255, 0, 0)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(255, 153, 0);"
|
||||
title="RGB (255, 153, 0)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(255, 255, 0);"
|
||||
title="RGB (255, 255, 0)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(0, 255, 0);"
|
||||
title="RGB (0, 255, 0)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(0, 255, 255);"
|
||||
title="RGB (0, 255, 255)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(0, 0, 255);"
|
||||
title="RGB (0, 0, 255)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(153, 0, 255);"
|
||||
title="RGB (153, 0, 255)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(255, 0, 255);"
|
||||
title="RGB (255, 0, 255)"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="palette" id=":3r">
|
||||
<table class="palette-table" cellspacing="0" cellpadding="0" role="grid">
|
||||
<tbody class="palette-body">
|
||||
<tr class="palette-row">
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(244, 204, 204);"
|
||||
title="RGB (244, 204, 204)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(252, 229, 205);"
|
||||
title="RGB (252, 229, 205)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(255, 242, 204);"
|
||||
title="RGB (255, 242, 204)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(217, 234, 211);"
|
||||
title="RGB (217, 234, 211)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(208, 224, 227);"
|
||||
title="RGB (208, 224, 227)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(207, 226, 243);"
|
||||
title="RGB (207, 226, 243)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(217, 210, 233);"
|
||||
title="RGB (217, 210, 233)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(234, 209, 220);"
|
||||
title="RGB (234, 209, 220)"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="palette-row">
|
||||
<td class="palette-cell">
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(234, 153, 153);"
|
||||
title="RGB (234, 153, 153)"></div>
|
||||
</td>
|
||||
<td class="palette-cell">
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(249, 203, 156);"
|
||||
title="RGB (249, 203, 156)"></div>
|
||||
</td>
|
||||
<td class="palette-cell">
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(255, 229, 153);"
|
||||
title="RGB (255, 229, 153)"></div>
|
||||
</td>
|
||||
<td class="palette-cell">
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(182, 215, 168);"
|
||||
title="RGB (182, 215, 168)"></div>
|
||||
</td>
|
||||
<td class="palette-cell">
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(162, 196, 201);"
|
||||
title="RGB (162, 196, 201)"></div>
|
||||
</td>
|
||||
<td class="palette-cell">
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(159, 197, 232);"
|
||||
title="RGB (159, 197, 232)"></div>
|
||||
</td>
|
||||
<td class="palette-cell">
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(180, 167, 214);"
|
||||
title="RGB (180, 167, 214)"></div>
|
||||
</td>
|
||||
<td class="palette-cell">
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(213, 166, 189);"
|
||||
title="RGB (213, 166, 189)"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="palette-row">
|
||||
<td class="palette-cell">
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(224, 102, 102);"
|
||||
title="RGB (224, 102, 102)"></div>
|
||||
</td>
|
||||
<td class="palette-cell">
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(246, 178, 107);"
|
||||
title="RGB (246, 178, 107)"></div>
|
||||
</td>
|
||||
<td class="palette-cell">
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(255, 217, 102);"
|
||||
title="RGB (255, 217, 102)"></div>
|
||||
</td>
|
||||
<td class="palette-cell">
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(147, 196, 125);"
|
||||
title="RGB (147, 196, 125)"></div>
|
||||
</td>
|
||||
<td class="palette-cell">
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(118, 165, 175);"
|
||||
title="RGB (118, 165, 175)"></div>
|
||||
</td>
|
||||
<td class="palette-cell">
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(111, 168, 220);"
|
||||
title="RGB (111, 168, 220)"></div>
|
||||
</td>
|
||||
<td class="palette-cell">
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(142, 124, 195);"
|
||||
title="RGB (142, 124, 195)"></div>
|
||||
</td>
|
||||
<td class="palette-cell">
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(194, 123, 160);"
|
||||
title="RGB (194, 123, 160)"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="palette-row">
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(204, 0, 0);"
|
||||
title="RGB (204, 0, 0)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(230, 145, 56);"
|
||||
title="RGB (230, 145, 56)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(241, 194, 50);"
|
||||
title="RGB (241, 194, 50)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(106, 168, 79);"
|
||||
title="RGB (106, 168, 79)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(69, 129, 142);"
|
||||
title="RGB (69, 129, 142)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(61, 133, 198);"
|
||||
title="RGB (61, 133, 198)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(103, 78, 167);"
|
||||
title="RGB (103, 78, 167)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(166, 77, 121);"
|
||||
title="RGB (166, 77, 121)"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="palette-row">
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(153, 0, 0);"
|
||||
title="RGB (153, 0, 0)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(180, 95, 6);"
|
||||
title="RGB (180, 95, 6)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(191, 144, 0);"
|
||||
title="RGB (191, 144, 0)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(56, 118, 29);"
|
||||
title="RGB (56, 118, 29)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(19, 79, 92);"
|
||||
title="RGB (19, 79, 92)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(11, 83, 148);"
|
||||
title="RGB (11, 83, 148)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: #525c61;"
|
||||
title="RGB (53, 28, 117)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(116, 27, 71);"
|
||||
title="RGB (116, 27, 71)"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="palette-row">
|
||||
<td class="palette-cell">
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(102, 0, 0);"
|
||||
title="RGB (102, 0, 0)"></div>
|
||||
</td>
|
||||
<td class="palette-cell">
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(120, 63, 4);"
|
||||
title="RGB (120, 63, 4)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(127, 96, 0);"
|
||||
title="RGB (127, 96, 0)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(39, 78, 19);"
|
||||
title="RGB (39, 78, 19)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(12, 52, 61);"
|
||||
title="RGB (12, 52, 61)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(7, 55, 99);"
|
||||
title="RGB (7, 55, 99)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(32, 18, 77);"
|
||||
title="RGB (32, 18, 77)"></div>
|
||||
</td>
|
||||
<td class="palette-cell"
|
||||
>
|
||||
<div class="palette-colorswatch"
|
||||
style="background-color: rgb(76, 17, 48);"
|
||||
title="RGB (76, 17, 48)"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
41
mindplot/src/test/javascript/static/palette.html
Normal file
41
mindplot/src/test/javascript/static/palette.html
Normal file
@@ -0,0 +1,41 @@
|
||||
<!DOCTYPE HTML>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<script type='text/javascript'
|
||||
src='../../../../../wise-doc/src/main/webapp/js/mootools-core-1.3.2-full-compat.js'></script>
|
||||
<script type='text/javascript'
|
||||
src='../../../../../wise-doc/src/main/webapp/js/mootools-more-1.3.2.1-yui.js'></script>
|
||||
|
||||
|
||||
<script type='text/javascript' src='../../../main/javascript/header.js'></script>
|
||||
<script type='text/javascript' src='../../../../../core-js/target/classes/core.js'></script>
|
||||
|
||||
<script type='text/javascript' src='../../../main/javascript/widget/ToolbarItem.js'></script>
|
||||
<script type='text/javascript' src='../../../main/javascript/widget/ColorPalettePanel.js'></script>
|
||||
|
||||
<script type='text/javascript'>
|
||||
window.addEvent("load", function(e) {
|
||||
var model = {
|
||||
getValue: function() {
|
||||
|
||||
},
|
||||
setValue : function(value) {
|
||||
console.log("value:" + value);
|
||||
}
|
||||
};
|
||||
var palette = new mindplot.widget.ColorPalette('myButton', model,"/mindplot/src/main/javascript/widget");
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="myButton" style="border: 1px red solid">
|
||||
The button
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user