From 2e00c828d95ab3b76a626bad5d76cff7e6b0cd03 Mon Sep 17 00:00:00 2001 From: Sebastien Curt <sebastien.curt@tetras-libre.fr> Date: Fri, 6 May 2022 10:20:20 +0200 Subject: [PATCH] Fix sort tag labels before display --- capsule-prototype/js/MosaicPanelWidget.js | 98 ++++++++++++----------- 1 file changed, 52 insertions(+), 46 deletions(-) diff --git a/capsule-prototype/js/MosaicPanelWidget.js b/capsule-prototype/js/MosaicPanelWidget.js index 660f699..e117fe7 100644 --- a/capsule-prototype/js/MosaicPanelWidget.js +++ b/capsule-prototype/js/MosaicPanelWidget.js @@ -2,11 +2,11 @@ function MosaicPanelWidget() { const defaultOptions = { getTagGradientColor: function (tag) { - var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera) - var isFirefox = typeof InstallTrigger !== 'undefined'; // Firefox 1.0+ - var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0; // At least Safari 3+: "[object HTMLElementConstructor]" - var isChrome = !!window.chrome && !isOpera; // Chrome 1+ - var isIE = /*@cc_on!@*/false || !!document.documentMode; // At least IE6 + let isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera) + let isFirefox = typeof InstallTrigger !== 'undefined'; // Firefox 1.0+ + let isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0; // At least Safari 3+: "[object HTMLElementConstructor]" + let isChrome = !!window.chrome && !isOpera; // Chrome 1+ + // var isIE = /*@cc_on!@*/false || !!document.documentMode; // At least IE6 if (isOpera) { return "-o-linear-gradient(right bottom, rgba(20,46,51,1) 0%, " + tag.color + " 100%)"; @@ -19,14 +19,17 @@ } }, getPreviewPath: function (tagOrDoc) { - Utils.getPreviewPath(tagOrDoc); + // eslint-disable-next-line no-undef + return Utils.getPreviewPath(tagOrDoc); + }, + htmlElement: function () { + return $('#mosaic_tab') }, - htmlElement: function() { return $('#mosaic_tab') }, isOpen: false, - pubsub: function() { + pubsub: function () { return app.rekall.Rekall('pubSub'); }, - rekall: function() { + rekall: function () { return app.rekall.Rekall('rekall'); }, filters_type_to_hide: [], @@ -37,13 +40,13 @@ const localOptions = $.extend({}, defaultOptions); // eslint-disable-next-line no-unused-vars - localOptions._resetFilters = function(event) { - $('.mosaic_filter_item') - .removeClass('mosaic_filter_disabled'); - $('.mosaic_label_filter_enabled').click(); - localOptions.filters_type_to_hide = []; - localOptions.filter_label_to_show = []; - $('.mosaic_category').show(); + localOptions._resetFilters = function (event) { + $('.mosaic_filter_item') + .removeClass('mosaic_filter_disabled'); + $('.mosaic_label_filter_enabled').click(); + localOptions.filters_type_to_hide = []; + localOptions.filter_label_to_show = []; + $('.mosaic_category').show(); } localOptions._destroyFollowedElements = function () { @@ -52,18 +55,18 @@ elementsToDestroy.forEach(e => e.remove()); } - function toggleFilterType(filterName){ + function toggleFilterType(filterName) { let filters = localOptions.filters_type_to_hide; - if (filters.includes(filterName)){ + if (filters.includes(filterName)) { filters.splice(filters.indexOf(filterName), 1); } else { filters.push(filterName); } } - function toggleLabelToShow(filterName){ + function toggleLabelToShow(filterName) { let filters = localOptions.filter_label_to_show; - if (filters.includes(filterName)){ + if (filters.includes(filterName)) { filters.splice(filters.indexOf(filterName), 1); } else { filters.push(filterName); @@ -82,13 +85,13 @@ } } - const setDivVisibilityForTag = function(div, tag) { + const setDivVisibilityForTag = function (div, tag) { if (!localOptions.filter_label_to_show.length) { div.show() return; } - if (tag.getLabels().filter(value => localOptions.filter_label_to_show.includes(value.toLowerCase())).length){ + if (tag.getLabels().filter(value => localOptions.filter_label_to_show.includes(value.toLowerCase())).length) { div.show(); } else { div.hide() @@ -105,9 +108,8 @@ }); let divImageContainer = $('<div>').addClass('mosaic_item_thumbnail_container'); divImageContainer - .append($('<img/>') + .append($('<img src="'+url+'" alt="thumbnail image"/>') .addClass('mosaic_item_thumbnail_container_img') - .attr('src', url) .attr('onerror', "this.src='../shared/css/images/img-document.png';")); div.append(divImageContainer); div.append($('<span/>') @@ -118,13 +120,13 @@ div: div, tag: tagOrDoc }; - divUpdater.update = function(tag){ + divUpdater.update = function (tag) { setDivVisibilityForTag(div, tag); } divUpdater.remove = function () { tagOrDoc.removeObserver(divUpdater); } - divUpdater.computeVisibility = function (){ + divUpdater.computeVisibility = function () { setDivVisibilityForTag(divUpdater.div, divUpdater.tag); } tagOrDoc.addObserver(divUpdater); @@ -144,7 +146,7 @@ .append($('<h2/>').text(text)); - if(isToggled){ + if (isToggled) { result.toggle(); result.toggleClass('mosaic_filter_disabled'); } @@ -169,8 +171,8 @@ )); localOptions.htmlElement().append(typefilterdiv); localOptions.htmlElement().append(labelsfilterdiv); + // eslint-disable-next-line no-undef let labels = new Set(); - // TODO is there a better way to iterate over tags or documents ? for (let [k, v] of Object.entries(localOptions.rekall().sortings.colors.categories)) { let categoryName = localOptions.rekall().sortings.colors.getCategoryName(k) let category = $('<div/>').addClass('mosaic_category').css('background', localOptions.getTagGradientColor(v)); @@ -198,25 +200,29 @@ localOptions.htmlElement().append(category); } - labels.forEach(l => { - let button = $('<div/>').html(l); - button.addClass('mosaic_filter_item mosaic_button mosaic_label_filter'); - if( - localOptions.filter_label_to_show.length - && localOptions.filter_label_to_show.includes(l.toLowerCase()) - ) { - button.toggleClass('mosaic_label_filter_enabled'); - } - - button.click(ev => { - toggleLabelToShow(l.toLowerCase()); - $(ev.target).toggleClass('mosaic_label_filter_enabled'); - ev.target.my_state = !ev.target.my_state; - console.debug('filters: ', localOptions.filter_label_to_show); - localOptions._followedItems.forEach(value => value.computeVisibility()) + Array.from(labels) + .sort(function (a, b) { + return a.toLowerCase().localeCompare(b.toLowerCase()); }) - labelsfilterdiv.append(button); - }); + .forEach(l => { + let button = $('<div/>').html(l); + button.addClass('mosaic_filter_item mosaic_button mosaic_label_filter'); + if ( + localOptions.filter_label_to_show.length + && localOptions.filter_label_to_show.includes(l.toLowerCase()) + ) { + button.toggleClass('mosaic_label_filter_enabled'); + } + + button.click(ev => { + toggleLabelToShow(l.toLowerCase()); + $(ev.target).toggleClass('mosaic_label_filter_enabled'); + ev.target.my_state = !ev.target.my_state; + console.debug('filters: ', localOptions.filter_label_to_show); + localOptions._followedItems.forEach(value => value.computeVisibility()) + }) + labelsfilterdiv.append(button); + }); } localOptions.toggle_filterType = toggleFilterType; -- GitLab