feat: add extra attributes

* extra attributes by @Kobe-Wulteputte Adding missing properties to au2 branch * fixes and additional properties * minor refactoring and id property added Co-authored-by: Alexandr Todorov <Alexandr.Todorov@technosoft.nl>
aurelia-ui-toolkits · Oct 4, 2022 · 44ecd0f · 44ecd0f
1 parent 6834427
commit 44ecd0f
Show file tree

Hide file tree

Showing 6 changed files with 147 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -27,7 +27,7 @@ export function configure(aurelia: Aurelia) {
   <grid-stack-item x="0" y="0" w="2" h="1">
     <div class="item">Item1</div>
   </grid-stack-item>
-  <grid-stack-item x="1" y="1" w="2" h="2">
+  <grid-stack-item x="1" y="1" w="2" h="2" min-w="2" min-h="2">
     <div class="item">Item2</div>
   </grid-stack-item>
   <grid-stack-item x="3" y="2" w="1" h="2">

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,6 +1,7 @@
 import { bindable, BindingMode, customElement, inject } from 'aurelia';
-import { booleanAttr, number } from '../../interceptors';
+import { booleanAttr, handlesAttr, number } from '../../interceptors';
 import { GridItemHTMLElement } from 'gridstack';
+import { ResizeHandleType } from '../../models';
 
 @inject(Element)
 @customElement('grid-stack-item')
@@ -47,6 +48,56 @@ export class GridStackItem {
     }
   }
 
+  @bindable({ set: number, mode: 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({ set: number, mode: 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({ set: number, mode: 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({ set: number, mode: 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({ set: number, mode: BindingMode.twoWay })
+  id?: number;
+  idChanged() {
+    if (this.id !== undefined) {
+      this.root.setAttribute('gs-id', this.id.toString());
+    } else {
+      this.root.removeAttribute('gs-id');
+    }
+  }
+
   @bindable({ set: booleanAttr })
   noMove: boolean;
   noMoveChanged() {
@@ -77,6 +128,26 @@ export class GridStackItem {
     }
   }
 
+  @bindable({ set: booleanAttr })
+  autoPosition: boolean;
+  autoPositionChanged() {
+    if (this.autoPosition) {
+      this.root.setAttribute('gs-auto-position', 'true');
+    } else {
+      this.root.removeAttribute('gs-auto-position');
+    }
+  }
+
+  @bindable({ set: handlesAttr })
+  resizeHandles?: ResizeHandleType[];
+  resizeHandlesChanged() {
+    if (this.resizeHandles !== undefined) {
+      this.root.setAttribute('gs-resize-handles', this.resizeHandles.toString());
+    } else {
+      this.root.removeAttribute('gs-resize-handles');
+    }
+  }
+
   attached() {
     if (this.x !== undefined) {
       this.xChanged();
@@ -90,6 +161,18 @@ export class GridStackItem {
     if (this.h !== undefined) {
       this.hChanged();
     }
+    if (this.minW !== undefined) {
+      this.minWChanged();
+    }
+    if (this.minH !== undefined) {
+      this.minHChanged();
+    }
+    if (this.maxW !== undefined) {
+      this.maxWChanged();
+    }
+    if (this.maxH !== undefined) {
+      this.maxHChanged();
+    }
     if (this.noMove !== undefined) {
       this.noMoveChanged();
     }
@@ -99,6 +182,15 @@ export class GridStackItem {
     if (this.locked !== undefined) {
       this.lockedChanged();
     }
+    if (this.id !== undefined) {
+      this.idChanged();
+    }
+    if (this.autoPosition !== undefined) {
+      this.autoPositionChanged();
+    }
+    if (this.resizeHandles !== undefined) {
+      this.resizeHandlesChanged();
+    }
   }
 }
 

diff --git a/packages/aurelia-gridstack/src/interceptors.ts b/packages/aurelia-gridstack/src/interceptors.ts
@@ -1,7 +1,42 @@
+import { ResizeHandles, ResizeHandleType } from './models';
+
 export function number(a: unknown): number {
   return Number(a);
 }
 
 export function booleanAttr(val: unknown): boolean {
   return val || val === '' ? true : false;
 }
+
+function onlyUnique(value: any, index: number, self: any) {
+  return self.indexOf(value) === index;
+}
+
+export function handlesAttr(handles: unknown): ResizeHandleType[] {
+	const isStringParam = typeof handles === 'string' || handles instanceof String;
+  const isArrayParam = Array.isArray(handles);
+  const isStringOrArray = isStringParam || isArrayParam;
+  const handlesArray: ResizeHandleType[] = [];
+
+  if (handles && isStringOrArray && handles.length > 0) {
+    let allEntries: string[];
+
+    if (isStringParam) {
+      allEntries = handles.replace(/\s/g,'').split(',');
+    } else {
+      allEntries = handles;
+    }
+
+    // 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/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/demo/src/app.html b/packages/demo/src/app.html
@@ -1,13 +1,14 @@
 <require from="gridstack/dist/gridstack.min.css"></require>
 <require from="./app.css"></require>
 <grid-stack min-row="5" float>
-  <grid-stack-item au-slot repeat.for="i of items" x.bind="i.x" y.bind="i.y" w.bind="i.w" h.bind="i.h">
+  <grid-stack-item au-slot 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">
     <div class="item" au-slot>
       <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>
   </grid-stack-item>
 </grid-stack>

diff --git a/packages/demo/src/app.ts b/packages/demo/src/app.ts
@@ -1,8 +1,8 @@
 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 },
+    { x: 1, y: 1, w: 2, h: 2, id: 22 },
+    { x: 3, y: 2, w: 1, h: 2, id: 33 }
   ];
 
   remove() {