feat: context-menu example

Author: xmlking

PLAYBOOK.md

@@ -243,6 +243,7 @@ ng g component containers/experimentsLayout --app=experiments --dry-run
 ng g component containers/experiments --app=experiments --dry-run
 ng g component components/hammerCard --app=experiments --dry-run
 ng g directive components/Hammertime/Hammertime --app=experiments --dry-run
+ng g component containers/ContextMenu --app=experiments --dry-run
 
 
 

apps/default/src/app/core/menu-data.ts

@@ -41,6 +41,11 @@ export const defaultMenu: MenuItem[] = [
         name: 'Upload',
         icon: 'directions',
         link: '/dashboard/experiments/file-upload'
+      },
+      {
+        name: 'Context Menu',
+        icon: 'web_aaset',
+        link: '/dashboard/experiments/context-menu'
       }
     ]
   },

libs/context-menu/src/context-menu-trigger.directive.ts

@@ -28,7 +28,13 @@ export class ContextMenuTriggerDirective implements OnDestroy {
 
     const positionStrategy = this._overlay
       .position()
-      .connectedTo(this._elementRef, { originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' });
+      .flexibleConnectedTo(this._elementRef)
+      .withPositions([{
+        overlayX: 'start',
+        overlayY: 'top',
+        originX: 'start',
+        originY: 'bottom'
+      }]);
 
     const overlayRef = this._overlay.create({ positionStrategy });
     const templatePortal = new TemplatePortal(this.contextMenu, this._vcr);

libs/context-menu/src/context-menu.component.ts

@@ -4,9 +4,6 @@ import { Component, ChangeDetectionStrategy, HostListener, HostBinding } from '@
   selector: 'df-context-menu',
   templateUrl: './context-menu.component.html',
   styleUrls: ['./context-menu.component.scss'],
-  // host: {
-  //   class: 'mat-elevation-z2'
-  // },
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ContextMenuComponent {

libs/experiments/src/containers/context-menu/context-menu.component.html

@@ -0,0 +1,17 @@
+<mat-card>
+  <mat-list role="list">
+    <mat-list-item [contextMenu]="myContextMenu">Right click me to see the menu 1</mat-list-item>
+    <mat-list-item [contextMenu]="myContextMenu">Right click me to see the menu 2</mat-list-item>
+    <mat-list-item [contextMenu]="myContextMenu">Right click me to see the menu 3</mat-list-item>
+  </mat-list>
+</mat-card>
+<ng-template #myContextMenu>
+  <df-context-menu>
+    <button mat-button>Select all</button>
+    <button mat-button>Edit Row</button>
+    <button mat-button>Quick tag</button>
+    <button mat-button>Copy selected column</button>
+    <button mat-button>Copy selected row</button>
+    <button mat-button>Delete</button>
+  </df-context-menu>
+</ng-template>

libs/experiments/src/containers/context-menu/context-menu.component.scss

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContextMenuComponent } from './context-menu.component';
+
+describe('ContextMenuComponent', () => {
+  let component: ContextMenuComponent;
+  let fixture: ComponentFixture<ContextMenuComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContextMenuComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContextMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

libs/experiments/src/containers/context-menu/context-menu.component.spec.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'context-menu',
+  templateUrl: './context-menu.component.html',
+  styleUrls: ['./context-menu.component.scss']
+})
+export class ContextMenuComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

libs/experiments/src/containers/context-menu/context-menu.component.ts

@@ -6,9 +6,11 @@ import { FilePondModule,registerPlugin } from '@xmlking/ngx-filepond';
 
 import { SharedModule } from '@nx-starter-kit/shared';
 import { UploadModule } from '@nx-starter-kit/upload';
+import {ContextMenuModule} from "@nx-starter-kit/context-menu";
 import { AnimationsComponent } from './containers/animations/animations.component';
 import { FileUploadComponent } from './containers/file-upload/file-upload.component';
 import { HammertimeDirective } from './components/hammertime/hammertime.directive';
+import { ContextMenuComponent } from './containers/context-menu/context-menu.component';
 
 export class MyHammerConfig extends HammerGestureConfig {
   overrides = <any>{
@@ -22,13 +24,15 @@ import * as FilePondPluginFileValidateType from 'filepond-plugin-file-validate-t
 import * as FilepondPluginFileValidateSize from 'filepond-plugin-file-validate-size';
 import * as FilepondPluginImagePreview from 'filepond-plugin-image-preview';
 
+
 registerPlugin(FilePondPluginFileValidateType, FilepondPluginFileValidateSize, FilepondPluginImagePreview);
 
 @NgModule({
   imports: [
     SharedModule,
     UploadModule,
     FilePondModule,
+    ContextMenuModule,
     RouterModule.forChild([
       /* {path: '', pathMatch: 'full', component: InsertYourComponentHere} */
       { path: '', redirectTo: 'animations', pathMatch: 'full', data: { animation: 'experiments' } },
@@ -43,9 +47,9 @@ registerPlugin(FilePondPluginFileValidateType, FilepondPluginFileValidateSize, F
         data: { animation: 'file-upload' }
       },
       {
-        path: 'experiment3',
-        component: AnimationsComponent,
-        data: { animation: 'experiment3' }
+        path: 'context-menu',
+        component: ContextMenuComponent,
+        data: { animation: 'context-menu' }
       }
     ])
   ],
@@ -55,6 +59,6 @@ registerPlugin(FilePondPluginFileValidateType, FilepondPluginFileValidateSize, F
       useClass: MyHammerConfig
     }
   ],
-  declarations: [AnimationsComponent, FileUploadComponent, HammertimeDirective]
+  declarations: [AnimationsComponent, FileUploadComponent, HammertimeDirective, ContextMenuComponent]
 })
 export class ExperimentsModule {}