caph-context-menu - Documentation

caph-context-menu directive is used to provide users with an easy hierarchical menu.

Attributes

Context Menu can have several attributes like below

items

Context-menu needs a specific format to work with JSON. It is array type of the object and each item has two required fields: id & content. Each menu-item of the sub-menu is represented by an object. So all objects should be arranged by you want to show.

id (required) : identifier of each menu-item. It is used as parameter of 'on-select-item' callback function.
content (required) : string or tags, it is served as the menu-item content.
parent : If the menu-item is child of any other, 'parent' property should be set to parent's id.
disabled : If the menu-item should be not selectable, this should be set to true.
```
[
  {
      id          : "string", // required
      content     : "string", // required
      parent      : "string", // parent's id
      disabled     : boolean
  },
  ...
]
```
If you need any other properties in template, define it on each object. Then you can use it on item template.

menu-option

Menu's option for each depth that is start from 0. it can contain the property like below.

style : Used to decorate each sub-menu.
offset (only for sub-menu) : Used to define position of sub-menu.
class : Used to set class name for sub-menu.
visibleItemCount : Used to limit menu-item count to view. If this value is set and item count is bigger than it, arrow buttons will be show on each menu.

position

absolute coordinate of context menu. If you don't set this value, menu's position will depend on css style.

focusable-depth

Initial number of depth for focusable element. Focusable depth of each sub-menu will increase from this value. So it's important to avoid possible duplication.

on-select-item

the callback function of the select event on each item. This function can have parameters as '$itemId' and '$event'. '$itemId' is the item's id user select. '$event' is event object of jQuery.

on-focus-item

the callback function of the focus event on each item. This function can have parameters as '$event'. '$event' is event object of jQuery.

on-blur-item

the callback function of the blur event on each item. This function can have parameters as '$event'. '$event' is event object of jQuery.

show

open or close the context menu.

Templates

item template

'caph-context-menu' directive can contain 'caph-context-menu-item-template' directive for decorating each menu-item.

'caph-context-menu-item-template' is a template for each menu item. it can contain html in the tag. So user can use properties of each menu item and decorate text or add image or another html elements. If you add more property to item, you can use this property in 'caph-context-menu-item-template'

 [item]
 {id: 'korea', content: 'Korea, KR', textColor: 'white'}

 [template]
 <caph-context-menu-item-template><span style="color:{{textColor}}">{{content}} ({{id}})</span></caph-context-menu-item-template>

When you use this template, you can see dom structure like below

 <div class="caph-context-menu">
     <ul>
         <li>
             <span style="color:white;">Korea, KR (KR)</span>
         </li>
     </ul>
 </div>

arrow-up / arrow-down button templates

'caph-context-menu-arrow-up-template' and 'caph-context-menu-arrow-down-template' also provide templates for arrow buttons. If visible-item-count attribute is set and item count on sub-menu is fewer than visible-item-count, each sub-menu have arrow buttons for scrolling. You can define these directives for decorating arrow buttons.

 <caph-context-menu-arrow-up-template>▲</caph-context-menu-arrow-up-template>
 <caph-context-menu-arrow-down-template>▼</caph-context-menu-arrow-down-template>

Example

 var myApp = angular.module('myApp', ['caph.ui']);

 myApp.controller('myController', ['$scope', function($scope) {
     $scope.contextMenu1 = {
         items : [
             {id: 'korea', content: 'Korea, KR'},
             {id: 'usa', content: 'United State, US'},
             {id: 'la', content: 'LA', parent: 'usa'},
             {id: 'ny', content: 'Newyork', parent: 'usa'},
             {id: 'te', content: 'Texas', parent: 'usa'},
             {id: '1', content: 'One', parent: 'te'},
             {id: '2', content: 'Twe', parent: 'te'},
             {id: '3', content: 'Three', parent: 'te'},
             {id: 'china', content: 'China, CN'},
             {id: 'japan', content: 'Japan, JP'},
             {id: 'tiwan', content: 'TIWAN, TW'}
         ],
         menuOption: {
             0: {
                 style: {
                     width: '300px'
                 }
             },
             1: {
                 offset: {x: -50, y:0}
             }
         },
         show: false,
         position: {x: 200, y: 140}
     };
     $scope.selectMenu = function(itemId, event){
         $scope.contextMenu1.show = false;
     };
     $scope.focusItem = function($event){
         console.log('focusItem');
     };
     $scope.blurItem = function($event){
         console.log('blurItem');
     };

     $scope.openContextMenu1 = function(){
         $scope.contextMenu1.show = !$scope.contextMenu1.show;
     };
 }]);

html

 <div class="sample-button" focusable on-selected="openContextMenu1()">
     <div class="button-text">Scroll</div>
 </div>

 <caph-context-menu show="contextMenu1.show" items="contextMenu1.items" menu-option="contextMenu1.menuOption"
     position="contextMenu1.position" focusable-depth="1" on-select-item="selectMenu($itemId, $event)"
     on-focus-item="focusItem($event, $originalEvent)" on-blur-item="blurItem($event, $originalEvent)">
     <caph-context-menu-item-template>{{content}}</caph-context-menu-item-template>
     <caph-context-menu-arrow-up-template>▲</caph-context-menu-arrow-up-template>
     <caph-context-menu-arrow-down-template>▼</caph-context-menu-arrow-down-template>
 </caph-context-menu>