AEM 6520 - Change Background color and Placeholder text of New Layout Container

Goal

Provide custom background color and placeholder text for Layout Container (wcm/foundation/components/responsivegrid) in Authoring - /editor.html

Demo | Package Install | Github


Product

Extension

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create folder /apps/eaem-layout-container-placeholder

2) Create node /apps/eaem-layout-container-placeholder/clientlib of type cq:ClientLibraryFolder, add String[] property categories with value [cq.authoring.dialog.all], String[] property dependencies with value lodash.

3) Create file (nt:file) /apps/eaem-layout-container-placeholder/clientlib/js.txt, add

                        placeholder.js

4) Create file (nt:file) /apps/eaem-layout-container-placeholder/clientlib/placeholder.js, add the following code

(function ($, $document) {
    var BG_COLOR = "#C7B097",
        PLACEHOLDER_TEXT = "Experience AEM - Drag components here",
        LAYOUT_CONTAINER_NEW = "wcm/foundation/components/responsivegrid/new";

    $document.on("cq-editable-added", function(event){
        modifyLayoutContainer([event.editable]);
    });

    $document.on('cq-layer-activated', function(){
        modifyLayoutContainer(Granite.author.editables);
    });

    function modifyLayoutContainer(editables){
        _.each(editables, function(editable){
            if(!editable || !(editable.type == LAYOUT_CONTAINER_NEW)){
                return;
            }

            if(!editable.overlay || !editable.overlay.dom){
                editable.dom.css("background-color", BG_COLOR).attr("data-text", PLACEHOLDER_TEXT);
                return;
            }

            //for new layout containers, Granite.author.Inspectable.prototype.hasPlaceholder()
            //always returns "Drag components here"
            editable.overlay.dom.css("background-color", BG_COLOR).attr("data-text", PLACEHOLDER_TEXT);
        });
    }
}(jQuery, jQuery(document)));