AEM 6520 - Sort Tags Alphabetically in Tag Move Picker

Goal

Sort Tags alphabetically in the Tag Move Picker

For sorting tags in console check this post

Demo | Package Install | Github


Product

Extension

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create folder /apps/eaem-alpha-order-move-tags-picker

2) Create node /apps/eaem-alpha-order-move-tags-picker/clientlib of type cq:ClientLibraryFolder, add String[] property categories with value [cq.tagging.touch.movetag], String[] property dependencies with value lodash.

3) Create file (nt:file) /apps/eaem-alpha-order-move-tags-picker/clientlib/js.txt, add

                        tags-order.js

4) Create file (nt:file) /apps/eaem-alpha-order-move-tags-picker/clientlib/tags-order.js, add the following code

(function ($, $document) {
    var EAEM_SORTED = "eaem-sorted";

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

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

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

        $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 alphaSortHandler(event, href){
            if(_.isEmpty(href)){
                return;
            }

            var columnData = columnView._data[href];

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

            var $columnData = $(columnData);

            alphaSort($columnData);

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

        function alphaSort($columnData){
            var $cContent = $columnData.find(".coral-ColumnView-column-content"),
                $items = $cContent.find(".coral-ColumnView-item");

            if(!_.isEmpty($cContent.data(EAEM_SORTED))){
                return;
            }

            $items.sort(function(a, b) {
                var aTitle = a.getAttribute("title"),
                    bTitle = b.getAttribute("title");

                return (bTitle.toUpperCase()) < (aTitle.toUpperCase()) ? 1 : -1;
            });

            $cContent.data(EAEM_SORTED, "true");

            $items.detach().appendTo($cContent);
        }

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

        alphaSort(columnView.$element);
    }

}(jQuery, jQuery(document)));