readme

Author: msarsha

README.md

@@ -1,4 +1,4 @@
-# ng2-right-click-menu
+## ng2-right-click-menu
 _Right click context menu for Angular 2+_
 
 __DEMO__ https://msarsha.github.io/ng2-right-click-menu/
@@ -36,189 +36,70 @@ import css file in your `styles.css`:
 #### Defining a Basic Menu Template
 
 The menu template is built using the `sh-context-menu` component as the menu wrapper,
-and nesting `ng-template` with the `shContextMenuItem` directive for every menu item:
+and nested `ng-template` with the `shContextMenuItem` directive for every menu item:
 
 The `shContextMenuItem` directive provide a template variable (`let-data`) that gives you access to the data object attached to the menu.
 
 ````html
 <sh-context-menu #menu>
-  <ng-template shContextMenuItem let-data>
+  <ng-template shContextMenuItem let-data (click)="onClick($event)">
     <div>
       Menu Item - {{data.label}}
     </div>
   </ng-template>
 </sh-context-menu>
 ````
 
-#### Attaching The Menu To An Element
+#### Attaching Menu To An Element
 
-Attaching works by using the `shMenu` directive and providing the `#menu` template variable:
+Attaching works by using the `shAttachMenu` directive and providing the `#menu` (from the above example) template variable:
+
+The object provided to the `[shMenuData]` input will be available as a template variable inside `ng-template`s with `shContextMenuItem`
 
 ```html
-<div [shAnchorFor]="menu" [shMenuData]="data">Right Click Me</div>
+<div [shAttachMenu]="menu" [shMenuData]="data">Right Click Me</div>
 ```
 
+## Sub Menus
 
-### `[sh-context]` (`IShContextMenuItem[]`)
-
-````typescript
-  interface IShContextMenuItem {
-    label?: ((context: any) => string) | string; // as of version 0.0.11 this property is rendered as HTML
-    divider?: boolean;
-    onClick?($event: any): void;
-    visible?(context: any): boolean;
-    disabled?(context: any): boolean;
-    subMenu?: boolean;
-    subMenuItems?: IShContextMenuItem[];
-}
-````
-
-Example:
-
-````typescript
-  items: IShContextMenuItem[];
-  
-  this.items = [
-    {
-      label: '<span class="menu-icon">Save</span>',
-      onClick: this.clickEvent
-    },
-    {
-      label: (context) => `Edit ${context.someVariable}`,
-      onClick: this.clickEvent
-    },
-    {
-      label: '<b>Sub</b> Menu',
-      subMenu: true,
-      subMenuItems: [
-        {
-          label: 'Save',
-          onClick: this.clickEvent
-        },
-        {
-          label: 'Edit',
-          onClick: this.clickEvent
-        }]
-    }
-    {
-      divider: true
-    },
-    {
-      label: 'Remove',
-      disabled: ctx => {
-        return ctx.Two === 'Two';
-      },
-      onClick: this.clickEvent
-    },
-    {
-      label: (context) => `Hide ${context.name}`,
-      onClick: this.clickEvent,
-      visible: ctx => {
-        return ctx.One === 'One';
-      }
-    }
-  ];
-  
-  clickEvent($event: any){
-    console.log('clicked ', $event);
-  };
-````
-
-### Passing a function to the label option
-
-You can pass either a string or a function that returns a string (using the data context as a parameter) to the `label` option of menu items. Passing a function allows the label to contain dynamic content.
-
-### onBeforeMenuOpen (v0.0.14)
-
-The `onBeforeMenuOpen` event can be used to cancel the menu from opening and allow to modify the menu items that will be display by the current event.
-
-The `open()` callback is used to continue the context menu event and can be injected with the new modified `IShContextMenuItem` items array. (optional. if items array is not provided the original array defined by `[sh-context]` will be used.)
-
-````html
-<div (onBeforeMenuOpen)="onBefore($event)" [sh-context]="items" [sh-data-context]="dataCtxOne">
-  Click Me !
-</div>
-````
-
-component:
-
-````typescript
-onBefore = (event: BeforeMenuEvent) => {
-    event.open([new items]);
-  };
-````
-
-`BeforeMenuEvent` interface:
-````typescript
-interface BeforeMenuEvent {
-  event: MouseEvent;
-  items: IShContextMenuItem[];
-  open(items?: IShContextMenuItem[]): void;
-}
-````
+Sub menu is attached to the `shContextMenuItem` directive using the `[subMenu]` input.
 
-### Options Object (v0.0.10)
+The `[subMenu]` input is provided with a `sh-context-menu`'s template variable (just like attaching a menu to an element).
 
 ````html
-<div [sh-options]="options"></div>
-````
-
-````typescript
-  options: IShContextOptions = {
-    // set options
-  }
-````
-
-The options object is of type `IShContextOptions` and currently support the following options:
-
-Options | Type | Default | Description
-:---:|:---:|:---:|:---|
-rtl|boolean|false|right to left support
-theme|string|light|menu color theme
-
-### Sub Menus (v0.0.9)
-
-Setting the `subMenu` property to `true` and the `subMenuItems` property to a `IShContextMenuItem[]` will render a sub menu.
-
-````typescript
-{
-  label: 'Sub Menu',
-  subMenu: true,
-  subMenuItems: [
-    {
-      label: 'Save',
-      onClick: this.clickEvent
-    },
-    {
-      label: 'Edit',
-      onClick: this.clickEvent
-    }]
-}
-````
-
-#### The `onClick` handler
-
-The `onClick` handler is a function that is being injected with `$event` parameter.
-
-The `$event` structure is:
-
-````typescript
-  {
-    menuItem: item,
-    dataContext: this.dataContext
-  }
+<sh-context-menu #menu>
+  <ng-template shContextMenuItem [subMenu]="#nestedMenu">
+    <div>
+      Menu Item - {{data.label}}
+    </div>
+  </ng-template>
+  <sh-context-menu #nestedMenu>
+    <ng-template shContextMenuItem let-data>
+      <div>
+        Menu Item - {{data.label}}
+      </div>
+    </ng-template>
+  </sh-context-menu>
+</sh-context-menu>
 ````
 
-Where the `menuItem` property is of type `IShContextMenuItem` and is the clicked menu item.
-
-And the `dataContext` is the object used on the `[sh-data-context]` binding.
+## API
 
+#### sh-context-menu
 
-#### The `disabled` and `visible` handlers
+Name | Type | Default | Description
+:---:|:---:|:---:|:---:
+[this]|any|null|the `this` context for input callbacks (visible) - typically the menu's host component
 
-Both get injected with the object used on the `[sh-data-context]` binding
+#### shContextMenuItem
 
-And should return a `boolean` to indicate if the current `IShContextMenuItem` is disabled or visible.
+Name | Type | Default | Description
+:---:|:---:|:---:|:---:
+[subMenu]|ShContextMenuComponent|null|sub menu
+[divider]|boolean|false|render a divider
+[closeOnClick]|boolean|true|should the menu close on click
+[visible]|(event: ShContextMenuClickEvent) => boolean|null|function to determine if a item is visible
+(click)|ShContextMenuClickEvent|null|click handler
 
 
 ### Setting up development env

src/lib/src/index.ts

@@ -1,5 +1,5 @@
 export {ShContextMenuModule} from './sh-context-menu.module';
 export {ShContextMenuComponent} from './sh-context-menu.component';
-export {ShAttachMenuDirective} from './sh-anchor-for.directive';
+export {ShAttachMenuDirective} from './sh-attach-menu.directive';
 export {ShContextMenuItemDirective} from './sh-context-menu-item.directive';
 export {ShContextMenuService} from './sh-context-menu.service';

src/lib/src/sh-anchor-for-sub.directive.ts

@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 
 import {ShContextMenuComponent} from './sh-context-menu.component';
-import {ShAttachMenuDirective} from './sh-anchor-for.directive';
+import {ShAttachMenuDirective} from './sh-attach-menu.directive';
 import {ShContextMenuService} from './sh-context-menu.service';
 import {ShContextMenuItemDirective} from './sh-context-menu-item.directive';
 import {OverlayModule} from '@angular/cdk/overlay';