AEM 62 - Touch UI Assets Console Cards View Thumbnail Zoom Slider

Goal


Add a Slider in Cards View of Assets Console to Zoom In on the Asset Cards (similar to Mac / Windows Thumbnail Zoom)

For Zooming individual asset check this post

Demo | Package Install | GitHub




Solution


1) Login to CRXDE Lite, create folder (nt:folder) /apps/eaem-card-thumbnail-zoom

2) Create clientlib (type cq:ClientLibraryFolder/apps/eaem-card-thumbnail-zoom/clientlib and set a property categories of String type to dam.gui.actions.coraldependencies of type String[] with value underscore

3) Create file ( type nt:file ) /apps/eaem-card-thumbnail-zoom/clientlib/js.txt, add the following

                         card-thumbnail-zoom.js

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

(function ($, $document) {
    var FOUNDATION_MODE_CHANGE = "foundation-mode-change",
        DAM_ADMIN_CHILD_PAGES = ".cq-damadmin-admin-childpages",
        ACTION_BAR = ".foundation-collection-actionbar",
        $zoomSlider,
        LAYOUT_CARD_VIEW = "card";

    $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){
            if(!_.isEmpty($zoomSlider)){
                $zoomSlider.hide();
            }

            return;
        }

        addZoomSlider();
    }

    function addZoomSlider(){
        if(!_.isEmpty($zoomSlider)){
            $zoomSlider.show();
            $zoomSlider.find("input").trigger("change.slider");
            return;
        }

        var $actionBar = $(ACTION_BAR),
            $graniteRight = $actionBar.find(".granite-actionbar-right");

        $zoomSlider = $(getSliderHtml()).prependTo($graniteRight).find(".coral-Slider");

        CUI.Slider.init($zoomSlider, $document);

        $zoomSlider.find("input").on("change.slider", function(){
            $(DAM_ADMIN_CHILD_PAGES).attr("columnwidth", $(this).val());
        });

        $zoomSlider = $zoomSlider.parent("div");
    }

    function getSliderHtml(){
        return '<div class="granite-actionbar-item">' +
                    '<div style="margin: 10px 10px 0 0;display: inline-block;font-weight: bold;">Zoom</div>' +
                    '<div class="coral-Slider" data-init="slider">' +
                        '<input type="range" value="242" min="242" max="1642" step="200">' +
                    '</div>' +
                '</div>'
    }
})(jQuery, jQuery(document));





1 comment:

  1. Excellent .. Amazing .. I’ll bookmark your blog and take the feeds also…I’m happy to find so many useful info here in the post, we need work out more techniques in this regard, thanks for sharing.
    Purchase Console in Nepal

    ReplyDelete