Smartphone

Goal

This post is on extending component drop overlay placeholders to show custom text (and background color) instead of component name (jcr:title)

Foundation Text component (/libs/foundation/components/text) was modified for demonstration only (on Geometrixx pages), ideally the foundation components should never be altered...

Demo | Package Install


Configure Placeholder text

                    eaemPlaceholderText - Custom text to be shown instead of component name

                    eaemPlaceholderBGColor - Placeholder overlay background color




Placeholder on Page

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/touchui-configure-components-placeholder

2) Create clientlib (type cq:ClientLibraryFolder) /apps/touchui-configure-components-placeholder/clientlib and set property categories of String[] type to cq.authoring.dialog and dependencies to underscore

3) Create file ( type nt:file ) /apps/touchui-configure-components-placeholder/clientlib/js.txt, add the following

                         configure-placeholder.js

4) Create file ( type nt:file ) /apps/touchui-configure-components-placeholder/clientlib/configure-placeholder.js, add the following code

(function ($, $document, gAuthor) {
 var PLACEHOLDER_TEXT = "eaemPlaceholderText",
 PLACEHOLDER_BG_COLOR = "eaemPlaceholderBGColor",
 PLACE_HOLDER = "cq-Overlay--placeholder",
 configCache = {},
 //look for configured placeholders only on these components
 LOOK_FOR_PLACEHOLDER_COMPONENTS = [
 "/libs/foundation/components/text",
 "/libs/foundation/components/textimage"
 ];

 $document.on(cq-layer-activated, addPlaceholder);

 $document.on(cq-inspectable-added, componentAdded);

 function componentAdded(event){
 var LM = gAuthor.layerManager;

 if (LM.getCurrentLayer() != "Edit") {
 return;
 }

 var editable = event.inspectable;

 //placeholder overlay gets added after triggering cq-inspectable-added event
 //add a setTimeout workaround
 setTimeout(function(){
 configurePlaceholder(editable);
 }, 500)
 }

 function addPlaceholder(event){
 if(event.layer !== "Edit"){
 return;
 }

 _.each(gAuthor.edit.findEditables(), configurePlaceholder);
 }

 function prefixLib(type){
 type = type.trim();

 if(type.indexOf("/") !== 0){
 type = "/libs/" + type;
 }

 return type;
 }

 function configurePlaceholder(editable){
 if(!isAllowedForPlaceholderConfig(editable)){
 return;
 }

 var parent = editable.getParent(),
 $overlay = $(parent.overlay.dom),
 $placeholder = $overlay.find("[data-path=" + editable.path + "]");

 if(!$placeholder.hasClass(PLACE_HOLDER)){
 return;
 }

 var type = prefixLib(editable.type);

 if(_.isEmpty(configCache[type])){
 $.ajax( type + ".json" ).done(configure);
 }else{
 configure(configCache[type]);
 }

 function configure(data){
 if(_.isEmpty(data)){
 return;
 }

 configCache[type] = data;

 var color;

 if(!_.isEmpty(data[PLACEHOLDER_TEXT])){
 $placeholder.attr("data-text", data[PLACEHOLDER_TEXT]);
 }

 if(!_.isEmpty(data[PLACEHOLDER_BG_COLOR])){
 $placeholder.css("background-color", data[PLACEHOLDER_BG_COLOR]);
 }
 }
 }

 function isAllowedForPlaceholderConfig(editable){
 return editable && editable.getParent()
 && editable.getParent().overlay
 && (LOOK_FOR_PLACEHOLDER_COMPONENTS.indexOf(prefixLib(editable.type)) !== -1)
 }
})(jQuery, jQuery(document), Granite.author);