AEM 6420 - Touch UI Add Zoom in Assets Annotate page

Goal

In the Assets Annotate page add Zoom In / Zoom Out (available in Assets Detail page). User can zoom in, pan, reset to original for adding annotations

Demo | Package Install | Github


Product

Extension

Solution

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

2) Add content resource /apps/eaem-touchui-asset-zoom-in-annotate/ui/asset-zoom with the following code

<?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="/apps/eaem-touchui-asset-zoom-in-annotate/ui/zoom-viewer"/>

3) Extend otb zoom viewer adding below code in /apps/eaem-touchui-asset-zoom-in-annotate/ui/zoom-viewer/zoom-viewer.jsp

<%@page session="false"%>

<%@taglib prefix="sling" uri="http://sling.apache.org/taglibs/sling/1.0"%>
<%@taglib prefix="cq" uri="http://www.day.com/taglibs/cq/1.0" %>

<cq:defineObjects />

<%@include file="/libs/dam/gui/coral/components/admin/contentrenderer/base/base.jsp"%>

<%
    Resource currentResource = UIHelper.getCurrentSuffixResource(slingRequest);
    Asset asset = currentResource.adaptTo(Asset.class);
%>

<sling:include path="<%= asset.getPath() %>" resourceType="dam/gui/components/admin/assetview/zoomviewer" />

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

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

  asset-zoom.js

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

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

    var _ = window._,
        eaemZoomAdded = false,
        ZOOM_CANVAS_ID = "dam-aasetdetail-zoom-canvas",
        ANNOTATION_CONTAINER = "asset-annotation",
        ASSET_DETAIL_CONTAINER = "asset-detail",
        ASSET_MAIN_IMAGE_ID = "asset-mainimage",
        ANNOTATION_CANVAS = ".asset-annotation canvas",
        ANNOTATE_PAGE_URL = "/mnt/overlay/dam/gui/content/assets/annotate.html",
        ZOOM_UI = "/apps/eaem-touchui-asset-zoom-in-annotate/ui/asset-zoom.html";

    function overrideAnnotate(){
        var origFn = $.Annotation.prototype._endDraw;

        $.Annotation.prototype._endDraw = function(e) {
            origFn.call(this, e);

            $("#" + ASSET_MAIN_IMAGE_ID).trigger("annotateEnd", [ e.data.self ]);
        };
    }

    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));
    }

    function showZoomCanvas(){
        $("#" + ZOOM_CANVAS_ID).show();
    }

    function showMainImage(){
        $("#" + ASSET_MAIN_IMAGE_ID).css("display", "inline");

        $("#" + ZOOM_CANVAS_ID).hide();

        $("." + ANNOTATION_CONTAINER).find("canvas").not("#" + ZOOM_CANVAS_ID).show();
    }

    function reAddImageToCanvas(){
        var $mainImage = $("#" + ASSET_MAIN_IMAGE_ID),
            imageHtml = $mainImage[0].outerHTML;

        $mainImage.css("display", "none");

        $("." + ANNOTATION_CONTAINER).find("canvas").not("#" + ZOOM_CANVAS_ID).hide();

        $("#" + ZOOM_CANVAS_ID).show();

        $document.off(ANNOTATION_CANVAS);

        if(!_.isEmpty($(ZOOM_CANVAS_ID))){
            return;
        }

        $document.bind('DOMNodeInserted', function(e) {
            var element = e.target;

            if(element.id !== ZOOM_CANVAS_ID){
                return;
            }

            $(imageHtml).insertAfter($(element)).css("display", "none");
        });
    }

    function addZoomUI(html){
        html = html.substring(html.indexOf("<div"));

        var $zoomContainer = $(html).appendTo($("betty-titlebar-primary"));

        $zoomContainer.find("coral-actionbar").css("background-color", "#f0f0f0")
            .width("200px").css("height" , "2.5rem").css("padding", "0");

        $("." + ANNOTATION_CONTAINER).addClass(ASSET_DETAIL_CONTAINER);

        $document.on("click", ".dam-asset-zoomIn", reAddImageToCanvas);

        $(document).on("click", ".dam-asset-zoomOut", showZoomCanvas);

        $document.on("click", ".dam-asset-reset", showMainImage);
    }

    function addAssetZoom(){
        if(!isAnnotatePage() || !!eaemZoomAdded){
            return;
        }

        eaemZoomAdded = true;

        $.ajax(ZOOM_UI + getAssetPath()).done(addZoomUI);
    }

    overrideAnnotate();

    $document.on("foundation-contentloaded", addAssetZoom);
}(jQuery, jQuery(document)));