OLD | NEW |
(Empty) | |
| 1 // Copyright (c) 2010 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. |
| 4 |
| 5 /** |
| 6 * The DetailsView handles the tabbed view that displays either the "log" or |
| 7 * "timeline" view. This class keeps track of what the current view is, and |
| 8 * invalidates the specific view each time the selected data has changed. |
| 9 * |
| 10 * @constructor |
| 11 */ |
| 12 function DetailsView(logTabHandleId, |
| 13 timelineTabHandleId, |
| 14 detailsTabContentId) { |
| 15 // The DOM nodes that which contain the tab title. |
| 16 this.tabHandles_ = {}; |
| 17 |
| 18 this.tabHandles_['timeline'] = document.getElementById(timelineTabHandleId); |
| 19 this.tabHandles_['log'] = document.getElementById(logTabHandleId); |
| 20 |
| 21 // The DOM node that contains the currently active tab sheet. |
| 22 this.contentArea_ = document.getElementById(detailsTabContentId); |
| 23 |
| 24 // Attach listeners to the "tab handles" so when you click them, it switches |
| 25 // active view. |
| 26 |
| 27 var self = this; |
| 28 |
| 29 this.tabHandles_['timeline'].onclick = function() { |
| 30 self.switchToView_('timeline'); |
| 31 }; |
| 32 |
| 33 this.tabHandles_['log'].onclick = function() { |
| 34 self.switchToView_('log'); |
| 35 }; |
| 36 |
| 37 this.currentData_ = []; |
| 38 |
| 39 // Default to the log view. |
| 40 this.switchToView_('log'); |
| 41 }; |
| 42 |
| 43 // The delay between updates to repaint. |
| 44 DetailsView.REPAINT_TIMEOUT_MS = 50; |
| 45 |
| 46 /** |
| 47 * Switches to the tab with name |viewName|. (Either 'log' or 'timeline'. |
| 48 */ |
| 49 DetailsView.prototype.switchToView_ = function(viewName) { |
| 50 if (this.currentView_) { |
| 51 // Remove the selected styling on currently selected tab. |
| 52 changeClassName(this.tabHandles_[this.currentView_], 'selected', false); |
| 53 } |
| 54 |
| 55 this.currentView_ = viewName; |
| 56 changeClassName(this.tabHandles_[this.currentView_], 'selected', true); |
| 57 this.repaint_(); |
| 58 }; |
| 59 |
| 60 /** |
| 61 * Updates the data this view is using. |
| 62 */ |
| 63 DetailsView.prototype.setData = function(currentData) { |
| 64 // Make a copy of the array (in case the caller mutates it), and sort it |
| 65 // by the source ID. |
| 66 this.currentData_ = DetailsView.createSortedCopy_(currentData); |
| 67 |
| 68 // Invalidate the view. |
| 69 if (!this.outstandingRepaint_) { |
| 70 this.outstandingRepaint_ = true; |
| 71 window.setTimeout(this.repaint_.bind(this), |
| 72 DetailsView.REPAINT_TIMEOUT_MS); |
| 73 } |
| 74 }; |
| 75 |
| 76 DetailsView.prototype.repaint_ = function() { |
| 77 this.outstandingRepaint_ = false; |
| 78 this.contentArea_.innerHTML = ''; |
| 79 |
| 80 if (this.currentView_ == 'log') { |
| 81 PaintLogView(this.currentData_, this.contentArea_); |
| 82 } else { |
| 83 PaintTimelineView(this.currentData_, this.contentArea_); |
| 84 } |
| 85 }; |
| 86 |
| 87 DetailsView.createSortedCopy_ = function(origArray) { |
| 88 var sortedArray = origArray.slice(0); |
| 89 sortedArray.sort(function(a, b) { |
| 90 return a.getSourceId() - b.getSourceId(); |
| 91 }); |
| 92 return sortedArray; |
| 93 }; |
OLD | NEW |