Ovh-angular-actions-menu NPM

ovh-angular-actions-menu

githubbanner

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

ovh-angular-actions-menu module follows the UX specification

Dependencies

Installation

Bower

bower install ovh-angular-actions-menu --save

NPM

npm install ovh-angular-actions-menu --save

Get the sources

    git clone https://github.com/ovh-ux/ovh-angular-actions-menu.git
    cd ovh-angular-actions-menu
    npm install
    bower install

You've developed a new cool feature? Fixed an annoying bug? We'd be happy to hear from you!

Have a look in CONTRIBUTING.md

Then inject actionsMenu module in your module declaration:

angular.module("myModule", [
    ...
    "ovh-angular-actions-menu",
    ...
]);

TODO

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

Documentation

For a full documentation of the module, launch:

# grunt ngdocs && grunt connect

Then go on http://localhost:9090.

Or simply follow the md version of documentation:

`actionsMenu` - directive

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

Arguments

Param	Type	Details
ovh-angular-actions-menu-options	Object[]	A list of actions options that will be displayed into actionsMenu. See ActionsMenu factory and ActionsMenuItem factory for available options.
ovh-angular-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:

angular.module("myManagerModule").controller("myTestController", function ($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-ovh-angular-actions-menu-options="actionsOptions"
              data-ovh-angular-actions-menu-popover-settings="popoverSettings">
    <i class="my-font my-font-actions"></i>
    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
ovh-angular-actions-menu-item	ActionMenuItem	An instance of ActionMenuItem.
ovh-angular-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

License

See https://github.com/ovh-ux/ovh-angular-actions-menu/blob/master/LICENSE

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

   angular.module("myManagerApp").controller("MyTestCtrl", function (ActionsMenu) {
       var 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

   angular.module("myManagerApp").controller("MyTestCtrl", function (ActionsMenuItem) {
       var actionMenuItem = new ActionsMenuItem({
           title: "My Beautiful title",
           icon: "filled-check",
           href: "http://www.google.be"
       });
   });

`actionsMenuProvider` - provider

relates to the service : actionsMenu

actionsMenuProvider allows developper 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

  angular.module("myManagerApp").config(function (actionsMenuProvider) {
       // set a new path for translations of the module
       actionsMenuProvider.setTranslationPath("/the/new/translation/path");
   });