EasyLogic ColorPicker

EasyLogic ColorPicker is vanila-js colorpicker.

Document Site: https://colorpicker.easylogic.studio/#colorpicker-for-standalone

Demo

https://codepen.io/redgoose/pen/BaRaqEd

Install

npm install @easylogic/colorpicker

Using

module

import ColorPicker, {GradientPicker} from '@easylogic/colorpicker';
import '@easylogic/colorpicker/dist/EasyLogicColorPicker.css';

const picker = new ColorPicker({
  container: document.getElementById('basic'),
});

const gradientPicker = new GradientPicker({
  container: document.getElementById('gradient-picker'),
})

browser

<link href="https://cdn.jsdelivr.net/npm/@easylogic/[email protected]/dist/colorpicker.css" />
<div id="picker"></div>
<script src="https://cdn.jsdelivr.net/npm/@easylogic/[email protected]/dist/colorpicker.min.js"></script>

<script>
window.picker = new EasyLogicColorPicker({
  container: document.getElementById('picker'),
})
</script>

Initialize

import ColorPicker from '@easylogic/colorpicker';
const picker = new ColorPicker({
  container: document.getElementById('picker'),
  onInit: function(self) { console.log('initial colorpicker'); },
});

Component Options

refer to colorpicker javascript for detail

new ColorPicker({
  container,
  type: 'circle',
  color: 'lime',
  onChange: function(color) {
    console.log('change color', color);
  },
})

new GradientPicker({
  container,
  gradient: "linear-gradient(to right, white 0%, black 100%)",
  colorpicker: {
    type: "circle",
  },
  onChange: function(gradient) {
    console.log('change gradient', gradient);
  },
})

container

• required
• type: Element
• default: undefined

The element where the color picker is inserted is determined by the selector.

ex) document.querySelector('#picker'), document.getElementById('picker')

type

• type: string
• default: null
• value: default,circle,ring,mini,none

color picker theme design

color

• type: string
• default: #ffffff

Color code used for initialization

format

• type: string
• default: hex
• value: hex,rgb,hsl

The color format used when initializing

outputFormat

• type: string
• default: undefined
• value: hex,rgb,hsl

Color format output by callback function

useInformation

• type: boolean
• default: true

Whether to use the form area where the color code is displayed

useOpacity

• type: boolean
• default: true

투명도를 조절하는 슬라이더를 사용할지에 대한 여부를 정합니다.

paletteWidth

• type: number
• default: 200

Pallet width. It may not be available depending on the design type.

paletteHeight

• type: number
• default: undefined

palette vertical. It may not be available depending on the design type.

paletteThickness

• type: number
• default: 16

Thickness of circular pallet in design ring type

swatchTitle

• type: string
• default: Color palette

title of color swatch

swatchColors,

• type: array
• default: []
• value: ['#ff0000', '#00ff00', '#0000ff']

Color list in color swatches

onInit

• type: function
• params: this: EasylogicColorPickere

Executed when the color picker is initialized.

onChange

• type: function
• params: color: string

Executes when the color changes. ex) mousemove, touchmove

onChanged

• type: function
• params: color: string

Executes when the color change ends. ex) mouseup, touchend

onChangeFormat

• type: function
• params: format: string

It is executed when the color format is changed.

onDestroy

• type: function

Executed when the color picker object disappears.

Methods

You can use the color picker instance object to perform specific actions.

initialize

picker.initialize();

Initialize the instance. You can use it after executing destroy().

getColor

let color = picker.getColor();

Gets the selected color.

setColor

picker.setColor('#A6341B');

Change color.

setOption

picker.setOption({
  type: 'ring',
  color: '#00ff00',
});

Change options. Restart the color picker when making changes.

setType

picker.setType('circle');

Change the color picker design type. For the type value, refer to the type section. (Some set values ​​may disappear.)

destroy

picker.destroy();

Destroy the instance object.

Stylesheet

You can edit the color picker style directly by referring to the colorpicker stylesheet page.

Developments

Prepare the development environment with the following process.

git clone https://github.com/easylogic/easylogic-colorpicker
cd colorpicker
npm install
cp resource/.env ./

open local server

npm run dev

build

npm run build

.env

.env file can be used by modifying some of the local server options. You can tweak things like port numbers and server status by editing the .env file.

Contributors

• easylogic
• redgoose

License : MIT