annular-menu

menus

Demo

• Demo1 url
• Demo2 url

Getting Started

Interfaces

    interface MenuConfig {
        angle?:number; // define menu radian eg:Math.PI / 6
        callback?:Function; // called when menu created
    }
    interface Menu extends MenuConfig {
        name:String; // menu name
        caption:String; // menu caption
        html?:String; // menu html content
        icon?:String; // menu icon
        menuList?:MenuList; // subMenu define
    }
    interface MenuList extends MenuConfig {
        items:Menu[]; // menu list
        radiusStep?:number; // whitespace of two arc
        offsetRadius?:number; // distance of two arc
    }
    interface AnnularMenuOption {
        menuList:MenuList;
        startAngle?:number;
        centerSize?:number;
        collapsible?:boolean;
        draggable?:boolean;
    }
    interface Point {
        x:number;
        y:number;
    }
    interface EventListeners {
        click:Function,
        mouseover:Function
        menuClick:Function[],
        menuHover:Function[]
    }  

Define Menu data

    //second level menu
    var menus_1 = [];
    for(var i = 0;i < 4;i++){
        menus_1.push({
            name: 'M1_' + i,
            caption: 'M1_' + i,
            icon: './image/icon.png',
            angle:Math.PI / 4,
            menuList:{
                radiusStep:5,
                items:[]
            }
        });
    }
    
    // first level menu
    var menus_0 = [];
    for(i = 0;i < 4;i++){
        menus_1.push({
            name: 'M0_' + i,
            caption: 'M0_' + i,
            icon: './image/icon.png',
            menuList:{
                radiusStep:8,
                items:menus_1
            }
        });
    }

Initiate AnnularMenu

    var contextMenu = new HERE.UI.AnnularMenu({
      menuList:{
          items:menus_0
      }
    });

Render AnnularMenu

    var centerX = document.body.clientWidth / 2,
        centerY = document.body.clientHeight / 2;
    var element = contextMenu.render({
        x:centerX,
        y:centerY
    });
    
    var container = document.querySelector('.menu-container');
    container.appendChild(element);

Event

1. menuClick
2. menuHover
3. click
4. mouseover

    contextMenu.addEventListener('menuClick', function (e,menu) {
    });

API

1. render(position?:Point):SVGElement
2. scale(point?:Point)
3. position(point?:Point)
4. toggleCollapse(collapse?:boolean)
5. toggleVisible(visible?:boolean)
6. addEventListener(type:String, handler:Function)
7. removeEventListener(type:String, handler:Function)