Fixing up examples

Author: Templarian

src/pg/toast/toast.css

@@ -1,4 +1,7 @@
 [part~=button] {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
   display: flex;
   background: #737E9E;
   box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.4);

src/pg/toast/toast.ts

@@ -42,7 +42,7 @@ export default class PgToast extends PgOverlay {
     // Position toast
     // close toast
     this.$button.addEventListener('click', () => {
-
+      this.remove();
     });
   }
 

src/pg/tree/__examples__/basic/basic.html

@@ -5,5 +5,6 @@
 </div>
 <h2>Tools</h2>
 <button part="addItem">Add Item</button>
+<button part="addFolder">Add Folder</button>
 <button part="removeItem">Remove Item</button>
-<button part="updateItem">Update Label Item</button>
+<button part="updateItem">Update Selected Label Item</button>

src/pg/tree/__examples__/basic/basic.ts

@@ -1,5 +1,5 @@
 import { Component, Part, Prop } from '@pictogrammers/element';
-import PgTree from '../../tree';
+import PgTree, { SelectedTreeItem } from '../../tree';
 
 import template from './basic.html';
 import PgTreeButtonIcon from '../../../treeButtonIcon/treeButtonIcon';
@@ -13,10 +13,10 @@ const IconEyeOff = 'M2,5.27L3.28,4L20,20.72L18.73,22L15.65,18.92C14.5,19.3 13.28
 const IconLock = 'M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z';
 const IconUnlock = 'M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V10A2,2 0 0,1 6,8H15V6A3,3 0 0,0 12,3A3,3 0 0,0 9,6H7A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,17A2,2 0 0,0 14,15A2,2 0 0,0 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17Z';
 
-function createItem(label, expanded = false) {
+function createFolder(label, expanded = true, items: any[] = []) {
   return {
     icon: {
-      path: IconAccount
+      path: IconFolder
     },
     label,
     expanded,
@@ -31,19 +31,26 @@ function createItem(label, expanded = false) {
       icon: IconUnlock,
       enabled: false
     }],
-    items: [{
-      label: 'Sub Item 1',
-      icon: { path: IconFile },
-    }, {
-      label: 'Sub Item 2',
-      icon: { path: IconFolder },
-      items: [{
-        label: 'Sub Item ?',
-        icon: { path: IconFile },
-      }]
-    }, {
-      label: 'Sub Item 3',
-      icon: { path: IconFile },
+    items
+  };
+}
+
+function createItem(label) {
+  return {
+    icon: {
+      path: IconFile
+    },
+    label,
+    actions: [{
+      type: PgTreeButtonIcon,
+      icon:  IconEye,
+      enabled: true
+    },
+    {
+      type: PgTreeButtonIcon,
+      label: 'Delete',
+      icon: IconUnlock,
+      enabled: false
     }]
   };
 }
@@ -55,6 +62,7 @@ function createItem(label, expanded = false) {
 export default class XPgTreeBasic extends HTMLElement {
   @Part() $tree: PgTree;
   @Part() $addItem: HTMLButtonElement;
+  @Part() $addFolder: HTMLButtonElement;
   @Part() $removeItem: HTMLButtonElement;
   @Part() $updateItem: HTMLButtonElement;
 
@@ -94,24 +102,49 @@ export default class XPgTreeBasic extends HTMLElement {
       this.#selectedItems = e.detail.items;
     });
     this.$tree.items = [
-      createItem('Item 1', true),
+      createFolder('Folder 1', true, [
+        createItem('Item 1')
+      ]),
       createItem('Item 2')
     ];
 
-    let next: number = 2;
+    let fileNext: number = 3;
     this.$addItem.addEventListener('click', () => {
-      next++;
-      this.$tree.items.push(createItem(`Item ${next}`));
+      this.#selectedItems.forEach((selected: any) => {
+        if (selected.getData().items) {
+          selected.getData().items.push(createItem(`Item ${fileNext}`));
+        } else {
+          selected.getParentData().items.push(createItem(`Item ${fileNext}`));
+        }
+        fileNext++;
+      });
+    });
+
+    let folderNext = 2;
+    this.$addFolder.addEventListener('click', () => {
+      this.#selectedItems.forEach((selected: SelectedTreeItem) => {
+        if (selected.getData().items) {
+          selected.getData().items.push(createFolder(`Folder ${folderNext}`));
+        } else {
+          selected.getParentData().items.push(createFolder(`Folder ${folderNext}`));
+        }
+        folderNext++;
+      });
     });
 
     this.$removeItem.addEventListener('click', () => {
-      this.$tree.items.pop();
+      if (this.#selectedItems.length === 0) {
+        alert('Select items first!');
+      }
+      this.#selectedItems.forEach((item: SelectedTreeItem) => {
+        item.remove();
+      });
     });
 
     let updatedTimes = 0;
     this.$updateItem.addEventListener('click', () => {
-      this.#selectedItems.forEach((selected: PgTreeItem) => {
-        selected.label = `Updated ${updatedTimes++}`;
+      this.#selectedItems.forEach((selected: SelectedTreeItem) => {
+        selected.getData().label = `Updated ${updatedTimes++}`;
       });
     });
   }

src/pg/tree/tree.ts

@@ -5,6 +5,13 @@ import PgTreeItem from '../treeItem/treeItem';
 import template from './tree.html';
 import style from './tree.css';
 
+export type SelectedTreeItem = {
+  indexes: number[];
+  remove: () => void;
+  getData: () => any;
+  getParentData: () => any;
+}
+
 @Component({
   selector: 'pg-tree',
   style,
@@ -49,27 +56,21 @@ export default class PgTree extends HTMLElement {
       // Dispatch Event
       this.dispatchEvent(new CustomEvent('select', {
         detail: {
-          items: Array.from(this.#selectedIndexes).map(([key, value]) => {
-            return this.#getItem(value);
-          })
+          items: [...this.#selectedIndexes.values()].map((indexes: any) => {
+            return this.#wrap(indexes);
+          }),
         }
       }));
+      //Array.from(this.#selectedIndexes).map(([key, value]) => {
+      //      return this.#getItem(value);
+      //    })
     });
     this.$items.addEventListener('keydown', (e: any) => {
       if (e.key === 'Delete') {
-        this.items[0].items.pop();
-        /*this.#selected.forEach((item: any) => {
-          const ind = this.#selectedIndexes.get(item);
-          ind.reduce((item: any, index, i) => {
-            console.log(item.item, index, i, ind.length, arguments);
-            if (i === ind.length - 1) {
-              item.items.pop();
-              //item.items.slice(index, 1);
-              return;
-            }
-            return item.items[index];
-          }, this);
-        });*/
+        this.#selectedIndexes.forEach((indexes: number[]) => {
+          this.#removeItem(indexes);
+        });
+        this.#selectedIndexes.clear();
       }
     });
     this.$items.addEventListener('itemdragstart', (e: any) => {
@@ -118,12 +119,46 @@ export default class PgTree extends HTMLElement {
     });
   }
 
+  #removeItem(indexes: number[]) {
+    const deleteIndex = indexes[indexes.length - 1];
+    const tempIndexes = indexes.slice(0, indexes.length - 1);
+    const item = tempIndexes.reduce((item: any, index) => {
+      return item.items[index];
+    }, this);
+    item.items.splice(deleteIndex, 1);
+  }
+
   #getItem(indexes: number[]) {
     return indexes.reduce((item: any, index) => {
       return item.items[index];
     }, this);
   }
 
+  /**
+   * Appends helper methods for selected
+   *
+   * @param indexes indexes
+   */
+  #wrap(indexes: number[]) {
+    return {
+      indexes,
+      remove: () => {
+        this.#removeItem(indexes);
+        this.#selectedIndexes.clear();
+      },
+      getData: () => {
+        return this.#getItem(indexes);
+      },
+      getParentData: () => {
+        const parent = indexes.slice(0, indexes.length - 1);
+        if (parent.length === 0) {
+          return this;
+        }
+        return this.#getItem(parent);
+      }
+    }
+  }
+
   render(changes) {
     if (changes.items) {
       console.log('yay', this.items.map(x => x));