customcolorpicker.xml (5018B)
1 <?xml version="1.0"?> 2 <!-- 3 An extension of the Mozilla colorpicker that allows for a custom set of colors 4 --> 5 <bindings id="colorpickerBindings" 6 xmlns="http://www.mozilla.org/xbl" 7 xmlns:xbl="http://www.mozilla.org/xbl" 8 xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 9 10 <binding id="custom-colorpicker" extends="chrome://global/content/bindings/colorpicker.xml#colorpicker"> 11 <resources> 12 <stylesheet src="chrome://zotero/skin/bindings/customcolorpicker.css"/> 13 </resources> 14 15 <content> 16 <vbox anonid="tiles" flex="1" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 17 <hbox> 18 <image class="colorpickertile" color="#000000"/> 19 </hbox> 20 </vbox> 21 </content> 22 23 <implementation implements="nsIDOMEventListener"> 24 <constructor><![CDATA[ 25 this.initialize(); 26 27 this._colors = this.getAttribute('colors'); 28 if (this._colors) { 29 this._cols = this.getAttribute('cols'); 30 } 31 this.redraw(); 32 ]]></constructor> 33 34 <!-- Defaults from the Mozilla colorpicker --> 35 <field name="_defaultColors"> 36 [ 37 'L#FFFFFF','L#FFCCCC','L#FFCC99','L#FFFF99','L#FFFFCC','L#99FF99','L#99FFFF','L#CCFFFF','L#CCCCFF','L#FFCCFF', 38 '#CCCCCC','#FF6666','#FF9966','L#FFFF66','L#FFFF33','L#66FF99','L#33FFFF','L#66FFFF','#9999FF','#FF99FF', 39 '#C0C0C0','#FF0000','#FF9900','#FFCC66','L#FFFF00','L#33FF33','#66CCCC','#33CCFF','#6666CC','#CC66CC', 40 '#999999','#CC0000','#FF6600','#FFCC33','#FFCC00','#33CC00','#00CCCC','#3366FF','#6633FF','#CC33CC', 41 '#666666','#990000','#CC6600','#CC9933','#999900','#009900','#339999','#3333FF','#6600CC','#993399', 42 '#333333','#660000','#993300','#996633','#666600','#006600','#336666','#000099','#333399','#663366', 43 '#000000','#330000','#663300','#663333','#333300','#003300','#003333','#000066','#330099','#330033' 44 ] 45 </field> 46 <field name="_defaultCols">10</field> 47 48 <property name="colors" onget="return this._colors ? this._colors : []"> 49 <setter><![CDATA[ 50 if (typeof val == 'string') { 51 val = val ? val.split(',') : null; 52 } 53 this._colors = val; 54 this.redraw(); 55 ]]></setter> 56 </property> 57 58 <property name="cols" onget="return this.getAttribute('cols')"> 59 <setter><![CDATA[ 60 this.setAttribute('cols', val); 61 this.redraw(); 62 ]]></setter> 63 </property> 64 65 <method name="redraw"> 66 <body><![CDATA[ 67 //Zotero.debug("Redrawing color picker"); 68 69 var tiles = document.getAnonymousNodes(this)[0]; 70 71 var cols = this.getAttribute('cols') || this._defaultCols; 72 var colors = this._colors.concat() || this._defaultColors.concat(); 73 74 while (tiles.hasChildNodes()) { 75 tiles.removeChild(tiles.firstChild); 76 } 77 78 var rows = Math.ceil(colors.length / cols); 79 80 var tileWidth = this.getAttribute('tileWidth'); 81 var tileHeight = this.getAttribute('tileHeight'); 82 83 for (let i=0; i<rows; i++) { 84 var hbox = document.createElement('hbox'); 85 for (let j=0; j<cols; j++) { 86 let color = colors.shift(); 87 if (!color) { 88 break; 89 } 90 let light = color.charAt(0) == 'L'; 91 color = light ? color.substr(1) : color; 92 93 let image = document.createElement('image'); 94 image.className = 'colorpickertile' + (light ? ' cp-light' : ''); 95 image.setAttribute('color', color); 96 97 let dataURI = "data:image/svg+xml,<svg style='background-color: " 98 + encodeURIComponent(color) + "' xmlns='http://www.w3.org/2000/svg' />"; 99 image.setAttribute('src', dataURI); 100 101 if (tileWidth) { 102 image.width = tileWidth; 103 } 104 if (tileHeight) { 105 image.height = tileHeight; 106 } 107 hbox.appendChild(image); 108 } 109 tiles.appendChild(hbox); 110 } 111 ]]></body> 112 </method> 113 </implementation> 114 </binding> 115 116 <!-- The content of the Mozilla colorpicker-button, but with a customcolorpicker 117 with some extra inherited attributes instead --> 118 <binding id="custom-colorpicker-button" display="xul:menu" 119 extends="chrome://global/content/bindings/colorpicker.xml#colorpicker-button"> 120 <resources> 121 <stylesheet src="chrome://zotero/skin/bindings/customcolorpicker.css"/> 122 </resources> 123 <content> 124 <xul:image class="colorpicker-button-colorbox" anonid="colorbox" flex="1" xbl:inherits="disabled"/> 125 126 <xul:panel class="colorpicker-button-menupopup" 127 anonid="colorpopup" noautofocus="true" level="top" 128 onmousedown="event.stopPropagation()" 129 onpopupshowing="this._colorPicker.onPopupShowing()" 130 onpopuphiding="this._colorPicker.onPopupHiding()" 131 onselect="this._colorPicker.pickerChange()"> 132 <xul:customcolorpicker xbl:inherits="palettename,disabled,cols,columns,tileWidth,tileHeight" allowevents="true" anonid="colorpicker"/> 133 </xul:panel> 134 </content> 135 136 <implementation> 137 <property name="colors" onget="return this.mPicker.colors" onset="this.mPicker.colors = val"/> 138 </implementation> 139 </binding> 140 </bindings>