AEM 62 - Touch UI URL Parameter Layer Mode (Preview, Edit, Developer...)

Goal

Load the layer specified in eaemMode URL Parameter

http://localhost:4502/editor.html/content/geometrixx/en.html?eaemMode=Preview
http://localhost:4502/editor.html/content/geometrixx/en.html?eaemMode=Edit
http://localhost:4502/editor.html/content/geometrixx/en.html?eaemMode=Developer
etc...

Demo | Package Install | Github

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create folder /apps/eaem-touchui-mode-url-parameter

2) Create node /apps/eaem-touchui-mode-url-parameter/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-mode-url-parameter/clientlib/js.txt, add

                       mode-parameter.js

4) Create file (nt:file) /apps/eaem-touchui-mode-url-parameter/clientlib/mode-parameter.js, add the following code

(function ($, $document) {
    var EAEM_MODE = "eaemMode", pageLoaded = false;

    $document.on("cq-page-info-loaded", loadDesiredLayer);

    function loadDesiredLayer(){
        if(pageLoaded){
            return;
        }

        pageLoaded = true;

        var layerManager = Granite.author.layerManager,
            queryParams = queryParameters(),
            eaemMode = queryParams[EAEM_MODE],
            currentLayerName = layerManager.getCurrentLayerName();

        if(_.isEmpty(eaemMode) || _.isEmpty(currentLayerName)
                    || (currentLayerName.toLowerCase() === eaemMode.toLowerCase())) {
            return;
        }

        layerManager.activateLayer(eaemMode);
    }

    function queryParameters() {
        var result = {}, param,
            params = document.location.search.split(/\?|\&/);

        params.forEach( function(it) {
            if (_.isEmpty(it)) {
                return;
            }

            param = it.split("=");
            result[param[0]] = param[1];
        });

        return result;
    }
}(jQuery, jQuery(document)));