vanilla-picker – A simple, easy-to-use Color Picker

vanilla-picker

The vanilla-picker library is a modern, easy-to-use, plain vanila JavaScript Color Picker without any dependencies. It is usable directly in your browser, as well as AMD, UMD and nodeJS module. The script itself supports basic keyboard handling and is accessible for screen readers too.

The Color Picker supports the RGB(a), HSL(a) and HEX Format. The author doesn’t offer any browser compatibility, but it should work in all modern browsers (which doesn’t includes the Internet Explorer).

Download the latest version of vanilla-picker as .ZIP or as .TAR package!

npm i vanilla-picker --save

yarn add vanilla-picker --save

Instructions

The package itself just contains the main JavaScript file as normal as well as minified version. A ES6 module edition is also available. The design is completely up to you, but you can work with the Preprocssing SCSS files within the GitHub Repository.

 

Load vanilla-picker

It’s recommended to load your Styles / Stylesheet within the Header of your HTML document. The JavaScript file can be located wherever you want, but we recommend it to embed this file immediately after the opened <body> tag.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        
        <!-- Required Stylesheet -->
        <link type="text/css" rel="stylesheet" href="/css/vanilla-picker.css" />
    </head>
    <body>
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/vanilla-picker.js"></script>
    </body>
</html>

 

Configure vanilla-picker

The script itself offers some settings to configure the design an the behavior. But to get the vanilla-picker working you need to pass at least a parentElement, defined as first argument or as option (using parent as key). You can also completely define the Output HTML Format of the Color Picker with the template option.

document.addEventListener("DOMContentLoaded", {
    var picker1 = new Picker(parentElement);
    
    // With Settings
    var picker2 = new Picker({
        alpha:          true,
        color:          null,
        editor:         true,
        editorFormat:   "hex",
        layout:         "default",
        parent:         undefined,      // This option is required!
        popup:          "right",
        template:       '<div class="picker_wrapper" tabindex="-1">'
                      + '    <div class="picker_arrow"></div>'
                      + '    <div class="picker_hue picker_slider"><div class="picker_selector"></div></div>'
                      + '    <div class="picker_sl"><div class="picker_selector"></div></div>'
                      + '    <div class="picker_alpha picker_slider"><div class="picker_selector"></div></div>'
                      + '    <div class="picker_editor">'
                      + '        <input aria-label="Type a color name or hex value"/>'
                      + '    </div>'
                      + '    <div class="picker_sample"></div>'
                      + '    <div class="picker_done"><button>Ok</button></div>'
                      + '</div>',
        
        // Callbacks
        onChange:       function(color){ },
        onDone:         function(color){ },
        onOpen:         function(color){ },
        onClose:        function(color){ },
    });
    
});

 

Configure: Options

alpha
Whether to enable adjusting the alpha channel.
color
Initial color for the picker.
editor
Whether to show a text field for color value editing.
editorFormat
How to display the selected color in the text field (the text field still supports input in any format).
layout
Suffix of a custom “layout_…” CSS class to handle the overall arrangement of the picker elements.
parent
Which element the picker should be attached to.
popup
If the picker is used as a popup, where to place it relative to the parent. false to add the picker as a normal child element of the parent.
template
Custom HTML string from which to build the picker. See /src/picker.pug for required elements and class names.
onChange
Callback whenever the color changes.
onDone
Callback when the user clicks “Ok”.
onOpen
Callback when the popup opens
onClose
Callback when the popup closes.

Leave a Reply

Top