AEM 63 - Sample Coral 3 Multifield Item Listener

Goal

Add a sample listener to the textfield item of Page Properties Vanity URL coral 3 multifield, changing the background to #AAA on focusout

Demo | Package Install | Github

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create folder /apps/eaem-touch-ui-multifield-item-listener

2) Create node /apps/eaem-touch-ui-multifield-item-listener/clientlib of type cq:ClientLibraryFolder, add String property categories with value cq.authoring.dialog, String[] property dependencies with value underscore

3) Create file (nt:file) /apps/eaem-touch-ui-multifield-item-listener/clientlib/js.txt, add

                        listener.js

4) Create file (nt:file) /apps/eaem-touch-ui-multifield-item-listener/clientlib/listener.js, add the following code

(function ($, $document) {
    var PAGE_PROPS_PATH = "/mnt/overlay/wcm/core/content/sites/properties.html",
        CORAL_MF_NAME = "data-granite-coral-multifield-name",
        CORAL_MF_NAME_VANITY = "./sling:vanityPath", listenerAttached = false;

    if(window.location.pathname.indexOf(PAGE_PROPS_PATH) !== 0){
        return;
    }

    $document.on("foundation-contentloaded", addListenerToVanityMF);

    function addListenerToVanityMF(){
        var $vanityMF = $("[" + CORAL_MF_NAME + "='" + CORAL_MF_NAME_VANITY + "']");

        if(listenerAttached || _.isEmpty($vanityMF)){
            return;
        }

        listenerAttached = true;

        $vanityMF[0].on('change', function(){
            var $mf = $(this), $text = $mf.find("[type=text]:last");

            $text.focusout(function(){
                $(this).css("background-color", "#AAA");
            })
        });

        console.log($vanityMF);
    }
}(jQuery, jQuery(document)));