Browse Source

highlightnodes and stop video

master
nglk 4 years ago
parent
commit
2f24356118
  1. 2
      wells/index.html
  2. 61
      wells/static/js/d3_map.js

2
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>

61
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");
textmuh.classList.remove("active");
// var textasikA = document.getElementById("textasikA");
// textasikA.classList.remove("active");
stopVideo("#asikA");
};
if (!$(e.target).parents().andSelf().is('#asikV')) {
$("#showasikV").fadeOut();

Loading…
Cancel
Save