Elegant Mobile-compatible Color Picker Component – pickr

Category: Color , Javascript , Recommended | October 17, 2018
Author: Simonwep
Views Total: 927
Official Page: Go to website
Last Update: October 17, 2018
License: MIT

Preview:

Elegant Mobile-compatible Color Picker Component – pickr

Description:

The pickr JavaScript library helps you create an elegant, customizable, touch-enabled color picker for your app.

Supports HEX, RGB, HSL, HSV, CMYK color formats and alpha channel.

Also provides a function that converts the default color values (HSVa) to HSLa, RGBa, HEX and CMYK values.

Supports both browser and node.js.

How to use it:

Install the pickr.

# NPM
$ npm install pickr-widget --save

Add the pickr’s JavaScript and Stylesheet to the page.

<link href="dist/pickr.min.css" rel="stylesheet">
<script src="dist/pickr.min.js"></script>

Create a container element to place the color picker.

<div class="example"></div>

Initialize the pickr to generate a default color picker.

const pickr = new Pickr({
      el: '.example',
      default: '#42445A' // default color
});

Customize the position of the color picker when triggered.

const pickr = new Pickr({
      el: '.example',
      default: '#42445A',
      position: 'middle', // or 'top', 'left'
});

Customize the color picker component.

const myPickr = new Pickr({

      el: '.example',
      components: {

        // color preview
        preview: true,

        // enables opacity slider
        opacity: true,

        // enables HUE slider
        hue: true,     // Hue slider

        // shows/hides controls
        output: {
          hex: true,
          rgba: true,
          hsla: true,
          hsva: true,
          cmyk: true, 
          input: true
        }
      }

});

Available color converters.

hsva.toHSVA()
hsva.toHSLA()
hsva.toRGBA()
hsva.toHEX() 
hsva.toCMYK()
hsva.clone()

Available options.

const pickr = new Pickr({

  // Selector or element which will be replaced with the actual color-picker.
  // Can be a HTMLElement.
  el: '.color-picker',

  // Using the 'el' Element as button, won't replace it with the pickr-button.
  // If true, appendToBody will also be automatically true.
  useAsButton: false,

  // Start state. If true 'disabled' will be added to the button's classlist.
  disabled: false,

  // If set to false it would directly apply the selected color on the button and preview.
  comparison: true,

  // Default color
  default: 'fff',

  // Option to keep the color picker always visible. You can still hide / show it via
  // 'pickr.hide()' and 'pickr.show()'. The save button keeps his functionality, so if
  // you click it, it will fire the onSave event.
  showAlways: false,

  // Defines a parent for pickr, if useAsButton is true and a parent is NOT defined
  // 'body' will be used as fallback.
  parent: null,

  // Close pickr with this specific key.
  // Default is 'Escape'. Can be the event key or code.
  closeWithKey: 'Escape',

  // Defines the position of the color-picker. Available options are
  // top, left and middle relativ to the picker button.
  // If clipping occurs, the color picker will automatically choose his position.
  position: 'middle',

  // Enables the ability to change numbers in an input field with the scroll-wheel.
  // To use it set the cursor on a position where a number is and scroll, use ctrl to make steps of five
  adjustableNumbers: true,

  // Show or hide specific components.
  // By default only the palette (and the save button) is visible.
  components: {

      preview: true, // Left side color comparison
      opacity: true, // Opacity slider
      hue: true,     // Hue slider

      // Bottom interaction bar, theoretically you could use 'true' as propery.
      // But this would also hide the save-button.
      interaction: {
          hex: true,  // hex option  (hexadecimal representation of the rgba value)
          rgba: true, // rgba option (red green blue and alpha)
          hsla: true, // hsla option (hue saturation lightness and alpha)
          hsva: true, // hsva option (hue saturation value and alpha)
          cmyk: true, // cmyk option (cyan mangenta yellow key )

          input: true, // input / output element
          clear: true, // Button which provides the ability to select no color,
          save: true   // Save button
      },
  },

  // Button strings, brings the possibility to use a language other than English.
  strings: {
     save: 'Save',  // Default for save button
     clear: 'Clear' // Default for clear button
  }
});

API methods.

// sets a color
myPickr.setHSVA(h,s,v,a)

// parses a string
myPickr.setColor(string)

// shows the color picker
myPickr.show()

// hides the color picker
myPickr.hide()

// disables the color picker
myPickr.disable()

// enables the color picker
myPickr.enable()

// checks if is ipen
myPickr.isOpen()

// returns the root DOM element
myPickr.getRoot():HTMLElement

// returns the current HSVa color
myPickr.getColor()

// destroy the color picker
myPickr.destroy()

// destroy the color picker and remove it from DOM
myPickr.destroyAndRemove()

Callback functions.

const pickr = new Pickr({
      el: '.example',
      onChange(hsva, instance) {
        hsva;     // HSVa color object, if cleared null
        instance; // Current Pickr instance
      },

      // User has clicked the save button
      onSave(hsva, instance) {
          // same as onChange
      }
});

Changelog:

10/17/2018

  • v0.3.0: update

10/11/2018

  • v0.2.5: Remove appendToBody option; Add parent option; Fix broken mobile input and negative number overflow

10/07/2018

  • v0.2.4: Fix delayed color-recalculation; Fix ignored move action in moveable; Remove basically useless function binding

08/28/2018

  • v0.2.3: Prevent recalculation on user input and some refactoring; Fix broken useAsButton option

08/23/2018

  • v0.2.2: Refactor helper classes to factory functions; Fix hsva representation and missing snipped in moveable; Only round color values on output; Use factory function for hsvacolor class

08/08/2018

  • v0.1.7: Fixed Opening page on <iframe> prevents color picker modal to show on mobile devices; minor improvements, smaller code; add enable and disable functions; Fix losting focus on first input bug; Append save-button option to components

07/08/2018

  • v0.1.6

07/05/2018

  • v0.1.5: Add support for rtl attribute; bugfix

06/28/2018

  • v0.1.4: Add support for rtl attribute

06/26/2018

  • Add possibility to apply custom button strings

06/21/2018

  • v0.1.3

06/20/2018

  • v0.1.2: Add appendToBody option; Mask invalid characters in data URI’s;  Add parsing of hex representation with alpha channel

Leave a Reply