]>
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 var _CssStateMixin = dijit._CssStateMixin;
19 // dijit/_PaletteMixin
21 // A keyboard accessible palette, for picking a color/emoticon/etc.
23 return declare("dijit._PaletteMixin", [_CssStateMixin
], {
25 // A keyboard accessible palette, for picking a color/emoticon/etc.
27 // A mixin for a grid showing various entities, so the user can pick a certain entity.
29 // defaultTimeout: Number
30 // Number of milliseconds before a held key or button becomes typematic
33 // timeoutChangeRate: Number
34 // Fraction of time used to change the typematic timer between events
35 // 1.0 means that each typematic event fires at defaultTimeout intervals
36 // < 1.0 means that each typematic event fires at an increasing faster rate
37 timeoutChangeRate
: 0.90,
40 // Currently selected color/emoticon/etc.
43 // _selectedCell: [private] Integer
44 // Index of the currently selected cell. Initially, none selected
48 // _currentFocus: [private] DomNode
49 // The currently focused cell (if the palette itself has focus), or otherwise
50 // the cell to be focused when the palette itself gets focus.
51 // Different from value, which represents the selected (i.e. clicked) cell.
56 // _xDim: [protected] Integer
57 // This is the number of cells horizontally across.
62 // _yDim: [protected] Integer
63 // This is the number of cells vertically down.
71 // cellClass: [protected] String
72 // CSS class applied to each cell in the palette
73 cellClass
: "dijitPaletteCell",
75 // dyeClass: [protected] String
76 // Name of javascript class for Object created for each cell of the palette.
77 // dyeClass should implements dijit.Dye interface
81 // Localized summary for the palette table
83 _setSummaryAttr
: "paletteTableNode",
85 _dyeFactory: function(value
/*===== , row, col =====*/){
87 // Return instance of dijit.Dye for specified cell of palette
90 var dyeClassObj
= lang
.getObject(this.dyeClass
);
91 return new dyeClassObj(value
);
94 _preparePalette: function(choices
, titles
) {
96 // Subclass must call _preparePalette() from postCreate(), passing in the tooltip
98 // choices: String[][]
99 // id's for each cell of the palette, used to create Dye JS object for each cell
101 // Localized tooltip for each cell
104 var url
= this._blankGif
;
106 this.connect(this.gridNode
, "ondijitclick", "_onCellClick");
108 for(var row
=0; row
< choices
.length
; row
++){
109 var rowNode
= domConstruct
.create("tr", {tabIndex
: "-1"}, this.gridNode
);
110 for(var col
=0; col
< choices
[row
].length
; col
++){
111 var value
= choices
[row
][col
];
113 var cellObject
= this._dyeFactory(value
, row
, col
);
115 var cellNode
= domConstruct
.create("td", {
116 "class": this.cellClass
,
118 title
: titles
[value
],
122 // prepare cell inner structure
123 cellObject
.fillCell(cellNode
, url
);
125 domConstruct
.place(cellNode
, rowNode
);
127 cellNode
.index
= this._cells
.length
;
129 // save cell info into _cells
130 this._cells
.push({node
:cellNode
, dye
:cellObject
});
134 this._xDim
= choices
[0].length
;
135 this._yDim
= choices
.length
;
137 // Now set all events
138 // The palette itself is navigated to with the tab key on the keyboard
139 // Keyboard navigation within the Palette is with the arrow keys
140 // Spacebar selects the cell.
141 // For the up key the index is changed by negative the x dimension.
143 var keyIncrementMap
= {
144 UP_ARROW
: -this._xDim
,
145 // The down key the index is increase by the x dimension.
146 DOWN_ARROW
: this._xDim
,
147 // Right and left move the index by 1.
148 RIGHT_ARROW
: this.isLeftToRight() ? 1 : -1,
149 LEFT_ARROW
: this.isLeftToRight() ? -1 : 1
151 for(var key
in keyIncrementMap
){
153 typematic
.addKeyListener(
155 {charOrCode
:keys
[key
], ctrlKey
:false, altKey
:false, shiftKey
:false},
158 var increment
= keyIncrementMap
[key
];
159 return function(count
){ this._navigateByKey(increment
, count
); };
161 this.timeoutChangeRate
,
168 postCreate: function(){
169 this.inherited(arguments
);
171 // Set initial navigable node.
172 this._setCurrent(this._cells
[0].node
);
177 // Focus this widget. Puts focus on the most recently focused cell.
179 // The cell already has tabIndex set, just need to set CSS and focus it
180 focus
.focus(this._currentFocus
);
183 _onCellClick: function(/*Event*/ evt
){
185 // Handler for click, enter key & space key. Selects the cell.
191 var target
= evt
.target
;
193 // Find TD associated with click event. For ColorPalette user likely clicked IMG inside of TD
194 while(target
.tagName
!= "TD"){
195 if(!target
.parentNode
|| target
== this.gridNode
){ // probably can never happen, but just in case
198 target
= target
.parentNode
;
201 var value
= this._getDye(target
).getValue();
203 // First focus the clicked cell, and then send onChange() notification.
204 // onChange() (via _setValueAttr) must be after the focus call, because
205 // it may trigger a refocus to somewhere else (like the Editor content area), and that
206 // second focus should win.
207 this._setCurrent(target
);
209 this._setValueAttr(value
, true);
214 _setCurrent: function(/*DomNode*/ node
){
216 // Sets which node is the focused cell.
218 // At any point in time there's exactly one
219 // cell with tabIndex != -1. If focus is inside the palette then
220 // focus is on that cell.
222 // After calling this method, arrow key handlers and mouse click handlers
223 // should focus the cell in a setTimeout().
226 if("_currentFocus" in this){
227 // Remove tabIndex on old cell
228 domAttr
.set(this._currentFocus
, "tabIndex", "-1");
231 // Set tabIndex of new cell
232 this._currentFocus
= node
;
234 domAttr
.set(node
, "tabIndex", this.tabIndex
);
238 _setValueAttr: function(value
, priorityChange
){
240 // This selects a cell. It triggers the onChange event.
241 // value: String value of the cell to select
245 // Optional parameter used to tell the select whether or not to fire
248 // clear old selected cell
249 if(this._selectedCell
>= 0){
250 domClass
.remove(this._cells
[this._selectedCell
].node
, this.cellClass
+ "Selected");
252 this._selectedCell
= -1;
254 // search for cell matching specified value
256 for(var i
= 0; i
< this._cells
.length
; i
++){
257 if(value
== this._cells
[i
].dye
.getValue()){
258 this._selectedCell
= i
;
259 domClass
.add(this._cells
[i
].node
, this.cellClass
+ "Selected");
265 // record new value, or null if no matching cell
266 this._set("value", this._selectedCell
>= 0 ? value
: null);
268 if(priorityChange
|| priorityChange
=== undefined){
269 this.onChange(value
);
273 onChange: function(/*===== value =====*/){
275 // Callback when a cell is selected.
277 // Value corresponding to cell.
280 _navigateByKey: function(increment
, typeCount
){
282 // This is the callback for typematic.
283 // It changes the focus and the highlighed cell.
285 // How much the key is navigated.
287 // How many times typematic has fired.
291 // typecount == -1 means the key is released.
292 if(typeCount
== -1){ return; }
294 var newFocusIndex
= this._currentFocus
.index
+ increment
;
295 if(newFocusIndex
< this._cells
.length
&& newFocusIndex
> -1){
296 var focusNode
= this._cells
[newFocusIndex
].node
;
297 this._setCurrent(focusNode
);
299 // Actually focus the node, for the benefit of screen readers.
300 // Use setTimeout because IE doesn't like changing focus inside of an event handler
301 setTimeout(lang
.hitch(dijit
, "focus", focusNode
), 0);
305 _getDye: function(/*DomNode*/ cell
){
307 // Get JS object for given cell DOMNode
309 return this._cells
[cell
.index
].dye
;
318 // Interface for the JS Object associated with a palette cell (i.e. DOMNode)
320 constructor: function(alias, row, col){
322 // Initialize according to value or alias like "white"
326 getValue: function(){
328 // Return "value" of cell; meaning of "value" varies by subclass.
330 // For example color hex value, emoticon ascii value etc, entity hex value.
333 fillCell: function(cell, blankGif){
335 // Add cell DOMNode inner structure
337 // The surrounding cell
339 // URL for blank cell image