ng-ovh-actions-menu

An actions menu gives the opportunity to group a set of actions available for a specific context under a single menu.

Install

$ yarn add @ovh-ux/ng-ovh-actions-menu

Usage

import angular from 'angular';
import ngOvhActionsMenu from '@ovh-ux/ng-ovh-actions-menu';

angular.module('myApp', [ngOvhActionsMenu]);

TODO

• customizing page width ;
• customizing open animation ;
• actions with confirmation.

Documentation

actionsMenu - directive

This is the main directive of the module. It's creating a popover with desired actions inside.

Arguments

| Param | Type | Details | | ---- | ---- | ---- | | ng-ovh-actions-menu-options | Object[] | A list of actions options that will be displayed into actionsMenu. See ActionsMenu factory and ActionsMenuItem factory for available options. | | ng-ovh-actions-menu-popover-settings | Object | A list of options of the popover. For now only : class, placement, trigger and isOpen options are supported. Feel free to add others!!! See ui.bootstrap.popover for more informations. |

Example

The following example will open an actions popover with 2 actions inside it:

In your controller:

import angular from 'angular';

angular.module('myApp').controller(
  'MyCtrl',
  /* @ngInject */ ($scope) => {
    $scope.popoverSettings = {
      'popover-class': 'my-custom-class',
      'popover-placement': 'bottom-right',
    };

    $scope.actionsOptions = [
      {
        title: 'My Beautiful title',
        icon: 'filled-check',
        href: 'http://www.google.be',
      },
      {
        title: 'My Other title',
        icon: 'filled-error',
        state: 'my-manager.state1',
      },
    ];
  },
);

And in your html view:

<actions-menu
    data-ng-ovh-actions-menu-options="actionsOptions"
    data-ng-ovh-actions-menu-popover-settings="popoverSettings">
    <span class="my-font my-font-actions" aria-hidden="true"></span>
    Button actions
</actions-menu>

actionsMenuItem - directive

This directive represent an item into an actions menu.

This directive is included by its parent directive: actionsMenu, and should not be called offside of the module scope.

Arguments

| Param | Type | Details | | ---- | ---- | ---- | | ng-ovh-actions-menu-item | ActionMenuItem | An instance of ActionMenuItem. | | ng-ovh-actions-menu-item-on-click | Function | A callback function called when the action menu item has been clicked. |

ActionsMenu - object

Factory that describe an actions menu.

A new instance of ActionsMenu is created and used by the actionsMenu directive.

Dependencies

• ActionsMenuItem

Arguments

| Param | Type | Details | | ---- | ---- | ---- | | options | Object | Options for creating a new ActionsMenu instance. | | options.actionsMenuItems | Array | The options of the items that will be added to the ActionsMenu instance. |

Methods

addActionItem

Add an actions menu item into actions list.

Parameters

| Param | Type | Details | | ---- | ---- | ---- | | actionMenuItemOptions | Object | The options for creating a new action menu item. See ActionsMenuItem factory for available options. |

Returns

| Type | Description | | ---- | ---- | | ActionsMenuItem | The added actions menu item. |

Example

import angular from 'angular';

angular.module('myApp').controller(
  'MyCtrl',
  /* @ngInject */ (ActionsMenu) => {
    const actionMenu = new ActionsMenu({
      actionsMenuItems: [
        {
          title: 'My Beautiful title',
          icon: 'filled-check',
          href: 'http://www.google.be',
        },
      ],
    });
  },
);

ActionsMenuItem - object

Factory that describe an item into an actions menu.

Arguments

| Param | Type | Details | | ---- | ---- | ---- | | options | Object | Options for creating a new ActionsMenuItem instance. | | options.external | String | Is the link is an external link. In other words, will we be redirected offside of the manager ? | | options.href | String | The href to be redirected if item is clicked. Has no effect if state option is defined or subItems option is defined. | | options.icon | String | The icon class of the actions menu item icon. | | options.state | String | The state to be redirected when item is clicked. Has no effect if href option is defined or subItems option is defined. | | options.stateParams | Object | The params to pass to the state. | | options.subActions | Array | Sub actions options to be added to the actions menu item. The options are the same of a first level item options. The actionsMenu directive only manage two levels of actions (only level one items with potentially sub actions). | | options.target | String | The target of the href anchor tag. This will be the target html attribute. | | options.title | String | The title of the actions menu item. |

Methods

getFullSref

Get the full sref string that will be applied to item that have state defined.

Returns

| Type | Description | | ---- | ---- | | String | The string representation of a state. For example: my.manager.state({param1:1, param2:2}). |

addSubAction

Add a sub action item to current actions menu item instance.

Parameters

| Param | Type | Details | | ---- | ---- | ---- | | subActionOptions | Object | Options for creating an actions menu sub item. See constructor options for more details. |

Returns

| Type | Description | | ---- | ---- | | ActionsMenuItem | The new instance of actions menu item created. |

hasSubActions

Check if the instance of actions menu item has sub actions defined.

Returns

| Type | Description | | ---- | ---- | | Boolean | true if item has subItems, false otherwise. |

Example

import angular from 'angular';

angular.module('myApp').controller(
  'MyCtrl',
  /* @ngInject */ (ActionsMenuItem) => {
    const actionMenuItem = new ActionsMenuItem({
      title: 'My Beautiful title',
      icon: 'filled-check',
      href: 'http://www.google.be',
    });
  },
);

actionsMenuProvider - provider

• relates to the service : actionsMenu

actionsMenuProvider allows developer to configure the path of the translation file.

Methods

setTranslationPath

Allows you to change the default location of the translation file of the module.

Parameters

| Param | Type | Details | | ---- | ---- | ---- | | path | String | The new path of the translation file. |

Returns

| Type | Description | | ---- | ---- | | String | The new configured translation path. |

Example

import angular from 'angular';

angular.module('myApp').config((actionsMenuProvider) => {
  // set a new path for translations of the module
  actionsMenuProvider.setTranslationPath('/the/new/translation/path');
});

actionsMenu - service

• relates to the provider : actionsMenuProvider

This service enable you to load translation file.

Methods

Load the translation file from the configured path.

Returns

| Type | Description | | ---- | ---- | | Promise | When the translation file is loaded. |

Test

$ yarn test

Related

• ng-ovh-responsive-popover

Contributing

Always feel free to help out! Whether it's filing bugs and feature requests or working on some of the open issues, our contributing guide will help get you started.

License

BSD-3-Clause © OVH SAS