diff --git a/capsule-prototype/js/MosaicPanelWidget.js b/capsule-prototype/js/MosaicPanelWidget.js
index 4aad30181d852b11329625443d9bbb6da54340d4..eabe84260f4076b7d907f0f52195a926707a377b 100644
--- a/capsule-prototype/js/MosaicPanelWidget.js
+++ b/capsule-prototype/js/MosaicPanelWidget.js
@@ -1,5 +1,7 @@
((app) => {
function MosaicPanelWidget() {
+ const filterByCategory = 0;
+ const filterByLabel = 1;
const defaultOptions = {
getTagGradientColor: function (tag) {
let isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
@@ -33,9 +35,9 @@
return app.rekall.Rekall('rekall');
},
filters_type_to_hide: [],
- filter_label_to_show: [],
+ filter_label_to_hide: [],
_followedItems: [],
- _filter_type: 0,
+ _filter_type: filterByCategory,
};
const localOptions = $.extend({}, defaultOptions);
@@ -46,7 +48,7 @@
.removeClass('mosaic_filter_disabled');
$('.mosaic_label_filter_enabled').click();
localOptions.filters_type_to_hide = [];
- localOptions.filter_label_to_show = [];
+ localOptions.filter_label_to_hide = [];
$('.mosaic_category').show();
}
@@ -66,7 +68,7 @@
}
function toggleLabelToShow(filterName) {
- let filters = localOptions.filter_label_to_show;
+ let filters = localOptions.filter_label_to_hide;
if (filters.includes(filterName)) {
filters.splice(filters.indexOf(filterName), 1);
} else {
@@ -122,17 +124,8 @@
return selectDiv;
}
- 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()
- }
+ function rgbToHex(r, g, b) {
+ return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
const createHtmlElementForTagOrDoc = function (tagOrDoc) {
@@ -158,19 +151,15 @@
tag: tagOrDoc
};
divUpdater.update = function (tag) {
- setDivVisibilityForTag(div, tag);
+ // setDivVisibilityForTag(div, tag);
}
divUpdater.remove = function () {
tagOrDoc.removeObserver(divUpdater);
}
- divUpdater.computeVisibility = function () {
- setDivVisibilityForTag(divUpdater.div, divUpdater.tag);
- }
+
tagOrDoc.addObserver(divUpdater);
localOptions._followedItems.push(divUpdater);
- setDivVisibilityForTag(div, tagOrDoc);
-
return div;
}
@@ -184,7 +173,6 @@
if (isToggled) {
- result.toggle();
result.toggleClass('mosaic_filter_disabled');
}
@@ -196,30 +184,9 @@
localOptions._destroyFollowedElements();
}
- const fillPanel = function () {
- let resetfilterdiv = $('<div/>').addClass('mosaic_filter');
- let typefilterdiv = $('<div/>').addClass('mosaic_filter');
- let labelsfilterdiv = $('<div/>').addClass('mosaic_filter');
- resetfilterdiv.append(getFilterElement(
- 'Reset filters',
- 'rgb(100,100,100)',
- localOptions._resetFilters,
- 'mosaic_filter_item_all',
- false
- ));
- localOptions.htmlElement().append(createFilterTypeSelector());
- localOptions.htmlElement().append(resetfilterdiv);
-
- if (localOptions._filter_type === 0) {
- localOptions.htmlElement().append(typefilterdiv);
- }
- if (localOptions._filter_type === 1){
- localOptions.htmlElement().append(labelsfilterdiv);
- }
- // eslint-disable-next-line no-undef
- let labels = new Set();
+ function createViewByCategory(typefilterdiv) {
for (let [k, v] of Object.entries(localOptions.rekall().sortings.colors.categories)) {
- let categoryName = localOptions.rekall().sortings.colors.getCategoryName(k)
+ let categoryName = localOptions.rekall().sortings.colors.getCategoryName(k);
let category = $('<div/>').addClass('mosaic_category').css('background', localOptions.getTagGradientColor(v));
let grid = $('<div/>').addClass('mosaic_category_grid');
@@ -232,42 +199,105 @@
v.color, function () {
category.toggle();
$(this).toggleClass('mosaic_filter_disabled');
- localOptions.toggle_filterType(categoryName)
+ toggleFilterType(categoryName)
},
'',
localOptions.filters_type_to_hide.includes(categoryName)
));
+ localOptions.htmlElement().append(category);
+ if(localOptions.filters_type_to_hide.includes(categoryName)){
+ category.toggle();
+ }
+
for (let i in v.tags) {
grid.append(createHtmlElementForTagOrDoc(v.tags[i]));
- v.tags[i].getLabels().forEach(l => labels.add(l));
}
- localOptions.htmlElement().append(category);
}
+ }
- Array.from(labels)
- .sort(function (a, b) {
- return a.toLowerCase().localeCompare(b.toLowerCase());
- })
- .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');
+ function createViewByLabel(typefilterdiv) {
+ // retrieve labels with its tags
+ const groupTagsByLabels = function()
+ {
+ let labelsWithTag = {};
+ for (let [k, v] of Object.entries(localOptions.rekall().sortings.colors.categories)) {
+ for (let i in v.tags) {
+ v.tags[i].getLabels().forEach(l => {
+ if (!labelsWithTag[l]) {
+ labelsWithTag[l] = [];
+ }
+ labelsWithTag[l].push(v.tags[i]);
+ });
}
+ }
- 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);
- });
+ return labelsWithTag;
+ };
+ function createViewHtmlFromLabels(labelsWithTag) {
+ for (let [label, v] of Object.entries(labelsWithTag)) {
+ let categoryName = label;
+ let category = $('<div/>').addClass('mosaic_category').css('background', rgbToHex(85, 146, 153));
+
+
+ let grid = $('<div/>').addClass('mosaic_category_grid');
+
+ category.append($('<h2/>').text(categoryName));
+ category.append(grid);
+
+ typefilterdiv.append(getFilterElement(
+ categoryName,
+ rgbToHex(85, 146, 153),
+ function () {
+ category.toggle();
+ $(this).toggleClass('mosaic_filter_disabled');
+ toggleLabelToShow(categoryName)
+ },
+ '',
+ localOptions.filter_label_to_hide.includes(categoryName)
+ ));
+
+ for (let i in v) {
+ grid.append(createHtmlElementForTagOrDoc(v[i]));
+ }
+
+ localOptions.htmlElement().append(category);
+
+ if (localOptions.filter_label_to_hide.includes(categoryName)){
+ category.toggle();
+ }
+ }
+ };
+ createViewHtmlFromLabels(groupTagsByLabels());
+ }
+
+ const fillPanel = function () {
+ let resetfilterdiv = $('<div/>').addClass('mosaic_filter');
+ let typefilterdiv = $('<div/>').addClass('mosaic_filter');
+ let labelsfilterdiv = $('<div/>').addClass('mosaic_filter');
+ resetfilterdiv.append(getFilterElement(
+ 'Reset filters',
+ 'rgb(100,100,100)',
+ localOptions._resetFilters,
+ 'mosaic_filter_item_all',
+ false
+ ));
+ localOptions.htmlElement().append(createFilterTypeSelector());
+ localOptions.htmlElement().append(resetfilterdiv);
+
+ if (localOptions._filter_type === 0) {
+ localOptions.htmlElement().append(typefilterdiv);
+ }
+ if (localOptions._filter_type === 1){
+ localOptions.htmlElement().append(labelsfilterdiv);
+ }
+ // eslint-disable-next-line no-undef
+ if (filterByCategory === localOptions._filter_type){
+ createViewByCategory(typefilterdiv);
+ }
+ if (filterByLabel === localOptions._filter_type){
+ createViewByLabel(labelsfilterdiv);
+ }
}
localOptions.toggle_filterType = toggleFilterType;