@sparser/au2-data-grid
Version:
A data grid for Aurelia 2
166 lines • 8.19 kB
JavaScript
var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
var _, done = false;
for (var i = decorators.length - 1; i >= 0; i--) {
var context = {};
for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
for (var p in contextIn.access) context.access[p] = contextIn.access[p];
context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
if (kind === "accessor") {
if (result === void 0) continue;
if (result === null || typeof result !== "object") throw new TypeError("Object expected");
if (_ = accept(result.get)) descriptor.get = _;
if (_ = accept(result.set)) descriptor.set = _;
if (_ = accept(result.init)) initializers.unshift(_);
}
else if (_ = accept(result)) {
if (kind === "field") initializers.unshift(_);
else descriptor[key] = _;
}
}
if (target) Object.defineProperty(target, contextIn.name, descriptor);
done = true;
};
var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
var useValue = arguments.length > 2;
for (var i = 0; i < initializers.length; i++) {
value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
}
return useValue ? value : void 0;
};
import { resolve } from '@aurelia/kernel';
import { bindable, BindingMode, CustomElement, INode, IPlatform, } from '@aurelia/runtime-html';
import template from './grid-header.html';
import { SortDirection, } from './sorting-options.js';
const columnPaddingPx = 30;
/**
* Custom element that wraps the header content.
*/
let GridHeader = (() => {
let _state_decorators;
let _state_initializers = [];
let _state_extraInitializers = [];
return class GridHeader {
static {
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
_state_decorators = [bindable({ mode: BindingMode.oneTime })];
__esDecorate(null, null, _state_decorators, { kind: "field", name: "state", static: false, private: false, access: { has: obj => "state" in obj, get: obj => obj.state, set: (obj, value) => { obj.state = value; } }, metadata: _metadata }, _state_initializers, _state_extraInitializers);
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
}
state = __runInitializers(this, _state_initializers, void 0);
content = __runInitializers(this, _state_extraInitializers);
sortingMarker;
node = resolve(INode);
platform = resolve(IPlatform);
get isSortable() {
return this.state.sortable;
}
get direction() {
return this.state.direction;
}
get isResizable() {
return this.state.isResizable;
}
binding() {
this.state.headerElement = this.node;
}
attached() {
// it is essential to queue to queue so that all child get rendered first.
this.platform.taskQueue.queueTask(() => {
const state = this.state;
const parent = state.parent;
const widthPx = state.widthPx;
if (!(widthPx?.endsWith('px') ?? false))
return;
const configuredWidth = Number(widthPx.substring(0, widthPx.length - 2));
if (Number.isNaN(configuredWidth))
return;
const minWidth = this.minColumnWidth;
if (configuredWidth >= minWidth)
return;
this.state.widthPx = `${minWidth}px`;
parent.handleChange(3 /* ChangeType.Width */);
});
}
handleClick() {
// non-sortable column; nothing to do.
if (!this.isSortable) {
return;
}
const state = this.state;
const oldDirection = state.direction;
const newDirection = oldDirection === null || oldDirection === SortDirection.Descending
? SortDirection.Ascending
: SortDirection.Descending;
state.setDirection(newDirection, true);
}
handleDragStart(event) {
const id = this.state.id;
const dt = event.dataTransfer;
dt.setData('text/plain', id);
dt.setDragImage(this.content, 10, 10);
dt.dropEffect = 'move';
return true;
}
handleDragover(event) {
// TODO: account for visual drop marker
event.preventDefault();
return event.dataTransfer?.types.includes('text/plain');
}
handleDrop(event) {
event.preventDefault();
const id = this.state.id;
const sourceId = event.dataTransfer?.getData('text/plain');
if (!sourceId || id === sourceId)
return;
this.state.parent.handleChange(2 /* ChangeType.Order */, sourceId, this.state, GridHeader.computeDropLocation(this.content.getBoundingClientRect(), event.x));
}
handleMouseDown(event) {
event.preventDefault();
// Handle column resizing if the user starts dragging a resize handle:
const resize = ($event) => {
$event.stopImmediatePropagation();
$event.preventDefault();
const state = this.state;
state.widthPx = `${Math.max(this.minColumnWidth, $event.clientX - this.node.getBoundingClientRect().x)}px`;
const columns = state.parent.columns;
const len = columns.length;
for (let i = 0; i < len; i++) {
const column = columns[i];
if (column.hidden || column.widthPx !== null)
continue;
column.widthPx = `${column.headerElement.getBoundingClientRect().width}px`;
}
this.state.parent.handleChange(3 /* ChangeType.Width */);
};
const stop = ($event) => {
$event.stopImmediatePropagation();
$event.preventDefault();
window.removeEventListener('mousemove', resize, { capture: true });
window.removeEventListener('mouseup', stop, { capture: true });
};
window.addEventListener('mousemove', resize, { capture: true });
window.addEventListener('mouseup', stop, { capture: true });
}
get minColumnWidth() {
return this.content.getBoundingClientRect().width
+ (this.sortingMarker?.getBoundingClientRect().width ?? 0)
+ columnPaddingPx;
}
static computeDropLocation(rect, x) {
const mid = rect.left + (rect.right - rect.left) / 2;
const location = x <= mid
? 1 /* OrderChangeDropLocation.Before */
: 2 /* OrderChangeDropLocation.After */;
return location;
}
};
})();
export { GridHeader };
// eslint-disable-next-line @typescript-eslint/naming-convention
export const DefaultGridHeader = CustomElement.define({ name: 'grid-header', template }, GridHeader);
//# sourceMappingURL=grid-header.js.map