AEM 62 - Touch UI Rich Text Editor InPlace Editing Open in FullScreen

Goal

Open Rich Text Editor InPlace Editing in Full Screen mode by default, listening to the editing-start event

Demo | Package Install

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create folder /apps/eaem-touchui-rte-edit-in-fullscreen

2) Create node /apps/eaem-touchui-rte-edit-in-fullscreen/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-touchui-rte-edit-in-fullscreen/clientlib/js.txt, add

                       edit-in-fullscreen.js

4) Create file (nt:file) /apps/eaem-touchui-rte-edit-in-fullscreenclientlib/edit-in-fullscreen.js, add the following code

(function ($, $document, gAuthor) {
    if(!gAuthor){
        return;
    }

    $document.on("cq-editables-loaded", function(event){
        $.each(event.editables, function(index, editable){
            if(!editable.dom || !isInPlaceEditingEnabled(editable)){
                return;
            }

            editable.dom.on("editing-start", getEditStartedListener());
        });
    });

    $document.on("inline-edit-finish", function (event) {
        event.editable.dom.on("editing-start", getEditStartedListener());
    });

    function isInPlaceEditingEnabled(editable){
        try{
            var editConfig = editable.config.editConfig;
            return editConfig && editConfig.inplaceEditingConfig && editConfig.inplaceEditingConfig.active;
        }catch(err){
            return false;
        }
    }

    function getEditStartedListener(){
        var gRegistry = Granite.author.editor.registry,
            emptyFn = function(){};

        if(_.isEmpty(gRegistry)){
            console.log("EAEM - Granite author registry not available");
            return emptyFn;
        }

        var inlineTextEditor = gRegistry["text"];

        if(!inlineTextEditor){
            console.log("EAEM - Granite author rte not available");
            return emptyFn;
        }

        return function eaemEditStartedListener(){
            if(!inlineTextEditor.rte){
                return;
            }

            inlineTextEditor.rte.editorKernel.execCmd("fullscreen-start");
        }
    }
}(jQuery, jQuery(document), Granite.author));