AEM 6420 - Touch UI Sites Content Tree double click to open page for Authoring

Goal

Register a click listener on sites /sites.html content tree nodes to open the page for authoring on double click (imitatating Classic UI)

Demo | Package Install | Github

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/eaem-touchui-content-tree-dbl-click-open

2) Create clientlib (type cq:ClientLibraryFolder) /apps/eaem-touchui-content-tree-dbl-click-open/clientlib and set property categories of String[] type to granite.ui.shell and dependencies String[] to lodash

3) Create file ( type nt:file ) /apps/eaem-touchui-content-tree-dbl-click-open/clientlib/js.txt, add the following

  content-tree-dbl-click.js

4) Create file (type nt:file) /apps/eaem-touchui-content-tree-dbl-click-open/clientlib/content-tree-dbl-click.js, add the following code

(function ($, $document) {
    var SITES_CONSOLE_URL = "/sites.html";

    $(registerDblClickForContentTree);

    function registerDblClickForContentTree(){
        if(!isSitesConsole()){
            return;
        }

        var tree = $(".shell-collectionpage-tree").first(),
            treeEl = tree[0];

        if (!treeEl) {
            return;
        }

        tree.on("change", function(event) {
            tree.find("[class^=fnd-Cell-text]").each(registerDblClick);
        });

        function registerDblClick(index, element){
            var $element = $(element);

            if($element.data("eaemRegistered") == "true" ){
                return;
            }

            $element.on("dblclick", function(event){
                window.open("/editor.html" + treeEl.selectedItem.id + ".html", "_blank");
            });

            $element.data("eaem-registered", "true");
        }
    }

    function isSitesConsole() {
        return (window.location.pathname.indexOf(SITES_CONSOLE_URL) >= 0);
    }
}(jQuery, jQuery(document)));