AEM 6410 - Touch UI Add Navigation in Asset Annotate Page

Goal

Asset Navigation is available only in Asset Details page otb. Here we add the same navigation in Annotate page (with keyboard arrow keys support)

Demo | Package Install | Github


Product

Extension

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/eaem-touchui-asset-navigator-in-annotate

2) Create UI node /apps/eaem-touchui-asset-navigator-in-annotate/ui/asset-navigator add the following code, for fetching navigator html

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    sling:resourceType="/libs/dam/gui/coral/components/admin/assetdetails/assetnavigator"/>

3) Create clientlib (type cq:ClientLibraryFolder) /apps/eaem-touchui-asset-navigator-in-annotate/clientlib and set property categories of String[] type to dam.gui.annotation.coral and dependencies String[] to [lodash,dam.gui.coral.assetdetails.assetnavigator]

4) Create file ( type nt:file ) /apps/eaem-touchui-asset-navigator-in-annotate/clientlib/js.txt, add the following

  asset-navigator.js

5) Create file (type nt:file) /apps/eaem-touchui-asset-navigator-in-annotate/clientlib/asset-navigator.js, add the following code

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

    var _ = window._,
        eaemNavigatorAdded = false,
        TITLE_BAR = ".granite-title",
        ANNOTATE_PAGE_URL = "/mnt/overlay/dam/gui/content/assets/annotate.html",
        ASSET_DETAILS_PAGE_URL = "/assetdetails.html",
        FOUNDATION_CONTENT_REL = ".foundation-content-path",
        NAVIGATION_EVENT = "asset-detail-navigation",
        NAVIGATOR_UI = "/apps/eaem-touchui-asset-navigator-in-annotate/ui/asset-navigator.html";

    $document.on("foundation-contentloaded", addAssetNavigation);

    function addAssetNavigation(){
        if(!isAnnotatePage() || !!eaemNavigatorAdded){
            return;
        }

        eaemNavigatorAdded = true;

        $.ajax(NAVIGATOR_UI + getAssetPath()).done(addNavigationUI);
    }

    function addNavigationUI(html){
        var $titleBar = $(TITLE_BAR);

        html = html.substring(html.indexOf("<div"));

        html = "<div class='assetdetails-title-container'>" + $titleBar.html() + html + "</div>";

        $titleBar.html(html);

        $document.trigger("foundation-contentloaded");

        $(FOUNDATION_CONTENT_REL).off(NAVIGATION_EVENT).on(NAVIGATION_EVENT, navigateTo);

        $document.on('keydown', handleHotKeyNavigation);
    }

    function handleHotKeyNavigation(event){
        var $mainImage = $("#asset-mainimage");

        if (event.keyCode == 37){
            navigateTo( { asset : getPathInAssetDetailsPage($mainImage.attr("prev"))} )
        }else if(event.keyCode == 39){
            navigateTo( { asset : getPathInAssetDetailsPage($mainImage.attr("next"))} )
        }
    }

    function getPathInAssetDetailsPage(path){
        if(_.isEmpty(path)){
            return;
        }

        return path.substring(path.indexOf(ASSET_DETAILS_PAGE_URL) + ASSET_DETAILS_PAGE_URL.length);
    }

    function navigateTo(data){
        if (_.isEmpty(data.asset)) {
            return;
        }

        window.location.href = Granite.HTTP.externalize(ANNOTATE_PAGE_URL + data.asset);
    }

    function isAnnotatePage() {
        return (window.location.pathname.indexOf(ANNOTATE_PAGE_URL) >= 0);
    }

    function getAssetPath() {
        var path = window.location.pathname;

        return (path.substring(path.indexOf(ANNOTATE_PAGE_URL) + ANNOTATE_PAGE_URL.length));
    }
})(jQuery, jQuery(document));