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

2 comments:

  1. Wow Amzing I feel Its Really WOW
    ATC- Any Time Classes CA Inter Pendrive Classes is the most preferred app for preparation of CA for enabling students to get exemption in all exams.
    CA Inter Pendrive Classes, Pendrive Classes for FM, SM Pendrive Classes, EISM Pendrive Classes, Ca Inter Audit Pendrive Classes,
    Ca Inter Best Pendrive Classes, CA Inter EIS Pendrive Classes, Pen Drive Classes For Ca Inter Group 2,
    Ca Inter Audit Pendrive Classes, Ca Inter Fm Pendrive Classes,

    ReplyDelete
  2. Is there a way to set the color and the text in some configuration so we can change it and not having it hardcoded?

    ReplyDelete