tsanie/ui-lib
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

.

Browse Source
This commit is contained in:
Tsanie Lily 2023-04-04 08:58:57 +08:00
parent 3c1cbdf22e
commit de1ba82970
2 changed files with 60 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
lib/ui/grid.html
View File

@ -14,7 +14,28 @@
const Grid = window["lib-ui"].Grid;
const grid = new Grid(document.querySelector('#grid-sample'));
// grid.height = 0;
const statusCol = {
...Grid.GridColumn,
create() {
const container = document.createElement('div');
return container;
},
// createEdit() { },
setValue(element, val) {
element.innerHTML = val;
},
getValue(element) {
return element.innerHTML;
},
setEnabled(element, enabled) {
element.className = enabled === false ? 'disabled' : '';
}
};
grid.allowHtml = true;
grid.height = 0;
grid.columns = [
{ key: 'c1', caption: 'column 1' },
{ key: 'c2', caption: 'column 2', allcheck: true, type: Grid.ColumnTypes.Checkbox, enabled: 'enabled' },
@ -30,14 +51,25 @@
],
enabled: 'enabled'
},
{
key: 'c2b',
caption: 'column 2 b',
type: statusCol,
enabled: 'enabled'
},
{ key: 'c3', caption: 'column 3', width: 90 },
{ key: 'c4', caption: 'Note', type: Grid.ColumnTypes.Input }
];
grid.cellClicked = (rId, cId) => console.log(`row (${rId}), column (${cId}) clicked.`);
grid.cellClicked = (rId, cId) => {
console.log(`row (${rId}), column (${cId}) clicked.`);
return false;
};
grid.rowDblClicked = (rId) => console.log(`row (${rId}) double clicked.`);
grid.cellDblClicked = (rId, cId) => console.log(`row (${rId}), column (${cId}) double clicked.`);
grid.init();
grid.source = [
{ c1: 'abc', c2: true, c2a: 'off', c3: 12345, c4: 'another note', enabled: false },
{ c1: 'abc2bbbbaaaaa', c2: false, c2a: 'pending', c3: 1225, c4: 'Note note this is note' },
{ c1: 'abc', c2: true, c2a: 'off', c2b: '<font style="color: red; margin-left: 8px">red</font>', c3: 12345, c4: 'another note', enabled: false },
{ c1: 'abc2bbbbaaaaa', c2: false, c2a: 'pending', c2b: '<b style="margin-left: 8px">bold</b>', c3: 1225, c4: 'Note note this is note' },
{ c1: 'type', c2: false, c2a: 'broken', c3: 121111 },
{ c1: 'diff', c2: true, c2a: 'running', c3: 124445555555555555 },
{ c1: 'diff', c2: true, c2a: 'running', c3: 12499 },

47
lib/ui/grid.js
View File

@ -1,4 +1,5 @@
import { isMobile, global, nullOrEmpty, throttle, truncate, isPositive } from "../utility";
import { global, isPositive, isMobile, throttle, truncate } from "../utility";
import { nullOrEmpty } from "../utility/strings";
import { r } from "../utility/lgres";
import { createIcon } from "../ui/icon";
import { createCheckbox } from "../ui/checkbox";
@ -195,6 +196,8 @@ class Grid {
isCheckbox(type) { return type === 3 }
};
static GridColumn = GridColumn;
constructor(container) {
this.#parent = container;
}
@ -496,7 +499,7 @@ class Grid {
hidden.style.display = 'none';
if (col.sortable === true) {
hidden.dataset.key = col.key;
hidden.addEventListener('mouseup', e => this.#onHeaderClicked(col, e, true));
hidden.addEventListener('click', e => this.#onHeaderClicked(col, e, true));
}
header.appendChild(hidden);
continue;
@ -540,7 +543,7 @@ class Grid {
th.style.setProperty(css[0], css[1]);
}
th.style.cursor = col.sortable ? 'pointer' : 'auto';
th.addEventListener('mouseup', e => this.#onHeaderClicked(col, e));
th.addEventListener('click', e => this.#onHeaderClicked(col, e));
th.addEventListener('mousedown', e => this.#onDragStart(col, e));
const wrapper = document.createElement('div');
th.appendChild(wrapper);
@ -617,6 +620,16 @@ class Grid {
// body content
const bodyContent = document.createElement('table');
bodyContent.className = 'grid-body-content';
bodyContent.addEventListener('mousedown', e => {
let { parent, target } = this.#getRowTarget(e.target);
const rowIndex = [...parent.parentElement.children].indexOf(parent);
let colIndex = [...parent.children].indexOf(target);
if (colIndex >= this.columns.length) {
colIndex = -1;
}
this.#onRowClicked(e, rowIndex, colIndex);
});
bodyContent.addEventListener('dblclick', e => this.#onRowDblClicked(e));
bodyContainer.appendChild(bodyContent);
// this.#adjustRows();
// events
@ -632,7 +645,7 @@ class Grid {
});
holder.addEventListener('dblclick', e => this.#onRowDblClicked(e));
bodyContainer.appendChild(holder);
body.addEventListener('mousemove', e => throttle(this.#onBodyMouseMove, RefreshInterval, this, e, holder));
body.addEventListener('mousemove', e => throttle(this.#onBodyMouseMove, RefreshInterval, this, e, holder), { passive: true });
}
this.#refs.body = body;
this.#refs.bodyContainer = bodyContainer;
@ -655,8 +668,8 @@ class Grid {
for (let i = 0; i < count; i += 1) {
const row = document.createElement('tr');
row.className = 'grid-row';
row.addEventListener('mousedown', e => this.#onRowClicked(e, exists + i));
row.addEventListener('dblclick', e => this.#onRowDblClicked(e));
// row.addEventListener('mousedown', e => this.#onRowClicked(e, exists + i));
// row.addEventListener('dblclick', e => this.#onRowDblClicked(e));
cols.forEach((col, j) => {
const cell = document.createElement('td');
if (col.visible !== false) {
@ -859,19 +872,12 @@ class Grid {
return top;
}
#getColumnIndex(target) {
if (target == null) {
return -1;
}
#getRowTarget(target) {
let parent;
while ((parent = target.parentElement) != null && !parent.classList.contains('grid-row')) {
target = parent;
}
if (parent == null) {
return -1;
}
const index = [...parent.children].indexOf(target);
return index >= this.columns.length ? -1 : index;
return { parent, target };
}
#onHeaderClicked(col, e, force) {
@ -937,14 +943,10 @@ class Grid {
}
#onBodyMouseMove(e, holder) {
let target = e.target;
if (target.classList.contains('grid-hover-holder')) {
if (e.target.classList.contains('grid-hover-holder')) {
return;
}
let parent;
while ((parent = target.parentElement) != null && !parent.classList.contains('grid-row')) {
target = parent;
}
let { parent, target } = this.#getRowTarget(e.target);
let keyid = target.keyid;
if (parent == null || keyid == null) {
delete holder.keyid;
@ -1050,7 +1052,6 @@ class Grid {
this.selectedRowChanged(selectedIndex);
}
}
colIndex ??= this.#getColumnIndex(e.target);
this.#selectedColumnIndex = colIndex;
if ((this.fullrowClick || colIndex >= 0) && e.buttons === 1 && typeof this.cellClicked === 'function') {
if (this.cellClicked(selectedIndex, colIndex) === false) {
@ -1069,7 +1070,7 @@ class Grid {
}
if (typeof this.cellDblClicked === 'function') {
const colIndex = this.#selectedColumnIndex;
if ((this.fullrowClick || colIndex >= 0) && e.buttons === 1) {
if (this.fullrowClick || colIndex >= 0) {
this.cellDblClicked(index, colIndex);
}
}