AEM 6 SP2 - Add Open Page in Touch UI Button to Classic UI Sidekick

Goal

Add a button to the bottom toolbar of Classic UI Sidekick to Open page in Touch UI. Check this useful chrome browser extension for switching between Touch and Classic UI

Demo | Package Install

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/sidekick-open-page-in-touch-ui

2) Create node /apps/sidekick-open-page-in-touch-ui/clientlib of type cq:ClientLibraryFolder and add a String property categories with value cq.widgets

3) For button icon, create file (nt:file) /apps/sidekick-open-page-in-touch-ui/clientlib/css.txt and add

                       open-touch-ui.css

4) Add the following code in /apps/sidekick-open-page-in-touch-ui/clientlib/open-touch-ui.css

#CQ .cq-sidekick .x-window-bbar .cq-sidekick-open-touch-ui {
    background-image:url(touch-ui.png);
}

5) Get the touch-ui.png from package and add it to /apps/sidekick-open-page-in-touch-ui/clientlib

6) Create file (nt:file) /apps/sidekick-open-page-in-touch-ui/clientlib/js.txt and add

                       open-touch-ui.js

7) Create file (nt:file) /apps/sidekick-open-page-in-touch-ui/clientlib/open-touch-ui.js and add the following code

CQ.Ext.ns("ExperienceAEM");

ExperienceAEM.Sidekick = {
    OPEN_TOUCH_UI: "experience-aem-sk-button-open-touch-ui",

    //add the button to sidekick bottom bar
    addTouchUIButton: function(sk){
        var bbar = sk.getBottomToolbar();
        var oButton = bbar.getComponent(0);

        //if the sidekick is reloaded, remove existing and add a fresh one
        if(oButton.getId() == this.OPEN_TOUCH_UI){
            bbar.remove(oButton, true);
        }

        oButton = new CQ.Ext.Button({
            id: this.OPEN_TOUCH_UI,
            iconCls: "cq-sidekick-open-touch-ui",
            tooltip: {
                title: "Touch UI",
                text: "Open page in Touch UI"
            },
            handler: function() {
                var win = CQ.WCM.isContentWindow(window) ?  window.parent : window;
                win.open("/editor.html" + sk.getPath() + ".html","_blank");
            },
            scope: sk
        });

        //add the button as first component in bottom toolbar
        bbar.insert(0, oButton );
    }
};

(function(){
    var E = ExperienceAEM.Sidekick;

    if( ( window.location.pathname == "/cf" ) || ( window.location.pathname.indexOf("/content") == 0)){
        //when the sidekick is ready CQ fires sidekickready event
        CQ.WCM.on("sidekickready", function(sk){
            //after the sidekick content is loaded, add button
            sk.on("loadcontent", function(){
                E.addTouchUIButton(sk);
            });
        });
    }
})();