MaCheBellaWordCloud

js/rectangles.js

@@ -57,7 +57,7 @@ class Rect {
             let textCoordsHtml = ' x="'+this.x1+'" y="'+(this.y1+2/3*this.h)+'"';
             toRet = '<g' + rotateHtml + '>' +
             rectsHtml +
-            '<text' + textCoordsHtml + ' font-family="Verdana" fill="RGB('+colRGB.red+','+colRGB.green+','+colRGB.blue+')" font-size="'+this.fontSize+'">' + this.text + '</text>' +
+            '<text id="word-' + this.text.replace('"', '').replace("'", '') + '"' + textCoordsHtml + ' font-family="Verdana" fill="RGB('+colRGB.red+','+colRGB.green+','+colRGB.blue+')" font-size="'+this.fontSize+'">' + this.text + '</text>' +
             '</g>'
         } else{
             toRet = '<rect' + rectCoordsHtml + rotateHtml + style + '/>';

js/word_cloud.js

@@ -93,19 +93,19 @@ function doListPersonNetwork(tempArray){
 
     tempArray.forEach(element => {
         ArrayNames +=
-        "<div class='item-place-person'>\
-            <div class='item-place-person-label'>" +
+        "<div class='item-place-person'>"+
+            "<div class='item-place-person-label' id='list-" + element['text'].replace('"', '').replace("'", '') + "'>" +
                 element['text'] +
-                "<br /><span class='num_occ'>[Lettere inviate: " + element['sent'] + "]</span>\
-                <br /><span class='num_occ'>[Lettere ricevute: " + element['received'] + "]</span>\
-                <br /><span class='num_occ'>[Totale corrispondenza: " + element['count'] + "]</span>\
-            </div>\
-            <div class='item-place-person-action'>\
-                <div class='persona' id='" + element['hlink'] +"'>\
-                    <i class='fa fa-user' style='cursor:pointer'></i>\
-                </div>\
-            </div>\
-        </div>";            
+                "<br /><span class='num_occ'>[Lettere inviate: " + element['sent'] + "]</span>" +
+                "<br /><span class='num_occ'>[Lettere ricevute: " + element['received'] + "]</span>" +
+                "<br /><span class='num_occ'>[Totale corrispondenza: " + element['count'] + "]</span>" +
+            "</div>" +
+            "<div class='item-place-person-action'>" +
+                "<div class='persona' id='" + element['hlink'] +"'>" +
+                    "<i class='fa fa-user' style='cursor:pointer'></i>" +
+                "</div>" +
+            "</div>" +
+        "</div>";
     });
 
     document.getElementById("list_person_network").innerHTML = ArrayNames;
@@ -160,6 +160,9 @@ function doWordCloud(words){
 
     let wordCloudText = createWordCloud(words, wcParameters);
     svg.innerHTML = wordCloudText;
+
+    addEvents(words);
+
 }
 
 // Helper function -- draw special empty word cloud if there are no occurrences
@@ -305,4 +308,30 @@ function checkBorder(rect, minX, maxX, minY, maxY){
     if(rect.minY<minY) return true;
     if(rect.maxY>maxY) return true;
     return false;
+}
+
+
+function addEvents(words){
+
+    for(let word of words){
+        let wcElem = document.getElementById('word-' + word.text.replace('"', '').replace("'", ''));
+        wcElem.addEventListener("click", focusPersonInList);
+        wcElem.addEventListener("mouseover", highlightWord);
+        wcElem.addEventListener("mouseout", unHighlightWord);
+    }
+
+}
+
+function focusPersonInList(e){
+    let targetId = e.target.id;
+    console.log(targetId);
+    let listElem = document.getElementById(targetId.replace('word-', 'list-'));
+    listElem.scrollIntoView({behavior: "smooth", block: "center"});
+}
+
+function highlightWord(e){
+    e.target.style['text-decoration'] = "underline";
+}
+function unHighlightWord(e){
+    e.target.style['text-decoration'] = "";
 }