1 | define(["dojo/_base/kernel", |
---|
2 | "dojo/text!./resources/GridContainer.html", |
---|
3 | "dojo/ready", |
---|
4 | "dojo/_base/array","dojo/_base/lang", |
---|
5 | "dojo/_base/declare","dojo/text","dojo/_base/sniff","dojo/_base/html", |
---|
6 | "dojox/mdnd/AreaManager","dojox/mdnd/DropIndicator", |
---|
7 | "dojox/mdnd/dropMode/OverDropMode","dojox/mdnd/AutoScroll","dijit/_Templated", |
---|
8 | "dijit/layout/_LayoutWidget", |
---|
9 | "dijit/focus", // dijit.focus() |
---|
10 | "dijit/_base/focus" // dijit.getFocus() |
---|
11 | ],function(dojo,template){ |
---|
12 | |
---|
13 | var gcl = dojo.declare( |
---|
14 | "dojox.layout.GridContainerLite", |
---|
15 | [dijit.layout._LayoutWidget, dijit._TemplatedMixin], |
---|
16 | { |
---|
17 | // summary: |
---|
18 | // The GridContainerLite is a container of child elements that are placed in a kind of grid. |
---|
19 | // |
---|
20 | // description: |
---|
21 | // GridContainerLite displays the child elements by column |
---|
22 | // (ie: the children widths are fixed by the column width of the grid but |
---|
23 | // the children heights are free). |
---|
24 | // Each child is movable by drag and drop inside the GridContainer. |
---|
25 | // The position of other children is automatically calculated when a child is moved. |
---|
26 | // |
---|
27 | // example: |
---|
28 | // | <div dojoType="dojox.layout.GridContainerLite" nbZones="3" isAutoOrganized="true"> |
---|
29 | // | <div dojoType="dijit.layout.ContentPane">Content Pane 1 : Drag Me !</div> |
---|
30 | // | <div dojoType="dijit.layout.ContentPane">Content Pane 2 : Drag Me !</div> |
---|
31 | // | <div dojoType="dijit.layout.ContentPane">Content Pane 3 : Drag Me !</div> |
---|
32 | // | </div> |
---|
33 | // |
---|
34 | // example: |
---|
35 | // | dojo.ready(function(){ |
---|
36 | // | var cpane1 = new dijit.layout.ContentPane({ |
---|
37 | // | title:"cpane1", content: "Content Pane 1 : Drag Me !" |
---|
38 | // | }), |
---|
39 | // | cpane2 = new dijit.layout.ContentPane({ |
---|
40 | // | title:"cpane2", |
---|
41 | // | content: "Content Pane 2 : Drag Me !" |
---|
42 | // | }), |
---|
43 | // | cpane3 = new dijit.layout.ContentPane({ |
---|
44 | // | title:"cpane3", |
---|
45 | // | content: "Content Pane 3 : Drag Me !" |
---|
46 | // | }); |
---|
47 | // | |
---|
48 | // | var widget = new dojox.layout.GridContainerLite({ |
---|
49 | // | nbZones: 3, |
---|
50 | // | isAutoOrganized: true |
---|
51 | // | }, dojo.byId("idNode")); |
---|
52 | // | widget.addChild(cpane1, 0, 0); |
---|
53 | // | widget.addChild(cpane2, 1, 0); |
---|
54 | // | widget.addChild(cpane3, 2, 1); |
---|
55 | // | widget.startup(); |
---|
56 | // | }); |
---|
57 | |
---|
58 | // autoRefresh: Boolean |
---|
59 | // Enable the refresh of registered areas on drag start. |
---|
60 | autoRefresh: true, |
---|
61 | |
---|
62 | |
---|
63 | // templateString: String |
---|
64 | // template of gridContainer. |
---|
65 | templateString: template, |
---|
66 | |
---|
67 | // dragHandleClass: Array : |
---|
68 | // CSS class enabling a drag handle on a child. |
---|
69 | dragHandleClass: "dojoxDragHandle", |
---|
70 | |
---|
71 | // nbZones: Integer |
---|
72 | // The number of dropped zones, by default 1. |
---|
73 | nbZones: 1, |
---|
74 | |
---|
75 | // doLayout: Boolean |
---|
76 | // If true, change the size of my currently displayed child to match my size. |
---|
77 | doLayout: true, |
---|
78 | |
---|
79 | // isAutoOrganized: Boolean |
---|
80 | // If true, widgets are organized automatically, |
---|
81 | // else the attribute colum of child will define the right column. |
---|
82 | isAutoOrganized: true, |
---|
83 | |
---|
84 | // acceptTypes: Array |
---|
85 | // The GridContainer will only accept the children that fit to the types. |
---|
86 | acceptTypes: [], |
---|
87 | |
---|
88 | // colWidths: String |
---|
89 | // A comma separated list of column widths. If the column widths do not add up |
---|
90 | // to 100, the remaining columns split the rest of the width evenly |
---|
91 | // between them. |
---|
92 | colWidths: "", |
---|
93 | |
---|
94 | constructor: function(/*Object*/props, /*DOMNode*/node){ |
---|
95 | this.acceptTypes = (props || {}).acceptTypes || ["text"]; |
---|
96 | this._disabled = true; |
---|
97 | }, |
---|
98 | |
---|
99 | postCreate: function(){ |
---|
100 | //console.log("dojox.layout.GridContainerLite ::: postCreate"); |
---|
101 | this.inherited(arguments); |
---|
102 | this._grid = []; |
---|
103 | |
---|
104 | this._createCells(); |
---|
105 | |
---|
106 | // need to resize dragged child when it's dropped. |
---|
107 | this.subscribe("/dojox/mdnd/drop", "resizeChildAfterDrop"); |
---|
108 | this.subscribe("/dojox/mdnd/drag/start", "resizeChildAfterDragStart"); |
---|
109 | |
---|
110 | this._dragManager = dojox.mdnd.areaManager(); |
---|
111 | // console.info("autorefresh ::: ", this.autoRefresh); |
---|
112 | this._dragManager.autoRefresh = this.autoRefresh; |
---|
113 | |
---|
114 | // Add specific dragHandleClass to the manager. |
---|
115 | this._dragManager.dragHandleClass = this.dragHandleClass; |
---|
116 | |
---|
117 | if(this.doLayout){ |
---|
118 | this._border = { |
---|
119 | 'h':(dojo.isIE) ? dojo._getBorderExtents(this.gridContainerTable).h : 0, |
---|
120 | 'w': (dojo.isIE == 6) ? 1 : 0 |
---|
121 | } |
---|
122 | } |
---|
123 | else{ |
---|
124 | dojo.style(this.domNode, "overflowY", "hidden"); |
---|
125 | dojo.style(this.gridContainerTable, "height", "auto"); |
---|
126 | } |
---|
127 | // Call postCreate of dijit.layout._LayoutWidget. |
---|
128 | this.inherited(arguments); |
---|
129 | |
---|
130 | }, |
---|
131 | |
---|
132 | startup: function(){ |
---|
133 | //console.log("dojox.layout.GridContainerLite ::: startup"); |
---|
134 | if(this._started){ return; } |
---|
135 | |
---|
136 | if(this.isAutoOrganized){ |
---|
137 | this._organizeChildren(); |
---|
138 | } |
---|
139 | else{ |
---|
140 | this._organizeChildrenManually(); |
---|
141 | } |
---|
142 | |
---|
143 | // Need to call getChildren because getChildren return null |
---|
144 | // The children are not direct children because of _organizeChildren method |
---|
145 | dojo.forEach(this.getChildren(), function(child){ child.startup(); }); |
---|
146 | |
---|
147 | // Need to enable the Drag And Drop only if the GridContainer is visible. |
---|
148 | if(this._isShown()){ |
---|
149 | this.enableDnd(); |
---|
150 | } |
---|
151 | this.inherited(arguments); |
---|
152 | }, |
---|
153 | |
---|
154 | resizeChildAfterDrop: function(/*Node*/node, /*Object*/targetArea, /*Integer*/indexChild){ |
---|
155 | // summary: |
---|
156 | // Resize the GridContainerLite inner table and the dropped widget. |
---|
157 | // description: |
---|
158 | // These components are resized only if the targetArea.node is a |
---|
159 | // child of this instance of gridContainerLite. |
---|
160 | // To be resized, the dropped node must have also a method resize. |
---|
161 | // node: |
---|
162 | // domNode of dropped widget. |
---|
163 | // targetArea: |
---|
164 | // AreaManager Object containing information of targetArea |
---|
165 | // indexChild: |
---|
166 | // Index where the dropped widget has been placed |
---|
167 | // returns: |
---|
168 | // True if resized. |
---|
169 | |
---|
170 | //console.log("dojox.layout.GridContainerLite ::: resizeChildAfterDrop"); |
---|
171 | if(this._disabled){ |
---|
172 | return false; |
---|
173 | } |
---|
174 | if(dijit.getEnclosingWidget(targetArea.node) == this){ |
---|
175 | var widget = dijit.byNode(node); |
---|
176 | if(widget.resize && dojo.isFunction(widget.resize)){ |
---|
177 | widget.resize(); |
---|
178 | } |
---|
179 | |
---|
180 | // Update the column of the widget |
---|
181 | widget.set("column", node.parentNode.cellIndex); |
---|
182 | |
---|
183 | if(this.doLayout){ |
---|
184 | var domNodeHeight = this._contentBox.h, |
---|
185 | divHeight = dojo.contentBox(this.gridContainerDiv).h; |
---|
186 | if(divHeight >= domNodeHeight){ |
---|
187 | dojo.style(this.gridContainerTable, "height", |
---|
188 | (domNodeHeight - this._border.h) + "px"); |
---|
189 | } |
---|
190 | } |
---|
191 | return true; |
---|
192 | } |
---|
193 | return false; |
---|
194 | }, |
---|
195 | |
---|
196 | resizeChildAfterDragStart: function(/*Node*/node, /*Object*/sourceArea, /*Integer*/indexChild){ |
---|
197 | // summary: |
---|
198 | // Resize the GridContainerLite inner table only if the drag source |
---|
199 | // is a child of this gridContainer. |
---|
200 | // node: |
---|
201 | // domNode of dragged widget. |
---|
202 | // sourceArea: |
---|
203 | // AreaManager Object containing information of sourceArea |
---|
204 | // indexChild: |
---|
205 | // Index where the dragged widget has been placed |
---|
206 | |
---|
207 | //console.log("dojox.layout.GridContainerLite ::: resizeChildAfterDragStart"); |
---|
208 | if(this._disabled){ |
---|
209 | return false; |
---|
210 | } |
---|
211 | if(dijit.getEnclosingWidget(sourceArea.node) == this){ |
---|
212 | this._draggedNode = node; |
---|
213 | if(this.doLayout){ |
---|
214 | dojo.marginBox(this.gridContainerTable, { |
---|
215 | 'h': dojo.contentBox(this.gridContainerDiv).h - this._border.h |
---|
216 | }); |
---|
217 | } |
---|
218 | return true; |
---|
219 | } |
---|
220 | return false; |
---|
221 | }, |
---|
222 | |
---|
223 | getChildren: function(){ |
---|
224 | // summary: |
---|
225 | // A specific method which returns children after they were placed in zones. |
---|
226 | // returns: |
---|
227 | // An array containing all children (widgets). |
---|
228 | // tags: |
---|
229 | // protected |
---|
230 | |
---|
231 | //console.log("dojox.layout.GridContainerLite ::: _getChildren"); |
---|
232 | var children = []; |
---|
233 | dojo.forEach(this._grid, function(dropZone){ |
---|
234 | children = children.concat(dojo.query("> [widgetId]", dropZone.node).map(dijit.byNode)); |
---|
235 | }); |
---|
236 | return children; // Array |
---|
237 | }, |
---|
238 | |
---|
239 | _isShown: function(){ |
---|
240 | // summary: |
---|
241 | // Check if the domNode is visible or not. |
---|
242 | // returns: |
---|
243 | // true if the content is currently shown |
---|
244 | // tags: |
---|
245 | // protected |
---|
246 | |
---|
247 | //console.log("dojox.layout.GridContainerLite ::: _isShown"); |
---|
248 | if("open" in this){ // for TitlePane, etc. |
---|
249 | return this.open; // Boolean |
---|
250 | } |
---|
251 | else{ |
---|
252 | var node = this.domNode; |
---|
253 | return (node.style.display != 'none') && (node.style.visibility != 'hidden') && !dojo.hasClass(node, "dijitHidden"); // Boolean |
---|
254 | } |
---|
255 | }, |
---|
256 | |
---|
257 | layout: function(){ |
---|
258 | // summary: |
---|
259 | // Resize of each child |
---|
260 | |
---|
261 | //console.log("dojox.layout.GridContainerLite ::: layout"); |
---|
262 | if(this.doLayout){ |
---|
263 | var contentBox = this._contentBox; |
---|
264 | dojo.marginBox(this.gridContainerTable, { |
---|
265 | 'h': contentBox.h - this._border.h |
---|
266 | }); |
---|
267 | dojo.contentBox(this.domNode, { |
---|
268 | 'w': contentBox.w - this._border.w |
---|
269 | }); |
---|
270 | } |
---|
271 | dojo.forEach(this.getChildren(), function(widget){ |
---|
272 | if(widget.resize && dojo.isFunction(widget.resize)){ |
---|
273 | widget.resize(); |
---|
274 | } |
---|
275 | }); |
---|
276 | }, |
---|
277 | |
---|
278 | onShow: function(){ |
---|
279 | // summary: |
---|
280 | // Enabled the Drag And Drop if it's necessary. |
---|
281 | |
---|
282 | //console.log("dojox.layout.GridContainerLite ::: onShow"); |
---|
283 | if(this._disabled){ |
---|
284 | this.enableDnd(); |
---|
285 | } |
---|
286 | }, |
---|
287 | |
---|
288 | onHide: function(){ |
---|
289 | // summary: |
---|
290 | // Disabled the Drag And Drop if it's necessary. |
---|
291 | |
---|
292 | //console.log("dojox.layout.GridContainerLite ::: onHide"); |
---|
293 | if(!this._disabled){ |
---|
294 | this.disableDnd(); |
---|
295 | } |
---|
296 | }, |
---|
297 | |
---|
298 | _createCells: function(){ |
---|
299 | // summary: |
---|
300 | // Create the columns of the GridContainer. |
---|
301 | // tags: |
---|
302 | // protected |
---|
303 | |
---|
304 | //console.log("dojox.layout.GridContainerLite ::: _createCells"); |
---|
305 | if(this.nbZones === 0){ this.nbZones = 1; } |
---|
306 | var accept = this.acceptTypes.join(","), |
---|
307 | i = 0; |
---|
308 | |
---|
309 | var origWidths = this.colWidths || []; |
---|
310 | var widths = []; |
---|
311 | var colWidth; |
---|
312 | var widthSum = 0; |
---|
313 | |
---|
314 | // Calculate the widths of each column. |
---|
315 | for(i = 0; i < this.nbZones; i++){ |
---|
316 | if(widths.length < origWidths.length){ |
---|
317 | widthSum += origWidths[i]; |
---|
318 | widths.push(origWidths[i]); |
---|
319 | }else{ |
---|
320 | if(!colWidth){ |
---|
321 | colWidth = (100 - widthSum)/(this.nbZones - i); |
---|
322 | } |
---|
323 | widths.push(colWidth); |
---|
324 | } |
---|
325 | } |
---|
326 | |
---|
327 | i = 0; |
---|
328 | while(i < this.nbZones){ |
---|
329 | // Add the parameter accept in each zone used by AreaManager |
---|
330 | // (see method dojox.mdnd.AreaManager:registerByNode) |
---|
331 | this._grid.push({ |
---|
332 | 'node': dojo.create("td", { |
---|
333 | 'class': "gridContainerZone", |
---|
334 | 'accept': accept, |
---|
335 | 'id': this.id + "_dz" + i, |
---|
336 | 'style': { |
---|
337 | 'width': widths[i] + "%" |
---|
338 | } |
---|
339 | }, this.gridNode) |
---|
340 | }); |
---|
341 | i++; |
---|
342 | } |
---|
343 | }, |
---|
344 | |
---|
345 | _getZonesAttr: function(){ |
---|
346 | // summary: |
---|
347 | // return array of zone (domNode) |
---|
348 | return dojo.query(".gridContainerZone", this.containerNode); |
---|
349 | }, |
---|
350 | |
---|
351 | enableDnd: function(){ |
---|
352 | // summary: |
---|
353 | // Enable the Drag And Drop for children of GridContainer. |
---|
354 | |
---|
355 | //console.log("dojox.layout.GridContainerLite ::: enableDnd"); |
---|
356 | var m = this._dragManager; |
---|
357 | dojo.forEach(this._grid, function(dropZone){ |
---|
358 | m.registerByNode(dropZone.node); |
---|
359 | }); |
---|
360 | m._dropMode.updateAreas(m._areaList); |
---|
361 | this._disabled = false; |
---|
362 | }, |
---|
363 | |
---|
364 | disableDnd: function(){ |
---|
365 | // summary: |
---|
366 | // Disable the Drag And Drop for children of GridContainer. |
---|
367 | |
---|
368 | //console.log("dojox.layout.GridContainerLite ::: disableDnd"); |
---|
369 | var m = this._dragManager; |
---|
370 | dojo.forEach(this._grid, function(dropZone){ |
---|
371 | m.unregister(dropZone.node); |
---|
372 | }); |
---|
373 | m._dropMode.updateAreas(m._areaList); |
---|
374 | this._disabled = true; |
---|
375 | }, |
---|
376 | |
---|
377 | _organizeChildren: function(){ |
---|
378 | // summary: |
---|
379 | // List all zones and insert child into columns. |
---|
380 | |
---|
381 | //console.log("dojox.layout.GridContainerLite ::: _organizeChildren"); |
---|
382 | var children = dojox.layout.GridContainerLite.superclass.getChildren.call(this); |
---|
383 | var numZones = this.nbZones, |
---|
384 | numPerZone = Math.floor(children.length / numZones), |
---|
385 | mod = children.length % numZones, |
---|
386 | i = 0; |
---|
387 | // console.log('numPerZone', numPerZone, ':: mod', mod); |
---|
388 | for(var z = 0; z < numZones; z++){ |
---|
389 | for(var r = 0; r < numPerZone; r++){ |
---|
390 | this._insertChild(children[i], z); |
---|
391 | i++; |
---|
392 | } |
---|
393 | if(mod > 0){ |
---|
394 | try{ |
---|
395 | this._insertChild(children[i], z); |
---|
396 | i++; |
---|
397 | } |
---|
398 | catch(e){ |
---|
399 | console.error("Unable to insert child in GridContainer", e); |
---|
400 | } |
---|
401 | mod--; |
---|
402 | } |
---|
403 | else if(numPerZone === 0){ |
---|
404 | break; // Optimization |
---|
405 | } |
---|
406 | } |
---|
407 | }, |
---|
408 | |
---|
409 | _organizeChildrenManually: function (){ |
---|
410 | // summary: |
---|
411 | // Organize children by column property of widget. |
---|
412 | |
---|
413 | //console.log("dojox.layout.GridContainerLite ::: _organizeChildrenManually"); |
---|
414 | var children = dojox.layout.GridContainerLite.superclass.getChildren.call(this), |
---|
415 | length = children.length, |
---|
416 | child; |
---|
417 | for(var i = 0; i < length; i++){ |
---|
418 | child = children[i]; |
---|
419 | try{ |
---|
420 | this._insertChild(child, child.column - 1); |
---|
421 | } |
---|
422 | catch(e){ |
---|
423 | console.error("Unable to insert child in GridContainer", e); |
---|
424 | } |
---|
425 | } |
---|
426 | }, |
---|
427 | |
---|
428 | _insertChild: function(/*Widget*/child, /*Integer*/column, /*Integer?*/p){ |
---|
429 | // summary: |
---|
430 | // Insert a child in a specific column of the GridContainer widget. |
---|
431 | // column: |
---|
432 | // Column number |
---|
433 | // p: |
---|
434 | // Place in the zone (0 - first) |
---|
435 | // returns: |
---|
436 | // The widget inserted |
---|
437 | |
---|
438 | //console.log("dojox.layout.GridContainerLite ::: _insertChild", child, column, p); |
---|
439 | var zone = this._grid[column].node, |
---|
440 | length = zone.childNodes.length; |
---|
441 | if(typeof(p) == undefined || p > length){ |
---|
442 | p = length; |
---|
443 | } |
---|
444 | if(this._disabled){ |
---|
445 | dojo.place(child.domNode, zone, p); |
---|
446 | dojo.attr(child.domNode, "tabIndex", "0"); |
---|
447 | } |
---|
448 | else{ |
---|
449 | if(!child.dragRestriction){ |
---|
450 | this._dragManager.addDragItem(zone, child.domNode, p, true); |
---|
451 | } |
---|
452 | else{ |
---|
453 | dojo.place(child.domNode, zone, p); |
---|
454 | dojo.attr(child.domNode, "tabIndex", "0"); |
---|
455 | } |
---|
456 | } |
---|
457 | child.set("column", column); |
---|
458 | return child; // Widget |
---|
459 | }, |
---|
460 | |
---|
461 | removeChild: function(/*Widget*/ widget){ |
---|
462 | //console.log("dojox.layout.GridContainerLite ::: removeChild"); |
---|
463 | if(this._disabled){ |
---|
464 | this.inherited(arguments); |
---|
465 | } |
---|
466 | else{ |
---|
467 | this._dragManager.removeDragItem(widget.domNode.parentNode, widget.domNode); |
---|
468 | } |
---|
469 | }, |
---|
470 | |
---|
471 | addService: function(/*Object*/child, /*Integer?*/column, /*Integer?*/p){ |
---|
472 | //console.log("dojox.layout.GridContainerLite ::: addService"); |
---|
473 | dojo.deprecated("addService is deprecated.", "Please use instead.", "Future"); |
---|
474 | this.addChild(child, column, p); |
---|
475 | }, |
---|
476 | |
---|
477 | addChild: function(/*Object*/child, /*Integer?*/column, /*Integer?*/p){ |
---|
478 | // summary: |
---|
479 | // Add a child in a specific column of the GridContainer widget. |
---|
480 | // child: |
---|
481 | // widget to insert |
---|
482 | // column: |
---|
483 | // column number |
---|
484 | // p: |
---|
485 | // place in the zone (first = 0) |
---|
486 | // returns: |
---|
487 | // The widget inserted |
---|
488 | |
---|
489 | //console.log("dojox.layout.GridContainerLite ::: addChild"); |
---|
490 | child.domNode.id = child.id; |
---|
491 | dojox.layout.GridContainerLite.superclass.addChild.call(this, child, 0); |
---|
492 | if(column < 0 || column == undefined){ column = 0; } |
---|
493 | if(p <= 0){ p = 0; } |
---|
494 | try{ |
---|
495 | return this._insertChild(child, column, p); |
---|
496 | } |
---|
497 | catch(e){ |
---|
498 | console.error("Unable to insert child in GridContainer", e); |
---|
499 | } |
---|
500 | return null; // Widget |
---|
501 | }, |
---|
502 | |
---|
503 | _setColWidthsAttr: function(value){ |
---|
504 | this.colWidths = dojo.isString(value) ? value.split(",") : (dojo.isArray(value) ? value : [value]); |
---|
505 | |
---|
506 | if(this._started){ |
---|
507 | this._updateColumnsWidth(); |
---|
508 | } |
---|
509 | }, |
---|
510 | |
---|
511 | _updateColumnsWidth: function(/*Object*/ manager){ |
---|
512 | // summary: |
---|
513 | // Update the columns width. |
---|
514 | // manager: |
---|
515 | // dojox.mdnd.AreaManager singleton |
---|
516 | // tags: |
---|
517 | // private |
---|
518 | |
---|
519 | //console.log("dojox.layout.GridContainer ::: _updateColumnsWidth"); |
---|
520 | var length = this._grid.length; |
---|
521 | |
---|
522 | var origWidths = this.colWidths || []; |
---|
523 | var widths = []; |
---|
524 | var colWidth; |
---|
525 | var widthSum = 0; |
---|
526 | var i; |
---|
527 | |
---|
528 | // Calculate the widths of each column. |
---|
529 | for(i = 0; i < length; i++){ |
---|
530 | if(widths.length < origWidths.length){ |
---|
531 | widthSum += origWidths[i] * 1; |
---|
532 | widths.push(origWidths[i]); |
---|
533 | }else{ |
---|
534 | if(!colWidth){ |
---|
535 | colWidth = (100 - widthSum)/(this.nbZones - i); |
---|
536 | |
---|
537 | // If the numbers don't work out, make the remaining columns |
---|
538 | // an even width and let the code below average |
---|
539 | // out the differences. |
---|
540 | if(colWidth < 0){ |
---|
541 | colWidth = 100 / this.nbZones; |
---|
542 | } |
---|
543 | } |
---|
544 | widths.push(colWidth); |
---|
545 | widthSum += colWidth * 1; |
---|
546 | } |
---|
547 | } |
---|
548 | |
---|
549 | // If the numbers are wrong, divide them all so they add up to 100 |
---|
550 | if(widthSum > 100){ |
---|
551 | var divisor = 100 / widthSum; |
---|
552 | for(i = 0; i < widths.length; i++){ |
---|
553 | widths[i] *= divisor; |
---|
554 | } |
---|
555 | } |
---|
556 | |
---|
557 | // Set the widths of each node |
---|
558 | for(i = 0; i < length; i++){ |
---|
559 | this._grid[i].node.style.width = widths[i] + "%"; |
---|
560 | } |
---|
561 | }, |
---|
562 | |
---|
563 | _selectFocus: function(/*Event*/event){ |
---|
564 | // summary: |
---|
565 | // Enable keyboard accessibility into the GridContainer. |
---|
566 | // description: |
---|
567 | // Possibility to move focus into the GridContainer (TAB, LEFT ARROW, RIGHT ARROW, UP ARROW, DOWN ARROW). |
---|
568 | // Possibility to move GridContainer's children (Drag and Drop) with keyboard. (SHIFT + ARROW). |
---|
569 | // If the type of widget is not draggable, a popup is displayed. |
---|
570 | |
---|
571 | //console.log("dojox.layout.GridContainerLite ::: _selectFocus"); |
---|
572 | if(this._disabled){ return; } |
---|
573 | var key = event.keyCode, |
---|
574 | k = dojo.keys, |
---|
575 | zone = null, |
---|
576 | focus = dijit.getFocus(), |
---|
577 | focusNode = focus.node, |
---|
578 | m = this._dragManager, |
---|
579 | found, |
---|
580 | i, |
---|
581 | j, |
---|
582 | r, |
---|
583 | children, |
---|
584 | area, |
---|
585 | widget; |
---|
586 | if(focusNode == this.containerNode){ |
---|
587 | area = this.gridNode.childNodes; |
---|
588 | switch(key){ |
---|
589 | case k.DOWN_ARROW: |
---|
590 | case k.RIGHT_ARROW: |
---|
591 | found = false; |
---|
592 | for(i = 0; i < area.length; i++){ |
---|
593 | children = area[i].childNodes; |
---|
594 | for(j = 0; j < children.length; j++){ |
---|
595 | zone = children[j]; |
---|
596 | if(zone != null && zone.style.display != "none"){ |
---|
597 | dijit.focus(zone); |
---|
598 | dojo.stopEvent(event); |
---|
599 | found = true; |
---|
600 | break; |
---|
601 | } |
---|
602 | } |
---|
603 | if(found){ break }; |
---|
604 | } |
---|
605 | break; |
---|
606 | case k.UP_ARROW: |
---|
607 | case k.LEFT_ARROW: |
---|
608 | area = this.gridNode.childNodes; |
---|
609 | found = false; |
---|
610 | for(i = area.length-1; i >= 0 ; i--){ |
---|
611 | children = area[i].childNodes; |
---|
612 | for(j = children.length; j >= 0; j--){ |
---|
613 | zone = children[j]; |
---|
614 | if(zone != null && zone.style.display != "none"){ |
---|
615 | dijit.focus(zone); |
---|
616 | dojo.stopEvent(event); |
---|
617 | found = true; |
---|
618 | break; |
---|
619 | } |
---|
620 | } |
---|
621 | if(found){ break }; |
---|
622 | } |
---|
623 | break; |
---|
624 | } |
---|
625 | } |
---|
626 | else{ |
---|
627 | if(focusNode.parentNode.parentNode == this.gridNode){ |
---|
628 | var child = (key == k.UP_ARROW || key == k.LEFT_ARROW) ? "lastChild" : "firstChild"; |
---|
629 | var pos = (key == k.UP_ARROW || key == k.LEFT_ARROW) ? "previousSibling" : "nextSibling"; |
---|
630 | switch(key){ |
---|
631 | case k.UP_ARROW: |
---|
632 | case k.DOWN_ARROW: |
---|
633 | dojo.stopEvent(event); |
---|
634 | found = false; |
---|
635 | var focusTemp = focusNode; |
---|
636 | while(!found){ |
---|
637 | children = focusTemp.parentNode.childNodes; |
---|
638 | var num = 0; |
---|
639 | for(i = 0; i < children.length; i++){ |
---|
640 | if(children[i].style.display != "none"){ num++ }; |
---|
641 | if(num > 1){ break; } |
---|
642 | } |
---|
643 | if(num == 1){ return; } |
---|
644 | if(focusTemp[pos] == null){ |
---|
645 | zone = focusTemp.parentNode[child]; |
---|
646 | } |
---|
647 | else{ |
---|
648 | zone = focusTemp[pos]; |
---|
649 | } |
---|
650 | if(zone.style.display === "none"){ |
---|
651 | focusTemp = zone; |
---|
652 | } |
---|
653 | else{ |
---|
654 | found = true; |
---|
655 | } |
---|
656 | } |
---|
657 | if(event.shiftKey){ |
---|
658 | var parent = focusNode.parentNode; |
---|
659 | for(i = 0; i < this.gridNode.childNodes.length; i++){ |
---|
660 | if(parent == this.gridNode.childNodes[i]){ |
---|
661 | break; |
---|
662 | } |
---|
663 | } |
---|
664 | children = this.gridNode.childNodes[i].childNodes; |
---|
665 | for(j = 0; j < children.length; j++){ |
---|
666 | if(zone == children[j]){ |
---|
667 | break; |
---|
668 | } |
---|
669 | } |
---|
670 | if(dojo.isMoz || dojo.isWebKit){ i-- }; |
---|
671 | |
---|
672 | widget = dijit.byNode(focusNode); |
---|
673 | if(!widget.dragRestriction){ |
---|
674 | r = m.removeDragItem(parent, focusNode); |
---|
675 | this.addChild(widget, i, j); |
---|
676 | dojo.attr(focusNode, "tabIndex", "0"); |
---|
677 | dijit.focus(focusNode); |
---|
678 | } |
---|
679 | else{ |
---|
680 | dojo.publish("/dojox/layout/gridContainer/moveRestriction", [this]); |
---|
681 | } |
---|
682 | } |
---|
683 | else{ |
---|
684 | dijit.focus(zone); |
---|
685 | } |
---|
686 | break; |
---|
687 | case k.RIGHT_ARROW: |
---|
688 | case k.LEFT_ARROW: |
---|
689 | dojo.stopEvent(event); |
---|
690 | if(event.shiftKey){ |
---|
691 | var z = 0; |
---|
692 | if(focusNode.parentNode[pos] == null){ |
---|
693 | if(dojo.isIE && key == k.LEFT_ARROW){ |
---|
694 | z = this.gridNode.childNodes.length-1; |
---|
695 | } |
---|
696 | } |
---|
697 | else if(focusNode.parentNode[pos].nodeType == 3){ |
---|
698 | z = this.gridNode.childNodes.length - 2; |
---|
699 | } |
---|
700 | else{ |
---|
701 | for(i = 0; i < this.gridNode.childNodes.length; i++){ |
---|
702 | if(focusNode.parentNode[pos] == this.gridNode.childNodes[i]){ |
---|
703 | break; |
---|
704 | } |
---|
705 | z++; |
---|
706 | } |
---|
707 | if(dojo.isMoz || dojo.isWebKit){ z-- }; |
---|
708 | } |
---|
709 | widget = dijit.byNode(focusNode); |
---|
710 | var _dndType = focusNode.getAttribute("dndtype"); |
---|
711 | if(_dndType == null){ |
---|
712 | //check if it's a dijit object |
---|
713 | if(widget && widget.dndType){ |
---|
714 | _dndType = widget.dndType.split(/\s*,\s*/); |
---|
715 | } |
---|
716 | else{ |
---|
717 | _dndType = ["text"]; |
---|
718 | } |
---|
719 | } |
---|
720 | else{ |
---|
721 | _dndType = _dndType.split(/\s*,\s*/); |
---|
722 | } |
---|
723 | var accept = false; |
---|
724 | for(i = 0; i < this.acceptTypes.length; i++){ |
---|
725 | for(j = 0; j < _dndType.length; j++){ |
---|
726 | if(_dndType[j] == this.acceptTypes[i]){ |
---|
727 | accept = true; |
---|
728 | break; |
---|
729 | } |
---|
730 | } |
---|
731 | } |
---|
732 | if(accept && !widget.dragRestriction){ |
---|
733 | var parentSource = focusNode.parentNode, |
---|
734 | place = 0; |
---|
735 | if(k.LEFT_ARROW == key){ |
---|
736 | var t = z; |
---|
737 | if(dojo.isMoz || dojo.isWebKit){ t = z + 1 }; |
---|
738 | place = this.gridNode.childNodes[t].childNodes.length; |
---|
739 | } |
---|
740 | // delete of manager : |
---|
741 | r = m.removeDragItem(parentSource, focusNode); |
---|
742 | this.addChild(widget, z, place); |
---|
743 | dojo.attr(r, "tabIndex", "0"); |
---|
744 | dijit.focus(r); |
---|
745 | } |
---|
746 | else{ |
---|
747 | dojo.publish("/dojox/layout/gridContainer/moveRestriction", [this]); |
---|
748 | } |
---|
749 | } |
---|
750 | else{ |
---|
751 | var node = focusNode.parentNode; |
---|
752 | while(zone === null){ |
---|
753 | if(node[pos] !== null && node[pos].nodeType !== 3){ |
---|
754 | node = node[pos]; |
---|
755 | } |
---|
756 | else{ |
---|
757 | if(pos === "previousSibling"){ |
---|
758 | node = node.parentNode.childNodes[node.parentNode.childNodes.length-1]; |
---|
759 | } |
---|
760 | else{ |
---|
761 | node = (dojo.isIE)? node.parentNode.childNodes[0]: node.parentNode.childNodes[1]; |
---|
762 | } |
---|
763 | } |
---|
764 | zone = node[child]; |
---|
765 | if(zone && zone.style.display == "none"){ |
---|
766 | // check that all elements are not hidden |
---|
767 | children = zone.parentNode.childNodes; |
---|
768 | var childToSelect = null; |
---|
769 | if(pos == "previousSibling"){ |
---|
770 | for(i = children.length-1; i >= 0; i--){ |
---|
771 | if(children[i].style.display != "none"){ |
---|
772 | childToSelect = children[i]; |
---|
773 | break; |
---|
774 | } |
---|
775 | } |
---|
776 | } |
---|
777 | else{ |
---|
778 | for(i = 0; i < children.length; i++){ |
---|
779 | if(children[i].style.display != "none"){ |
---|
780 | childToSelect = children[i]; |
---|
781 | break; |
---|
782 | } |
---|
783 | } |
---|
784 | } |
---|
785 | if(!childToSelect){ |
---|
786 | focusNode = zone; |
---|
787 | node = focusNode.parentNode; |
---|
788 | zone = null; |
---|
789 | } |
---|
790 | else{ |
---|
791 | zone = childToSelect; |
---|
792 | } |
---|
793 | } |
---|
794 | } |
---|
795 | dijit.focus(zone); |
---|
796 | } |
---|
797 | break; |
---|
798 | } |
---|
799 | } |
---|
800 | } |
---|
801 | }, |
---|
802 | |
---|
803 | destroy: function(){ |
---|
804 | //console.log("dojox.layout.GridContainerLite ::: destroy"); |
---|
805 | var m = this._dragManager; |
---|
806 | dojo.forEach(this._grid, function(dropZone){ |
---|
807 | m.unregister(dropZone.node); |
---|
808 | }); |
---|
809 | this.inherited(arguments); |
---|
810 | } |
---|
811 | }); |
---|
812 | |
---|
813 | dojo.extend(dijit._Widget, { |
---|
814 | |
---|
815 | // column: String |
---|
816 | // Column of the grid to place the widget. |
---|
817 | // Defined only if dojo.require("dojox.layout.GridContainerLite") is done. |
---|
818 | column : "1", |
---|
819 | |
---|
820 | // dragRestriction: Boolean |
---|
821 | // If true, the widget can not be draggable. |
---|
822 | // Defined only if dojo.require("dojox.layout.GridContainerLite") is done. |
---|
823 | dragRestriction : false |
---|
824 | }); |
---|
825 | return gcl; |
---|
826 | }); |
---|