Open Content Finder Images in New Tab

Goal

The CQ product Content Finder (http://localhost:4502/cf#/content/geometrixx/en.html) images results view has no action associated for image click. This post is about opening the image asset editor in new browser tab, when author double clicks on the image. Demo available for download

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and overlay the file /libs/cq/ui/widgets/source/widgets/wcm/ContentFinder.js. To overlay, create file /apps/cq/ui/widgets/source/widgets/wcm/ContentFinder.js and add the following code

CQ.Ext.ns("MyClientLib");

MyClientLib.ContentFinder = {
    TAB_IMAGES: "cfTab-Images",

    openImageInNewTab: function(){
        var tab = CQ.Ext.getCmp(this.TAB_IMAGES);

        if(!tab){
            return;
        }

        var resultsView = tab.findByType("dataview");
        resultsView = resultsView[0];

        resultsView.on('dblclick', function(dView, index, node, eObj){
            var sData = this.store.getAt(index);
            window.open("/damadmin#" + sData.id);
        });
    }
};

CQ.shared.HTTP.get("/libs/cq/ui/widgets/source/widgets/wcm/ContentFinder.js");

(function(){
    if( window.location.pathname == "/cf" ){
        var INTERVAL = setInterval(function(){
            var tabPanel = CQ.Ext.getCmp(CQ.wcm.ContentFinder.TABPANEL_ID);

            if(tabPanel && (tabPanel.rendered == true)){
                clearInterval(INTERVAL);
                var c = MyClientLib.ContentFinder;
                c.openImageInNewTab();
            }
        }, 250);
    }
})();

2) Line 23, we are loading the ootb ContentFinder and using JS function openImageInNewTab(), associating double click action to images

3) The overlay in CRXDE Lite