<commit_before># angular2-contextmenu

A context menu built with Angular 2 inspired by [ui.bootstrap.contextMenu](https://github.com/Templarian/ui.bootstrap.contextMenu).  Bootstrap classes are included in the markup, but there is no explicit dependency on bootstrap. [Demo](http://plnkr.co/edit/wpJXpEh4zNZ4uCxTURx2?p=preview)

## Usage

- `npm install angular2-contextmenu`

### Template

```html
<ul>
    <li *ngFor="item in items" (contextmenu)="onContextMenu($event, item)">Right Click: {{item.name}}</li>
</ul>
<context-menu></context-menu>
```

### Component Code

```js
import { ContextMenuComponent, ContextMenuService } from 'angular2-contextmenu';

@Component({
  directives: [ ContextMenuComponent ],
  providers: [ ContextMenuService ],
  ...
})
export class MyContextMenuClass {
  public items = [
      { name: 'John', otherProperty: 'Foo' },
      { name: 'Joe', otherProperty: 'Bar' }
  };

  constructor(private contextMenuService: ContextMenuService) {}

  public onContextMenu($event: Event, item: any): void {
    this.contextMenuService.show.next({
      actions: [
        {
          html: () => `Say hi!`,
          click: (item) => alert('Hi, ' + item.name)
        },
        {
          html: () => `Something else`,
          click: (item) => alert('Or not...')
        },
      ],
      event: $event,
      item: item,
    });
    $event.preventDefault();
  }
}
```

## Menu Options

Every menu option has an `html` function and a `click` function.

The `enabled` function is optional.  If the function returns true, the item is enabled (default). If no function is provided, the item will be enabled by default.

```js
public menuOptions = [
  {
    html: (): string => {
      return 'Something';
    },
    click: (item, $event): void {
      // Action
    },
    enabled: (item, $event): boolean {
      // Enable or Disable
      return true; // enabled = true, disabled = false
    }
  }
];
```


## Custom HTML

```js
let customHtml = `<div style="cursor: pointer; background-color: pink">
                 <i class="glyphicon glyphicon-ok-sign"></i> Testing Custom </div>`;

let customItem = {
    html: () => customHtml,
    enabled: function() {return true},
    click: function (item, $event) {
        alert("custom html");
    }};

this.customHTMLOptions = [
  customItem,
  {
    html: () => 'Example 1',
    click: (item, $event): void {
      alert("Example 1");
    }
  }];
```
<commit_msg>Event to MouseEvent in readme<commit_after># angular2-contextmenu

A context menu built with Angular 2 inspired by [ui.bootstrap.contextMenu](https://github.com/Templarian/ui.bootstrap.contextMenu).  Bootstrap classes are included in the markup, but there is no explicit dependency on bootstrap. [Demo](http://plnkr.co/edit/wpJXpEh4zNZ4uCxTURx2?p=preview)

## Usage

- `npm install angular2-contextmenu`

### Template

```html
<ul>
    <li *ngFor="item in items" (contextmenu)="onContextMenu($event, item)">Right Click: {{item.name}}</li>
</ul>
<context-menu></context-menu>
```

### Component Code

```js
import { ContextMenuComponent, ContextMenuService } from 'angular2-contextmenu';

@Component({
  directives: [ ContextMenuComponent ],
  providers: [ ContextMenuService ],
  ...
})
export class MyContextMenuClass {
  public items = [
      { name: 'John', otherProperty: 'Foo' },
      { name: 'Joe', otherProperty: 'Bar' }
  };

  constructor(private contextMenuService: ContextMenuService) {}

  public onContextMenu($event: MouseEvent, item: any): void {
    this.contextMenuService.show.next({
      actions: [
        {
          html: () => `Say hi!`,
          click: (item) => alert('Hi, ' + item.name)
        },
        {
          html: () => `Something else`,
          click: (item) => alert('Or not...')
        },
      ],
      event: $event,
      item: item,
    });
    $event.preventDefault();
  }
}
```

## Menu Options

Every menu option has an `html` function and a `click` function.

The `enabled` function is optional.  If the function returns true, the item is enabled (default). If no function is provided, the item will be enabled by default.

```js
public menuOptions = [
  {
    html: (): string => {
      return 'Something';
    },
    click: (item, $event): void {
      // Action
    },
    enabled: (item, $event): boolean {
      // Enable or Disable
      return true; // enabled = true, disabled = false
    }
  }
];
```


## Custom HTML

```js
let customHtml = `<div style="cursor: pointer; background-color: pink">
                 <i class="glyphicon glyphicon-ok-sign"></i> Testing Custom </div>`;

let customItem = {
    html: () => customHtml,
    enabled: function() {return true},
    click: function (item, $event) {
        alert("custom html");
    }};

this.customHTMLOptions = [
  customItem,
  {
    html: () => 'Example 1',
    click: (item, $event): void {
      alert("Example 1");
    }
  }];
```

{'fraction_non_alphanumeric': 0.15642229936695937, 'fraction_numerical': 0.003675719828466408, 'mean_word_length': 2.959579628132579, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 37, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7332364', 'n_tokens_mistral': 1558, 'n_tokens_neox': 1495, 'n_words': 418}