gecko/toolkit/content/widgets/colorpicker.xml

549 lines
21 KiB
XML

<?xml version="1.0"?>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<bindings id="colorpickerBindings"
xmlns="http://www.mozilla.org/xbl"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:xbl="http://www.mozilla.org/xbl">
<binding id="colorpicker" extends="chrome://global/content/bindings/general.xml#basecontrol">
<resources>
<stylesheet src="chrome://global/skin/colorpicker.css"/>
</resources>
<content>
<xul:vbox flex="1">
<xul:hbox>
<xul:spacer class="colorpickertile cp-light" style="background-color: #FFFFFF" color="#FFFFFF"/>
<xul:spacer class="colorpickertile cp-light" style="background-color: #FFCCCC" color="#FFCCCC"/>
<xul:spacer class="colorpickertile cp-light" style="background-color: #FFCC99" color="#FFCC99"/>
<xul:spacer class="colorpickertile cp-light" style="background-color: #FFFF99" color="#FFFF99"/>
<xul:spacer class="colorpickertile cp-light" style="background-color: #FFFFCC" color="#FFFFCC"/>
<xul:spacer class="colorpickertile cp-light" style="background-color: #99FF99" color="#99FF99"/>
<xul:spacer class="colorpickertile cp-light" style="background-color: #99FFFF" color="#99FFFF"/>
<xul:spacer class="colorpickertile cp-light" style="background-color: #CCFFFF" color="#CCFFFF"/>
<xul:spacer class="colorpickertile cp-light" style="background-color: #CCCCFF" color="#CCCCFF"/>
<xul:spacer class="colorpickertile cp-light" style="background-color: #FFCCFF" color="#FFCCFF"/>
</xul:hbox>
<xul:hbox>
<xul:spacer class="colorpickertile" style="background-color: #CCCCCC" color="#CCCCCC"/>
<xul:spacer class="colorpickertile" style="background-color: #FF6666" color="#FF6666"/>
<xul:spacer class="colorpickertile" style="background-color: #FF9966" color="#FF9966"/>
<xul:spacer class="colorpickertile cp-light" style="background-color: #FFFF66" color="#FFFF66"/>
<xul:spacer class="colorpickertile cp-light" style="background-color: #FFFF33" color="#FFFF33"/>
<xul:spacer class="colorpickertile cp-light" style="background-color: #66FF99" color="#66FF99"/>
<xul:spacer class="colorpickertile cp-light" style="background-color: #33FFFF" color="#33FFFF"/>
<xul:spacer class="colorpickertile cp-light" style="background-color: #66FFFF" color="#66FFFF"/>
<xul:spacer class="colorpickertile" style="background-color: #9999FF" color="#9999FF"/>
<xul:spacer class="colorpickertile" style="background-color: #FF99FF" color="#FF99FF"/>
</xul:hbox>
<xul:hbox>
<xul:spacer class="colorpickertile" style="background-color: #C0C0C0" color="#C0C0C0"/>
<xul:spacer class="colorpickertile" style="background-color: #FF0000" color="#FF0000"/>
<xul:spacer class="colorpickertile" style="background-color: #FF9900" color="#FF9900"/>
<xul:spacer class="colorpickertile" style="background-color: #FFCC66" color="#FFCC66"/>
<xul:spacer class="colorpickertile cp-light" style="background-color: #FFFF00" color="#FFFF00"/>
<xul:spacer class="colorpickertile cp-light" style="background-color: #33FF33" color="#33FF33"/>
<xul:spacer class="colorpickertile" style="background-color: #66CCCC" color="#66CCCC"/>
<xul:spacer class="colorpickertile" style="background-color: #33CCFF" color="#33CCFF"/>
<xul:spacer class="colorpickertile" style="background-color: #6666CC" color="#6666CC"/>
<xul:spacer class="colorpickertile" style="background-color: #CC66CC" color="#CC66CC"/>
</xul:hbox>
<xul:hbox>
<xul:spacer class="colorpickertile" style="background-color: #999999" color="#999999"/>
<xul:spacer class="colorpickertile" style="background-color: #CC0000" color="#CC0000"/>
<xul:spacer class="colorpickertile" style="background-color: #FF6600" color="#FF6600"/>
<xul:spacer class="colorpickertile" style="background-color: #FFCC33" color="#FFCC33"/>
<xul:spacer class="colorpickertile" style="background-color: #FFCC00" color="#FFCC00"/>
<xul:spacer class="colorpickertile" style="background-color: #33CC00" color="#33CC00"/>
<xul:spacer class="colorpickertile" style="background-color: #00CCCC" color="#00CCCC"/>
<xul:spacer class="colorpickertile" style="background-color: #3366FF" color="#3366FF"/>
<xul:spacer class="colorpickertile" style="background-color: #6633FF" color="#6633FF"/>
<xul:spacer class="colorpickertile" style="background-color: #CC33CC" color="#CC33CC"/>
</xul:hbox>
<xul:hbox>
<xul:spacer class="colorpickertile" style="background-color: #666666" color="#666666"/>
<xul:spacer class="colorpickertile" style="background-color: #990000" color="#990000"/>
<xul:spacer class="colorpickertile" style="background-color: #CC6600" color="#CC6600"/>
<xul:spacer class="colorpickertile" style="background-color: #CC9933" color="#CC9933"/>
<xul:spacer class="colorpickertile" style="background-color: #999900" color="#999900"/>
<xul:spacer class="colorpickertile" style="background-color: #009900" color="#009900"/>
<xul:spacer class="colorpickertile" style="background-color: #339999" color="#339999"/>
<xul:spacer class="colorpickertile" style="background-color: #3333FF" color="#3333FF"/>
<xul:spacer class="colorpickertile" style="background-color: #6600CC" color="#6600CC"/>
<xul:spacer class="colorpickertile" style="background-color: #993399" color="#993399"/>
</xul:hbox>
<xul:hbox>
<xul:spacer class="colorpickertile" style="background-color: #333333" color="#333333"/>
<xul:spacer class="colorpickertile" style="background-color: #660000" color="#660000"/>
<xul:spacer class="colorpickertile" style="background-color: #993300" color="#993300"/>
<xul:spacer class="colorpickertile" style="background-color: #996633" color="#996633"/>
<xul:spacer class="colorpickertile" style="background-color: #666600" color="#666600"/>
<xul:spacer class="colorpickertile" style="background-color: #006600" color="#006600"/>
<xul:spacer class="colorpickertile" style="background-color: #336666" color="#336666"/>
<xul:spacer class="colorpickertile" style="background-color: #000099" color="#000099"/>
<xul:spacer class="colorpickertile" style="background-color: #333399" color="#333399"/>
<xul:spacer class="colorpickertile" style="background-color: #663366" color="#663366"/>
</xul:hbox>
<xul:hbox>
<xul:spacer class="colorpickertile" style="background-color: #000000" color="#000000"/>
<xul:spacer class="colorpickertile" style="background-color: #330000" color="#330000"/>
<xul:spacer class="colorpickertile" style="background-color: #663300" color="#663300"/>
<xul:spacer class="colorpickertile" style="background-color: #663333" color="#663333"/>
<xul:spacer class="colorpickertile" style="background-color: #333300" color="#333300"/>
<xul:spacer class="colorpickertile" style="background-color: #003300" color="#003300"/>
<xul:spacer class="colorpickertile" style="background-color: #003333" color="#003333"/>
<xul:spacer class="colorpickertile" style="background-color: #000066" color="#000066"/>
<xul:spacer class="colorpickertile" style="background-color: #330099" color="#330099"/>
<xul:spacer class="colorpickertile" style="background-color: #330033" color="#330033"/>
</xul:hbox>
</xul:vbox>
<!-- Something to take tab focus
<button style="border : 0px; width: 0px; height: 0px;"/>
-->
</content>
<implementation implements="nsIDOMEventListener">
<property name="color">
<getter><![CDATA[
return this.mSelectedCell ? this.mSelectedCell.getAttribute("color") : null;
]]></getter>
<setter><![CDATA[
if (!val)
return val;
var uppercaseVal = val.toUpperCase();
// Translate standard HTML color strings:
if (uppercaseVal[0] != "#") {
switch (uppercaseVal) {
case "GREEN":
uppercaseVal = "#008000";
break;
case "LIME":
uppercaseVal = "#00FF00";
break;
case "OLIVE":
uppercaseVal = "#808000";
break;
case "TEAL":
uppercaseVal = "#008080";
break;
case "YELLOW":
uppercaseVal = "#FFFF00";
break;
case "RED":
uppercaseVal = "#FF0000";
break;
case "MAROON":
uppercaseVal = "#800000";
break;
case "PURPLE":
uppercaseVal = "#800080";
break;
case "FUCHSIA":
uppercaseVal = "#FF00FF";
break;
case "NAVY":
uppercaseVal = "#000080";
break;
case "BLUE":
uppercaseVal = "#0000FF";
break;
case "AQUA":
uppercaseVal = "#00FFFF";
break;
case "WHITE":
uppercaseVal = "#FFFFFF";
break;
case "SILVER":
uppercaseVal = "#C0C0C0";
break;
case "GRAY":
uppercaseVal = "#808080";
break;
default: // BLACK
uppercaseVal = "#000000";
break;
}
}
var cells = this.mBox.getElementsByAttribute("color", uppercaseVal);
if (cells.item(0)) {
this.selectCell(cells[0]);
this.hoverCell(this.mSelectedCell);
}
return val;
]]></setter>
</property>
<method name="initColor">
<parameter name="aColor"/>
<body><![CDATA[
// Use this to initialize color without
// triggering the "onselect" handler,
// which closes window when it's a popup
this.mDoOnSelect = false;
this.color = aColor;
this.mDoOnSelect = true;
]]></body>
</method>
<method name="initialize">
<body><![CDATA[
this.mSelectedCell = null;
this.mHoverCell = null;
this.mBox = document.getAnonymousNodes(this)[0];
this.mIsPopup = false;
this.mDoOnSelect = true;
this.hoverCell(this.mBox.childNodes[0].childNodes[0]);
// used to capture keydown at the document level
this.mPickerKeyDown = function(aEvent)
{
document._focusedPicker.pickerKeyDown(aEvent);
}
]]></body>
</method>
<method name="_fireEvent">
<parameter name="aTarget"/>
<parameter name="aEventName"/>
<body>
<![CDATA[
try {
var event = document.createEvent("Events");
event.initEvent(aEventName, true, true);
var cancel = !aTarget.dispatchEvent(event);
if (aTarget.hasAttribute("on" + aEventName)) {
var fn = new Function ("event", aTarget.getAttribute("on" + aEventName));
var rv = fn.call(aTarget, event);
if (rv == false)
cancel = true;
}
return !cancel;
}
catch (e) {
Components.utils.reportError(e);
}
return false;
]]>
</body>
</method>
<method name="resetHover">
<body><![CDATA[
if (this.mHoverCell)
this.mHoverCell.removeAttribute("hover");
]]></body>
</method>
<method name="getColIndex">
<parameter name="aCell"/>
<body><![CDATA[
var cell = aCell;
var idx;
for (idx = -1; cell; idx++)
cell = cell.previousSibling;
return idx;
]]></body>
</method>
<method name="isColorCell">
<parameter name="aCell"/>
<body><![CDATA[
return aCell && aCell.hasAttribute("color");
]]></body>
</method>
<method name="hoverLeft">
<body><![CDATA[
var cell = this.mHoverCell.previousSibling;
this.hoverCell(cell);
]]></body>
</method>
<method name="hoverRight">
<body><![CDATA[
var cell = this.mHoverCell.nextSibling;
this.hoverCell(cell);
]]></body>
</method>
<method name="hoverUp">
<body><![CDATA[
var row = this.mHoverCell.parentNode.previousSibling;
if (row) {
var colIdx = this.getColIndex(this.mHoverCell);
var cell = row.childNodes[colIdx];
this.hoverCell(cell);
}
]]></body>
</method>
<method name="hoverDown">
<body><![CDATA[
var row = this.mHoverCell.parentNode.nextSibling;
if (row) {
var colIdx = this.getColIndex(this.mHoverCell);
var cell = row.childNodes[colIdx];
this.hoverCell(cell);
}
]]></body>
</method>
<method name="hoverTo">
<parameter name="aRow"/>
<parameter name="aCol"/>
<body><![CDATA[
var row = this.mBox.childNodes[aRow];
if (!row) return;
var cell = row.childNodes[aCol];
if (!cell) return;
this.hoverCell(cell);
]]></body>
</method>
<method name="hoverCell">
<parameter name="aCell"/>
<body><![CDATA[
if (this.isColorCell(aCell)) {
this.resetHover();
aCell.setAttribute("hover", "true");
this.mHoverCell = aCell;
var event = document.createEvent('Events');
event.initEvent('DOMMenuItemActive', true, true);
aCell.dispatchEvent(event);
}
]]></body>
</method>
<method name="selectHoverCell">
<body><![CDATA[
this.selectCell(this.mHoverCell);
]]></body>
</method>
<method name="selectCell">
<parameter name="aCell"/>
<body><![CDATA[
if (this.isColorCell(aCell)) {
if (this.mSelectedCell)
this.mSelectedCell.removeAttribute("selected");
this.mSelectedCell = aCell;
aCell.setAttribute("selected", "true");
if (this.mDoOnSelect)
this._fireEvent(this, "select");
}
]]></body>
</method>
<method name="handleEvent">
<parameter name="aEvent"/>
<body><![CDATA[
switch (aEvent.keyCode) {
case 37: // left
this.hoverLeft();
break;
case 38: // up
this.hoverUp();
break;
case 39: // right
this.hoverRight();
break;
case 40: // down
this.hoverDown();
break;
case 13: // enter
case 32: // space
this.selectHoverCell();
break;
}
]]></body>
</method>
<constructor><![CDATA[
this.initialize();
]]></constructor>
</implementation>
<handlers>
<handler event="mouseover"><![CDATA[
this.hoverCell(event.originalTarget);
]]></handler>
<handler event="click"><![CDATA[
if (event.originalTarget.hasAttribute("color")) {
this.selectCell(event.originalTarget);
this.hoverCell(this.mSelectedCell);
}
]]></handler>
<handler event="focus" phase="capturing">
<![CDATA[
if (!mIsPopup && this.getAttribute('focused') != 'true') {
this.setAttribute('focused','true');
document.addEventListener("keydown", this, true);
if (this.mSelectedCell)
this.hoverCell(this.mSelectedCell);
}
]]>
</handler>
<handler event="blur" phase="capturing">
<![CDATA[
if (!mIsPopup && this.getAttribute('focused') == 'true') {
document.removeEventListener("keydown", this, true);
this.removeAttribute('focused');
this.resetHover();
}
]]>
</handler>
</handlers>
</binding>
<binding id="colorpicker-button" display="xul:menu" role="xul:colorpicker"
extends="chrome://global/content/bindings/general.xml#basecontrol">
<resources>
<stylesheet src="chrome://global/skin/colorpicker.css"/>
</resources>
<content>
<xul:hbox class="colorpicker-button-colorbox" anonid="colorbox" flex="1" xbl:inherits="disabled"/>
<xul:panel class="colorpicker-button-menupopup"
anonid="colorpopup" noautofocus="true" level="top"
onmousedown="event.stopPropagation()"
onpopupshowing="this._colorPicker.onPopupShowing()"
onpopuphiding="this._colorPicker.onPopupHiding()"
onselect="this._colorPicker.pickerChange()">
<xul:colorpicker xbl:inherits="palettename,disabled" allowevents="true" anonid="colorpicker"/>
</xul:panel>
</content>
<implementation>
<property name="open"
onget="return this.getAttribute('open') == 'true'"
onset="this.showPopup();"/>
<property name="color">
<getter><![CDATA[
return this.getAttribute("color");
]]></getter>
<setter><![CDATA[
this.mColorBox.style.backgroundColor = val;
this.setAttribute("color", val);
return val;
]]></setter>
</property>
<method name="initialize">
<body><![CDATA[
this.mColorBox = document.getAnonymousElementByAttribute(this, "anonid", "colorbox");
this.mColorBox.style.backgroundColor = this.color;
var popup = document.getAnonymousElementByAttribute(this, "anonid", "colorpopup")
popup._colorPicker = this;
this.mPicker = document.getAnonymousElementByAttribute(this, "anonid", "colorpicker")
]]></body>
</method>
<method name="_fireEvent">
<parameter name="aTarget"/>
<parameter name="aEventName"/>
<body>
<![CDATA[
try {
var event = document.createEvent("Events");
event.initEvent(aEventName, true, true);
var cancel = !aTarget.dispatchEvent(event);
if (aTarget.hasAttribute("on" + aEventName)) {
var fn = new Function ("event", aTarget.getAttribute("on" + aEventName));
var rv = fn.call(aTarget, event);
if (rv == false)
cancel = true;
}
return !cancel;
}
catch (e) {
dump(e);
}
return false;
]]>
</body>
</method>
<method name="showPopup">
<body><![CDATA[
this.mPicker.parentNode.openPopup(this, "after_start", 0, 0, false, false);
]]></body>
</method>
<method name="hidePopup">
<body><![CDATA[
this.mPicker.parentNode.hidePopup();
]]></body>
</method>
<method name="onPopupShowing">
<body><![CDATA[
if ("resetHover" in this.mPicker)
this.mPicker.resetHover();
document.addEventListener("keydown", this.mPicker, true);
this.mPicker.mIsPopup = true;
// Initialize to current button's color
this.mPicker.initColor(this.color);
]]></body>
</method>
<method name="onPopupHiding">
<body><![CDATA[
// Removes the key listener
document.removeEventListener("keydown", this.mPicker, true);
this.mPicker.mIsPopup = false;
]]></body>
</method>
<method name="pickerChange">
<body><![CDATA[
this.color = this.mPicker.color;
setTimeout(function(aPopup) { aPopup.hidePopup() }, 1, this.mPicker.parentNode);
this._fireEvent(this, "change");
]]></body>
</method>
<constructor><![CDATA[
this.initialize();
]]></constructor>
</implementation>
<handlers>
<handler event="keydown"><![CDATA[
// open popup if key is space/up/left/right/down and popup is closed
if ( (event.keyCode == 32 || (event.keyCode > 36 && event.keyCode < 41)) && !this.open)
this.showPopup();
else if ( (event.keyCode == 27) && this.open)
this.hidePopup();
]]></handler>
</handlers>
</binding>
<binding id="colorpickertile" role="xul:colorpickertile">
</binding>
</bindings>