• Stars
    star
    260
  • Rank 153,914 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 9 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

AngularJS Bootstrap UI Context Menu

contextMenu

AngularJS UI Bootstrap Module for adding context menus to elements. Demo

  • npm install angular-bootstrap-contextmenu or
  • bower install angular-bootstrap-contextmenu

Example

Usage

Add a reference to contextMenu.js. In your app config add ui.bootstrap.contextMenu as a dependency module.

Context Menu Settings

  • context-menu-on - (Default: 'contextmenu') A comma-separated string literal containing the events that will trigger the context menu to appear.
  • context-menu-empty-text - (Default: 'empty') An angular expression containing the string to be used when the context menu is empty
  • context-menu-class - A string literal containing a custom class to be added to the context menu (The <ul> elements)
  • allow-event-propagation - (Default: false) A boolean determining whether to allow event propagation. Note that if you set this to true, and don’t catch it with something else the browser’s context menu will be shown on top of this library’s context menu.
  • model - (See Model Attribute below)
  • close-menu-on - (Default: '') A string literal containing event for triggering menu close action.

View

<div>
    <div ng-repeat="item in items" context-menu="menuOptions">Right Click: {{item.name}}</div>
</div>
<div ng-bind="selected"></div>
  • OR
<div>
    <span>you can specify the event on how the menu opens:</span>
    <div ng-repeat="item in items" context-menu="menuOptions" context-menu-on="click">Left Click: {{item.name}}</div>
</div>
<div ng-bind="selected"></div>

Callback Parameters

There are currently 5 parameters that are being passed to the callback:

  • $itemScope - The scope of the directive
  • event - The event associated with this directive (normally contextmenu)
  • modelValue - See "Model Attribute" below
  • text - The HTML value of the text. Normally this contains the <a> tag surrounding the text by default.
  • $li - The list item selected

Controller

$scope.selected = 'None';
$scope.items = [
    { name: 'John', otherProperty: 'Foo' },
    { name: 'Joe', otherProperty: 'Bar' }
];

$scope.menuOptions = [
    // NEW IMPLEMENTATION
    {
        text: 'Object-Select',
        click: function ($itemScope, $event, modelValue, text, $li) {
            $scope.selected = $itemScope.item.name;
        }
    },
    {
        text: 'Object-Remove',
        click: function ($itemScope, $event, modelValue, text, $li) {
            $scope.items.splice($itemScope.$index, 1);
        }
    },
    // LEGACY IMPLEMENTATION
    ['Select', function ($itemScope, $event, modelValue, text, $li) {
        $scope.selected = $itemScope.item.name;
    }],
    null, // Dividier
    ['Remove', function ($itemScope, $event, modelValue, text, $li) {
        $scope.items.splice($itemScope.$index, 1);
    }]
];

Menu Options

The menu options passed onto context-menu can be one of:

  • An Array containing Objects to represent each item in the context menu
  • A Function returning an Array of Objects (as above)
  • A Promise returning an Array of Objects or a Function (as above)

New implementation

Every menu option is represented by an Object containing the following properties:

Property Type Description
text Function/String A function that returns the string or the actual string itself. Either text or html must be specified
html Function/String A function or string that returns the html to be used for this menu option. Either text or html must be specified
compile Boolean To compile html string to use a custom directive in the html string
click Function The function to be called on click of the option
enabled Function/Boolean A function returning whether the option is enabled or not, or a boolean
displayed Function/Boolean A function returning whether the option is displayed or not, or a boolean. If not displayed, no element is created at all and nothing related to the item will be executed (events, functions returning children, etc.)
children Array/Function/Promise [Array] - the actual Array of Objects for the level; [Function] - returns an Array of Objects, or a Function that returns the Array or a Promise as specified below; [Promise] - resolves with an Array or a Function that returns the Array as specified above
hasTopDivider Function/Boolean A function/boolean returning whether to append a divider before the current item. Defaults to false
hasBottomDivider Function/Boolean A function/boolean returning whether to append a divider after the current item. Defaults to false

Legacy implementation (still supported, but will not be updated any longer)

Every menu option has an array with 2-3 indexs. Most items will use the [String, Function] format. If you need a dynamic item in your context menu you can also use the [Function, Function] format.

The third optional index is a function used to enable/disable the item. If the function returns true, the item is enabled (default). If no function is provided, the item will be enabled by default.

$scope.menuOptions = [
    [function ($itemScope, $event, modelValue, text, $li) {
        return $itemScope.item.name;
    }, function ($itemScope, $event) {
        // Action
    }, function($itemScope, $event, modelValue, text, $li) {
        // Enable or Disable
        return true; // enabled = true, disabled = false
    }]
];

The menuOptions can also be defined as a function returning an array. An empty array will not display a context menu.

<div ng-repeat="item in items" context-menu="menuOptions(item)">Right Click: {{item.name}}</div>
$scope.menuOptions = function (item) {
    if (item.name == 'John') { return []; }
    return [
        [function ($itemScope) {
            return $itemScope.item.name;
        }, function ($itemScope) {
            // Action
        }]
    ];
};

Events

There are some events you can listen to whenever the context menu is opening or closing

  • context-menu-opening - triggers right before the context menu is initially opened
  • context-menu-opened - triggers whenever any context menu is completely opened
  • context-menu-closed - triggers whenever any context menu is closed
  • context-menu-all-closed - triggers when all context menus are closed

Sample usage

$scope.$on('<event_name_here>', function (event, args) {
  args.context; // The element this directive is attached to
  args.params; // Available only for context-menu-opened the params passed for the context menu
  args.contextMenu; // Available only for context-menu-opened and context-menu-closed. The $ul element of this context menu.
})

Model Attribute (optional)

In instances where a reference is not passed through the $itemScope (i.e. not using ngRepeat), there is a model attribute that can pass a value.

<div context-menu="menuOptions" model="expression">Some item name here</div>

The model is evaluated as an expression using $scope.$eval and passed as the third argument.

$scope.menuOptions = [
    [function ($itemScope, $event, modelValue) {
        return $itemScope.item.name;
    }, function ($itemScope, $event, modelValue) {
        // Action
    }, function($itemScope, $event, modelValue) {
        // Enable or Disable
        return true; // enabled = true, disabled = false
    }]
];

Style Overlay

The class angular-bootstrap-contextmenu is added to the <div> that this context-menu is attached to.

To give a light darker disabled tint while the menu is open add the style below.

body > .angular-bootstrap-contextmenu.dropdown {
    background-color: rgba(0, 0, 0, 0.1);
}

More Repositories

1

MaterialDesign

✒7000+ Material Design Icons from the Community
10,905
star
2

WindowsIcons

Windows Phone and Windows RT CC Icons
961
star
3

MaterialDesign-Webfont

@mdi/font Dist for Material Design Icons.
HTML
390
star
4

slack-emoji-pokemon

Slack Pokemon Emojis
JavaScript
375
star
5

MaterialDesign-SVG

@mdi/svg Dist for Material Design Icons.
JavaScript
251
star
6

MaterialDesign-JS

Dist for Material Design Icons JS/TypeScript
JavaScript
155
star
7

MaterialDesign-Font

Distribution Repo for the TTF font
HTML
145
star
8

MaterialDesign-React

Dist for Material Design Icons React Component for JS/TypeScript
TypeScript
137
star
9

MaterialDesign-Site

Site v2.0. This repo contains the site and admin, so little confusing.
TypeScript
36
star
10

ModernIcons

Modern Icons - Iconography for Universal Applications and the Web
31
star
11

Remarkable

Remarkable Template App and Various Themes
HTML
27
star
12

Script

Simple scripting engine for C#.
C#
22
star
13

MaterialDesign-Font-Build

NodeJS Webfont builder tailored for MDI w/ cli support
HTML
22
star
14

MaterialDesign-Angular-Material

@mdi/angular-material Dist for Material Design Icons.
JavaScript
19
star
15

ui.bootstrap.materialPicker

Material Design Color Picker.
JavaScript
13
star
16

lwc-ui

Absolutely minimal UI components LWC.
TypeScript
8
star
17

MaterialDesign-IconJar

@mdi/iconjar distribution for the IconJar format
JavaScript
6
star
18

MaterialDesign-AdobeXD

Material Design Icons distribution for AdobeXD Library.
JavaScript
6
star
19

ui.bootstrap.progressCircle

Circular Progress for AngularJS Bootstrap.
JavaScript
6
star
20

MaterialDesign-Web-Component

MDI Icon web component for use with @mdi/js
HTML
5
star
21

MaterialDesignLight-Webfont

Dist repo for Material Design Icons Light Font
CSS
4
star
22

MaterialDesign-ng

Angular 5 Distribution and Build for MDI Component and Icons.
TypeScript
3
star
23

Savvy

jqLite compatible markup parser for the Savvy syntax.
JavaScript
3
star
24

MaterialDesignLight-SVG

@mdi/light-svg Dist repo for Material Design Icons Light SVG / meta.json
3
star
25

MaterialDesign-Meta

Dist for Material Design Icons meta.json
JavaScript
3
star
26

MaterialDesign-React-Demo

Demo for MaterialDesign-React
JavaScript
2
star
27

MaterialDesign-Webfont-Build

Custom Builds of the Webfont
JavaScript
2
star
28

lwc-demo

Need an example website to show off your Lightning web components? Use this project.
HTML
2
star
29

MaterialDesign-Vue

VueJS/VueTS Component for Material Design Icons
2
star
30

image-to-bmp

Convert image to 1 bit depth BMP
JavaScript
2
star
31

Templarian

Flat file website.
2
star
32

MaterialDesign-Util

Utils for Material Design Icons' Build scripts
JavaScript
2
star
33

MaterialDesignLight-JS

Dist repo for Material Design Icons Light for JavaScript / TypeScript
TypeScript
1
star
34

MaterialDesign-lwc

Material Design Icons Lightning web component
JavaScript
1
star
35

magnetic-tiles

D20 Magnetic 1.25 inch 3D printed tiles
JavaScript
1
star
36

MaterialDesign-Legacy

Legacy Repo Data... before wiping out the main repo
1
star
37

MaterialDesign-Polymer

MDI Polymer Dist
1
star
38

Element

@mdi/element TypeScript Element
TypeScript
1
star
39

ui.bootstrap.dragDrop

Drag and Drop data / files with a few helpful AngularJS directives.
JavaScript
1
star
40

MaterialDesign-Components

Components for the MDI Website
TypeScript
1
star
41

nfc-terminal

Vintage Holotape Computer
JavaScript
1
star
42

Memory-Device

Memory Device
TypeScript
1
star