Need private packages and team management tools?Check out npm Teams »

contexr

2.0.0-alpha.8 • Public • Published

Contexr

CircleCI

Stop redundantly defining your shortcuts in your shortcut library and your context menu. Start using Contexr!

Contexr is a context menu integrated with a shortcut module for Angular. Provide the module with different contexts and actions and they will appear in the context menu when you add ctx="context-name to your HTML element. You can add a shortcut for every context menu person there is, which will be the same all throughout your application.

Links

Installation

Installing Contexr is as simple as running the install command.

npm install contexr --save

Using Contexr

After installation, you can add context to any component! For example, if you want to increase the number displayed in a div using a context menu item, start by creating a field for our count and create a field for the context.

count = 0;
context = [
  {
    text: 'Increase',
    context: ['increase-count'],
    action: () => {
      this.count++;
    },
    hotkey: 'i'
  }
];

Next, inject the ContexrService and register the context within the constructor.

constructor(private contexr: ContexrService) {
  this.contexr.registerContextMenuItems(this.context);
}

This method will register your context menu item and configure the hotkey given. Now add an HTML element to your page. Use the [ctx] attribute to add a context.

<div
  [ctx]="'increase-count'"
  style="background: lightblue; padding: 20px;"
>
  Use the context menu to increase the count.
  <br />
  Count: {{count}}
</div>

Check out the demo site to see this working!

Adding arguments to your context

Adding arguments can be done using two simple steps. First, create a context item in your component. Add args: any to the method signature of the action method.

const context: any = [
  // Your other context items
  {
    text: 'Say my name',
    context: ['say-my-name'],
    action: (args: any) => {
      console.log('My name is ' + args.name);
    }
  }
];

Off course, you need to do something in your action method. We added a log statement that call out a name.

The second step is to add the context to your HTML elements. This time, we will add [ctxArgs]="some object" to the element to pass our argument. Let's add context to some rows of a table.

<table style="background: grey;">
  <tr>
    <td>Name</td>
    <td>City</td>
    <td>Country</td>
  </tr>
  <tr style="background: #b0b0b0;" [ctx]="'say-my-name'" [ctxArgs]="{name: 'Heisenberg'}">
    <td>Heisenberg</td>
    <td>Albuquerque</td>
    <td>Henk</td>
  </tr>
  <tr style="background: #b0b0b0;" [ctx]="'say-my-name'" [ctxArgs]="{name: 'Jesse'}">
    <td>Jesse</td>
    <td>Albuquerque</td>
    <td>Peter</td>
  </tr>
</table>

Install

npm i contexr

DownloadsWeekly Downloads

1

Version

2.0.0-alpha.8

License

MIT

Unpacked Size

569 kB

Total Files

60

Last publish

Collaborators

  • avatar