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 |