Smartphone

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