AEM 64 - Touch UI extend Path Browser picker to show asset thumbnail

Goal


Show asset thumbnails in Pathbrowser picker granite/ui/components/coral/foundation/form/pathbrowser

Demo | Package Install | Github


Product




Extension



Solution


1) Login to CRXDE Lite, create folder (nt:folder) /apps/eaem-touchui-pathbrowser-picker-show-preview

2) Create clientlib (type cq:ClientLibraryFolder) /apps/eaem-touchui-pathbrowser-picker-show-preview/clientlib and set property categories of String type to cq.authoring.dialog.all and dependencies String[] to underscore

3) Create file ( type nt:file ) /apps/eaem-touchui-pathbrowser-picker-show-preview/clientlib/js.txt, add the following

  show-preview.js

4) Create file (type nt:file) /apps/eaem-touchui-pathbrowser-picker-show-preview/clientlib/show-preview.js, add the following code

(function ($, $document, gAuthor) {
    if(!gAuthor){
        return;
    }

    $document.on('dialog-ready', handlePathBrowser);

    function handlePathBrowser(){
        var $cuiPathBrowser = $(".coral-PathBrowser");

        if(_.isEmpty($cuiPathBrowser)){
            return;
        }

        //handle picker columns
        $cuiPathBrowser.each(extendPicker);
    }

    function extendPicker(index, cuiPathBrowser){
        cuiPathBrowser = $(cuiPathBrowser).data("pathBrowser");

        var cuiPicker = cuiPathBrowser.$picker.data("picker");

        cuiPathBrowser.$button.on("click", function() {
            setTimeout(function(){
                if(!cuiPicker.columnView){
                    console.log("EAEM - could not initialize column view");
                    return;
                }

                extendColumnView(cuiPicker.columnView);
            }, 200);
        });
    }

    function extendColumnView(columnView){
        function handler(event, href, data){
            if(_.isEmpty(href) || _.isEmpty(data)){
                return;
            }

            var $item, assetPath, thumbHtml,
                columnData = columnView._data[href];

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

            var $columnData = $(columnData), $items = $columnData.find(".coral-ColumnView-item");

            $items.each(function(index, item){
                $item = $(item);

                assetPath = $item.data("value");

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

                thumbHtml = getThumbHtml(assetPath);

                if(!thumbHtml){
                    return;
                }

                $item.find(".coral-ColumnView-icon").html(thumbHtml);
            });

            columnView._data[href] = $columnData[0].outerHTML;
        }

        columnView.$element.on('coral-columnview-load', handler);
    }

    function getThumbHtml(assetPath){
        var assetExt = getStringAfterLastDot(assetPath);

        if(!assetExt){
            return "";
        }

        return '<img class="foundation-collection-item-thumbnail" src="'
                    + assetPath + '/_jcr_content/renditions/cq5dam.thumbnail.48.48.png" width="40px" height="40px" style="margin-right:10px" '
                    + 'alt="' + getStringAfterLastSlash(assetPath) + '">';
    }

    function getStringAfterLastSlash(str){
        if(!str || (str.indexOf("/") == -1)){
            return "";
        }

        return str.substr(str.lastIndexOf("/") + 1);
    }

    function getStringAfterLastDot(str){
        if(!str || (str.indexOf(".") == -1)){
            return "";
        }

        return str.substr(str.lastIndexOf(".") + 1);
    }

}(jQuery, jQuery(document), Granite.author));



1 comment:

  1. SQream Technologies provides you with a state of the art software which combines modern GPU technology (Graphic Processing Units) with the best practices in today’s Big Data platforms, providing up to 100x faster insights from data.
    Bigdata Training in Chennai OMR

    ReplyDelete