AEM 62 - Touch UI Add Zoom in Assets Card View

Goal

Add Zoom functionality in Assets Card view, so the user doesn't need to go into Asset Detail - /assetdetails.html for zoom in/out the asset (needs dynamic media -Dsling.run.modes=dynamicmedia)

For Zooming card thumbnails check this post

Demo | Package Install | GitHub


Bug Fixes

Full screen doesn't work - Package Install


Zoom Quick Action

Asset Zoom

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/experience-aem-asset-zoom

2) Create clientlib (type cq:ClientLibraryFolder) /apps/experience-aem-asset-zoom/clientlib and set a property categories of String type to dam.gui.actions.coral, dependencies of type String[] with value underscore

3) Create file ( type nt:file ) /apps/experience-aem-asset-zoom/clientlib/js.txt, add the following

                         card-zoom.js

4) Create file ( type nt:file ) /apps/experience-aem-asset-zoom/clientlib/card-zoom.js, add the following code

(function ($, $document) {
    var FOUNDATION_MODE_CHANGE = "foundation-mode-change",
        DAM_ADMIN_CHILD_PAGES = ".cq-damadmin-admin-childpages",
        META_TYPE = "data-foundation-collection-meta-type",
        LAYOUT_CARD_VIEW = "card",
        ASSET_DETAIL = "/libs/dam/gui/content/assetdetails/jcr:content/content/items/assetdetail.html";

    $document.on(FOUNDATION_MODE_CHANGE, function(event){
        _.defer(function(){
            contentLoaded(event);
        });
    });

    function contentLoaded(){
        var $childPage = $(DAM_ADMIN_CHILD_PAGES),
            foundationLayout = $childPage.data("foundation-layout");

        if(_.isEmpty(foundationLayout)){
            return;
        }

        var layoutId = foundationLayout.layoutId;

        if(layoutId !== LAYOUT_CARD_VIEW){
            return;
        }

        var $items = $("coral-masonry-item"), $item,
            dialog = getZoomDialog();

        $items.each(function(){
            $item = $(this);

            if($item.find("[" + META_TYPE + "]").attr(META_TYPE) !== "asset"){
                return;
            }

            var $action = getZoomAction(dialog).appendTo($item);

            $item.mouseenter(function(){
                $action.show();
            });

            $item.mouseleave(function(){
                $action.hide();
            })
        });
    }

    function getZoomDialog(){
        var dialog = new Coral.Dialog().set({
            closable: "on",
            header: {
                innerHTML: 'Zoom'
            },
            content: {
                innerHTML: getZoomDialogContent()
            }
        });

        var uiAdjust = { "left" : "0%", "margin-left" : "0px", "max-width" : "100%" };

        dialog.$.find(".coral-Dialog-wrapper").css(uiAdjust);

        return dialog;
    }

    function getZoomDialogContent(){
        var vpWidth = $(window).width() - 30,
            vpHeight = $(window).height() - 110;

        return "<iframe webkitallowfullscreen mozallowfullscreen allowfullscreen width='"
            + vpWidth + "px' height='" + vpHeight + "px' scrolling='no' frameBorder='0'></iframe>";
    }

    function getZoomAction(dialog){
        return $(getHtml()).hide().click(clickHandler);

        function clickHandler(event){
            event.stopPropagation();

            var assetPath = $(this).closest(".foundation-collection-item").data("foundationCollectionItemId");

            dialog.$.find("iframe").attr("src", ASSET_DETAIL + assetPath);

            dialog.show();
        }
    }

    function getHtml(){
        return '<button style="position: absolute;top: 35%;left: 35%;z-index: 10000;cursor: zoom-in;"' +
                    ' class="coral-Button coral-Button--square coral-QuickActions-button">' +
                    '<coral-icon icon="zoomIn"></coral-icon>' +
                '</button>';
    }
})(jQuery, jQuery(document));