feat: add item extra attributes

Co-authored-by: Alexandr Todorov <Alexandr.Todorov@technosoft.nl>
aurelia-ui-toolkits · Oct 4, 2022 · 84dacc7 · 84dacc7
1 parent f7a904a
commit 84dacc7
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 4 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -2,13 +2,21 @@
   <require from="gridstack/dist/gridstack.min.css"></require>
   <require from="./app.css"></require>
   <grid-stack min-row="5" float>
-    <grid-stack-item repeat.for="i of items" x.bind="i.x" y.bind="i.y" w.bind="i.w" h.bind="i.h">
+    <grid-stack-item repeat.for="i of items"
+      x.bind="i.x"
+      y.bind="i.y" 
+      w.bind="i.w"
+      h.bind="i.h"
+      id.bind="i.id"
+      resize-handles.bind="i.resizeHandles">
       <div class="item">
         <div>Item ${$index + 1}</div>
         <div>x: ${i.x}</div>
         <div>y: ${i.y}</div>
         <div>w: ${i.w}</div>
         <div>h: ${i.h}</div>
+        <div>id: ${i.id}</div>
+        <div>resizeHandles: ${i.resizeHandles}</div>
       </div>
     </grid-stack-item>
   </grid-stack>

diff --git 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 }
   ];
 }