Bug 993014 - Tree and table widgets for devtools, r=bgrins
This commit is contained in:
Girish Sharma
926
browser/devtools/shared/widgets/TableWidget.js
Normal file
926
browser/devtools/shared/widgets/TableWidget.js
Normal file
@@ -0,0 +1,926 @@
|
||||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
"use strict";
|
||||
|
||||
const { Cu } = require("chrome");
|
||||
|
||||
const EventEmitter = require("devtools/toolkit/event-emitter");
|
||||
const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
|
||||
const HTML_NS = "http://www.w3.org/1999/xhtml";
|
||||
|
||||
|
||||
// Different types of events emitted by the Various components of the TableWidget
|
||||
const EVENTS = {
|
||||
TABLE_CLEARED: "table-cleared",
|
||||
COLUMN_SORTED: "column-sorted",
|
||||
COLUMN_TOGGLED: "column-toggled",
|
||||
ROW_SELECTED: "row-selected",
|
||||
ROW_UPDATED: "row-updated",
|
||||
HEADER_CONTEXT_MENU: "header-context-menu",
|
||||
ROW_CONTEXT_MENU: "row-context-menu"
|
||||
};
|
||||
|
||||
// Maximum number of character visible in any cell in the table. This is to avoid
|
||||
// making the cell take up all the space in a row.
|
||||
const MAX_VISIBLE_STRING_SIZE = 100;
|
||||
|
||||
/**
|
||||
* A table widget with various features like resizble/toggleable columns,
|
||||
* sorting, keyboard navigation etc.
|
||||
*
|
||||
* @param {nsIDOMNode} node
|
||||
* The container element for the table widget.
|
||||
* @param {object} options
|
||||
* - initialColumns: map of key vs display name for initial columns of
|
||||
* the table. See @setupColumns for more info.
|
||||
* - uniqueId: the column which will be the unique identifier of each
|
||||
* entry in the table. Default: name.
|
||||
* - emptyText: text to display when no entries in the table to display.
|
||||
* - highlightUpdated: true to highlight the changed/added row.
|
||||
* - removableColumns: Whether columns are removeable. If set to true,
|
||||
* the context menu in the headers will not appear.
|
||||
*/
|
||||
function TableWidget(node, options={}) {
|
||||
EventEmitter.decorate(this);
|
||||
|
||||
this.document = node.ownerDocument;
|
||||
this.window = this.document.defaultView;
|
||||
this._parent = node;
|
||||
|
||||
let {initialColumns, emptyText, uniqueId, highlightUpdated, removableColumns} =
|
||||
options;
|
||||
this.emptyText = emptyText || "";
|
||||
this.uniqueId = uniqueId || "name";
|
||||
this.highlightUpdated = highlightUpdated || false;
|
||||
this.removableColumns = removableColumns || false;
|
||||
|
||||
this.tbody = this.document.createElementNS(XUL_NS, "hbox");
|
||||
this.tbody.className = "table-widget-body theme-body";
|
||||
this.tbody.setAttribute("flex", "1");
|
||||
this.tbody.setAttribute("tabindex", "0");
|
||||
this._parent.appendChild(this.tbody);
|
||||
|
||||
this.placeholder = this.document.createElementNS(XUL_NS, "label");
|
||||
this.placeholder.className = "plain table-widget-empty-text";
|
||||
this.placeholder.setAttribute("flex", "1");
|
||||
this._parent.appendChild(this.placeholder);
|
||||
|
||||
this.items = new Map();
|
||||
this.columns = new Map();
|
||||
|
||||
// Setup the column headers context menu to allow users to hide columns at will
|
||||
if (this.removableColumns) {
|
||||
this.onPopupCommand = this.onPopupCommand.bind(this)
|
||||
this.setupHeadersContextMenu();
|
||||
}
|
||||
|
||||
if (initialColumns) {
|
||||
this.setColumns(initialColumns, uniqueId);
|
||||
} else if (this.emptyText) {
|
||||
this.setPlaceholderText(this.emptyText);
|
||||
}
|
||||
|
||||
this.bindSelectedRow = (event, id) => {
|
||||
this.selectedRow = id;
|
||||
};
|
||||
this.on(EVENTS.ROW_SELECTED, this.bindSelectedRow);
|
||||
};
|
||||
|
||||
TableWidget.prototype = {
|
||||
|
||||
items: null,
|
||||
|
||||
/**
|
||||
* Getter for the headers context menu popup id.
|
||||
*/
|
||||
get headersContextMenu() {
|
||||
if (this.menupopup) {
|
||||
return this.menupopup.id;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
/**
|
||||
* Select the row corresponding to the json object `id`
|
||||
*/
|
||||
set selectedRow(id) {
|
||||
for (let column of this.columns.values()) {
|
||||
column.selectRow(id[this.uniqueId] || id);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns the json object corresponding to the selected row.
|
||||
*/
|
||||
get selectedRow() {
|
||||
return this.items.get(this.columns.get(this.uniqueId).selectedRow);
|
||||
},
|
||||
|
||||
/**
|
||||
* Selects the row at index `index`.
|
||||
*/
|
||||
set selectedIndex(index) {
|
||||
for (let column of this.columns.values()) {
|
||||
column.selectRowAt(index);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns the index of the selected row.
|
||||
*/
|
||||
get selectedIndex() {
|
||||
return this.columns.get(this.uniqueId).selectedIndex;
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
this.off(EVENTS.ROW_SELECTED, this.bindSelectedRow);
|
||||
if (this.menupopup) {
|
||||
this.menupopup.remove();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets the text to be shown when the table is empty.
|
||||
*/
|
||||
setPlaceholderText: function(text) {
|
||||
this.placeholder.setAttribute("value", text);
|
||||
},
|
||||
|
||||
/**
|
||||
* Prepares the context menu for the headers of the table columns. This context
|
||||
* menu allows users to toggle various columns, only with an exception of the
|
||||
* unique columns and when only two columns are visible in the table.
|
||||
*/
|
||||
setupHeadersContextMenu: function() {
|
||||
let popupset = this.document.getElementsByTagName("popupset")[0];
|
||||
if (!popupset) {
|
||||
popupset = this.document.createElementNS(XUL_NS, "popupset");
|
||||
this.document.documentElement.appendChild(popupset);
|
||||
}
|
||||
|
||||
this.menupopup = this.document.createElementNS(XUL_NS, "menupopup");
|
||||
this.menupopup.id = "table-widget-column-select";
|
||||
this.menupopup.addEventListener("command", this.onPopupCommand);
|
||||
popupset.appendChild(this.menupopup);
|
||||
this.populateMenuPopup();
|
||||
},
|
||||
|
||||
/**
|
||||
* Populates the header context menu with the names of the columns along with
|
||||
* displaying which columns are hidden or visible.
|
||||
*/
|
||||
populateMenuPopup: function() {
|
||||
if (!this.menupopup) {
|
||||
return;
|
||||
}
|
||||
|
||||
while (this.menupopup.firstChild) {
|
||||
this.menupopup.firstChild.remove();
|
||||
}
|
||||
|
||||
for (let column of this.columns.values()) {
|
||||
let menuitem = this.document.createElementNS(XUL_NS, "menuitem");
|
||||
menuitem.setAttribute("label", column.header.getAttribute("value"));
|
||||
menuitem.setAttribute("data-id", column.id);
|
||||
menuitem.setAttribute("type", "checkbox");
|
||||
menuitem.setAttribute("checked", !column.wrapper.getAttribute("hidden"));
|
||||
if (column.id == this.uniqueId) {
|
||||
menuitem.setAttribute("disabled", "true");
|
||||
}
|
||||
this.menupopup.appendChild(menuitem);
|
||||
}
|
||||
let checked = this.menupopup.querySelectorAll("menuitem[checked]");
|
||||
if (checked.length == 2) {
|
||||
checked[checked.length - 1].setAttribute("disabled", "true");
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Event handler for the `command` event on the column headers context menu
|
||||
*/
|
||||
onPopupCommand: function(event) {
|
||||
let item = event.originalTarget;
|
||||
let checked = !!item.getAttribute("checked");
|
||||
let id = item.getAttribute("data-id");
|
||||
this.emit(EVENTS.HEADER_CONTEXT_MENU, id, checked);
|
||||
let checked = this.menupopup.querySelectorAll("menuitem[checked]");
|
||||
let disabled = this.menupopup.querySelectorAll("menuitem[disabled]");
|
||||
if (checked.length == 2) {
|
||||
checked[checked.length - 1].setAttribute("disabled", "true");
|
||||
} else if (disabled.length > 1) {
|
||||
disabled[disabled.length - 1].removeAttribute("disabled");
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Creates the columns in the table. Without calling this method, data cannot
|
||||
* be inserted into the table unless `initialColumns` was supplied.
|
||||
*
|
||||
* @param {object} columns
|
||||
* A key value pair representing the columns of the table. Where the
|
||||
* key represents the id of the column and the value is the displayed
|
||||
* label in the header of the column.
|
||||
* @param {string} sortOn
|
||||
* The id of the column on which the table will be initially sorted on.
|
||||
* @param {array} hiddenColumns
|
||||
* Ids of all the columns that are hidden by default.
|
||||
*/
|
||||
setColumns: function(columns, sortOn = this.sortedOn, hiddenColumns = []) {
|
||||
for (let column of this.columns.values()) {
|
||||
column.destroy();
|
||||
}
|
||||
|
||||
this.columns.clear();
|
||||
|
||||
if (!(sortOn in columns)) {
|
||||
sortOn = null;
|
||||
}
|
||||
|
||||
for (let id in columns) {
|
||||
if (!sortOn) {
|
||||
sortOn = id;
|
||||
}
|
||||
this.columns.set(id, new Column(this, id, columns[id]));
|
||||
if (hiddenColumns.indexOf(id) > -1) {
|
||||
this.columns.get(id).toggleColumn();
|
||||
}
|
||||
}
|
||||
this.sortedOn = sortOn;
|
||||
this.sortBy(this.sortedOn);
|
||||
this.populateMenuPopup();
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns true if the passed string or the row json object corresponds to the
|
||||
* selected item in the table.
|
||||
*/
|
||||
isSelected: function(item) {
|
||||
if (typeof item == "object") {
|
||||
item = item[this.uniqueId];
|
||||
}
|
||||
|
||||
return item == this.selectedRow[this.uniqueId];
|
||||
},
|
||||
|
||||
/**
|
||||
* Selects the row corresponding to the `id` json.
|
||||
*/
|
||||
selectRow: function(id) {
|
||||
this.selectedRow = id;
|
||||
},
|
||||
|
||||
/**
|
||||
* Selects the next row. Cycles over to the first row if last row is selected
|
||||
*/
|
||||
selectNextRow: function() {
|
||||
for (let column of this.columns.values()) {
|
||||
column.selectNextRow();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Selects the previous row. Cycles over to the last row if first row is selected
|
||||
*/
|
||||
selectPreviousRow: function() {
|
||||
for (let column of this.columns.values()) {
|
||||
column.selectPreviousRow();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Clears any selected row.
|
||||
*/
|
||||
clearSelection: function() {
|
||||
this.selectedIndex = -1;
|
||||
},
|
||||
|
||||
/**
|
||||
* Adds a row into the table.
|
||||
*
|
||||
* @param {object} item
|
||||
* The object from which the key-value pairs will be taken and added
|
||||
* into the row. This object can have any arbitarary key value pairs,
|
||||
* but only those will be used whose keys match to the ids of the
|
||||
* columns.
|
||||
* @param {boolean} suppressFlash
|
||||
* true to not flash the row while inserting the row.
|
||||
*/
|
||||
push: function(item, suppressFlash) {
|
||||
if (!this.sortedOn || !this.columns) {
|
||||
Cu.reportError("Can't insert item without defining columns first");
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.items.has(item[this.uniqueId])) {
|
||||
this.update(item);
|
||||
return;
|
||||
}
|
||||
|
||||
let index = this.columns.get(this.sortedOn).push(item);
|
||||
for (let [key, column] of this.columns) {
|
||||
if (key != this.sortedOn) {
|
||||
column.insertAt(item, index);
|
||||
}
|
||||
}
|
||||
this.items.set(item[this.uniqueId], item);
|
||||
this.tbody.removeAttribute("empty");
|
||||
if (!suppressFlash) {
|
||||
this.emit(EVENTS.ROW_UPDATED, item[this.uniqueId]);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Removes the row associated with the `item` object.
|
||||
*/
|
||||
remove: function(item) {
|
||||
if (typeof item == "string") {
|
||||
item = this.items.get(item);
|
||||
}
|
||||
let removed = this.items.delete(item[this.uniqueId]);
|
||||
|
||||
if (!removed) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (let column of this.columns.values()) {
|
||||
column.remove(item);
|
||||
}
|
||||
if (this.items.size == 0) {
|
||||
this.tbody.setAttribute("empty", "empty");
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Updates the items in the row corresponding to the `item` object previously
|
||||
* used to insert the row using `push` method. The linking is done via the
|
||||
* `uniqueId` key's value.
|
||||
*/
|
||||
update: function(item) {
|
||||
let oldItem = this.items.get(item[this.uniqueId]);
|
||||
if (!oldItem) {
|
||||
return;
|
||||
}
|
||||
this.items.set(item[this.uniqueId], item);
|
||||
|
||||
let changed = false;
|
||||
for (let column of this.columns.values()) {
|
||||
if (item[column.id] != oldItem[column.id]) {
|
||||
column.update(item);
|
||||
changed = true;
|
||||
}
|
||||
}
|
||||
if (changed) {
|
||||
this.emit(EVENTS.ROW_UPDATED, item[this.uniqueId]);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Removes all of the rows from the table.
|
||||
*/
|
||||
clear: function() {
|
||||
this.items.clear();
|
||||
for (let column of this.columns.values()) {
|
||||
column.clear();
|
||||
}
|
||||
this.tbody.setAttribute("empty", "empty");
|
||||
this.setPlaceholderText(this.emptyText);
|
||||
},
|
||||
|
||||
/**
|
||||
* Sorts the table by a given column.
|
||||
*
|
||||
* @param {string} column
|
||||
* The id of the column on which the table should be sorted.
|
||||
*/
|
||||
sortBy: function(column) {
|
||||
this.emit(EVENTS.COLUMN_SORTED, column);
|
||||
this.sortedOn = column;
|
||||
|
||||
if (!this.items.size) {
|
||||
return;
|
||||
}
|
||||
|
||||
let sortedItems = this.columns.get(column).sort([...this.items.values()]);
|
||||
for (let [id, column] of this.columns) {
|
||||
if (id != column) {
|
||||
column.sort(sortedItems);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
TableWidget.EVENTS = EVENTS;
|
||||
|
||||
module.exports.TableWidget = TableWidget;
|
||||
|
||||
/**
|
||||
* A single column object in the table.
|
||||
*
|
||||
* @param {TableWidget} table
|
||||
* The table object to which the column belongs.
|
||||
* @param {string} id
|
||||
* Id of the column.
|
||||
* @param {String} header
|
||||
* The displayed string on the column's header.
|
||||
*/
|
||||
function Column(table, id, header) {
|
||||
this.tbody = table.tbody;
|
||||
this.document = table.document;
|
||||
this.window = table.window;
|
||||
this.id = id;
|
||||
this.uniqueId = table.uniqueId;
|
||||
this.table = table;
|
||||
this.cells = [];
|
||||
this.items = {};
|
||||
|
||||
this.highlightUpdated = table.highlightUpdated;
|
||||
|
||||
// This wrapping element is required solely so that position:sticky works on
|
||||
// the headers of the columns.
|
||||
this.wrapper = this.document.createElementNS(XUL_NS, "vbox");
|
||||
this.wrapper.className = "table-widget-wrapper";
|
||||
this.wrapper.setAttribute("flex", "1");
|
||||
this.wrapper.setAttribute("tabindex", "0");
|
||||
this.tbody.appendChild(this.wrapper);
|
||||
|
||||
this.splitter = this.document.createElementNS(XUL_NS, "splitter");
|
||||
this.splitter.className = "devtools-side-splitter";
|
||||
this.tbody.appendChild(this.splitter);
|
||||
|
||||
this.column = this.document.createElementNS(HTML_NS, "div");
|
||||
this.column.id = id;
|
||||
this.column.className = "table-widget-column";
|
||||
this.wrapper.appendChild(this.column);
|
||||
|
||||
this.header = this.document.createElementNS(XUL_NS, "label");
|
||||
this.header.className = "plain devtools-toolbar table-widget-column-header";
|
||||
this.header.setAttribute("value", header);
|
||||
this.column.appendChild(this.header);
|
||||
if (table.headersContextMenu) {
|
||||
this.header.setAttribute("context", table.headersContextMenu);
|
||||
}
|
||||
this.toggleColumn = this.toggleColumn.bind(this);
|
||||
this.table.on(EVENTS.HEADER_CONTEXT_MENU, this.toggleColumn);
|
||||
|
||||
this.onColumnSorted = this.onColumnSorted.bind(this);
|
||||
this.table.on(EVENTS.COLUMN_SORTED, this.onColumnSorted);
|
||||
|
||||
this.onRowUpdated = this.onRowUpdated.bind(this);
|
||||
this.table.on(EVENTS.ROW_UPDATED, this.onRowUpdated);
|
||||
|
||||
this.onClick = this.onClick.bind(this);
|
||||
this.onMousedown = this.onMousedown.bind(this);
|
||||
this.onKeydown = this.onKeydown.bind(this);
|
||||
this.column.addEventListener("click", this.onClick);
|
||||
this.column.addEventListener("mousedown", this.onMousedown);
|
||||
this.column.addEventListener("keydown", this.onKeydown);
|
||||
}
|
||||
|
||||
Column.prototype = {
|
||||
|
||||
// items is a cell-id to cell-index map. It is basically a reverse map of the
|
||||
// this.cells object and is used to quickly reverse lookup a cell by its id
|
||||
// instead of looping through the cells array. This reverse map is not kept
|
||||
// upto date in sync with the cells array as updating it is in itself a loop
|
||||
// through all the cells of the columns. Thus update it on demand when it goes
|
||||
// out of sync with this.cells.
|
||||
items: null,
|
||||
|
||||
// _itemsDirty is a flag which becomes true when this.items goes out of sync
|
||||
// with this.cells
|
||||
_itemsDirty: null,
|
||||
|
||||
selectedRow: null,
|
||||
|
||||
cells: null,
|
||||
|
||||
/**
|
||||
* Gets whether the table is sorted on this column or not.
|
||||
* 0 - not sorted.
|
||||
* 1 - ascending order
|
||||
* 2 - descending order
|
||||
*/
|
||||
get sorted() {
|
||||
return this._sortState || 0;
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets the sorted value
|
||||
*/
|
||||
set sorted(value) {
|
||||
if (!value) {
|
||||
this.header.removeAttribute("sorted");
|
||||
} else {
|
||||
this.header.setAttribute("sorted",
|
||||
value == 1 ? "ascending" : "descending");
|
||||
}
|
||||
this._sortState = value;
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the selected row in the column.
|
||||
*/
|
||||
get selectedIndex() {
|
||||
if (!this.selectedRow) {
|
||||
return -1;
|
||||
}
|
||||
return this.items[this.selectedRow];
|
||||
},
|
||||
|
||||
/**
|
||||
* Called when the column is sorted by.
|
||||
*
|
||||
* @param {string} event
|
||||
* The event name of the event. i.e. EVENTS.COLUMN_SORTED
|
||||
* @param {string} column
|
||||
* The id of the column being sorted by.
|
||||
*/
|
||||
onColumnSorted: function(event, column) {
|
||||
if (column != this.id) {
|
||||
this.sorted = 0;
|
||||
return;
|
||||
} else if (this.sorted == 0 || this.sorted == 2) {
|
||||
this.sorted = 1;
|
||||
} else {
|
||||
this.sorted = 2;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Called when a row is updated.
|
||||
*
|
||||
* @param {string} event
|
||||
* The event name of the event. i.e. EVENTS.ROW_UPDATED
|
||||
* @param {string} id
|
||||
* The unique id of the object associated with the row.
|
||||
*/
|
||||
onRowUpdated: function(event, id) {
|
||||
this._updateItems();
|
||||
if (this.highlightUpdated && this.items[id] != null) {
|
||||
this.cells[this.items[id]].flash();
|
||||
}
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
this.table.off(EVENTS.COLUMN_SORTED, this.onColumnSorted);
|
||||
this.table.off(EVENTS.HEADER_CONTEXT_MENU, this.toggleColumn);
|
||||
this.table.off(EVENTS.ROW_UPDATED, this.onRowUpdated);
|
||||
this.splitter.remove();
|
||||
this.column.parentNode.remove();
|
||||
this.cells = null;
|
||||
this.items = null;
|
||||
this.selectedRow = null;
|
||||
},
|
||||
|
||||
/**
|
||||
* Selects the row at the `index` index
|
||||
*/
|
||||
selectRowAt: function(index) {
|
||||
if (this.selectedRow) {
|
||||
this.cells[this.items[this.selectedRow]].toggleClass("theme-selected");
|
||||
}
|
||||
if (index < 0) {
|
||||
this.selectedRow = null;
|
||||
return;
|
||||
}
|
||||
let cell = this.cells[index];
|
||||
cell.toggleClass("theme-selected");
|
||||
cell.focus();
|
||||
this.selectedRow = cell.id;
|
||||
},
|
||||
|
||||
/**
|
||||
* Selects the row with the object having the `uniqueId` value as `id`
|
||||
*/
|
||||
selectRow: function(id) {
|
||||
this._updateItems();
|
||||
this.selectRowAt(this.items[id]);
|
||||
},
|
||||
|
||||
/**
|
||||
* Selects the next row. Cycles to first if last row is selected.
|
||||
*/
|
||||
selectNextRow: function() {
|
||||
this._updateItems();
|
||||
let index = this.items[this.selectedRow] + 1;
|
||||
if (index == this.cells.length) {
|
||||
index = 0;
|
||||
}
|
||||
this.selectRowAt(index);
|
||||
},
|
||||
|
||||
/**
|
||||
* Selects the previous row. Cycles to last if first row is selected.
|
||||
*/
|
||||
selectPreviousRow: function() {
|
||||
this._updateItems();
|
||||
let index = this.items[this.selectedRow] - 1;
|
||||
if (index == -1) {
|
||||
index = this.cells.length - 1;
|
||||
}
|
||||
this.selectRowAt(index);
|
||||
},
|
||||
|
||||
/**
|
||||
* Pushes the `item` object into the column. If this column is sorted on,
|
||||
* then inserts the object at the right position based on the column's id key's
|
||||
* value.
|
||||
*
|
||||
* @returns {number}
|
||||
* The index of the currently pushed item.
|
||||
*/
|
||||
push: function(item) {
|
||||
let value = item[this.id];
|
||||
|
||||
if (this.sorted) {
|
||||
let index;
|
||||
if (this.sorted == 1) {
|
||||
index = this.cells.findIndex(element => {
|
||||
return value < element.value;
|
||||
});
|
||||
} else {
|
||||
index = this.cells.findIndex(element => {
|
||||
return value > element.value;
|
||||
});
|
||||
}
|
||||
index = index >= 0 ? index : this.cells.length;
|
||||
if (index < this.cells.length) {
|
||||
this._itemsDirty = true;
|
||||
}
|
||||
this.items[item[this.uniqueId]] = index;
|
||||
this.cells.splice(index, 0, new Cell(this, item, this.cells[index]));
|
||||
return index;
|
||||
}
|
||||
|
||||
this.items[item[this.uniqueId]] = this.cells.length;
|
||||
return this.cells.push(new Cell(this, item)) - 1;
|
||||
},
|
||||
|
||||
/**
|
||||
* Inserts the `item` object at the given `index` index in the table.
|
||||
*/
|
||||
insertAt: function(item, index) {
|
||||
if (index < this.cells.length) {
|
||||
this._itemsDirty = true;
|
||||
}
|
||||
this.items[item[this.uniqueId]] = index;
|
||||
this.cells.splice(index, 0, new Cell(this, item, this.cells[index]));
|
||||
},
|
||||
|
||||
/**
|
||||
* Event handler for the command event coming from the header context menu.
|
||||
* Toggles the column if it was requested by the user.
|
||||
*
|
||||
* @param {string} event
|
||||
* The name of the event. i.e. EVENTS.HEADER_CONTEXT_MENU
|
||||
* @param {string} id
|
||||
* Id of the column to be toggled
|
||||
* @param {string} checked
|
||||
* true if the column is visible
|
||||
*/
|
||||
toggleColumn: function(event, id, checked) {
|
||||
if (id != this.id) {
|
||||
return;
|
||||
}
|
||||
if (checked) {
|
||||
this.wrapper.removeAttribute("hidden");
|
||||
} else {
|
||||
this.wrapper.setAttribute("hidden", "true");
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Removes the corresponding item from the column.
|
||||
*/
|
||||
remove: function(item) {
|
||||
this._updateItems();
|
||||
let index = this.items[item[this.uniqueId]];
|
||||
if (index == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (index < this.cells.length) {
|
||||
this._itemsDirty = true;
|
||||
}
|
||||
this.cells[index].destroy();
|
||||
this.cells.splice(index, 1);
|
||||
delete this.items[item[this.uniqueId]];
|
||||
},
|
||||
|
||||
/**
|
||||
* Updates the corresponding item from the column.
|
||||
*/
|
||||
update: function(item) {
|
||||
this._updateItems();
|
||||
|
||||
let index = this.items[item[this.uniqueId]];
|
||||
if (index == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.cells[index].value = item[this.id];
|
||||
},
|
||||
|
||||
/**
|
||||
* Updates the `this.items` cell-id vs cell-index map to be in sync with
|
||||
* `this.cells`.
|
||||
*/
|
||||
_updateItems: function() {
|
||||
if (!this._itemsDirty) {
|
||||
return;
|
||||
}
|
||||
for (let i = 0; i < this.cells.length; i++) {
|
||||
this.items[this.cells[i].id] = i;
|
||||
}
|
||||
this._itemsDirty = false;
|
||||
},
|
||||
|
||||
/**
|
||||
* Clears the current column
|
||||
*/
|
||||
clear: function() {
|
||||
this.cells = [];
|
||||
this.items = {};
|
||||
this._itemsDirty = false;
|
||||
this.selectedRow = null;
|
||||
while (this.header.nextSibling) {
|
||||
this.header.nextSibling.remove();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Sorts the given items and returns the sorted list if the table was sorted
|
||||
* by this column.
|
||||
*/
|
||||
sort: function(items) {
|
||||
|
||||
// Only sort the array if we are sorting based on this column
|
||||
if (this.sorted == 1) {
|
||||
items.sort((a, b) => {
|
||||
return a[this.id] > b[this.id]
|
||||
});
|
||||
} else if (this.sorted > 1) {
|
||||
items.sort((a, b) => {
|
||||
return b[this.id] > a[this.id]
|
||||
});
|
||||
}
|
||||
|
||||
if (this.selectedRow) {
|
||||
this.cells[this.items[this.selectedRow]].toggleClass("theme-selected");
|
||||
}
|
||||
this.items = {};
|
||||
// Otherwise, just use the sorted array passed to update the cells value.
|
||||
items.forEach((item, i) => {
|
||||
this.items[item[this.uniqueId]] = i;
|
||||
this.cells[i].value = item[this.id];
|
||||
this.cells[i].id = item[this.uniqueId];
|
||||
});
|
||||
if (this.selectedRow) {
|
||||
this.cells[this.items[this.selectedRow]].toggleClass("theme-selected");
|
||||
}
|
||||
this._itemsDirty = false;
|
||||
return items;
|
||||
},
|
||||
|
||||
/**
|
||||
* Click event handler for the column. Used to detect click on header for
|
||||
* for sorting.
|
||||
*/
|
||||
onClick: function(event) {
|
||||
if (event.originalTarget == this.column) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.button == 0 && event.originalTarget == this.header) {
|
||||
return this.table.sortBy(this.id);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Mousedown event handler for the column. Used to select rows.
|
||||
*/
|
||||
onMousedown: function(event) {
|
||||
if (event.originalTarget == this.column ||
|
||||
event.originalTarget == this.header) {
|
||||
return;
|
||||
}
|
||||
if (event.button == 0) {
|
||||
this.table.emit(EVENTS.ROW_SELECTED,
|
||||
event.originalTarget.getAttribute("data-id"));
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Keydown event handler for the column. Used for keyboard navigation amongst
|
||||
* rows.
|
||||
*/
|
||||
onKeydown: function(event) {
|
||||
if (event.originalTarget == this.column ||
|
||||
event.originalTarget == this.header) {
|
||||
return;
|
||||
}
|
||||
|
||||
switch (event.keyCode) {
|
||||
case event.DOM_VK_ESCAPE:
|
||||
case event.DOM_VK_LEFT:
|
||||
case event.DOM_VK_RIGHT:
|
||||
return;
|
||||
case event.DOM_VK_HOME:
|
||||
case event.DOM_VK_END:
|
||||
return;
|
||||
case event.DOM_VK_UP:
|
||||
event.preventDefault();
|
||||
let prevRow = event.originalTarget.previousSibling;
|
||||
if (this.header == prevRow) {
|
||||
prevRow = this.column.lastChild;
|
||||
}
|
||||
this.table.emit(EVENTS.ROW_SELECTED, prevRow.getAttribute("data-id"));
|
||||
break;
|
||||
|
||||
case event.DOM_VK_DOWN:
|
||||
event.preventDefault();
|
||||
let nextRow = event.originalTarget.nextSibling ||
|
||||
this.header.nextSibling;
|
||||
this.table.emit(EVENTS.ROW_SELECTED, nextRow.getAttribute("data-id"));
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* A single cell in a column
|
||||
*
|
||||
* @param {Column} column
|
||||
* The column object to which the cell belongs.
|
||||
* @param {object} item
|
||||
* The object representing the row.
|
||||
* @param {Cell} nextCell
|
||||
* The cell object which is next to this cell. null if this cell is last
|
||||
* cell of the column
|
||||
*/
|
||||
function Cell(column, item, nextCell) {
|
||||
let document = column.document;
|
||||
|
||||
this.label = document.createElementNS(XUL_NS, "label");
|
||||
this.label.setAttribute("crop", "end");
|
||||
this.label.className = "plain table-widget-cell";
|
||||
if (nextCell) {
|
||||
column.column.insertBefore(this.label, nextCell.label);
|
||||
} else {
|
||||
column.column.appendChild(this.label);
|
||||
}
|
||||
|
||||
this.value = item[column.id];
|
||||
this.id = item[column.uniqueId];
|
||||
}
|
||||
|
||||
Cell.prototype = {
|
||||
|
||||
set id(value) {
|
||||
this._id = value;
|
||||
this.label.setAttribute("data-id", value);
|
||||
},
|
||||
|
||||
get id() {
|
||||
return this._id;
|
||||
},
|
||||
|
||||
set value(value) {
|
||||
this._value = value;
|
||||
if (!value) {
|
||||
this.label.setAttribute("value", "");
|
||||
return;
|
||||
}
|
||||
if (value.length > MAX_VISIBLE_STRING_SIZE) {
|
||||
value = value .substr(0, MAX_VISIBLE_STRING_SIZE) + "\u2026"; // …
|
||||
}
|
||||
this.label.setAttribute("value", value + "");
|
||||
},
|
||||
|
||||
get value() {
|
||||
return this._value;
|
||||
},
|
||||
|
||||
toggleClass: function(className) {
|
||||
this.label.classList.toggle(className);
|
||||
},
|
||||
|
||||
/**
|
||||
* Flashes the cell for a brief time. This when done for ith cells in all
|
||||
* columns, makes it look like the row is being highlighted/flashed.
|
||||
*/
|
||||
flash: function() {
|
||||
this.label.classList.remove("flash-out");
|
||||
this.label.classList.add("flash-out");
|
||||
},
|
||||
|
||||
focus: function() {
|
||||
this.label.focus();
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
this.label.remove();
|
||||
this.label = null;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user