Skip to main content

modesConfig

The modesConfig configuration option allows you to customize specific modes in OpenKeyNav, such as the drag-and-drop functionality. This option provides flexibility in defining how different interactive modes are set up and managed.

Configuration Option​

modesConfig​

  • Type: Object
  • Description: An object to configure different modes in OpenKeyNav.

Properties​

  • move (optional): Configuration for drag-and-drop mode.

move Configuration​

The move configuration object allows you to define how drag-and-drop interactions should work. It includes options for specifying containers, elements, and callback functions.

Properties​

  • config (optional): An array of objects defining drag-and-drop configurations.

config Array Objects​

Each object in the config array can include the following properties:

  • fromContainer (string, optional): Selector for the container that holds the draggable elements.
  • fromElements (string, optional): Selector for the specific draggable elements within the fromContainer.
  • resolveFromElements (function, optional): Callback function to dynamically resolve the draggable elements.
  • fromExclude (string, optional): Selector for elements within fromContainer to exclude from being draggable.
  • toElements (string, required): Selector for the drop zone targets.
  • resolveToElements v.next (function, optional): Callback function to dynamically resolve the drop zone targets.
  • callback (function, optional): Callback function that is called when a draggable element is moved to a drop zone.

Example​

Here's an example of how to configure the drag-and-drop mode in OpenKeyNav:

const openKeyNav = new OpenKeyNav();

const moveConfig = [
  {
    fromContainer: ".classContainerFrom1",
    fromElements: ".classElementFrom1",
    resolveFromElements: function() { // Optional callback to resolve fromElements
        return document.querySelectorAll('.classElementFrom1'); 
    },
    fromExclude: ".excludeThisElement",
    toElements: ".classToA, .classToD, .classToE", 
    callback: (el, target) => {
      console.log('Moved', el, 'to', target);
    }
  },
  {
    fromContainer: ".classContainerFrom2",
    toElements: ".classToB"
  },
  {
    resolveFromElements: function() { 
        return document.querySelectorAll('.classElementFrom3'); 
    },
    toElements: ".classToC"
  }
];

const config = {
    modesConfig: {
        move: {
            config: moveConfig
        }
    }
};

openKeyNav.init(config);

In this example, the modesConfig object is used to configure the drag-and-drop functionality with various settings for containers, elements, and callbacks.

Summary​

  • modesConfig Object: Configure different modes in OpenKeyNav.
  • move Property: Customize drag-and-drop interactions with options for containers, elements, and callbacks.
  • Flexibility: Tailor the behavior of interactive modes to suit the specific needs of your website.

By using the modesConfig configuration option, you can enhance the interactive capabilities of OpenKeyNav and provide a better user experience on your website.