Goal
Sort folders and assets in Touch UI Assets Console
Column view is more dynamic and needs additional logic for sorting all columns shown in the view. This extension sorts only first column
Please leave a comment if you find bugs / have fix...
For 62 list view sort on load check this post
Demo | Package Install
Product
Extension
Solution
1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/touch-ui-sort-assets
2 Create node /apps/touch-ui-sort-assets/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-sort-assets/clientlib/js.txt and add
sort-assets.js
4) Create file (nt:file) /apps/touch-ui-sort-assets/clientlib/sort-assets.js and add the following code.
(function (document, $) { "use strict"; var FOUNDATION_CONTENT_LOADED = "foundation-contentloaded"; var sort = function($articles, isColumn){ $articles.sort(function(a, b) { a = $(a).find(isColumn ? ".foundation-collection-item-title" : "h4").text(); b = $(b).find(isColumn ? ".foundation-collection-item-title" : "h4").text(); //this piece was copied from underscore.js sortBy if (a > b || a === void 0){ return 1; }else if (a < b || b === void 0){ return -1; } return 1; }); return $articles; }; var sortCards = function(){ var execFn = function(){ var $cards = $.find(".foundation-layout-card"); if($cards.length == 0){ return; } var $grids = $("div[class^='grid-']"), clazz = $grids.prop("class"), gIndex = parseInt(clazz.substr(clazz.indexOf("-") + 1), 10), $articles = sort($("article")); $grids.html(""); $articles.each(function(index, article){ $($grids[index % gIndex]).append($(article)); }); }; setTimeout(function(){ try { execFn() } catch(err){ console.log("Error executing sort..." + err);} },250); }; var sortList = function(){ setTimeout(function(){ var $items = $.find(".foundation-layout-list"); if($items.length == 0){ return; } $(".grid-0").html(sort($("article"))); }, 250); }; var sortColumns = function(){ var columns = $.find(".foundation-layout-columns .coral-ColumnView-column-content"); if(columns.length == 0){ return; } //sort just the first column, more logic needed for sorting miller columns $(columns[0]).html(sort( $(columns[0]).find(".coral-ColumnView-item"), true)); }; $(document).on(FOUNDATION_CONTENT_LOADED, function(e){ $(document).on(FOUNDATION_CONTENT_LOADED, ".foundation-layout-columns", function(e) { sortColumns(); }); //event not thrown on .foundation-layout-list, .foundation-layout-card sometimes, bug??? $(document).on(FOUNDATION_CONTENT_LOADED, ".foundation-layout-util-maximized", function(e) { sortCards(); sortList(); }); }); })(document, jQuery);
I found problems in the list view sorting:
ReplyDelete1. if you use the "$(".grid-0").html(sort($("article")));" then the column header(Title, modified etc.) disappeared so need to add $(".grid-0").prepend(header);
2. the click on check box does not work anymore after sorting and you see following error:
Uncaught TypeError: Cannot read property 'jquery' of undefined ..... coralui2.js:18952
to get rid of above to issues, simply use:
$(".grid-0").after(sort($("article")));