AEM 6 SP1 - Show Folders only in Assets Console

Goal


Show Folders only in Touch UI Assets Console of AEM 6 SP1

This extension is not too friendly with Miller columns view, the show folder checkbox works only on first column

Demo | Package Install



Solution


1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/touch-ui-assets-show-folders

2 Create node /apps/touch-ui-assets-show-folders/clientlib of type cq:ClientLibraryFolder and add a String property categories with value cq.gui.damadmin.admin

3) Create file (nt:file) /apps/touch-ui-assets-show-folders/clientlib/js.txt and add

             /libs/cq/gui/components/authoring/clientlibs/editor/js/util/debounce.jquery.js
             show-folders.js

4) Create file (nt:file) /apps/touch-ui-assets-show-folders/clientlib/show-folders.js and add the following code.

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

    var FOUNDATION_CONTENT_LOADED = "foundation-contentloaded";
    var CREATE_FOLDER_ACTIVATOR = ".cq-damadmin-admin-actions-createfolder-activator";
    var E_AEM_SHOW_FOLDERS = "experience-aem-show-folders";
    var AEM_ASSETS_CREATE = "#aem-assets-create";

    $(document).on(FOUNDATION_CONTENT_LOADED, function(e){
        if($("#" + E_AEM_SHOW_FOLDERS).length > 0){
            return;
        }

        //if dynamic media is enabled /etc/dam/dynamicmediaconfig, the create folder changes to dropdown
        var $cFolder = $(AEM_ASSETS_CREATE) ;

        if($cFolder.length == 0){
            $cFolder = $(CREATE_FOLDER_ACTIVATOR);
        }

        if($cFolder.length == 0){
            return;
        }

        var $showFolderCheckBox = $("<span class='endor-ActionBar-item' style='line-height: 2.25em'>" +
            "<label  class='coral-Checkbox coral-Form-field'>" +
            "<input  type='checkbox' id='" + E_AEM_SHOW_FOLDERS + "' value='true' class='coral-Checkbox-input' />" +
            "<span class='coral-Checkbox-checkmark'></span>" +
            "<span class='coral-Checkbox-description'><b>Show Folders Only</b></span>" +
            "</label></span>");

        var $articles, $assets, gridsHtml;

        $showFolderCheckBox.insertAfter($cFolder).find("#" + E_AEM_SHOW_FOLDERS).change(function(){
            if(!$articles){
                $articles = $("article");
                $assets = $("[data-type='asset']");
            }

            var hide = this.checked, $grids = $("div[class^='grid-']");

            if($grids.length > 0 && !gridsHtml){
                gridsHtml = $grids.parent().html();
            }

            if(hide){
                $assets.hide();
            }else{
                $assets.show();
            }

            var $cards = $.find(".foundation-layout-card");

            //adjust the cards to fit in layout
            if($cards.length == 0){
                return;
            }

            var clazz = $grids.prop("class"),
                gIndex = parseInt(clazz.substr(clazz.indexOf("-") + 1), 10),
                assetType, index = 0;

            if(!hide && gridsHtml){
                $grids.parent().html(gridsHtml);
                return;
            }

            $grids.html("");

            var inGrid = Math.ceil( ( hide ? ($articles.length - $assets.length) : $articles.length ) / gIndex);

            $articles.each(function(i, article){
                if(hide){
                    assetType = $(article).find("[itemprop='assettype']");

                    if(assetType.length > 0 && assetType[0].innerHTML !== "FOLDER"){
                        return;
                    }
                }

                $($grids[ Math.floor(index++ / inGrid)]).append($(article));
            });
        });

        $(document).on(FOUNDATION_CONTENT_LOADED, function(e){
            $(document).on(FOUNDATION_CONTENT_LOADED, ".foundation-layout-columns", function(e) {
                $articles = $assets = gridsHtml = undefined;
                $("#" + E_AEM_SHOW_FOLDERS).prop( "checked", false );
            });

            //event not thrown on .foundation-layout-list, .foundation-layout-card sometimes, bug???
            $(document).on(FOUNDATION_CONTENT_LOADED, ".foundation-layout-util-maximized", function(e) {
                $articles = $assets = gridsHtml = undefined;
                $("#" + E_AEM_SHOW_FOLDERS).prop( "checked", false );
            });
        });
    });
})(document, jQuery);

3 comments:

  1. hy
    thanks for sharing this blog

    plz visit 123movies

    ReplyDelete
  2. Are you finding any technical error in your HP product regarding your HP Products- printer and laptops and so ? contact HP Printer Assistant to fix your problems. we are here for your help. call now! we will answer your call within 60 seconds!

    hp support assistant

    ReplyDelete
  3. BigPond email login services go suitably for business and personal use. BigPond email login helps to delivering emailing and entertainment services to users. They provide services with help of experts there is a list of services they provide like Entitlement to stay up-to-date with all your estimated call details and data usage, Ease to Pay bills, Effortless management of Pre-Paid bills, Set up Email invoice, Purchase movie tickets with BigPond.
    The expert is here to guide you and help you with every problem regarding the BigPond email login. We are here to provide the help you 24x7 hours.

    ReplyDelete