From 84dacc7147c53a8c859047895d8583ed3473665f Mon Sep 17 00:00:00 2001 From: Alexandr Todorov <18342667+alexandr-todorov@users.noreply.github.com> Date: Wed, 5 Oct 2022 01:43:45 +0300 Subject: [PATCH] feat: add item extra attributes Co-authored-by: Alexandr Todorov --- .../grid-stack-item/grid-stack-item.ts | 73 +++++++++++++++++++ packages/aurelia-gridstack/src/models.ts | 13 ++++ packages/aurelia-gridstack/src/utils.ts | 25 +++++++ packages/demo/src/app.html | 10 ++- packages/demo/src/app.ts | 6 +- 5 files changed, 123 insertions(+), 4 deletions(-) create mode 100644 packages/aurelia-gridstack/src/models.ts create mode 100644 packages/aurelia-gridstack/src/utils.ts diff --git a/packages/aurelia-gridstack/src/elements/grid-stack-item/grid-stack-item.ts b/packages/aurelia-gridstack/src/elements/grid-stack-item/grid-stack-item.ts index d5e0aed..a4099f2 100644 --- a/packages/aurelia-gridstack/src/elements/grid-stack-item/grid-stack-item.ts +++ b/packages/aurelia-gridstack/src/elements/grid-stack-item/grid-stack-item.ts @@ -1,5 +1,6 @@ import { bindingMode } from 'aurelia-binding'; import { inject } from 'aurelia-dependency-injection'; +import { getResizeHandleTypesOnly } from '../../utils'; import { PLATFORM } from 'aurelia-pal'; import { customElement, useView } from 'aurelia-templating'; import { bindable } from 'aurelia-typed-observable-plugin'; @@ -101,6 +102,56 @@ export class GridStackItem { } } + @bindable.number({ defaultBindingMode: bindingMode.twoWay }) + minW?: number; + minWChanged() { + if (this.minW !== undefined) { + this.root.setAttribute('gs-min-w', this.minW.toString()); + } else { + this.root.removeAttribute('gs-min-w'); + } + } + + @bindable.number({ defaultBindingMode: bindingMode.twoWay }) + minH?: number; + minHChanged() { + if (this.minH !== undefined) { + this.root.setAttribute('gs-min-h', this.minH.toString()); + } else { + this.root.removeAttribute('gs-min-h'); + } + } + + @bindable.number({ defaultBindingMode: bindingMode.twoWay }) + maxW?: number; + maxWChanged() { + if (this.maxW !== undefined) { + this.root.setAttribute('gs-max-w', this.maxW.toString()); + } else { + this.root.removeAttribute('gs-max-w'); + } + } + + @bindable.number({ defaultBindingMode: bindingMode.twoWay }) + maxH?: number; + maxHChanged() { + if (this.maxH !== undefined) { + this.root.setAttribute('gs-max-h', this.maxH.toString()); + } else { + this.root.removeAttribute('gs-max-h'); + } + } + + @bindable.number({ defaultBindingMode: bindingMode.twoWay }) + id?: number; + idChanged() { + if (this.id !== undefined) { + this.root.setAttribute('gs-id', this.id.toString()); + } else { + this.root.removeAttribute('gs-id'); + } + } + @bindable.booleanAttr noMove: boolean; noMoveChanged() { @@ -130,6 +181,28 @@ export class GridStackItem { this.root.removeAttribute('gs-locked'); } } + + @bindable.booleanAttr + autoPosition: boolean; + autoPositionChanged() { + if (this.autoPosition) { + this.root.setAttribute('gs-auto-position', 'true'); + } else { + this.root.removeAttribute('gs-auto-position'); + } + } + + @bindable.string + resizeHandles?: string; + resizeHandlesChanged() { + if (this.resizeHandles !== undefined) { + const filteredHandles = getResizeHandleTypesOnly(this.resizeHandles); + this.root.setAttribute('gs-resize-handles', filteredHandles.toString()); + } else { + this.root.removeAttribute('gs-resize-handles'); + } + } + } export interface IGridStackItemElement extends GridItemHTMLElement { diff --git a/packages/aurelia-gridstack/src/models.ts b/packages/aurelia-gridstack/src/models.ts new file mode 100644 index 0000000..5cdf61b --- /dev/null +++ b/packages/aurelia-gridstack/src/models.ts @@ -0,0 +1,13 @@ +export enum ResizeHandles { + n = 'n', + ne = 'ne', + e = 'e', + se = 'se', + s = 's', + sw = 'sw', + w = 'w', + nw = 'nw' +} + +export type ResizeHandleType = ResizeHandles.n | ResizeHandles.ne | ResizeHandles.e | ResizeHandles.se | + ResizeHandles.s | ResizeHandles.sw | ResizeHandles.w | ResizeHandles.nw; diff --git a/packages/aurelia-gridstack/src/utils.ts b/packages/aurelia-gridstack/src/utils.ts new file mode 100644 index 0000000..a9206e9 --- /dev/null +++ b/packages/aurelia-gridstack/src/utils.ts @@ -0,0 +1,25 @@ +import { ResizeHandles, ResizeHandleType } from './models'; + +function onlyUnique(value: any, index: number, self: any) { + return self.indexOf(value) === index; +} + +export function getResizeHandleTypesOnly(handles: string | undefined): ResizeHandleType[] { + const handlesArray: ResizeHandleType[] = []; + + if (handles) { + let allEntries = handles.replace(/\s/g, '').split(','); + + // remove duplicates + allEntries = allEntries.filter(onlyUnique); + + // add only ResizeHandleType items + allEntries.forEach((child) => { + if (child in ResizeHandles) { + handlesArray.push(child as ResizeHandleType); + } + }); + } + + return handlesArray; +} diff --git a/packages/demo/src/app.html b/packages/demo/src/app.html index 79a212a..e2677c4 100644 --- a/packages/demo/src/app.html +++ b/packages/demo/src/app.html @@ -2,13 +2,21 @@ - +
Item ${$index + 1}
x: ${i.x}
y: ${i.y}
w: ${i.w}
h: ${i.h}
+
id: ${i.id}
+
resizeHandles: ${i.resizeHandles}
 diff --git a/packages/demo/src/app.ts b/packages/demo/src/app.ts index 1b41f10..78ce515 100644 --- a/packages/demo/src/app.ts +++ b/packages/demo/src/app.ts @@ -1,7 +1,7 @@ export class App { items = [ - { x: 0, y: 0, w: 2, h: 1 }, - { x: 1, y: 1, w: 2, h: 2 }, - { x: 3, y: 2, w: 1, h: 2 } + { x: 0, y: 0, w: 2, h: 1, id: 11, resizeHandles: 'e' }, + { x: 1, y: 1, w: 2, h: 2, id: 22 }, + { x: 3, y: 2, w: 1, h: 2, id: 33 } ]; }