AEM 6410 - Touch UI Add View in Publish to Editor Page Info Dropdown

Goal

In the authoring env editor.html, add the View in Publish button to Page Information drop down to open the publish page in new tab or copy the url to clipboard

Demo | Package Install | Github

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/eaem-touchui-extend-page-info-view-in-publish

2) Create View in Publish button UI node /apps/eaem-touchui-extend-page-info-view-in-publish/ui/view-in-publish add the following code

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" 
             xmlns:granite="http://www.adobe.com/jcr/granite/1.0" 
             xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    granite:class="eaem-page-info-view-in-publish"
    granite:title="View in Publish"
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/button"
    text="View in Publish"/>

3) Create clientlib (type cq:ClientLibraryFolder) /apps/eaem-touchui-extend-page-info-view-in-publish/clientlib and set property categories of String[] type to cq.authoring.dialog.all and dependencies String[] to lodash

4) Create file ( type nt:file ) /apps/eaem-touchui-extend-page-info-view-in-publish/clientlib/js.txt, add the following

  view-in-publish.js

5) Create file (type nt:file) /apps/eaem-touchui-extend-page-info-view-in-publish/clientlib/view-in-publish.js, add the following code

(function ($, $document) {
    "use strict";

    var EDITOR_LOADED_EVENT = "cq-editor-loaded",
        PAGE_INFO_TRIGGER = "#pageinfo-trigger",
        VIEW_AS_PUBLISHED_SEL = ".pageinfo-viewaspublished",
        EAEM_COPY_ID = "eaem-copy-message",
        VIEW_IN_PUBLISH_BUT_URL = "/apps/eaem-touchui-extend-page-info-view-in-publish/ui/view-in-publish.html",
        publishServer = null;

    $document.on(EDITOR_LOADED_EVENT, addViewInPublish);

    function addViewInPublish(){
        $(PAGE_INFO_TRIGGER).on('click', addButtonUI);
    }

    function addButtonUI(){
        getPublishServer();

        $.ajax(VIEW_IN_PUBLISH_BUT_URL).done(function(html){
            $(html).insertAfter($(VIEW_AS_PUBLISHED_SEL)).click(openPublishPage);
        });
    }

    function openPublishPage(){
        if(_.isEmpty(publishServer)){
            return;
        }

        var publishPath = publishServer + Granite.author.ContentFrame.currentLocation(),
            message = "<div id='" + EAEM_COPY_ID + "'>" + publishPath + "</div>";

        showAlert(message, "Open", function(clicked){
            if(clicked == "open"){
                window.open(publishPath);
                return;
            }

            var range = document.createRange();

            range.selectNode(document.getElementById(EAEM_COPY_ID));

            window.getSelection().addRange(range);

            document.execCommand("copy");
        });
    }

    function getPublishServer(){
        $.ajax("/etc/replication/agents.author.2.json").done(successFn);

        function successFn(data){
            var transportUri = data["publish"]["jcr:content"]["transportUri"];

            publishServer = transportUri.substring(0, transportUri.indexOf("/bin/receive"));
        }
    }

    function showAlert(message, title, callback){
        var fui = $(window).adaptTo("foundation-ui"),
            options = [{
                    id: "copy",
                    text: "Copy to Clipboard"
                },
                {
                    id: "open",
                    text: "Open",
                    primary: true
                }];

        message = message || "Unknown Error";
        title = title || "Error";

        fui.prompt(title, message, "info", options, callback);
    }
})(jQuery, jQuery(document));