Option Picker 1.3.10

Features

Light-weight, no dependencies.
Simple API. Easy to master.
Responsive. It tries to place the option menus inside an area that is visible within the browser window.
Care about accessibility. Interacts very well using the keyboard keys. Free from the focus traps.

Usage

Browser

<!DOCTYPE html>
<html dir="ltr">
  <head>
    <meta charset="utf-8">
    <link href="./index.min.css" rel="stylesheet">
  </head>
  <body>
    <p>
      <select>
        <option>Option 1</option>
        <option>Option 2</option>
        <option value="3">Option 3</option>
      </select>
    </p>
    <script src="./index.min.js"></script>
    <script>
      const picker = new OP(document.querySelector('select'));
    </script>
  </body>
</html>

Node.js

Functions and methods in this application are mostly native JavaScript and are intended for use by the browser. Node.js doesn’t know about the DOM, so this kind of practice will probably be used more often to build new browser packages than to be used directly in the Node.js server.

CommonJS

const OP = require('@taufik-nurrohman/option-picker').default;

const picker = new OP(document.querySelector('select'));

ECMAScript

import OP from '@taufik-nurrohman/option-picker';

const picker = new OP(document.querySelector('select'));

Examples

Settings

let picker = new OP(source);

let picker = new OP(source, state = {
        join: ', ',
        parent: null,
        size: 5
    });

Name	Description
`source`	The source element that holds the initial option data.
`state`	The configuration data.
`state.join`	The separator character between values for multiple selection.
`state.parent`	The parent element as the source of the “click-outside” event handler to close the select box options that is currently open. It will use the `document` by default.
`state.size`	Default `size` value if `<select multiple>` element does not have `size` attribute defined.

Methods and Properties

OP.instances

Return the option picker instances.

for (let key in OP.instances) {
    console.log(key);
    console.log(OP.instances[key]);
}

OP.state

This property stores the initial values of picker.state.

const picker = new OP(source, {
        foo: ['bar', 'baz', 'qux']
    });

console.log([OP.state, picker.state]);

OP.version

Return the option picker version.

let version = OP.version,
    major = version.split('.')[0];

if (+major < 2) {
    // …
}

picker.get(eval = true)

Get current option value.

console.log(picker.get());

picker.options

Return all of the available options.

picker.pop()

Remove custom option picker features from the source element.

picker.self

Return the option picker element.

picker.self.style.borderWidth = '4px';

picker.set(value)

Set option picker’s value.

picker.set('Option 1');

picker.source

Return the option picker source element that holds the initial option value.

picker.source.addEventListener('change', function () {
    console.log(this.value);
}, false);

picker.state

Return the modified option picker states.

Hooks

Name	Description
`blur`	Will be triggered on every blur event.
`change`	Will be triggered on every value change.
`enter`	Will be triggered when option picker list is opened.
`exit`	Will be triggered when option picker list is closed.
`fit`	Will be triggered when option picker pane is positioned.
`focus`	Will be triggered on every focus event.
`pop`	Will be triggered after `picker.pop()`.

picker.fire(event, data)

Trigger a hook.

picker.fire('change', ['Option 1', picker.options]);

picker.hooks

Return the added hooks.

console.log(picker.hooks);

picker.off(event, then)

Remove a hook.

picker.off('change');

picker.off('change', onChange); // With context

picker.on(event, then)

Add a new hook.

picker.on('change', function (option, options) {
    console.log(option);
});

function onChange(option, options) {
    console.log(option);
}

picker.on('change', onChange); // With context

License

Use it for free, pay if you get paid. So, you’ve just benefited financially after using this project? It’s a good idea to share a little financial support with this open source project too. Your support will motivate me to do any further development, as well as to provide voluntary support to overcome problems related to this project.

Thank you! ❤️