Advanced Configuration

OpenKeyNav offers advanced configuration options for users who need more control. Here's how you can customize these settings:

Configuring Drag-and-Drop

You can customize the drag-and-drop functionality by defining specific containers and targets along with optional callback functions.

const moveConfig = [
  {
    fromContainer: ".containerOfMoveables",
    toElements: ".dropZoneTargetType1, .dropZoneTargetType2",
    callback: (elMoveable, elDropZoneTarget) => {
      // Your callback logic
    }
  },
  {
    fromContainer: ".classFrom2",
    toElements: ".classToB"
  },
  {
    fromContainer: ".classFrom3",
    toElements: ".classToC"
  }
];

// Initialize with drag-and-drop configuration
openKeyNav.init({
    modesConfig: {
        move: {
            config: moveConfig
        }
    }
});

Combining Multiple Advanced Configurations

You can combine multiple advanced configurations to create a comprehensive setup that suits your specific needs.

const fullConfig = {
    spot: {
        fontColor: 'yellow',
        backgroundColor: '#000',
        insetColor: '#ff0000',
        fontSize: '14px',
        arrowSize_px: 6
    },
    focus: {
          outlineColor: '#0088cc',
          outlineStyle: 'solid'
    },
    keys: {
        escape: 'q',
        click: 'c',
        scroll: 'w',
        move: 'd',
        heading: 'n'
    },
    modesConfig: {
        move: {
            config: moveConfig
        }
    }
    notifications: {
        enabled: true,
        displayToolName: true,
        duration: 10000
    }
    debug: {
        keyboardAccessible: true // default
    }
};

openKeyNav.init(fullConfig);

These advanced configurations allow you to fine-tune OpenKeyNav to better meet the specific needs of your users and ensure a seamless and accessible navigation experience.