AEM 65 - Touch UI Show Full Title in Sites and Assets Tags Picker (and not Ellipsis)

Goal

In Touch UI, show the full title of tag in picker....

For AEM 63 check this post

For Assets check this post

Demo | Package Install | Github


Product

Extension - Assets

Extension - Sites

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create folder /apps/eaem-touchui-tags-picker-show-full-title

2) Create node /apps/eaem-touchui-tags-picker-show-full-title/clientlib of type cq:ClientLibraryFolder, add String property categories with value cq.ui.coral.common.tagfield, String[] property dependencies with value lodash

3) Create file (nt:file) /apps/eaem-touchui-tags-picker-show-full-title/clientlib/js.txt, add

                        show-full-title.js

4) Create file (nt:file) /apps/eaem-touchui-tags-picker-show-full-title/clientlib/show-full-title.js, add the following code

(function($, $document) {
    var TAGS_FIELD = "cq:tags",
        LETTER_COUNT = 22, INCREASE_BY = 1.5, CV_ITEM_HEIGHT = 3, CV_LABEL_HEIGHT = 2,
        extended = false;

    $document.on("foundation-contentloaded", handleTagsPicker);

    function handleTagsPicker(){
        if(extended){
            return;
        }

        var $tagsField = $("foundation-autocomplete[name$='" + TAGS_FIELD + "']");

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

        var pathField = $tagsField[0];

        extended = true;

        extendPicker(pathField);
    }

    function extendPicker(pathField){
        var origShowPicker = pathField._showPicker;

        pathField._showPicker = function(){
            origShowPicker.call(this);

            var columnView = $(this._picker.el).find("coral-columnview")[0];

            columnView.on("coral-columnview:navigate", showFullTitle);

            var dummyEvent = { detail : { column: $(columnView).find("coral-columnview-column")[0] } };

            showFullTitle(dummyEvent);
        }
    }

    function showFullTitle(event){
        var $item, $content, increase, $cvItem;

        $(event.detail.column).find("coral-columnview-item").each(function(index, item){
            $item = $(item);

            $content = $item.find("coral-columnview-item-content");

            increase = (INCREASE_BY * Math.floor($content.html().length / LETTER_COUNT));

            if( ($item.prop("variant") == "drilldown") && (increase > 0)){
                increase++;
            }

            $item.css("height", (CV_ITEM_HEIGHT + increase) + "rem");

            $content.css("height",(CV_LABEL_HEIGHT + increase) + "rem").css("white-space", "normal");
        });
    }
})(jQuery, jQuery(document));