Mobile-friendly & Keyboard Accessible Color Picker – Talwin

Category: Color , Javascript | September 18, 2022
Author:SofianChouaib
Views Total:0 views
Official Page:Go to website
Last Update:September 18, 2022
License:MIT

Preview:

Mobile-friendly & Keyboard Accessible Color Picker – Talwin

Description:

Talwin is a lightweight, touch-enabled, and keyboard-accessible color picker component made in pure Vanilla JavaScript.

More Features:

  • Light & Dark themes.
  • Supports 3 color formats: rgba, hsl, hsv.
  • Custom position.
  • Allows you to predefined colors.
  • And much more.

How to use it:

1. Install and import the Talwin.

# Yarn
$ yarn add talwin
# NPM
$ npm i talwin
// Import javascript.
import talwin from 'talwin';
// Import css.
import 'talwin/dist/css/talwin.min.css';
// Browser
<link rel="stylesheet" href="/dist/css/talwin.min.css">
<script src="/dist/js/talwin.min.js"></script>
// CDN
<link rel="stylesheet" href="https://unpkg.com/talwin/dist/css/talwin.min.css">
<script src="https://unpkg.com/talwin/dist/js/talwin.min.js"></script>

2. Create an element to hold the color picker.

<div id="example"></div>

3. Initialize the Talwin color picker.

const talwin = new Talwin('#example', {
      // Options here
});

4. All available options.

const talwin = new Talwin('#example', {
      // Set the container's (widget) id.
      id: '',
      // One or many classes separated by a white space,
      // to add it to the preset button.
      classname: '',
      // 'dark' or 'light'.
      theme: 'light',
      // Toggle picker's visibility (Show/Hide),
      // Setting this to false keeps the picker visible.
      toggle: true,
      // Display the picker container as a pop-up (a box that floats on top of the page content),
      // if it's false, picker container will be displayed as a block (embeded in the page's content).
      popover: true,
      // Set the position of the popper (if popover is set to true) relative to the reference element,
      // the position has two values seperated by a dash (-),
      // the first value is the direction (top, bottom, right, left),
      // the second value is the alignment (start, center, end), omitting this value will default to center.
      // e.g. 'bottom-start': 'bottom' places the picker below the reference element,
      // and 'start' aligns the left side of the container with the left side of the reference element.
      // Note: 
      // If the picker container has no space to be placed, it will auto-position itself.
      // based on the available space.
      position: 'bottom-start',
      // Set the gap (in pixels) between the picker container and the reference element.
      margin: 8,
      // Replace the reference element with a pre-styled button.
      //  In case you set the preset to false (using your own reference element), 
      // to access the color to change its background or any other property, 
      // add the css custom property to your styles --tw-color.
      preset: true,
      // Initial color.
      color: '#000',
      // Default color.
      default: '#000',
      // Target can be a selector or an HTML element,
      // If the option popover is true, the picker container will be positionned retalive to this element,
      // instead of the reference element.
      // else if popover option is false, the picker container will be appended as a child into this element.
      target: '',
      // Disable the picker, users won't be able to pick colors.
      disabled: false,
      // Initial color format.
      format: 'rgb',
      // For the formats 'hsl' and 'rgb', choose a single input to display the color string,
      // or if false, display an input for each color channel.
      singleInput: false,
      // Choose color formats for the picker input, 'hsl', 'rgb' or 'hex',
      // No input will be displayed if the array is empty.
      inputs: {
        rgb: true,
        hex: true,
        hsl: true,
      },
      // Support alpha channel and display opacity slider.
      opacity: true,
      // Preview the color.
      preview: true,
      // Add/Remove a copy button.
      copy: true,
      // Array of color strings, invalid color strings will default to rgb(0,0,0).
      swatches: [],
      
});

5. Events.

talwin.on('open', function() {
  // do something
});
talwin.on('close', function() {
  // do something
});
talwin.on('change', function(colorObject, source) {
  // do something
});
talwin.on('color', function(colorObject, source) {
  // do something
});

6. Color props.

talwin.on('change', function(color) {
  // output: { r: 0, g: 0, b: 0, a: 1}
  color.rgb()
  // output: [0, 0, 0, 0]     
  color.rgb(true)
  // output: rgba(0, 0, 0, 1)            
  color.rgb().toString()     
  
  // output: #000000
  color.hex()                
  
  // output: { h: 0, s: 0, l: 0, a: 1 }
  color.hsl() 
  // output: [0, 0, 0, 0]          
  color.hsl(true)
  // output: hsla(0, 0%, 0%, 1)  
  color.hsl().toString()    
  
})

7. API methods.

// set color
talwin.setColor(color: string | object);
// get color
talwin.getColor();
// open the color picker
talwin.open();;
// check if the color picker is open
talwin.isOpen();
// toggle the color picker
talwin.toggle();
// set uptions
talwin.setOptions(options: object);
// trigger an event
talwin.trigger(event: string);
// bind/unbind events
talwin.on(event: string, handler: callback);
talwin.off(event: string, handler: callback);
// disable the color picker
talwin.disable();
// enable the color picker
talwin.enable();
// re-position the color picker
talwin.reposition();
// add a swatch button
talwin.addSwatch(color: string);
// remove color from the swatches array
talwin.removeSwatch(swatch: string | number);
// reset the color
talwin.reset();
// destroy the instance
talwin.destroy();

You Might Be Interested In:


Leave a Reply