]>
git.wh0rd.org - tt-rss.git/blob - lib/dijit/_PaletteMixin.js.uncompressed.js
1 define("dijit/_PaletteMixin", [
2 "dojo/_base/declare", // declare
3 "dojo/dom-attr", // domAttr.set
4 "dojo/dom-class", // domClass.add domClass.remove
5 "dojo/dom-construct", // domConstruct.create domConstruct.place
6 "dojo/_base/event", // event.stop
8 "dojo/_base/lang", // lang.getObject
12 ], function(declare
, domAttr
, domClass
, domConstruct
, event
, keys
, lang
, _CssStateMixin
, focus
, typematic
){
15 // dijit/_PaletteMixin
17 return declare("dijit._PaletteMixin", [_CssStateMixin
], {
19 // A keyboard accessible palette, for picking a color/emoticon/etc.
21 // A mixin for a grid showing various entities, so the user can pick a certain entity.
23 // defaultTimeout: Number
24 // Number of milliseconds before a held key or button becomes typematic
27 // timeoutChangeRate: Number
28 // Fraction of time used to change the typematic timer between events
29 // 1.0 means that each typematic event fires at defaultTimeout intervals
30 // Less than 1.0 means that each typematic event fires at an increasing faster rate
31 timeoutChangeRate
: 0.90,
34 // Currently selected color/emoticon/etc.
37 // _selectedCell: [private] Integer
38 // Index of the currently selected cell. Initially, none selected
42 // _currentFocus: [private] DomNode
43 // The currently focused cell (if the palette itself has focus), or otherwise
44 // the cell to be focused when the palette itself gets focus.
45 // Different from value, which represents the selected (i.e. clicked) cell.
50 // _xDim: [protected] Integer
51 // This is the number of cells horizontally across.
56 // _yDim: [protected] Integer
57 // This is the number of cells vertically down.
65 // cellClass: [protected] String
66 // CSS class applied to each cell in the palette
67 cellClass
: "dijitPaletteCell",
69 // dyeClass: [protected] Constructor
70 // Constructor for Object created for each cell of the palette.
71 // dyeClass should implements dijit.Dye interface
75 // Localized summary for the palette table
77 _setSummaryAttr
: "paletteTableNode",
79 _dyeFactory: function(value
/*===== , row, col, title =====*/){
81 // Return instance of dijit.Dye for specified cell of palette
85 // Remove string support for 2.0
86 var dyeClassObj
= typeof this.dyeClass
== "string" ? lang
.getObject(this.dyeClass
) : this.dyeClass
;
87 return new dyeClassObj(value
);
90 _preparePalette: function(choices
, titles
) {
92 // Subclass must call _preparePalette() from postCreate(), passing in the tooltip
94 // choices: String[][]
95 // id's for each cell of the palette, used to create Dye JS object for each cell
97 // Localized tooltip for each cell
100 var url
= this._blankGif
;
102 this.connect(this.gridNode
, "ondijitclick", "_onCellClick");
104 for(var row
=0; row
< choices
.length
; row
++){
105 var rowNode
= domConstruct
.create("tr", {tabIndex
: "-1"}, this.gridNode
);
106 for(var col
=0; col
< choices
[row
].length
; col
++){
107 var value
= choices
[row
][col
];
109 var cellObject
= this._dyeFactory(value
, row
, col
, titles
[value
]);
111 var cellNode
= domConstruct
.create("td", {
112 "class": this.cellClass
,
114 title
: titles
[value
],
118 // prepare cell inner structure
119 cellObject
.fillCell(cellNode
, url
);
121 cellNode
.idx
= this._cells
.length
;
123 // save cell info into _cells
124 this._cells
.push({node
:cellNode
, dye
:cellObject
});
128 this._xDim
= choices
[0].length
;
129 this._yDim
= choices
.length
;
131 // Now set all events
132 // The palette itself is navigated to with the tab key on the keyboard
133 // Keyboard navigation within the Palette is with the arrow keys
134 // Spacebar selects the cell.
135 // For the up key the index is changed by negative the x dimension.
137 var keyIncrementMap
= {
138 UP_ARROW
: -this._xDim
,
139 // The down key the index is increase by the x dimension.
140 DOWN_ARROW
: this._xDim
,
141 // Right and left move the index by 1.
142 RIGHT_ARROW
: this.isLeftToRight() ? 1 : -1,
143 LEFT_ARROW
: this.isLeftToRight() ? -1 : 1
145 for(var key
in keyIncrementMap
){
147 typematic
.addKeyListener(
149 {charOrCode
:keys
[key
], ctrlKey
:false, altKey
:false, shiftKey
:false},
152 var increment
= keyIncrementMap
[key
];
153 return function(count
){ this._navigateByKey(increment
, count
); };
155 this.timeoutChangeRate
,
162 postCreate: function(){
163 this.inherited(arguments
);
165 // Set initial navigable node.
166 this._setCurrent(this._cells
[0].node
);
171 // Focus this widget. Puts focus on the most recently focused cell.
173 // The cell already has tabIndex set, just need to set CSS and focus it
174 focus
.focus(this._currentFocus
);
177 _onCellClick: function(/*Event*/ evt
){
179 // Handler for click, enter key & space key. Selects the cell.
185 var target
= evt
.target
;
187 // Find TD associated with click event. For ColorPalette user likely clicked IMG inside of TD
188 while(target
.tagName
!= "TD"){
189 if(!target
.parentNode
|| target
== this.gridNode
){ // probably can never happen, but just in case
192 target
= target
.parentNode
;
195 var value
= this._getDye(target
).getValue();
197 // First focus the clicked cell, and then send onChange() notification.
198 // onChange() (via _setValueAttr) must be after the focus call, because
199 // it may trigger a refocus to somewhere else (like the Editor content area), and that
200 // second focus should win.
201 this._setCurrent(target
);
203 this._setValueAttr(value
, true);
208 _setCurrent: function(/*DomNode*/ node
){
210 // Sets which node is the focused cell.
212 // At any point in time there's exactly one
213 // cell with tabIndex != -1. If focus is inside the palette then
214 // focus is on that cell.
216 // After calling this method, arrow key handlers and mouse click handlers
217 // should focus the cell in a setTimeout().
220 if("_currentFocus" in this){
221 // Remove tabIndex on old cell
222 domAttr
.set(this._currentFocus
, "tabIndex", "-1");
225 // Set tabIndex of new cell
226 this._currentFocus
= node
;
228 domAttr
.set(node
, "tabIndex", this.tabIndex
);
232 _setValueAttr: function(value
, priorityChange
){
234 // This selects a cell. It triggers the onChange event.
236 // Value of the cell to select
239 // priorityChange: Boolean?
240 // Optional parameter used to tell the select whether or not to fire
243 // clear old selected cell
244 if(this._selectedCell
>= 0){
245 domClass
.remove(this._cells
[this._selectedCell
].node
, this.cellClass
+ "Selected");
247 this._selectedCell
= -1;
249 // search for cell matching specified value
251 for(var i
= 0; i
< this._cells
.length
; i
++){
252 if(value
== this._cells
[i
].dye
.getValue()){
253 this._selectedCell
= i
;
254 domClass
.add(this._cells
[i
].node
, this.cellClass
+ "Selected");
260 // record new value, or null if no matching cell
261 this._set("value", this._selectedCell
>= 0 ? value
: null);
263 if(priorityChange
|| priorityChange
=== undefined){
264 this.onChange(value
);
268 onChange: function(/*===== value =====*/){
270 // Callback when a cell is selected.
272 // Value corresponding to cell.
275 _navigateByKey: function(increment
, typeCount
){
277 // This is the callback for typematic.
278 // It changes the focus and the highlighed cell.
280 // How much the key is navigated.
282 // How many times typematic has fired.
286 // typecount == -1 means the key is released.
287 if(typeCount
== -1){ return; }
289 var newFocusIndex
= this._currentFocus
.idx
+ increment
;
290 if(newFocusIndex
< this._cells
.length
&& newFocusIndex
> -1){
291 var focusNode
= this._cells
[newFocusIndex
].node
;
292 this._setCurrent(focusNode
);
294 // Actually focus the node, for the benefit of screen readers.
295 // Use defer because IE doesn't like changing focus inside of an event handler
296 this.defer(lang
.hitch(focus
, "focus", focusNode
));
300 _getDye: function(/*DomNode*/ cell
){
302 // Get JS object for given cell DOMNode
304 return this._cells
[cell
.idx
].dye
;
313 // Interface for the JS Object associated with a palette cell (i.e. DOMNode)
315 constructor: function(alias, row, col){
317 // Initialize according to value or alias like "white"
321 getValue: function(){
323 // Return "value" of cell; meaning of "value" varies by subclass.
325 // For example color hex value, emoticon ascii value etc, entity hex value.
328 fillCell: function(cell, blankGif){
330 // Add cell DOMNode inner structure
332 // The surrounding cell
334 // URL for blank cell image