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)

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.coral, dependencies 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));