AEM 63 - Touch UI Add Images to Coral 3 Select Options

Goal

Add images in Coral 3 Select - granite/ui/components/coral/foundation/form/select

Demo | Package Install | Github


Add Image path

Image rendered in Select

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create folder /apps/eaem-touch-ui-images-in-select

2) For testing purposes, add a sample component /apps/eaem-touch-ui-images-in-select/eaem-list-view with sling:resourceSuperType property value set core/wcm/components/list/v1/list (so extending core component List)

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:description="Sample List View"
    jcr:primaryType="cq:Component"
    jcr:title="Experience AEM List View"
    sling:resourceSuperType="core/wcm/components/list/v1/list"
    componentGroup="Experience AEM"/>

3) Create node /apps/eaem-touch-ui-images-in-select/clientlib of type cq:ClientLibraryFolder, add String property categories with value cq.authoring.dialog.all, String[] property dependencies with value underscore

4) Create file (nt:file) /apps/eaem-touch-ui-images-in-select/clientlib/js.txt, add

                        images-select.js

5) Create file (nt:file) /apps/eaem-touch-ui-images-in-select/clientlib/images-select.js, add the following code

(function ($, $document) {
    var SELECT_RES_TYPE = "granite/ui/components/coral/foundation/form/select",
        SLING_RES_TYPE = "sling:resourceType";

    $document.on("dialog-ready", handleCoralSelect);

    function handleCoralSelect(){
        $.ajax(getDialogPath() + ".infinity.json").done(handler);

        function handler(data) {
            var selectItems = {}, $widget;

            fillItemsOfSelect(data, selectItems);

            _.each(selectItems, function(items, selectName){
                $widget = $("[name='" + selectName + "']");

                if(_.isEmpty($widget)){
                    return;
                }

                addImagesInCoralSelect($widget, items);
            });
        }
    }

    function getDialogPath(){
        var gAuthor = Granite.author,
            currentDialog = gAuthor.DialogFrame.currentDialog, dialogPath ;

        if(currentDialog instanceof gAuthor.actions.PagePropertiesDialog){
            var dialogSrc = currentDialog.getConfig().src;
            dialogPath = dialogSrc.substring(0, dialogSrc.indexOf(".html"));
        }else{
            var editable = gAuthor.DialogFrame.currentDialog.editable;

            if(!editable){
                console.log("EAEM - editable not available");
                return;
            }

            dialogPath = editable.config.dialog;
        }

        return dialogPath;
    }

    function addImagesInCoralSelect($widget, items){
        var adjustCss = false, $item;

        _.each(items, function(item){
            if(!item.image){
                return;
            }

            adjustCss = true;

            $item = $widget.find("coral-select-item[value='" + item.value + "']");

            if(_.isEmpty($item)){
                return;
            }

            $item.prepend("<img src='" + item.image + "' align='middle' width='30px' height='30px' style='margin-right: 5px; '/>" );
        });

        if(adjustCss){
            $widget.find("button").css("padding", "0 0 0 10px");
        }
    }


    function fillItemsOfSelect(data, selectItems){
        if(!_.isObject(data) || _.isEmpty(data)){
            return selectItems;
        }

        _.each(data, function(value, key){
            if(_.isObject(value) && !_.isEmpty(value)){
                selectItems = fillItemsOfSelect(value, selectItems);
            }else{
                if( (key == SLING_RES_TYPE) && (value == SELECT_RES_TYPE)){
                    selectItems[data.name] = data.items;
                }
            }
        });

        return selectItems;
    }
}(jQuery, jQuery(document)));