Open edit popup on click on mosaic

Also small refactor to create dom elements with jquery instead of
writing html manually

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 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() {