Eight Bit Color Picker

Rendering

Rendering of color pickers can be done either by instantiating via a constuctor, or by using the detect function.

EightBitColorPicker constructor

The constructor takes in an object with the following properties:

• el: Either a string of an element ID or a DOMElement object (required)
• palette: An array of 256 strings in full hex format (e.g: #ffffff)
• color: Initial color to set picker instance at (valid values are between 0-255)

If no palette is specified, a sensible default is used. If color is not specified in the argument, it will first check if the targeted element has a data-color attribute and use that if so. Otherwise, a random color from the palette will be chosen.

var picker = new EightBitColorPicker({el: 'example', color: 6})

EightBitColorPicker.detect

This function finds all elements with the class eight-bit-color-picker, renders them as pickers, and returns a list of picker instances. Note that this function is not on the prototype chain, and can be invoked statically like so:

var pickers = EightBitColorPicker.detect()

Events

You can set up listeners for events emitted by a color picker instance. Currently, only the colorChange event is emitted.

colorChange event

This event is triggered when the selected color of a color picker changes. The detail property of the event contains these values:

• oldColor: The selected color before the change occurred
• newColor: The updated value of the color
• picker: A reference to the picker object

EightBitColorPicker.prototype.addEventListener

Acts as a proxy to the addEventListener function of the picker's DOMElement

picker.addEventListener('colorChange', function(e) {
  console.log('Old Color: ' + e.detail.oldColor)
  console.log('New Color: ' + e.detail.newColor)
  console.log('Hex Color: ' + e.detail.picker.getHexColor())
})

EightBitColorPicker.prototype.removeEventListener

Acts as a proxy to the removeEventListener function of the picker's DOMElement

picker.removeEventListener('colorChange', someFunc)

Getters

EightBitColorPicker objects expose several getters with useful values.

EightBitColorPicker.prototype.get8bitColor

Returns an integer from 0-255 that corresponds with the 8bit color index currently in display by the picker.

picker.get8bitColor()  // 6

EightBitColorPicker.prototype.getHexColor

Returns the currently selected color of the picker instance as a string in full hex format with a leading "#".

picker.getHexColor()  // "#008080"

EightBitColorPicker.prototype.getRGBColor

Returns the current color as an object with keys "r", "g", and "b". Values are integers from 0 to 255.

picker.getRGBColor()  // {r: 0, g: 128, b: 128}

EightBitColorPicker.prototype.getForegroundEscapeSequence

Returns the terminal escape code sequence to use the current color as a foreground color.

picker.getForegroundEscapeSequence() // "\x1b[38;5;6m"

EightBitColorPicker.prototype.getBackgroundEscapeSequence

Returns the terminal escape code sequence to use the current color as a background color.

picker.getBackgroundEscapeSequence() // "\x1b[48;5;6m"

Behavior Functions

Several functions are exposed that allow users to interact with picker objects programatically

EightBitColorPicker.prototype.show

Displays the color picker selection view

picker.show()

EightBitColorPicker.prototype.hide

Hides the color picker selection view

picker.hide()

EightBitColorPicker.prototype.updateColor

Updates the value of this.color and its representations. This takes two arguments:

• color: The color from 0-255 to use
• previewOnly: [optional] Only updates preview representation if truthy and leaves this.color alone

picker.updateColor(9)

EightBitColorPicker.prototype.restoreColor

Restores preview color representations to match the value of this.color. Useful if you've invoked updateColor with previewOnly set to true.

picker.restoreColor()

Browser Requirements

This will work in all modern browsers. If you're worried about IE, this should work fine on IE10 and up. As for mobile... it works, but the experience isn't quite ideal.