AEM CQ 6 - Adding Create Child Page to TouchUI Page Info Trigger

Goal

In Classic UI, there is a convenient option in Page tab of Sidekick to create a child page of current page (in Edit mode); Using this extension, we provide the same action on Touch UI Page Info Trigger.

Demo | Package Install

Please leave a comment if you find bugs

Solution

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

2) Create node /apps/touch-ui-child-page/clientlib of type cq:ClientLibraryFolder and add a String property categories with value cq.authoring.editor.hook

3) Create file (nt:file) /apps/touch-ui-child-page/clientlib/js.txt and add

                       create-child-page.js

4) Create file (nt:file) /apps/touch-ui-child-page/clientlib/create-child-page.js and add the following code

(function(document, $, page) {
    document.on("ready", function() {
        var trigger = $('#pageinfo-trigger');

        trigger.on('click', function(){
            var INTERVAL = setInterval(function(){
                var classicUI = $(".pageinfo-pageactions .classicui-switcher");

                if(classicUI && classicUI.length > 0){
                    clearInterval(INTERVAL);

                    var createChildPage = "<li class='coral-List-item experience-aem-create-child-page'>" +
                        "<i class='coral-Icon coral-Icon--add coral-Icon--sizeS' title='Create Child Page'></i>" +
                        "Create Child Page</li>";

                    $("ul.pageinfo-pageactions").append(createChildPage);

                    document.fipo('tap', 'click', ".experience-aem-create-child-page", function () {
                        window.location = Granite.HTTP.externalize("/libs/wcm/core/content/sites/createpagewizard.html" + page.path);
                    });
                }
            });
        });

    });
})(jQuery(document), Granite.$, Granite.author.page);