diff --git a/capsule-prototype/css/mosaic.css b/capsule-prototype/css/mosaic.css index 85897d7657eddc29df86a8ddd22e86b1db1cee87..78f75b3fa87701f978ae3fbf5b4e68a7d34dd6c3 100644 --- a/capsule-prototype/css/mosaic.css +++ b/capsule-prototype/css/mosaic.css @@ -106,13 +106,12 @@ .mosaic_filter > div.mosaic_filter_item_all { background-size: 20px; } -.mosaic_filter_item:not(.mosaic_filter_disabled, .mosaic_filter_item_all, .mosaic_label_filter_enabled) { +.mosaic_filter_item:not(.mosaic_filter_disabled, .mosaic_filter_item_all) { background-image: url('images/icn-menu-preview.png'); } .mosaic_label_filter_enabled { background-color: rgba(255, 255, 255, .5); - background-image: url('images/icn-menu-filter.png'); } .mosaic_filter_disabled { diff --git a/capsule-prototype/js/MosaicPanelWidget.js b/capsule-prototype/js/MosaicPanelWidget.js index 3b51e18a8a48fba1d4301d947360518cdcd0d387..2e443175ea32e696cd884e15a9868e46f29db2b8 100644 --- a/capsule-prototype/js/MosaicPanelWidget.js +++ b/capsule-prototype/js/MosaicPanelWidget.js @@ -29,7 +29,8 @@ rekall: function() { return app.rekall.Rekall('rekall'); }, - _filters_to_hide: [], + filters_type_to_hide: [], + filter_label_to_show: [], _followedItems: [] }; @@ -40,7 +41,8 @@ $('.mosaic_filter_item') .removeClass('mosaic_filter_disabled'); $('.mosaic_label_filter_enabled').click(); - localOptions._filters_to_hide = []; + localOptions.filters_type_to_hide = []; + localOptions.filter_label_to_show = []; $('.mosaic_category').show(); } @@ -50,8 +52,17 @@ elementsToDestroy.forEach(e => e.remove()); } - function toggleSelectedFilter(filterName){ - let filters = localOptions._filters_to_hide; + function toggleFilterType(filterName){ + let filters = localOptions.filters_type_to_hide; + if (filters.includes(filterName)){ + filters.splice(filters.indexOf(filterName), 1); + } else { + filters.push(filterName); + } + } + + function toggleLabelToShow(filterName){ + let filters = localOptions.filter_label_to_show; if (filters.includes(filterName)){ filters.splice(filters.indexOf(filterName), 1); } else { @@ -71,11 +82,16 @@ } } - const computeLabelShowing = function(div, tag) { - if (tag.getLabels().filter(value => localOptions._filters_to_hide.includes(value.toLowerCase())).length){ - div.hide(); - } else { + 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){ + div.show(); + } else { + div.hide() } } @@ -95,28 +111,27 @@ .attr('src', url) .attr('onerror', "this.src='../shared/css/images/img-document.png';")); div.append(divImageContainer); - div.append($('<span/>').addClass('caption').text(name)); - div.attr('data-rekall-labels', ''); - div.attr('data-rekall-labels', labels.toLowerCase()); + div.append($('<span/>') + .addClass('caption') + .text(name)); let divUpdater = { div: div, tag: tagOrDoc }; divUpdater.update = function(tag){ - div.attr('data-rekall-labels', tag.getMetadata('Rekall->Labels') || '') - computeLabelShowing(div, tag); + setDivVisibilityForTag(div, tag); } divUpdater.remove = function () { tagOrDoc.removeObserver(divUpdater); } divUpdater.computeVisibility = function (){ - computeLabelShowing(divUpdater.div, divUpdater.tag); + setDivVisibilityForTag(divUpdater.div, divUpdater.tag); } tagOrDoc.addObserver(divUpdater); localOptions._followedItems.push(divUpdater); - computeLabelShowing(div, tagOrDoc); + setDivVisibilityForTag(div, tagOrDoc); return div; } @@ -169,10 +184,10 @@ v.color, function () { category.toggle(); $(this).toggleClass('mosaic_filter_disabled'); - localOptions.toggle_filter(categoryName) + localOptions.toggle_filterType(categoryName) }, '', - localOptions._filters_to_hide.includes(categoryName) + localOptions.filters_type_to_hide.includes(categoryName) )); for (let i in v.tags) { @@ -184,34 +199,26 @@ labels.forEach(l => { let button = $('<div/>').html(l); - button.my_state = localOptions._filters_to_hide.includes(l.toLowerCase()); button.addClass('mosaic_filter_item mosaic_button mosaic_label_filter'); - if(button.my_state) { + if( + localOptions.filter_label_to_show.length + && localOptions.filter_label_to_show.includes(l.toLowerCase()) + ) { button.toggleClass('mosaic_label_filter_enabled'); } + button.click(ev => { - ev.target.my_state = !ev.target.my_state; - localOptions.toggle_filter(l.toLowerCase()); + toggleLabelToShow(l.toLowerCase()); $(ev.target).toggleClass('mosaic_label_filter_enabled'); - let labels = new Set(); - $('.mosaic_label_filter').toArray().forEach(f => { - if (true === f.my_state) - labels.add(f.innerText.toLowerCase()); - }); - if (!labels.size) { - $('.mosaic_label_filter').toArray().forEach(f => { - f.my_state = false; - $(f).removeClass('mosaic_label_filter_enabled'); - }); - } - console.debug('filters: ', labels); + ev.target.my_state = !ev.target.my_state; + console.debug('filters: ', localOptions.filter_label_to_show); localOptions._followedItems.forEach(value => value.computeVisibility()) }) filterdiv.append(button); }); } - localOptions.toggle_filter = toggleSelectedFilter; + localOptions.toggle_filterType = toggleFilterType; return { show: function () { @@ -234,7 +241,7 @@ emptyPanel(); localOptions.isOpen = false; localOptions._destroyFollowedElements(); - localOptions._filters_to_hide = []; + localOptions.filters_type_to_hide = []; }, refresh: function () { emptyPanel();