diff --git a/capsule-prototype/js/online-script.js b/capsule-prototype/js/online-script.js index 92d32bb9a00ee66d11d774feb0c840e559d42d43..e68d867b0798684e03f6fa99f3787f55d7e9ff52 100644 --- a/capsule-prototype/js/online-script.js +++ b/capsule-prototype/js/online-script.js @@ -815,10 +815,11 @@ function closeEdit() { } function openMosaic() { - function getMosaicItemHtml(tagOrDoc) { + function getMosaicItem(tagOrDoc) { let path = Utils.getPreviewPath(tagOrDoc); let name = tagOrDoc.getMetadata("Rekall->Name"); - let type = tagOrDoc.getMetadata("Rekall->Type"); + let type = tagOrDoc.getMetadata("Rekall->Type"); + let url =''; if (typeof path === 'undefined') { if (type =='rekall/link') { url = "../shared/css/images/img-link.png"; @@ -828,23 +829,25 @@ function openMosaic() { } else { url = path; } - return '<div class="mosaic_item "><img src="'+url+'"></img><span class="caption">'+name+'</span></div>'; - return '<div class="mosaic_item"><img src="../shared/css/images/img-'+type+'.png"></img><span class="caption">'+text+'</span></div>'; + let div=$('<div/>').addClass('mosaic_item') + div.append($('<img/>').attr('src', url)); + div.append($('<span/>').addClass('caption').text(name)); + div.on('click', function() {tagOrDoc.openPopupEdit();}); + return div; } - let html =''; $("#popupMosaicSpace").show(); + let container = $('#popupMosaicMosaic'); // TODO is there a better way to iterate over tags or documents ? - for ( [k, v] of Object.entries(rekall.sortings.colors.categories)) { - let color = v.color; - html += '<div class="mosaic_category" style="background:'+color+'">'; + for ( let [k, v] of Object.entries(rekall.sortings.colors.categories)) { + let category = $('<div/>'); + category.addClass('mosaic_category'); + category.css('background', v.color); for (let i in v.tags){ - html += getMosaicItemHtml(v.tags[i]); + category.append(getMosaicItem(v.tags[i])); } - html += '</div>'; + container.append(category); } - console.log(html); - $('#popupMosaicMosaic').html(html); } function closeMosaic() {