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

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

master
nglk 4 years ago
parent
f170a15094
commit
d608cdc95c
3 changed files with 189 additions and 75 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      wells/index.html
  2. 41
      wells/static/js/d3_map.js
  3. 208
      wells/static/js/group1.json

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
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");
// };
}); });

208
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": [{

Write Preview
Loading…
Cancel
Save