Custom Color Picker with Drop Down Menu in AEM 6.2

Dropdown widget having loads of color options that can be selected… it was really a mess to remember those names. As a developer, I was wondering why the author just can’t select the name and configure it.

Color-picker is definitely not a solution as we wanted to show the restricted number of colors…

Fig- Drop-down with color name options

Finally, we got a better solution for this and gave the background color for the drop-down menu option and it resolved the complexity…

Let's see how to achieve this:
1. Add a class "bgColor" on the highlighted node of the drop-down.


Fig- Add the class "bgColor" on the selected node

2. Create node /apps/aem-learning/components/content/colorPicker/colorPickerClientLib of type cq:ClientLibraryFolder and add a String property categories with value cq.authoring.dialog.

3.Create file (nt:file) /apps/aem-learning/components/content/colorPicker/colorPickerClientLib/js.txt and add the following js files:

drop-down.js
colorPicker.js
drop-down.js
$(document).on("click", ".bgColor ul", function(e) { touchDialog.colorDropDown(); }); $(document).on("foundation-contentloaded", function(e) { touchDialog.colorDropDown(); });
colorPicker.js

var touchDialog = {
colorDropDown : function() {
var dropdown = $('.bgColor ul');
var button = $('.bgColor button');
var childlist = dropdown.children();
if (childlist.length > 1) {
for (i = 0; i < childlist.length; i++) {
var attr = childlist[i].getAttribute("data-value");
if (attr) {
$(childlist[i]).css("background-color", attr);
$(childlist[i]).css("border-style", "solid");
}
if($(childlist[i]).hasClass("is-highlighted")&& attr){
$(button).css("background-color", attr);
}
if(!attr)
$(button).css("background-color", "transparent");
}
}
}
};


Fig- Drop-down with background-color on Values

Demo Package Install