Touch-enabled Radial Context Menu In Pure JavaScript – radialMenu

Preview:

Description:

A standalone JavaScript library to replace the default right-click menu with a customizable, radial (ring or pie chart style) context menu.

It is also compatible with the mobile device that enables the visitor to trigger the radial context menu on tap and hold.

How to use it:

Load the main JavaScript into the document.

<script src="src/RadialMenu.js"></script>

Load the Font Awesome for the menu icons. Optional. You can customize the iconic font later.

<link rel="stylesheet" href="/path/to/font-awesome.min.css">

Initialize the radialMenu and replace the default menu items.

const radial = new RadialMenu({
      buttons: [
    
        {'text': '\uF000', 'action': () => { alert(1) } },
        
        {'text': '\uF001', 'action': () => { alert(2) } },
        
        {'text': '\uF002', 'action': () => { alert(3) } }
      ]
});

Config the appearance of the radial context menu with the following settings.

const radial = new RadialMenu({
      fontFamily : 'FontAwesome', // customize iconic font here
      fontSize : 14,
      innerCircle : 50,
      outerCircle : 100,
      rotation: 0,
      shadowColor : 'rgba(0,0,0,0.2)',
      shadowBlur : 10,
      shadowOffsetX : 3,
      shadowOffsetY : 3,
      backgroundColor : "#EEE",
      borderColor : "#FFF",
      textColor : "#000",
      textBorderColor : "transparent",
      textShadowColor : "transparent",
      textShadowBlur : 10,
      textShadowOffsetX : 3,
      textShadowOffsetY : 3,
})

API methods.

// show the menu
radial.show();
// hide the menu
radial.hide();
// set the position of the menu
radial.setPos(x, y);
// add new buttons to the menu
addButtons(buttonArray);