@baianat/colorpicker
v0.0.13
Published
ES6 colorpicker
Downloads
51
Readme
Colorpicker
ES6 color picker extension for Base framework.
Getting Started
Installation
You can install colorpicker as part of base.extensions.
npm install @baianat/base.extensions
# or using yarn
yarn add @baianat/base.extensionsIf you want the standalone version.
npm install @baianat/colorpicker
yarn add @baianat/colorpickerInclude necessary files
<head>
<link rel="stylesheet" href="dist/css/colorpikcer.css">
</head>
<body>
...
<script type="text/javascript" src="dist/js/colorpikcer.js"></script>
</body>HTML Layout
You need an input element to track the color value.
<input id="myPicker">
<script>
const picker = new Colorpicker('#myPicker', {
// default starter color
defaultColor = '#ffffff',
// color wheel radius in px
radius = 200,
// output color mode 'rgb', 'hex' or 'hsl'
mode = 'rgb',
// array of colors to fill recent colors, max of 6 colors
recentColors = ['#c1c1c1', '#000000', '#ffffff'],
// events to fire
events = {
// fires before selecting a color
beforeSelect() {},
// fires after selecting a color
afterSelect() {},
// fires before opening color picker menu
beforeOpen() {},
// fires after opening color picker menu
afterOpen() {},
// fires before clicking submit button
beforeSubmit() {},
// fires after clicking submit button
afterSubmit() {},
// fires on clicking on any part of the picker menu
clicked() {}
}
});
// to track color changes
picker.el.addEventListener('change', () => {
// do something great!
})
</script>Methods
You can call method on Colorpicker instance
const newPicker = new Picker('#myPicker');
newPicker.selectColor('#ff00ff');| Method | Argument | Description |
| ------ | -------- | ----------- |
| selectColor | [String] color, [Bool] mute | you can change the selected with color argument. If you want to stop the picker from dispatching events, you can set mute to true. It's false by default. |
| getColorFromSliders | | It returns the rgb sliders values as string e.g. "rgb(71, 182, 148)"|
| getColorFromWheel | [Object] mouse | It accepts an object, holds the x and y location on the wheel {x: 100, y: 100}, then returns its rgb value |
| togglePicker | | show/hide picker menu |
| closePicker | | hide picker menu |
| openPicker | | show picker menu |
License
Copyright (c) 2017 Baianat