refactor(events): change aurelia event prefix

- to make a distinction between Aurelia Events vs SlickGrid Events, we will use (asg for Aurelia, sg for SlickGrid)
ghiscoding · May 26, 2018 · 8eb1ad4 · 8eb1ad4
1 parent aa32a56
commit 8eb1ad4
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 47 deletions.
diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/aurelia-slickgrid.ts b/aurelia-slickgrid/src/aurelia-slickgrid/aurelia-slickgrid.ts
@@ -121,7 +121,7 @@ export class AureliaSlickgridCustomElement {
   }
 
   initialization() {
-    this.elm.dispatchEvent(new CustomEvent(`${eventPrefix}-on-before-grid-create`, {
+    this.elm.dispatchEvent(new CustomEvent(`${aureliaEventPrefix}-on-before-grid-create`, {
       bubbles: true,
     }));
     this.ea.publish('onBeforeGridCreate', true);
@@ -152,12 +152,12 @@ export class AureliaSlickgridCustomElement {
     this.dataview.endUpdate();
 
     // publish certain events
-    this.elm.dispatchEvent(new CustomEvent(`${eventPrefix}-on-grid-created`, {
+    this.elm.dispatchEvent(new CustomEvent(`${aureliaEventPrefix}-on-grid-created`, {
       bubbles: true,
       detail: this.grid
     }));
     this.ea.publish('onGridCreated', this.grid);
-    this.elm.dispatchEvent(new CustomEvent(`${eventPrefix}-on-dataview-created`, {
+    this.elm.dispatchEvent(new CustomEvent(`${aureliaEventPrefix}-on-dataview-created`, {
       bubbles: true,
       detail: this.dataview
     }));
@@ -213,7 +213,7 @@ export class AureliaSlickgridCustomElement {
 
   detached() {
     this.ea.publish('onBeforeGridDestroy', this.grid);
-    this.elm.dispatchEvent(new CustomEvent(`${eventPrefix}-on-before-grid-destroy`, {
+    this.elm.dispatchEvent(new CustomEvent(`${aureliaEventPrefix}-on-before-grid-destroy`, {
       bubbles: true,
       detail: this.grid
     }));
@@ -231,7 +231,7 @@ export class AureliaSlickgridCustomElement {
     this.gridStateSubscriber.dispose();
     this.localeChangedSubscriber.dispose();
     this.ea.publish('onAfterGridDestroyed', true);
-    this.elm.dispatchEvent(new CustomEvent(`${eventPrefix}-on-after-grid-destroyed`, {
+    this.elm.dispatchEvent(new CustomEvent(`${aureliaEventPrefix}-on-after-grid-destroyed`, {
       bubbles: true,
       detail: this.grid
     }));

diff --git a/aurelia-slickgrid/src/examples/slickgrid/example13.html b/aurelia-slickgrid/src/examples/slickgrid/example13.html
@@ -46,6 +46,6 @@ <h2>${title}</h2>
   </div>
 
   <aurelia-slickgrid grid-id="grid1" column-definitions.bind="columnDefinitions" grid-options.bind="gridOptions" dataset.bind="dataset"
-    sg-on-dataview-created.delegate="onDataviewCreated($event.detail)">
+    asg-on-dataview-created.delegate="onDataviewCreated($event.detail)">
   </aurelia-slickgrid>
 </template>
diff --git a/aurelia-slickgrid/src/examples/slickgrid/example3.html b/aurelia-slickgrid/src/examples/slickgrid/example3.html
@@ -40,6 +40,8 @@ <h2>${title}</h2>
       column-definitions.bind="columnDefinitions"
       grid-options.bind="gridOptions"
       dataset.bind="dataset"
+      sg-on-cell-changed.delegate="onCellChanged($event.detail.eventData, $event.detail.args)"
+      sg-on-click.delegate="onCellClicked($event.detail.eventData, $event.detail.args)"
       asg-on-aurelia-grid-created.delegate="aureliaGridReady($event.detail)">
     </aurelia-slickgrid>
   </div>

diff --git a/aurelia-slickgrid/src/examples/slickgrid/example3.ts b/aurelia-slickgrid/src/examples/slickgrid/example3.ts
@@ -57,13 +57,6 @@ export class Example3 {
     this.getData();
   }
 
-  detached() {
-    // unsubscrible any Slick.Event you might have used
-    // a reminder again, these are SlickGrid Event, not Event Aggregator events
-    this.gridObj.onCellChange.unsubscribe();
-    this.gridObj.onClick.unsubscribe();
-  }
-
   aureliaGridReady(aureliaGrid: AureliaGridInstance) {
     this.aureliaGrid = aureliaGrid;
   }
@@ -235,42 +228,29 @@ export class Example3 {
     this.dataset = mockedDataset;
   }
 
-  gridObjChanged(grid) {
-    grid.onBeforeEditCell.subscribe((e, args) => {
-      console.log('before edit', e);
-      e.stopImmediatePropagation();
-    });
-    grid.onBeforeCellEditorDestroy.subscribe((e, args) => {
-      console.log('before destroy');
-      e.stopPropagation();
-    });
+  onCellChanged(e, args) {
+    console.log('onCellChange', args);
+    this.updatedObject = args.item;
+    this.aureliaGrid.resizerService.resizeGrid(100);
+  }
 
-    grid.onCellChange.subscribe((e, args) => {
-      console.log('onCellChange', args);
-      this.updatedObject = args.item;
-      this.aureliaGrid.resizerService.resizeGrid(100);
-    });
+  onCellClicked(e, args) {
+    const metadata = this.aureliaGrid.gridService.getColumnFromEventArguments(args);
+    console.log(metadata);
 
-    // You could also subscribe to grid.onClick
-    // Note that if you had already setup "onCellClick" in the column definition, you cannot use grid.onClick
-    grid.onClick.subscribe((e, args) => {
-      const column = this.aureliaGrid.gridService.getColumnFromEventArguments(args);
-      console.log('onClick', args, column);
-      if (column.columnDef.id === 'edit') {
-        this.alertWarning = `open a modal window to edit: ${column.dataContext.title}`;
+    if (metadata.columnDef.id === 'edit') {
+      this.alertWarning = `open a modal window to edit: ${metadata.dataContext.title}`;
 
-        // highlight the row, to customize the color, you can change the SASS variable $row-highlight-background-color
-        this.aureliaGrid.gridService.highlightRow(args.row, 1500);
+      // highlight the row, to customize the color, you can change the SASS variable $row-highlight-background-color
+      this.aureliaGrid.gridService.highlightRow(args.row, 1500);
 
-        // you could also select the row, when using "enableCellNavigation: true", it automatically selects the row
-        // this.gridService.setSelectedRow(args.row);
-      }
-      if (column.columnDef.id === 'delete') {
-        if (confirm('Are you sure?')) {
-          this.aureliaGrid.gridService.deleteDataGridItemById(column.dataContext.id);
-        }
+      // you could also select the row, when using "enableCellNavigation: true", it automatically selects the row
+      // this.aureliaGrid.gridService.setSelectedRow(args.row);
+    } else if (metadata.columnDef.id === 'delete') {
+      if (confirm('Are you sure?')) {
+        this.aureliaGrid.gridService.deleteDataGridItemById(metadata.dataContext.id);
       }
-    });
+    }
   }
 
   setAutoEdit(isAutoEdit) {

diff --git a/client-cli/src/examples/slickgrid/example13.html b/client-cli/src/examples/slickgrid/example13.html
@@ -46,6 +46,6 @@ <h2>${title}</h2>
   </div>
 
   <aurelia-slickgrid grid-id="grid1" column-definitions.bind="columnDefinitions" grid-options.bind="gridOptions" dataset.bind="dataset"
-    sg-on-dataview-created.delegate="onDataviewCreated($event.detail)">
+    asg-on-dataview-created.delegate="onDataviewCreated($event.detail)">
   </aurelia-slickgrid>
 </template>
diff --git a/doc/github-demo/src/examples/slickgrid/example13.html b/doc/github-demo/src/examples/slickgrid/example13.html
@@ -45,7 +45,12 @@ <h2>${title}</h2>
     </span>
   </div>
 
-  <aurelia-slickgrid grid-id="grid1" column-definitions.bind="columnDefinitions" grid-options.bind="gridOptions" dataset.bind="dataset"
-    sg-on-grid-created.delegate="onGridCreated($event.detail)" sg-on-dataview-created.delegate="onDataviewCreated($event.detail)">
+  <aurelia-slickgrid
+    grid-id="grid1"
+    column-definitions.bind="columnDefinitions"
+    grid-options.bind="gridOptions"
+    dataset.bind="dataset"
+    asg-on-grid-created.delegate="onGridCreated($event.detail)"
+    asg-on-dataview-created.delegate="onDataviewCreated($event.detail)">
   </aurelia-slickgrid>
 </template>