separated bio from video, fixed x close popup and video stops when clicking x

wells/includes/thesis.html

@@ -1,3 +1,4 @@
+<div>
 <h1>Wells of Knowledge: <p>Streams of poetry, music and resistance in Turkey</h1>
 <h2>Merve Kılıçer</h2>
 <p><i>“If history writing does not emancipate, it must be serving tyranny.”
@@ -290,3 +291,6 @@ Links
 -https://www.alevibektasi.eu/
 -http://www.musikidergisi.net/
 -http://teis.yesevi.edu.tr/madde-detay/asik-veysel-satiroglu
+
+
+</div>

wells/index.html

@@ -54,21 +54,22 @@
     <!-- new row should start here -->
     <!-- pop up thesis -->
     <!-- <div class="scaleable-wrapper draggable" id="scaleable-wrapper"> -->
+    <div>
     <div w3-include-html="thesis.html" class="draggable thesis" id="thesis">
-    </div>
+    </div></div>
     <!-- </div> -->
     <!-- map area -->
   <div class="row">
     <div class="col-md-10 offset-md-1">
     <div class="map_area">
       <!-- <p>Related media</p> -->
-      <div class="draggable" id="showdadaloglu"><div class='text_audio'>Bio</div>
+      <!-- <div class="draggable" id="showdadaloglu"><div class='text_audio'>Bio</div> -->
         <!-- <audio id="audiodadaloglu" controls>
           <source src="static/audio/HNI_Soundinstall_3tracks_together1.mp3" type="audio/mpeg">
           Your browser does not support the audio tag.
         </audio> -->
-        <img src="static/images/poem.png">
+        <!-- <img src="static/images/poem.png">
-      </div>
+      </div> -->
       <!-- <img src="static/images/test_small.jpeg" alt="poem"> -->
 
       <!-- popups about and colophon -->

wells/static/css/style.css

@@ -201,7 +201,7 @@ overflow-y: scroll;
 max-height: 300px;
 max-width: 30%;
 scroll-behavior: smooth;
-font-size: .6em;
+font-size: .9em;
 border: 1px black solid;
 padding: 1.5em;
 margin-right: 10px;
@@ -321,16 +321,29 @@ h2 {
 
 
 /* pop up */
-#show_video_bio {
+#showvideo {
   /* display: none; */
-  right: 10px;
+  right: 6%;
   top:10%;
-  width: 30% !important;
+  padding: 2%;
-  position: relative;
+  background-color: white;
+  position: absolute;
   z-index: 5;
   border: 1px black solid;
 }
 
+#showbio {
+  /* display: none; */
+  right: 10%;
+  top:80%;
+  padding: 2%;
+  background-color: white;
+  position: absolute;
+  z-index: 5;
+  border: 1px black solid;
+}
+
+
 /* .bio{
   margin-bottom: 1.2em;
   margin-top: 2em;
@@ -369,7 +382,6 @@ color: #AEB10A;
 
 #showabout, #showcolophon {
   display: none;
-  left: 20%;
   /* background-image: url("../images/poster1.png"); */
   background-color: white;
   word-wrap: break-word;
@@ -381,6 +393,16 @@ color: #AEB10A;
   z-index: 5;
 }
 
+#showcolophon {
+    left: 30%;
+    top:10%;
+}
+
+#showabout {
+    left: 20%;
+}
+
+
 
 /*d3 map*/
 .link {

wells/static/js/d3_map.js

@@ -26,22 +26,70 @@ d3.json("/static/js/group1.json", function(error, json) {
     .enter().append("line")
       .attr("class", "link");
 
-var div = d3.select("body").append("div").style("opacity", 1);
 
   var node = svg.selectAll(".node")
       .data(json.nodes)
       .enter().append("g")
       .attr("class", function(d){return "node group" + d.group})
-      .attr("id", function(d){return d.id})
+      .attr("id", function(d){return d.id});
+
+      node.append("image")
+          // .attr("xlink:href", "/static/images/squig2.png")
+          .attr("xlink:href", "/static/images/circleB.png")
+          .attr("x", -8)
+          .attr("y", -8)
+          .attr("width", 16)
+          .attr("height", 16);
+
+      node.append("text")
+          // .attr("xlink:href", "#")
+          .attr("dx", 12)
+          .attr("dy", ".35em")
+          .text(function(d) { return d.name });
+
+// let drag = d3.behavior.drag();
+// var drag = d3.behavior.drag()
+//     .on("drag", function() {
+//   var x = d3.event.x;
+//   var y = d3.event.y;
+//   d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
+// });
+
+var divVideo = d3.select("body").append("div").style("opacity", 1);
+var divBio = d3.select("body").append("div").style("opacity", 1);
+
+
+
+      node.on({
+        "mouseover": function(d) {
+          d3.select(this).style("cursor", "pointer");
+        }})
         .on("click", function(i){
               // popup video
-            div.transition().duration(100);
+              divVideo.transition().duration(100);
-            div.html("<div id='show_video_bio'><span onclick='this.parentElement.style.display='none'' class='topleft'>&times</span><iframe width='300' height='150' src='"+i.url+"' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe><div id='bio"+i.id+"'>"+i.bio+"</div></div>");
+              divVideo.html("<div id='showvideo'><span onclick=this.parentElement.style.display='none';stopVideo("+i.id+"); class='topleft'> &nbsp; &times&nbsp;</span><iframe width='300' height='150' src='"+i.url+"' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe></div>");
+              divBio.transition().duration(100);
+              divBio.html("<div id='showbio'><span onclick=this.parentElement.style.display='none' class='topleft'> &nbsp; &times&nbsp;</span><div id='bio"+i.id+"'>"+i.bio+"</div>");
+              // div.on(".drag", null);
+              // span.html("<span onclick='this.parentElement.style.display='none'' class='topleft'>&times</span>");
               // rest pop up
               popup(i.id,i.time);
             })
-      .on("dblclick",connectedNodes)// Added code
+        .on("dblclick",connectedNodes);
-      .call(force.drag);
+
+
+      force.on("tick", function() {
+        link.attr("x1", function(d) { return d.source.x; })
+            .attr("y1", function(d) { return d.source.y; })
+            .attr("x2", function(d) { return d.target.x; })
+            .attr("y2", function(d) { return d.target.y; });
+
+        node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
+
+
+      });
+
+
 
 
 // under construction
@@ -85,35 +133,7 @@ function connectedNodes() {
 //end highlight nodes
 
 
-  node.append("image")
-      // .attr("xlink:href", "/static/images/squig2.png")
-      .attr("xlink:href", "/static/images/circleB.png")
-      .attr("x", -8)
-      .attr("y", -8)
-      .attr("width", 16)
-      .attr("height", 16);
-
-  node.append("text")
-      // .attr("xlink:href", "#")
-      .attr("dx", 12)
-      .attr("dy", ".35em")
-      .text(function(d) { return d.name });
-
-  node.on({
-    "mouseover": function(d) {
-      d3.select(this).style("cursor", "pointer");
-    }});
-
-  force.on("tick", function() {
-    link.attr("x1", function(d) { return d.source.x; })
-        .attr("y1", function(d) { return d.source.y; })
-        .attr("x2", function(d) { return d.target.x; })
-        .attr("y2", function(d) { return d.target.y; });
 
-    node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
-
-
-  });
 
 // no overlapping
 
@@ -146,7 +166,8 @@ function connectedNodes() {
 //}
 
 // scripts for mouse events
-var stopVideo = function (name) {
+// var stopVideo = function (name) {
+function stopVideo(name) {
     var iframe = document.querySelector( 'iframe');
     var video = document.getElementById( "#video"+name );
     if ( iframe !== null ) {
@@ -190,15 +211,26 @@ function popup(name,time) {
         stopVideo("#asikA");
     };
 
+  });
 
-    // if (!$(e.target).parents().andSelf().is('#asikV')) {
+  // $(document).click(function (e) {
-    //   $("#showasikV").fadeOut();
+  //   if (!$(e.target).parents().andSelf().is('#dadaloglu')) {
-    //     $("#audioasikV").trigger('pause');
+  //       $("#showdadaloglu").fadeOut();
-    //     var textmuh = document.getElementById("textasikV");
+  //       $("#audiodadaloglu").trigger('pause');
-    //     textmuh.classList.remove("active");
+  //       // var textdada = document.getElementById("textdadaloglu");
+  //       // textdada.classList.remove("active");
   //     };
+  //   if (!$(e.target).parents().andSelf().is('#asikA')) {
+  //     $("#showasikA").fadeOut();
+  //       $("#audioasikA").trigger('pause');
+  //       // var textasikA = document.getElementById("textasikA");
+  //       // textasikA.classList.remove("active");
+  //       stopVideo("#asikA");
+  //   };
+  //
+  // });
+
 
-  });
 
 });