alicestrt/vvvw
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

automated video and bio popup depending on properties in the json file

Browse Source
This commit is contained in:
nglk 2020-12-04 13:15:54 +01:00
parent f170a15094
commit d608cdc95c
3 changed files with 189 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
wells/index.html
View File

@ -67,7 +67,7 @@
<img src="static/images/poem.png"> <img src="static/images/poem.png">
</div> </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="300" height="80" id="videoasikA" src="https://www.youtube.com/embed/AnsVY_gjJns" frameborder="0" allowfullscreen="false" 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="300" height="80" id="videoasikA" src="https://www.youtube.com/embed/AnsVY_gjJns" frameborder="0" allowfullscreen="false" 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="300" height="150" src="https://www.youtube.com/embed/5_9PAugYb4s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <div class="draggable" id="showasikV"><div class='text_audio'>Bio</div><iframe width="300" height="150" src="https://www.youtube.com/embed/5_9PAugYb4s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
@ -83,8 +83,13 @@
<div class="draggable" id="showruhisu"><div class='text_audio'></div><iframe width="300" height="150" src="https://www.youtube.com/embed/fKOKxuFyEdg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div> <div class="draggable" id="showruhisu"><div class='text_audio'></div><iframe width="300" height="150" src="https://www.youtube.com/embed/fKOKxuFyEdg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="draggable" id="showasu"><div class='text_audio'></div><iframe width="300" height="150" src="https://www.youtube.com/embed/mETzamzufh4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div> <div class="draggable" id="showasu"><div class='text_audio'></div><iframe width="300" height="150" src="https://www.youtube.com/embed/mETzamzufh4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div> -->
<!-- <img src="static/images/test_small.jpeg" alt="poem"> --> <!-- <img src="static/images/test_small.jpeg" alt="poem"> -->
<script src="static/js/d3_map.js"></script> <script src="static/js/d3_map.js"></script>
</div> </div>
</div> </div>

41
wells/static/js/d3_map.js vendored
View File

@ -4,7 +4,7 @@ var width = 700,
var svg = d3.select(".map_area").append("svg") var svg = d3.select(".map_area").append("svg")
.attr("width", width) .attr("width", width)
.attr("height", height) .attr("height", height)
.attr("viewBox", `${-width/1.5} ${-height/1.6} ${width*2.7} ${height*2.3}`); .attr("viewBox", `${-width/1.3} ${-height/1.6} ${width*2.3} ${height*2.3}`);
var force = d3.layout.force() var force = d3.layout.force()
.gravity(0.009) .gravity(0.009)
@ -26,6 +26,8 @@ d3.json("/static/js/group1.json", function(error, json) {
.enter().append("line") .enter().append("line")
.attr("class", "link"); .attr("class", "link");
var div = d3.select("body").append("div").style("opacity", 0);
var node = svg.selectAll(".node") var node = svg.selectAll(".node")
.data(json.nodes) .data(json.nodes)
.enter().append("g") .enter().append("g")
@ -34,15 +36,18 @@ d3.json("/static/js/group1.json", function(error, json) {
.attr("id", function(d){return d.id}) .attr("id", function(d){return d.id})
.on("click", function(i){ .on("click", function(i){
popup(i.id,i.time); popup(i.id,i.time);
// popup video
div.transition().duration(100).style("opacity", 1);
div.html("<div class='draggable' id='show"+i.id+"'><div class='text_audio'>"+i.bio+"</div><iframe width='300' height='150' src='"+i.url+"' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>")
}) })
.on("dblclick",connectedNodes)// Added code .on("dblclick",connectedNodes)// Added code
.call(force.drag); .call(force.drag);
// under construction // under construction
d3.select("body").on("click",function(i){ // d3.select("body").on("click",function(i){
stop(i.id); // stop(i.id);
}); // });
// highlight NodeLists//Toggle stores whether the highlighting is on // highlight NodeLists//Toggle stores whether the highlighting is on
var toggle = 0; var toggle = 0;
@ -158,16 +163,14 @@ function popup(name,time) {
$("#show"+name).fadeIn() $("#show"+name).fadeIn()
console.log("around") console.log("around")
$("#showthesis").fadeIn() $("#showthesis").fadeIn()
var dada = document.getElementById("text"+name); // var dada = document.getElementById("text"+name);
dada.className += " active"; // dada.className += " active";
dada.scrollIntoView(); // dada.scrollIntoView();
var audio1 = document.getElementById("audioBG"); var audio1 = document.getElementById("audioBG");
audio1.currentTime = time; audio1.currentTime = time;
audio1.play(); audio1.play();
}; };
//
// var videoDiv =
// <div class="draggable" id="showasikV"><div class='text_audio'>Bio</div><iframe width="300" height="150" src="https://www.youtube.com/embed/5_9PAugYb4s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
//stop events when clicking somewhere else //stop events when clicking somewhere else
@ -175,8 +178,8 @@ function popup(name,time) {
if (!$(e.target).parents().andSelf().is('#dadaloglu')) { if (!$(e.target).parents().andSelf().is('#dadaloglu')) {
$("#showdadaloglu").fadeOut(); $("#showdadaloglu").fadeOut();
$("#audiodadaloglu").trigger('pause'); $("#audiodadaloglu").trigger('pause');
var textdada = document.getElementById("textdadaloglu"); // var textdada = document.getElementById("textdadaloglu");
textdada.classList.remove("active"); // textdada.classList.remove("active");
}; };
if (!$(e.target).parents().andSelf().is('#asikA')) { if (!$(e.target).parents().andSelf().is('#asikA')) {
$("#showasikA").fadeOut(); $("#showasikA").fadeOut();
@ -185,12 +188,14 @@ function popup(name,time) {
// textasikA.classList.remove("active"); // textasikA.classList.remove("active");
stopVideo("#asikA"); stopVideo("#asikA");
}; };
if (!$(e.target).parents().andSelf().is('#asikV')) {
$("#showasikV").fadeOut();
$("#audioasikV").trigger('pause'); // if (!$(e.target).parents().andSelf().is('#asikV')) {
var textmuh = document.getElementById("textasikV"); // $("#showasikV").fadeOut();
textmuh.classList.remove("active"); // $("#audioasikV").trigger('pause');
}; // var textmuh = document.getElementById("textasikV");
// textmuh.classList.remove("active");
// };
}); });

214
wells/static/js/group1.json
View File

@ -3,315 +3,419 @@
"name": "Dadaloğlu", "name": "Dadaloğlu",
"group": 1, "group": 1,
"id": "dadaloglu", "id": "dadaloglu",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Dedekorkut", "name": "Dedekorkut",
"group": 1, "group": 1,
"id": "dedekorkut", "id": "dedekorkut",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Aşık Nesimi", "name": "Aşık Nesimi",
"group": 1, "group": 1,
"id": "asikN", "id": "asikN",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Aşık Ali İzzet", "name": "Aşık Ali İzzet",
"group": 1, "group": 1,
"id": "asikA", "id": "asikA",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Aşık Mahzuni Şerif", "name": "Aşık Mahzuni Şerif",
"group": 1, "group": 1,
"id": "asikM", "id": "asikM",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Karacaoğlan", "name": "Karacaoğlan",
"group": 1, "group": 1,
"id": "karacaoglan", "id": "karacaoglan",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Aşık Veysel", "name": "Aşık Veysel",
"group": 1, "group": 1,
"id": "asikV", "id": "asikV",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Neşet Ertaş", "name": "Neşet Ertaş",
"group": 1, "group": 1,
"id": "neset", "id": "neset",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Muharrem Ertaş", "name": "Muharrem Ertaş",
"group": 1, "group": 1,
"id": "muharrem", "id": "muharrem",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Ali Ekber Çiçek", "name": "Ali Ekber Çiçek",
"group": 1, "group": 1,
"id": "aliekber", "id": "aliekber",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Dedeoğlu", "name": "Dedeoğlu",
"group": 1, "group": 1,
"id": "dedeoglu", "id": "dedeoglu",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Pir Sultan Abdal", "name": "Pir Sultan Abdal",
"group": 1, "group": 1,
"id": "pir", "id": "pir",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Yunus Emre", "name": "Yunus Emre",
"group": 1, "group": 1,
"id": "yunus", "id": "yunus",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Kul Nesimi", "name": "Kul Nesimi",
"group": 1, "group": 1,
"id": "kulN", "id": "kulN",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Kaygusuz Abdal", "name": "Kaygusuz Abdal",
"group": 1, "group": 1,
"id": "kaygusuz", "id": "kaygusuz",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Ahmed Yesevi", "name": "Ahmed Yesevi",
"group": 2, "group": 2,
"id": "ahmedY", "id": "ahmedY",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Mevlana Celaleddin Rumi", "name": "Mevlana Celaleddin Rumi",
"group": 2, "group": 2,
"id": "mevlana", "id": "mevlana",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Hacı Bektaş-i Veli", "name": "Hacı Bektaş-i Veli",
"group": 2, "group": 2,
"id": "haci", "id": "haci",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Nazım Hikmet", "name": "Nazım Hikmet",
"group": 3, "group": 3,
"id": "nazim", "id": "nazim",
"time": 10 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Ahmed Arif", "name": "Ahmed Arif",
"group": 3, "group": 3,
"id": "ahmedA", "id": "ahmedA",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Gülten Akın", "name": "Gülten Akın",
"group": 3, "group": 3,
"id": "gulten", "id": "gulten",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Nilgün Marmara", "name": "Nilgün Marmara",
"group": 3, "group": 3,
"id": "nilgun", "id": "nilgun",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Atilla İlhan", "name": "Atilla İlhan",
"group": 3, "group": 3,
"id": "atilla", "id": "atilla",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Lale Müldür", "name": "Lale Müldür",
"group": 3, "group": 3,
"id": "lale", "id": "lale",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Neyzen Tevfik", "name": "Neyzen Tevfik",
"group": 3, "group": 3,
"id": "neyzen", "id": "neyzen",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Melih Cevdet Anday", "name": "Melih Cevdet Anday",
"group": 3, "group": 3,
"id": "melih", "id": "melih",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Cahit Sıtkı Tarancı", "name": "Cahit Sıtkı Tarancı",
"group": 3, "group": 3,
"id": "cahit", "id": "cahit",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Orhan Veli Kanık", "name": "Orhan Veli Kanık",
"group": 3, "group": 3,
"id": "orhan", "id": "orhan",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Ruhi Su", "name": "Ruhi Su",
"group": 4, "group": 4,
"id": "ruhisu", "id": "ruhisu",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Asu Maralman", "name": "Asu Maralman",
"group": 4, "group": 4,
"id": "asu", "id": "asu",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Ceylan Ertem", "name": "Ceylan Ertem",
"group": 4, "group": 4,
"id": "ceylan", "id": "ceylan",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Ahmet Kaya", "name": "Ahmet Kaya",
"group": 4, "group": 4,
"id": "ahmet", "id": "ahmet",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Fazıl Say", "name": "Fazıl Say",
"group": 4, "group": 4,
"id": "fazil", "id": "fazil",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Selda Bağcan", "name": "Selda Bağcan",
"group": 4, "group": 4,
"id": "selda", "id": "selda",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Sezen Aksu", "name": "Sezen Aksu",
"group": 4, "group": 4,
"id": "sezen", "id": "sezen",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Büyük Ev Ablukada", "name": "Büyük Ev Ablukada",
"group": 4, "group": 4,
"id": "buyuk", "id": "buyuk",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Sümeyra Çakır", "name": "Sümeyra Çakır",
"group": 4, "group": 4,
"id": "sumeyra", "id": "sumeyra",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Cem Karaca", "name": "Cem Karaca",
"group": 4, "group": 4,
"id": "cem", "id": "cem",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Barış Manço", "name": "Barış Manço",
"group": 4, "group": 4,
"id": "baris", "id": "baris",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Ayfer Vardar", "name": "Ayfer Vardar",
"group": 4, "group": 4,
"id": "ayfer", "id": "ayfer",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Tülay German", "name": "Tülay German",
"group": 4, "group": 4,
"id": "tulay", "id": "tulay",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Ezhel", "name": "Ezhel",
"group": 4, "group": 4,
"id": "ezhel", "id": "ezhel",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Neşe Karaböcek", "name": "Neşe Karaböcek",
"group": 4, "group": 4,
"id": "nese", "id": "nese",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Erkin Koray", "name": "Erkin Koray",
"group": 4, "group": 4,
"id": "erkin", "id": "erkin",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Moğollar", "name": "Moğollar",
"group": 4, "group": 4,
"id": "mogollar", "id": "mogollar",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Fikret Kızılok", "name": "Fikret Kızılok",
"group": 4, "group": 4,
"id": "fikret", "id": "fikret",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "3 Hürel", "name": "3 Hürel",
"group": 4, "group": 4,
"id": "3hurel", "id": "3hurel",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Levent Yüksel", "name": "Levent Yüksel",
"group": 4, "group": 4,
"id": "levent", "id": "levent",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Serdar Ateşer", "name": "Serdar Ateşer",
"group": 4, "group": 4,
"id": "serdar", "id": "serdar",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "Hümeyra", "name": "Hümeyra",
"group": 4, "group": 4,
"id": "humeyra", "id": "humeyra",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "MFÖ", "name": "MFÖ",
"group": 4, "group": 4,
"id": "mfo", "id": "mfo",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
}, },
{ {
"name": "İlhan Mimaroğlu", "name": "İlhan Mimaroğlu",
"group": 4, "group": 4,
"id": "ilhan", "id": "ilhan",
"time": 1 "time": 1,
"bio": "bio1",
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
} }
], ],
"links": [{ "links": [{