MF Color Picker Widget

This widget is a level up from MFColorPickerBasic and provides

• a color picker from a color grid
• a transparency controller
• darkness adjuster
• a presets palette selection
• a EyeDropper function (where applicable)
• complimentary, analogous, triadic or split-complementary color palette selector

The widget will hide original input elements once initialised.

Usage is simple, and the class simply hides existing inputs with the class mfcolorpicker and replaces them with a color button that when clicked on will show the color picker popup:

DEMO: Select a color using the MFColorPicker:

Implementation

To implement you need to include the .js and .css files :

html

<link rel='stylesheet preload prefetch' as='style' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet preload prefetch' as='style' href='https://methodfish.com/Download/MFColorPicker/files/latest/css/mf-colorpicker.css'>
<!script src='https://methodfish.com/Download/MFColorPicker/files/latest/js/mf-colorpicker.js'></script>

Then create a presets store if applicable

html

<input type="hidden" id="mfpresets" value="#ffffff,#000000,#ff0000,00f000,0000ff">

And your inputs:

html

<input type="color" class="mfcolorpicker" onchange="alert('something happened')">

(NOTE: As input type='color' does not support rgba colors, they will be changed from type='color' to type='text' when a color is selected)

Then finally call the class to initialise those inputs

javascript

window.addEventListener('load', function() {
    new MFColorPicker().init('mfpresets'); // Finds all input.mfcolorpicker elements
});

or

window.addEventListener('load', function() {
    new MFColorPicker().init('mfpresets', function(confirmedBool, targetEl, colorVal) {....}; // Finds all input.mfcolorpicker elements
});

Events

The class will trigger the original underlying element change events on clicking on the OK button, and its input events when colors are selected or hovered over from the popup.