highlightnodes and stop video

wells/index.html

@@ -52,7 +52,7 @@
         <img src="static/images/poem.png">
       </div>
 
-      <div class="draggable" id="showasikA"><div class='text_audio'>Bio Aşık Ali İzzet</div><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><iframe width="400" height="200" src="https://www.youtube.com/embed/AnsVY_gjJns" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
+      <div class="draggable" id="showasikA"><div class='text_audio'>Bio Aşık Ali İzzet</div><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><iframe width="400" height="200" id="videoasikA" src="https://www.youtube.com/embed/AnsVY_gjJns" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
 
       <div class="draggable" id="showasikV"><div class='text_audio'>Bio</div><iframe width="400" height="200" src="https://www.youtube.com/embed/5_9PAugYb4s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 

wells/static/js/d3_map.js

@@ -8,7 +8,7 @@ var svg = d3.select(".map_area").append("svg")
 
 var force = d3.layout.force()
     .gravity(0.009)
-    .distance(300)
+    .distance(400)
     .charge(-30)
     .size([width, height]);
 
@@ -35,13 +35,49 @@ d3.json("/static/js/group1.json", function(error, json) {
       .on("click", function(i){
             popup(i.id,i.time);
           })
+      .on("dblclick",connectedNodes)// Added code
       .call(force.drag);
 
+
+// under construction
   d3.select("body").on("click",function(i){
     stop(i.id);
   });
 
-
+// highlight NodeLists//Toggle stores whether the highlighting is on
+var toggle = 0;
+//Create an array logging what is connected to what
+var linkedByIndex = {};
+for (i = 0; i < json.nodes.length; i++) {
+    linkedByIndex[i + "," + i] = 1;
+};
+json.links.forEach(function (d) {
+    linkedByIndex[d.source.index + "," + d.target.index] = 1;
+});
+//This function looks up whether a pair are neighbours
+function neighboring(a, b) {
+    return linkedByIndex[a.index + "," + b.index];
+}
+function connectedNodes() {
+    if (toggle == 0) {
+        //Reduce the opacity of all but the neighbouring nodes
+        d = d3.select(this).node().__data__;
+        node.style("opacity", function (o) {
+            return neighboring(d, o) | neighboring(o, d) ? 1 : 0.1;
+        });
+        link.style("opacity", function (o) {
+            return d.index==o.source.index | d.index==o.target.index ? 1 : 0.1;
+        });
+        //Reduce the op
+        toggle = 1;
+    } else {
+        //Put them back to opacity=1
+        node.style("opacity", 1);
+        link.style("opacity", 1);
+        toggle = 0;
+    }
+}
+//end highlight nodes
 
 
   node.append("image")
@@ -79,7 +115,7 @@ d3.json("/static/js/group1.json", function(error, json) {
 //var padding = 10, // separation between circles
 //    radius=8;
 //function collide(alpha) {
-//  var quadtree = d3.geom.quadtree(graph.nodes);
+//  var quadtree = d3.geom.quadtree(<.nodes);
 //  return function(d) {
 //    var rb = 2*radius + padding,
 //        nx1 = d.x - rb,
@@ -105,6 +141,18 @@ d3.json("/static/js/group1.json", function(error, json) {
 //}
 
 // scripts for mouse events
+var stopVideo = function (name) {
+    var iframe = document.querySelector( 'iframe');
+    var video = document.getElementById( "#video"+name );
+    if ( iframe !== null ) {
+        var iframeSrc = iframe.src;
+        iframe.src = iframeSrc;
+    }
+    if ( video !== null ) {
+        video.pause();
+    }
+};
+
 
 function popup(name,time) {
       $("#show"+name).fadeIn()
@@ -114,7 +162,7 @@ function popup(name,time) {
       dada.className += " active";
       dada.scrollIntoView();
       var audio1 = document.getElementById("audioBG");
-      audio1.currentTime = time;
+      audio1.currentpopupTime = time;
       audio1.play();
 };
 
@@ -130,8 +178,9 @@ function popup(name,time) {
     if (!$(e.target).parents().andSelf().is('#asikA')) {
       $("#showasikA").fadeOut();
         $("#audioasikA").trigger('pause');
-        var textmuh = document.getElementById("textasikA");
+        // var textasikA = document.getElementById("textasikA");
-        textmuh.classList.remove("active");
+        // textasikA.classList.remove("active");
+        stopVideo("#asikA");
     };
     if (!$(e.target).parents().andSelf().is('#asikV')) {
       $("#showasikV").fadeOut();