diff --git a/capsule-prototype/js/MosaicPanelWidget.js b/capsule-prototype/js/MosaicPanelWidget.js
index 660f6990eedd925cb4d61a367d3188b06b33584e..e117fe72cf393bc844233027b50f6d2eae972002 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;