Smartphone

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)));