OLD | NEW |
| (Empty) |
1 /* | |
2 * Copyright (C) 2008 Apple Inc. All Rights Reserved. | |
3 * | |
4 * Redistribution and use in source and binary forms, with or without | |
5 * modification, are permitted provided that the following conditions | |
6 * are met: | |
7 * 1. Redistributions of source code must retain the above copyright | |
8 * notice, this list of conditions and the following disclaimer. | |
9 * 2. Redistributions in binary form must reproduce the above copyright | |
10 * notice, this list of conditions and the following disclaimer in the | |
11 * documentation and/or other materials provided with the distribution. | |
12 * | |
13 * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY | |
14 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE | |
15 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR | |
16 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR | |
17 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, | |
18 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, | |
19 * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR | |
20 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY | |
21 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT | |
22 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE | |
23 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. | |
24 */ | |
25 | |
26 WebInspector.DataGrid = function(columns) | |
27 { | |
28 this.element = document.createElement("div"); | |
29 this.element.className = "data-grid"; | |
30 this.element.tabIndex = 0; | |
31 this.element.addEventListener("keydown", this._keyDown.bind(this), false); | |
32 | |
33 this._headerTable = document.createElement("table"); | |
34 this._headerTable.className = "header"; | |
35 | |
36 this._dataTable = document.createElement("table"); | |
37 this._dataTable.className = "data"; | |
38 | |
39 this._dataTable.addEventListener("mousedown", this._mouseDownInDataTable.bin
d(this), true); | |
40 this._dataTable.addEventListener("click", this._clickInDataTable.bind(this),
true); | |
41 | |
42 this.aligned = {}; | |
43 | |
44 var scrollContainer = document.createElement("div"); | |
45 scrollContainer.className = "data-container"; | |
46 scrollContainer.appendChild(this._dataTable); | |
47 | |
48 this.element.appendChild(this._headerTable); | |
49 this.element.appendChild(scrollContainer); | |
50 | |
51 var headerRow = document.createElement("tr"); | |
52 var columnGroup = document.createElement("colgroup"); | |
53 var columnCount = 0; | |
54 | |
55 for (var columnIdentifier in columns) { | |
56 var column = columns[columnIdentifier]; | |
57 if (column.disclosure) | |
58 this.disclosureColumnIdentifier = columnIdentifier; | |
59 | |
60 var col = document.createElement("col"); | |
61 if (column.width) | |
62 col.style.width = column.width; | |
63 columnGroup.appendChild(col); | |
64 | |
65 var cell = document.createElement("th"); | |
66 cell.className = columnIdentifier + "-column"; | |
67 cell.columnIdentifier = columnIdentifier; | |
68 | |
69 var div = document.createElement("div"); | |
70 div.textContent = column.title; | |
71 cell.appendChild(div); | |
72 | |
73 if (column.sort) { | |
74 cell.addStyleClass("sort-" + column.sort); | |
75 this._sortColumnCell = cell; | |
76 } | |
77 | |
78 if (column.sortable) { | |
79 cell.addEventListener("click", this._clickInHeaderCell.bind(this), f
alse); | |
80 cell.addStyleClass("sortable"); | |
81 } | |
82 | |
83 if (column.aligned) { | |
84 cell.addStyleClass(column.aligned); | |
85 this.aligned[columnIdentifier] = column.aligned; | |
86 } | |
87 | |
88 headerRow.appendChild(cell); | |
89 | |
90 ++columnCount; | |
91 } | |
92 | |
93 columnGroup.span = columnCount; | |
94 | |
95 var cell = document.createElement("th"); | |
96 cell.className = "corner"; | |
97 headerRow.appendChild(cell); | |
98 | |
99 this._headerTableColumnGroup = columnGroup; | |
100 this._headerTable.appendChild(this._headerTableColumnGroup); | |
101 this.headerTableBody.appendChild(headerRow); | |
102 | |
103 var fillerRow = document.createElement("tr"); | |
104 fillerRow.className = "filler"; | |
105 | |
106 for (var i = 0; i < columnCount; ++i) { | |
107 var cell = document.createElement("td"); | |
108 fillerRow.appendChild(cell); | |
109 } | |
110 | |
111 this._dataTableColumnGroup = columnGroup.cloneNode(true); | |
112 this._dataTable.appendChild(this._dataTableColumnGroup); | |
113 this.dataTableBody.appendChild(fillerRow); | |
114 | |
115 this.columns = columns || {}; | |
116 this.children = []; | |
117 this.selectedNode = null; | |
118 this.expandNodesWhenArrowing = false; | |
119 this.root = true; | |
120 this.hasChildren = false; | |
121 this.expanded = true; | |
122 this.revealed = true; | |
123 this.selected = false; | |
124 this.dataGrid = this; | |
125 this.indentWidth = 15; | |
126 this.resizers = []; | |
127 this.columnWidthsInitialized = false; | |
128 } | |
129 | |
130 WebInspector.DataGrid.prototype = { | |
131 get sortColumnIdentifier() | |
132 { | |
133 if (!this._sortColumnCell) | |
134 return null; | |
135 return this._sortColumnCell.columnIdentifier; | |
136 }, | |
137 | |
138 get sortOrder() | |
139 { | |
140 if (!this._sortColumnCell || this._sortColumnCell.hasStyleClass("sort-as
cending")) | |
141 return "ascending"; | |
142 if (this._sortColumnCell.hasStyleClass("sort-descending")) | |
143 return "descending"; | |
144 return null; | |
145 }, | |
146 | |
147 get headerTableBody() | |
148 { | |
149 if ("_headerTableBody" in this) | |
150 return this._headerTableBody; | |
151 | |
152 this._headerTableBody = this._headerTable.getElementsByTagName("tbody")[
0]; | |
153 if (!this._headerTableBody) { | |
154 this._headerTableBody = this.element.ownerDocument.createElement("tb
ody"); | |
155 this._headerTable.insertBefore(this._headerTableBody, this._headerTa
ble.tFoot); | |
156 } | |
157 | |
158 return this._headerTableBody; | |
159 }, | |
160 | |
161 get dataTableBody() | |
162 { | |
163 if ("_dataTableBody" in this) | |
164 return this._dataTableBody; | |
165 | |
166 this._dataTableBody = this._dataTable.getElementsByTagName("tbody")[0]; | |
167 if (!this._dataTableBody) { | |
168 this._dataTableBody = this.element.ownerDocument.createElement("tbod
y"); | |
169 this._dataTable.insertBefore(this._dataTableBody, this._dataTable.tF
oot); | |
170 } | |
171 | |
172 return this._dataTableBody; | |
173 }, | |
174 | |
175 // Updates the widths of the table, including the positions of the column | |
176 // resizers. | |
177 // | |
178 // IMPORTANT: This function MUST be called once after the element of the | |
179 // DataGrid is attached to its parent element and every subsequent time the | |
180 // width of the parent element is changed in order to make it possible to | |
181 // resize the columns. | |
182 // | |
183 // If this function is not called after the DataGrid is attached to its | |
184 // parent element, then the DataGrid's columns will not be resizable. | |
185 updateWidths: function() | |
186 { | |
187 var headerTableColumns = this._headerTableColumnGroup.children; | |
188 | |
189 var left = 0; | |
190 var tableWidth = this._dataTable.offsetWidth; | |
191 var numColumns = headerTableColumns.length; | |
192 | |
193 if (!this.columnWidthsInitialized) { | |
194 // Give all the columns initial widths now so that during a resize, | |
195 // when the two columns that get resized get a percent value for | |
196 // their widths, all the other columns already have percent values | |
197 // for their widths. | |
198 for (var i = 0; i < numColumns; i++) { | |
199 var columnWidth = this.headerTableBody.rows[0].cells[i].offsetWi
dth; | |
200 var percentWidth = ((columnWidth / tableWidth) * 100) + "%"; | |
201 this._headerTableColumnGroup.children[i].style.width = percentWi
dth; | |
202 this._dataTableColumnGroup.children[i].style.width = percentWidt
h; | |
203 } | |
204 this.columnWidthsInitialized = true; | |
205 } | |
206 | |
207 // Make n - 1 resizers for n columns. | |
208 for (var i = 0; i < numColumns - 1; i++) { | |
209 var resizer = this.resizers[i]; | |
210 | |
211 if (!resizer) { | |
212 // This is the first call to updateWidth, so the resizers need | |
213 // to be created. | |
214 resizer = document.createElement("div"); | |
215 resizer.addStyleClass("data-grid-resizer"); | |
216 // This resizer is associated with the column to its right. | |
217 resizer.rightNeighboringColumnID = i + 1; | |
218 resizer.addEventListener("mousedown", this._startResizerDragging
.bind(this), false); | |
219 this.element.appendChild(resizer); | |
220 this.resizers[i] = resizer; | |
221 } | |
222 | |
223 // Get the width of the cell in the first (and only) row of the | |
224 // header table in order to determine the width of the column, since | |
225 // it is not possible to query a column for its width. | |
226 left += this.headerTableBody.rows[0].cells[i].offsetWidth; | |
227 | |
228 resizer.style.left = left + "px"; | |
229 } | |
230 }, | |
231 | |
232 addCreationNode: function(hasChildren) | |
233 { | |
234 if (this.creationNode) | |
235 this.creationNode.makeNormal(); | |
236 | |
237 var emptyData = {}; | |
238 for (var column in this.columns) | |
239 emptyData[column] = ''; | |
240 this.creationNode = new WebInspector.CreationDataGridNode(emptyData, has
Children); | |
241 this.appendChild(this.creationNode); | |
242 }, | |
243 | |
244 appendChild: function(child) | |
245 { | |
246 this.insertChild(child, this.children.length); | |
247 }, | |
248 | |
249 insertChild: function(child, index) | |
250 { | |
251 if (!child) | |
252 throw("insertChild: Node can't be undefined or null."); | |
253 if (child.parent === this) | |
254 throw("insertChild: Node is already a child of this node."); | |
255 | |
256 if (child.parent) | |
257 child.parent.removeChild(child); | |
258 | |
259 this.children.splice(index, 0, child); | |
260 this.hasChildren = true; | |
261 | |
262 child.parent = this; | |
263 child.dataGrid = this.dataGrid; | |
264 child._recalculateSiblings(index); | |
265 | |
266 delete child._depth; | |
267 delete child._revealed; | |
268 delete child._attached; | |
269 | |
270 var current = child.children[0]; | |
271 while (current) { | |
272 current.dataGrid = this.dataGrid; | |
273 delete current._depth; | |
274 delete current._revealed; | |
275 delete current._attached; | |
276 current = current.traverseNextNode(false, child, true); | |
277 } | |
278 | |
279 if (this.expanded) | |
280 child._attach(); | |
281 }, | |
282 | |
283 removeChild: function(child) | |
284 { | |
285 if (!child) | |
286 throw("removeChild: Node can't be undefined or null."); | |
287 if (child.parent !== this) | |
288 throw("removeChild: Node is not a child of this node."); | |
289 | |
290 child.deselect(); | |
291 | |
292 this.children.remove(child, true); | |
293 | |
294 if (child.previousSibling) | |
295 child.previousSibling.nextSibling = child.nextSibling; | |
296 if (child.nextSibling) | |
297 child.nextSibling.previousSibling = child.previousSibling; | |
298 | |
299 child.dataGrid = null; | |
300 child.parent = null; | |
301 child.nextSibling = null; | |
302 child.previousSibling = null; | |
303 | |
304 if (this.children.length <= 0) | |
305 this.hasChildren = false; | |
306 }, | |
307 | |
308 removeChildren: function() | |
309 { | |
310 for (var i = 0; i < this.children.length; ++i) { | |
311 var child = this.children[i]; | |
312 child.deselect(); | |
313 child._detach(); | |
314 | |
315 child.dataGrid = null; | |
316 child.parent = null; | |
317 child.nextSibling = null; | |
318 child.previousSibling = null; | |
319 } | |
320 | |
321 this.children = []; | |
322 this.hasChildren = false; | |
323 }, | |
324 | |
325 removeChildrenRecursive: function() | |
326 { | |
327 var childrenToRemove = this.children; | |
328 | |
329 var child = this.children[0]; | |
330 while (child) { | |
331 if (child.children.length) | |
332 childrenToRemove = childrenToRemove.concat(child.children); | |
333 child = child.traverseNextNode(false, this, true); | |
334 } | |
335 | |
336 for (var i = 0; i < childrenToRemove.length; ++i) { | |
337 var child = childrenToRemove[i]; | |
338 child.deselect(); | |
339 child._detach(); | |
340 | |
341 child.children = []; | |
342 child.dataGrid = null; | |
343 child.parent = null; | |
344 child.nextSibling = null; | |
345 child.previousSibling = null; | |
346 } | |
347 | |
348 this.children = []; | |
349 }, | |
350 | |
351 handleKeyEvent: function(event) | |
352 { | |
353 if (!this.selectedNode || event.shiftKey || event.metaKey || event.ctrlK
ey) | |
354 return false; | |
355 | |
356 var handled = false; | |
357 var nextSelectedNode; | |
358 if (event.keyIdentifier === "Up" && !event.altKey) { | |
359 nextSelectedNode = this.selectedNode.traversePreviousNode(true); | |
360 while (nextSelectedNode && !nextSelectedNode.selectable) | |
361 nextSelectedNode = nextSelectedNode.traversePreviousNode(!this.e
xpandTreeNodesWhenArrowing); | |
362 handled = nextSelectedNode ? true : false; | |
363 } else if (event.keyIdentifier === "Down" && !event.altKey) { | |
364 nextSelectedNode = this.selectedNode.traverseNextNode(true); | |
365 while (nextSelectedNode && !nextSelectedNode.selectable) | |
366 nextSelectedNode = nextSelectedNode.traverseNextNode(!this.expan
dTreeNodesWhenArrowing); | |
367 handled = nextSelectedNode ? true : false; | |
368 } else if (event.keyIdentifier === "Left") { | |
369 if (this.selectedNode.expanded) { | |
370 if (event.altKey) | |
371 this.selectedNode.collapseRecursively(); | |
372 else | |
373 this.selectedNode.collapse(); | |
374 handled = true; | |
375 } else if (this.selectedNode.parent && !this.selectedNode.parent.roo
t) { | |
376 handled = true; | |
377 if (this.selectedNode.parent.selectable) { | |
378 nextSelectedNode = this.selectedNode.parent; | |
379 handled = nextSelectedNode ? true : false; | |
380 } else if (this.selectedNode.parent) | |
381 this.selectedNode.parent.collapse(); | |
382 } | |
383 } else if (event.keyIdentifier === "Right") { | |
384 if (!this.selectedNode.revealed) { | |
385 this.selectedNode.reveal(); | |
386 handled = true; | |
387 } else if (this.selectedNode.hasChildren) { | |
388 handled = true; | |
389 if (this.selectedNode.expanded) { | |
390 nextSelectedNode = this.selectedNode.children[0]; | |
391 handled = nextSelectedNode ? true : false; | |
392 } else { | |
393 if (event.altKey) | |
394 this.selectedNode.expandRecursively(); | |
395 else | |
396 this.selectedNode.expand(); | |
397 } | |
398 } | |
399 } | |
400 | |
401 if (nextSelectedNode) { | |
402 nextSelectedNode.reveal(); | |
403 nextSelectedNode.select(); | |
404 } | |
405 | |
406 if (handled) { | |
407 event.preventDefault(); | |
408 event.stopPropagation(); | |
409 } | |
410 | |
411 return handled; | |
412 }, | |
413 | |
414 expand: function() | |
415 { | |
416 // This is the root, do nothing. | |
417 }, | |
418 | |
419 collapse: function() | |
420 { | |
421 // This is the root, do nothing. | |
422 }, | |
423 | |
424 reveal: function() | |
425 { | |
426 // This is the root, do nothing. | |
427 }, | |
428 | |
429 dataGridNodeFromEvent: function(event) | |
430 { | |
431 var rowElement = event.target.enclosingNodeOrSelfWithNodeName("tr"); | |
432 return rowElement._dataGridNode; | |
433 }, | |
434 | |
435 dataGridNodeFromPoint: function(x, y) | |
436 { | |
437 var node = this._dataTable.ownerDocument.elementFromPoint(x, y); | |
438 var rowElement = node.enclosingNodeOrSelfWithNodeName("tr"); | |
439 return rowElement._dataGridNode; | |
440 }, | |
441 | |
442 _keyDown: function(event) | |
443 { | |
444 this.handleKeyEvent(event); | |
445 }, | |
446 | |
447 _clickInHeaderCell: function(event) | |
448 { | |
449 var cell = event.target.enclosingNodeOrSelfWithNodeName("th"); | |
450 if (!cell || !cell.columnIdentifier || !cell.hasStyleClass("sortable")) | |
451 return; | |
452 | |
453 var sortOrder = this.sortOrder; | |
454 | |
455 if (this._sortColumnCell) { | |
456 this._sortColumnCell.removeStyleClass("sort-ascending"); | |
457 this._sortColumnCell.removeStyleClass("sort-descending"); | |
458 } | |
459 | |
460 if (cell == this._sortColumnCell) { | |
461 if (sortOrder == "ascending") | |
462 sortOrder = "descending"; | |
463 else | |
464 sortOrder = "ascending"; | |
465 } | |
466 | |
467 this._sortColumnCell = cell; | |
468 | |
469 cell.addStyleClass("sort-" + sortOrder); | |
470 | |
471 this.dispatchEventToListeners("sorting changed"); | |
472 }, | |
473 | |
474 _mouseDownInDataTable: function(event) | |
475 { | |
476 var gridNode = this.dataGridNodeFromEvent(event); | |
477 if (!gridNode || !gridNode.selectable) | |
478 return; | |
479 | |
480 if (gridNode.isEventWithinDisclosureTriangle(event)) | |
481 return; | |
482 | |
483 if (event.metaKey) { | |
484 if (gridNode.selected) | |
485 gridNode.deselect(); | |
486 else | |
487 gridNode.select(); | |
488 } else | |
489 gridNode.select(); | |
490 }, | |
491 | |
492 _clickInDataTable: function(event) | |
493 { | |
494 var gridNode = this.dataGridNodeFromEvent(event); | |
495 if (!gridNode || !gridNode.hasChildren) | |
496 return; | |
497 | |
498 if (!gridNode.isEventWithinDisclosureTriangle(event)) | |
499 return; | |
500 | |
501 if (gridNode.expanded) { | |
502 if (event.altKey) | |
503 gridNode.collapseRecursively(); | |
504 else | |
505 gridNode.collapse(); | |
506 } else { | |
507 if (event.altKey) | |
508 gridNode.expandRecursively(); | |
509 else | |
510 gridNode.expand(); | |
511 } | |
512 }, | |
513 | |
514 _startResizerDragging: function(event) | |
515 { | |
516 this.currentResizer = event.target; | |
517 if (!this.currentResizer.rightNeighboringColumnID) | |
518 return; | |
519 WebInspector.elementDragStart(this.lastResizer, this._resizerDragging.bi
nd(this), | |
520 this._endResizerDragging.bind(this), event, "col-resize"); | |
521 }, | |
522 | |
523 _resizerDragging: function(event) | |
524 { | |
525 var resizer = this.currentResizer; | |
526 if (!resizer) | |
527 return; | |
528 | |
529 // Constrain the dragpoint to be within the containing div of the | |
530 // datagrid. | |
531 var dragPoint = event.clientX - this.element.totalOffsetLeft; | |
532 // Constrain the dragpoint to be within the space made up by the | |
533 // column directly to the left and the column directly to the right. | |
534 var leftEdgeOfPreviousColumn = 0; | |
535 var firstRowCells = this.headerTableBody.rows[0].cells; | |
536 for (var i = 0; i < resizer.rightNeighboringColumnID - 1; i++) | |
537 leftEdgeOfPreviousColumn += firstRowCells[i].offsetWidth; | |
538 | |
539 var rightEdgeOfNextColumn = leftEdgeOfPreviousColumn + firstRowCells[res
izer.rightNeighboringColumnID - 1].offsetWidth + firstRowCells[resizer.rightNeig
hboringColumnID].offsetWidth; | |
540 | |
541 // Give each column some padding so that they don't disappear.
| |
542 var leftMinimum = leftEdgeOfPreviousColumn + this.ColumnResizePadding; | |
543 var rightMaximum = rightEdgeOfNextColumn - this.ColumnResizePadding; | |
544 | |
545 dragPoint = Number.constrain(dragPoint, leftMinimum, rightMaximum); | |
546 | |
547 resizer.style.left = (dragPoint - this.CenterResizerOverBorderAdjustment
) + "px"; | |
548 | |
549 var percentLeftColumn = (((dragPoint - leftEdgeOfPreviousColumn) / this.
_dataTable.offsetWidth) * 100) + "%"; | |
550 this._headerTableColumnGroup.children[resizer.rightNeighboringColumnID -
1].style.width = percentLeftColumn; | |
551 this._dataTableColumnGroup.children[resizer.rightNeighboringColumnID - 1
].style.width = percentLeftColumn; | |
552 | |
553 var percentRightColumn = (((rightEdgeOfNextColumn - dragPoint) / this._d
ataTable.offsetWidth) * 100) + "%"; | |
554 this._headerTableColumnGroup.children[resizer.rightNeighboringColumnID].
style.width = percentRightColumn; | |
555 this._dataTableColumnGroup.children[resizer.rightNeighboringColumnID].st
yle.width = percentRightColumn; | |
556 | |
557 event.preventDefault(); | |
558 }, | |
559 | |
560 _endResizerDragging: function(event) | |
561 { | |
562 WebInspector.elementDragEnd(event); | |
563 this.currentResizer = null; | |
564 }, | |
565 | |
566 ColumnResizePadding: 10, | |
567 | |
568 CenterResizerOverBorderAdjustment: 3, | |
569 } | |
570 | |
571 WebInspector.DataGrid.prototype.__proto__ = WebInspector.Object.prototype; | |
572 | |
573 WebInspector.DataGridNode = function(data, hasChildren) | |
574 { | |
575 this._expanded = false; | |
576 this._selected = false; | |
577 this._shouldRefreshChildren = true; | |
578 this._data = data || {}; | |
579 this.hasChildren = hasChildren || false; | |
580 this.children = []; | |
581 this.dataGrid = null; | |
582 this.parent = null; | |
583 this.previousSibling = null; | |
584 this.nextSibling = null; | |
585 this.disclosureToggleWidth = 10; | |
586 } | |
587 | |
588 WebInspector.DataGridNode.prototype = { | |
589 selectable: true, | |
590 | |
591 get element() | |
592 { | |
593 if (this._element) | |
594 return this._element; | |
595 | |
596 if (!this.dataGrid) | |
597 return null; | |
598 | |
599 this._element = document.createElement("tr"); | |
600 this._element._dataGridNode = this; | |
601 | |
602 if (this.hasChildren) | |
603 this._element.addStyleClass("parent"); | |
604 if (this.expanded) | |
605 this._element.addStyleClass("expanded"); | |
606 if (this.selected) | |
607 this._element.addStyleClass("selected"); | |
608 if (this.revealed) | |
609 this._element.addStyleClass("revealed"); | |
610 | |
611 for (var columnIdentifier in this.dataGrid.columns) { | |
612 var cell = this.createCell(columnIdentifier); | |
613 this._element.appendChild(cell); | |
614 } | |
615 | |
616 return this._element; | |
617 }, | |
618 | |
619 get data() | |
620 { | |
621 return this._data; | |
622 }, | |
623 | |
624 set data(x) | |
625 { | |
626 this._data = x || {}; | |
627 this.refresh(); | |
628 }, | |
629 | |
630 get revealed() | |
631 { | |
632 if ("_revealed" in this) | |
633 return this._revealed; | |
634 | |
635 var currentAncestor = this.parent; | |
636 while (currentAncestor && !currentAncestor.root) { | |
637 if (!currentAncestor.expanded) { | |
638 this._revealed = false; | |
639 return false; | |
640 } | |
641 | |
642 currentAncestor = currentAncestor.parent; | |
643 } | |
644 | |
645 this._revealed = true; | |
646 return true; | |
647 }, | |
648 | |
649 set hasChildren(x) | |
650 { | |
651 if (this._hasChildren === x) | |
652 return; | |
653 | |
654 this._hasChildren = x; | |
655 | |
656 if (!this._element) | |
657 return; | |
658 | |
659 if (this._hasChildren) | |
660 { | |
661 this._element.addStyleClass("parent"); | |
662 if (this.expanded) | |
663 this._element.addStyleClass("expanded"); | |
664 } | |
665 else | |
666 { | |
667 this._element.removeStyleClass("parent"); | |
668 this._element.removeStyleClass("expanded"); | |
669 } | |
670 }, | |
671 | |
672 get hasChildren() | |
673 { | |
674 return this._hasChildren; | |
675 }, | |
676 | |
677 set revealed(x) | |
678 { | |
679 if (this._revealed === x) | |
680 return; | |
681 | |
682 this._revealed = x; | |
683 | |
684 if (this._element) { | |
685 if (this._revealed) | |
686 this._element.addStyleClass("revealed"); | |
687 else | |
688 this._element.removeStyleClass("revealed"); | |
689 } | |
690 | |
691 for (var i = 0; i < this.children.length; ++i) | |
692 this.children[i].revealed = x && this.expanded; | |
693 }, | |
694 | |
695 get depth() | |
696 { | |
697 if ("_depth" in this) | |
698 return this._depth; | |
699 if (this.parent && !this.parent.root) | |
700 this._depth = this.parent.depth + 1; | |
701 else | |
702 this._depth = 0; | |
703 return this._depth; | |
704 }, | |
705 | |
706 get shouldRefreshChildren() | |
707 { | |
708 return this._shouldRefreshChildren; | |
709 }, | |
710 | |
711 set shouldRefreshChildren(x) | |
712 { | |
713 this._shouldRefreshChildren = x; | |
714 if (x && this.expanded) | |
715 this.expand(); | |
716 }, | |
717 | |
718 get selected() | |
719 { | |
720 return this._selected; | |
721 }, | |
722 | |
723 set selected(x) | |
724 { | |
725 if (x) | |
726 this.select(); | |
727 else | |
728 this.deselect(); | |
729 }, | |
730 | |
731 get expanded() | |
732 { | |
733 return this._expanded; | |
734 }, | |
735 | |
736 set expanded(x) | |
737 { | |
738 if (x) | |
739 this.expand(); | |
740 else | |
741 this.collapse(); | |
742 }, | |
743 | |
744 refresh: function() | |
745 { | |
746 if (!this._element || !this.dataGrid) | |
747 return; | |
748 | |
749 this._element.removeChildren(); | |
750 | |
751 for (var columnIdentifier in this.dataGrid.columns) { | |
752 var cell = this.createCell(columnIdentifier); | |
753 this._element.appendChild(cell); | |
754 } | |
755 }, | |
756 | |
757 createCell: function(columnIdentifier) | |
758 { | |
759 var cell = document.createElement("td"); | |
760 cell.className = columnIdentifier + "-column"; | |
761 | |
762 var alignment = this.dataGrid.aligned[columnIdentifier]; | |
763 if (alignment) | |
764 cell.addStyleClass(alignment); | |
765 | |
766 var div = document.createElement("div"); | |
767 div.textContent = this.data[columnIdentifier]; | |
768 cell.appendChild(div); | |
769 | |
770 if (columnIdentifier === this.dataGrid.disclosureColumnIdentifier) { | |
771 cell.addStyleClass("disclosure"); | |
772 if (this.depth) | |
773 cell.style.setProperty("padding-left", (this.depth * this.dataGr
id.indentWidth) + "px"); | |
774 } | |
775 | |
776 return cell; | |
777 }, | |
778 | |
779 // Share these functions with DataGrid. They are written to work with a Data
GridNode this object. | |
780 appendChild: WebInspector.DataGrid.prototype.appendChild, | |
781 insertChild: WebInspector.DataGrid.prototype.insertChild, | |
782 removeChild: WebInspector.DataGrid.prototype.removeChild, | |
783 removeChildren: WebInspector.DataGrid.prototype.removeChildren, | |
784 removeChildrenRecursive: WebInspector.DataGrid.prototype.removeChildrenRecur
sive, | |
785 | |
786 _recalculateSiblings: function(myIndex) | |
787 { | |
788 if (!this.parent) | |
789 return; | |
790 | |
791 var previousChild = (myIndex > 0 ? this.parent.children[myIndex - 1] : n
ull); | |
792 | |
793 if (previousChild) { | |
794 previousChild.nextSibling = this; | |
795 this.previousSibling = previousChild; | |
796 } else | |
797 this.previousSibling = null; | |
798 | |
799 var nextChild = this.parent.children[myIndex + 1]; | |
800 | |
801 if (nextChild) { | |
802 nextChild.previousSibling = this; | |
803 this.nextSibling = nextChild; | |
804 } else | |
805 this.nextSibling = null; | |
806 }, | |
807 | |
808 collapse: function() | |
809 { | |
810 if (this._element) | |
811 this._element.removeStyleClass("expanded"); | |
812 | |
813 this._expanded = false; | |
814 | |
815 for (var i = 0; i < this.children.length; ++i) | |
816 this.children[i].revealed = false; | |
817 | |
818 this.dispatchEventToListeners("collapsed"); | |
819 }, | |
820 | |
821 collapseRecursively: function() | |
822 { | |
823 var item = this; | |
824 while (item) { | |
825 if (item.expanded) | |
826 item.collapse(); | |
827 item = item.traverseNextNode(false, this, true); | |
828 } | |
829 }, | |
830 | |
831 expand: function() | |
832 { | |
833 if (!this.hasChildren || this.expanded) | |
834 return; | |
835 | |
836 if (this.revealed && !this._shouldRefreshChildren) | |
837 for (var i = 0; i < this.children.length; ++i) | |
838 this.children[i].revealed = true; | |
839 | |
840 if (this._shouldRefreshChildren) { | |
841 for (var i = 0; i < this.children.length; ++i) | |
842 this.children[i]._detach(); | |
843 | |
844 this.dispatchEventToListeners("populate"); | |
845 | |
846 if (this._attached) { | |
847 for (var i = 0; i < this.children.length; ++i) { | |
848 var child = this.children[i]; | |
849 if (this.revealed) | |
850 child.revealed = true; | |
851 child._attach(); | |
852 } | |
853 } | |
854 | |
855 delete this._shouldRefreshChildren; | |
856 } | |
857 | |
858 if (this._element) | |
859 this._element.addStyleClass("expanded"); | |
860 | |
861 this._expanded = true; | |
862 | |
863 this.dispatchEventToListeners("expanded"); | |
864 }, | |
865 | |
866 expandRecursively: function() | |
867 { | |
868 var item = this; | |
869 while (item) { | |
870 item.expand(); | |
871 item = item.traverseNextNode(false, this); | |
872 } | |
873 }, | |
874 | |
875 reveal: function() | |
876 { | |
877 var currentAncestor = this.parent; | |
878 while (currentAncestor && !currentAncestor.root) { | |
879 if (!currentAncestor.expanded) | |
880 currentAncestor.expand(); | |
881 currentAncestor = currentAncestor.parent; | |
882 } | |
883 | |
884 this.element.scrollIntoViewIfNeeded(false); | |
885 | |
886 this.dispatchEventToListeners("revealed"); | |
887 }, | |
888 | |
889 select: function(supressSelectedEvent) | |
890 { | |
891 if (!this.dataGrid || !this.selectable || this.selected) | |
892 return; | |
893 | |
894 if (this.dataGrid.selectedNode) | |
895 this.dataGrid.selectedNode.deselect(); | |
896 | |
897 this._selected = true; | |
898 this.dataGrid.selectedNode = this; | |
899 | |
900 if (this._element) | |
901 this._element.addStyleClass("selected"); | |
902 | |
903 if (!supressSelectedEvent) | |
904 this.dispatchEventToListeners("selected"); | |
905 }, | |
906 | |
907 deselect: function(supressDeselectedEvent) | |
908 { | |
909 if (!this.dataGrid || this.dataGrid.selectedNode !== this || !this.selec
ted) | |
910 return; | |
911 | |
912 this._selected = false; | |
913 this.dataGrid.selectedNode = null; | |
914 | |
915 if (this._element) | |
916 this._element.removeStyleClass("selected"); | |
917 | |
918 if (!supressDeselectedEvent) | |
919 this.dispatchEventToListeners("deselected"); | |
920 }, | |
921 | |
922 traverseNextNode: function(skipHidden, stayWithin, dontPopulate, info) | |
923 { | |
924 if (!dontPopulate && this.hasChildren) | |
925 this.dispatchEventToListeners("populate"); | |
926 | |
927 if (info) | |
928 info.depthChange = 0; | |
929 | |
930 var node = (!skipHidden || this.revealed) ? this.children[0] : null; | |
931 if (node && (!skipHidden || this.expanded)) { | |
932 if (info) | |
933 info.depthChange = 1; | |
934 return node; | |
935 } | |
936 | |
937 if (this === stayWithin) | |
938 return null; | |
939 | |
940 node = (!skipHidden || this.revealed) ? this.nextSibling : null; | |
941 if (node) | |
942 return node; | |
943 | |
944 node = this; | |
945 while (node && !node.root && !((!skipHidden || node.revealed) ? node.nex
tSibling : null) && node.parent !== stayWithin) { | |
946 if (info) | |
947 info.depthChange -= 1; | |
948 node = node.parent; | |
949 } | |
950 | |
951 if (!node) | |
952 return null; | |
953 | |
954 return (!skipHidden || node.revealed) ? node.nextSibling : null; | |
955 }, | |
956 | |
957 traversePreviousNode: function(skipHidden, dontPopulate) | |
958 { | |
959 var node = (!skipHidden || this.revealed) ? this.previousSibling : null; | |
960 if (!dontPopulate && node && node.hasChildren) | |
961 node.dispatchEventToListeners("populate"); | |
962 | |
963 while (node && ((!skipHidden || (node.revealed && node.expanded)) ? node
.children[node.children.length - 1] : null)) { | |
964 if (!dontPopulate && node.hasChildren) | |
965 node.dispatchEventToListeners("populate"); | |
966 node = ((!skipHidden || (node.revealed && node.expanded)) ? node.chi
ldren[node.children.length - 1] : null); | |
967 } | |
968 | |
969 if (node) | |
970 return node; | |
971 | |
972 if (!this.parent || this.parent.root) | |
973 return null; | |
974 | |
975 return this.parent; | |
976 }, | |
977 | |
978 isEventWithinDisclosureTriangle: function(event) | |
979 { | |
980 if (!this.hasChildren) | |
981 return false; | |
982 var cell = event.target.enclosingNodeOrSelfWithNodeName("td"); | |
983 if (!cell.hasStyleClass("disclosure")) | |
984 return false; | |
985 var computedLeftPadding = window.getComputedStyle(cell).getPropertyCSSVa
lue("padding-left").getFloatValue(CSSPrimitiveValue.CSS_PX); | |
986 var left = cell.totalOffsetLeft + computedLeftPadding; | |
987 return event.pageX >= left && event.pageX <= left + this.disclosureToggl
eWidth; | |
988 }, | |
989 | |
990 _attach: function() | |
991 { | |
992 if (!this.dataGrid || this._attached) | |
993 return; | |
994 | |
995 this._attached = true; | |
996 | |
997 var nextNode = null; | |
998 var previousNode = this.traversePreviousNode(true, true); | |
999 if (previousNode && previousNode.element.parentNode && previousNode.elem
ent.nextSibling) | |
1000 var nextNode = previousNode.element.nextSibling; | |
1001 if (!nextNode) | |
1002 nextNode = this.dataGrid.dataTableBody.lastChild; | |
1003 this.dataGrid.dataTableBody.insertBefore(this.element, nextNode); | |
1004 | |
1005 if (this.expanded) | |
1006 for (var i = 0; i < this.children.length; ++i) | |
1007 this.children[i]._attach(); | |
1008 }, | |
1009 | |
1010 _detach: function() | |
1011 { | |
1012 if (!this._attached) | |
1013 return; | |
1014 | |
1015 this._attached = false; | |
1016 | |
1017 if (this._element && this._element.parentNode) | |
1018 this._element.parentNode.removeChild(this._element); | |
1019 | |
1020 for (var i = 0; i < this.children.length; ++i) | |
1021 this.children[i]._detach(); | |
1022 } | |
1023 } | |
1024 | |
1025 WebInspector.DataGridNode.prototype.__proto__ = WebInspector.Object.prototype; | |
1026 | |
1027 WebInspector.CreationDataGridNode = function(data, hasChildren) | |
1028 { | |
1029 WebInspector.DataGridNode.call(this, data, hasChildren); | |
1030 this.isCreationNode = true; | |
1031 } | |
1032 | |
1033 WebInspector.CreationDataGridNode.prototype = { | |
1034 makeNormal: function() | |
1035 { | |
1036 delete this.isCreationNode; | |
1037 delete this.makeNormal; | |
1038 } | |
1039 } | |
1040 | |
1041 WebInspector.CreationDataGridNode.prototype.__proto__ = WebInspector.DataGridNod
e.prototype; | |
OLD | NEW |