https://github.com/thomasdev-de/bs-color-picker
https://github.com/thomasdev-de/bs-color-picker
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/thomasdev-de/bs-color-picker
- Owner: ThomasDev-de
- License: mit
- Created: 2025-04-17T13:55:03.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-03T11:37:33.000Z (about 1 year ago)
- Last Synced: 2025-09-27T17:16:21.939Z (9 months ago)
- Size: 161 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Bootstrap Color Picker Plugin
A feature-rich and customizable color picker jQuery plugin that seamlessly integrates with Bootstrap 4 or 5.
This plugin provides an intuitive interface for color selection with support for multiple color formats and
transparency.
## Features
- Full color spectrum selection with saturation and value controls
- Interactive hue and opacity sliders
- Multiple color format support (HEX, RGB, RGBA, HSL, HSLA, CMYK)
- Real-time color preview
- Customizable button styling
- Bootstrap 4 and 5 compatible
- Support for transparency/opacity
- Responsive design
- Touch-device friendly
## Dependencies
- jQuery ^3
- Bootstrap ^4 | ^5
- Bootstrap Icons ^1 (optional)
## Installation
1. Install the package via Composer:
```shell
composer require webcito/bs-color-picker
````
2Include the required dependencies in your HTML:
```html
```
3Create an input element in your HTML:
```html
```
## Usage
### Basic Implementation
```javascript
$('#colorPicker').bsColorPicker();
```
## Configuration Options
```javascript
$('#colorPicker').bsColorPicker({
btnClass: 'btn-outline-secondary', // The classes for the dropdown button
btnText: null, // Button-Text
btnEmptyColor: 'rgba(0, 0, 0, 0.5)', // The color for the button when no active color is found.
format: 'rgba', // The output format, which is to be transferred to the input element.
hideInputs: false, // If set to true, the information and input fields for manual editing will not be generated..
disabled: false, // Set the dropdown enabled or disabled.
buttons: { // Action buttons. If a button is null or false, it will not be displayed.
check: {icon: 'bi bi-check-lg'}, // the color takes over from the picker to the element.
reset: {icon: 'bi bi-arrow-clockwise'}, // reset the color to the condition when opening the dropdown
close: {icon: 'bi bi-x-lg'}, // closes the color picker without a change
empty: {icon: 'bi bi-trash3'} // Sets the color to null
},
debug: false // Activates some useful debugion formations in the Windows.console
});
```
## Global Methods
```javascript
// Set default options for all instances:
$.bsColorPicker.setDefaults({
btnClass: 'btn-primary',
format: 'hex',
...
});
// Gives back the current default options for the color-picker.
$.bsColorPicker.getDefaults(); // :object
// Gives the permitted format back
$.bsColorPicker.utils.getValidOutputFormates(); // :array
// Check a format for validity
$.bsColorPicker.utils.isValidOutputFormat('rgb'); // :boolean
// Formats a color string in the possible color formats as an object
$.bsColorPicker.utils.convertColorFormats('red'); // :array
// Check whether a value is empty
$.bsColorPicker.utils.isValueEmpty(null); // :boolean
// Gives back an object with all the color names
$.bsColorPicker.utils.getColorNames(); // :object {{'colorName': 'hexValue'}, ...}
// gibt die Farbe im Format hex zurück
$.bsColorPicker.utils.colorNameToHex('red'); // :null|string p.e. #ff0000
```
## Plugin methods
```javascript
$('#colorPicker').bsColorPicker('val'); // get the value in output format -> #ff0000
$('#colorPicker').bsColorPicker('val', 'red'); // set a color
$('#colorPicker').bsColorPicker('getColor'); // return a set of colors for the selected color
$('#colorPicker').bsColorPicker('updateOptions', { btnText: 'beautiful color :)'}); // update options
$('#colorPicker').bsColorPicker('destroy'); // destroy the picker
```
## Events
The plugin triggers the following events:
```javascript
$('#colorPicker')
.on('change.bs.colorPicker', function (e, data) {
// Fires when the value of the input changes.
// Data is the selected color in the output format as a string or null if no color is present
})
.on('update.bs.colorPicker', function (e, data) {
// Fires at every color change in the color picker.
// Data is an object with all available color formats of the current color.
})
.on('all.bs.colorPicker', function () {
// Fires additionally at every event
})
.on('error.bs.colorPicker', function (e, data) {
logEvent('error.bs.colorPicker', data);
})
.on('init.bs.colorPicker', function () {
logEvent('init.bs.colorPicker');
})
.on('show.bs.colorPicker', function () {
logEvent('show.bs.colorPicker');
})
.on('shown.bs.colorPicker', function () {
logEvent('shown.bs.colorPicker');
})
.on('hide.bs.colorPicker', function () {
logEvent('hide.bs.colorPicker');
})
.on('hidden.bs.colorPicker', function () {
logEvent('hidden.bs.colorPicker');
})
.on('reset.bs.colorPicker', function (e, data) {
logEvent('reset.bs.colorPicker', 'details on console');
if (data) {
setBodyGradient(data.rgba);
}
console.log('reset.bs.colorPicker', data);
})
.on('cancel.bs.colorPicker', function (e, data) {
logEvent('cancel.bs.colorPicker', 'details on console');
const colorSet = colorPicker.bsColorPicker('getColor');
console.log('cancel.bs.colorPicker', data);
setBodyGradient(colorSet ? colorSet.rgba : null);
})
.on('empty.bs.colorPicker', function (e, data) {
logEvent('empty.bs.colorPicker', data);
setBodyGradient(null);
});
```
## Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Opera (latest)
## Contributing
As this is a proprietary plugin, please contact the project maintainers for information about contributing.
## License
This project is proprietary software. All rights reserved.
## Support
For support, feature requests, or bug reports, please contact the development team.