automated video and bio popup depending on properties in the json file
This commit is contained in:
parent
f170a15094
commit
d608cdc95c
@ -67,7 +67,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">×</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">×</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>
|
||||
@ -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="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"> -->
|
||||
|
||||
|
||||
|
||||
<script src="static/js/d3_map.js"></script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
41
wells/static/js/d3_map.js
vendored
41
wells/static/js/d3_map.js
vendored
@ -4,7 +4,7 @@ var width = 700,
|
||||
var svg = d3.select(".map_area").append("svg")
|
||||
.attr("width", width)
|
||||
.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()
|
||||
.gravity(0.009)
|
||||
@ -26,6 +26,8 @@ d3.json("/static/js/group1.json", function(error, json) {
|
||||
.enter().append("line")
|
||||
.attr("class", "link");
|
||||
|
||||
var div = d3.select("body").append("div").style("opacity", 0);
|
||||
|
||||
var node = svg.selectAll(".node")
|
||||
.data(json.nodes)
|
||||
.enter().append("g")
|
||||
@ -34,15 +36,18 @@ d3.json("/static/js/group1.json", function(error, json) {
|
||||
.attr("id", function(d){return d.id})
|
||||
.on("click", function(i){
|
||||
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
|
||||
.call(force.drag);
|
||||
|
||||
|
||||
// under construction
|
||||
d3.select("body").on("click",function(i){
|
||||
stop(i.id);
|
||||
});
|
||||
// d3.select("body").on("click",function(i){
|
||||
// stop(i.id);
|
||||
// });
|
||||
|
||||
// highlight NodeLists//Toggle stores whether the highlighting is on
|
||||
var toggle = 0;
|
||||
@ -158,16 +163,14 @@ function popup(name,time) {
|
||||
$("#show"+name).fadeIn()
|
||||
console.log("around")
|
||||
$("#showthesis").fadeIn()
|
||||
var dada = document.getElementById("text"+name);
|
||||
dada.className += " active";
|
||||
dada.scrollIntoView();
|
||||
// var dada = document.getElementById("text"+name);
|
||||
// dada.className += " active";
|
||||
// dada.scrollIntoView();
|
||||
var audio1 = document.getElementById("audioBG");
|
||||
audio1.currentTime = time;
|
||||
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
|
||||
@ -175,8 +178,8 @@ function popup(name,time) {
|
||||
if (!$(e.target).parents().andSelf().is('#dadaloglu')) {
|
||||
$("#showdadaloglu").fadeOut();
|
||||
$("#audiodadaloglu").trigger('pause');
|
||||
var textdada = document.getElementById("textdadaloglu");
|
||||
textdada.classList.remove("active");
|
||||
// var textdada = document.getElementById("textdadaloglu");
|
||||
// textdada.classList.remove("active");
|
||||
};
|
||||
if (!$(e.target).parents().andSelf().is('#asikA')) {
|
||||
$("#showasikA").fadeOut();
|
||||
@ -185,12 +188,14 @@ function popup(name,time) {
|
||||
// textasikA.classList.remove("active");
|
||||
stopVideo("#asikA");
|
||||
};
|
||||
if (!$(e.target).parents().andSelf().is('#asikV')) {
|
||||
$("#showasikV").fadeOut();
|
||||
$("#audioasikV").trigger('pause');
|
||||
var textmuh = document.getElementById("textasikV");
|
||||
textmuh.classList.remove("active");
|
||||
};
|
||||
|
||||
|
||||
// if (!$(e.target).parents().andSelf().is('#asikV')) {
|
||||
// $("#showasikV").fadeOut();
|
||||
// $("#audioasikV").trigger('pause');
|
||||
// var textmuh = document.getElementById("textasikV");
|
||||
// textmuh.classList.remove("active");
|
||||
// };
|
||||
|
||||
});
|
||||
|
||||
|
||||
@ -3,315 +3,419 @@
|
||||
"name": "Dadaloğlu",
|
||||
"group": 1,
|
||||
"id": "dadaloglu",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Dedekorkut",
|
||||
"group": 1,
|
||||
"id": "dedekorkut",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Aşık Nesimi",
|
||||
"group": 1,
|
||||
"id": "asikN",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Aşık Ali İzzet",
|
||||
"group": 1,
|
||||
"id": "asikA",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Aşık Mahzuni Şerif",
|
||||
"group": 1,
|
||||
"id": "asikM",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Karacaoğlan",
|
||||
"group": 1,
|
||||
"id": "karacaoglan",
|
||||
"time": 1
|
||||
"name": "Karacaoğlan",
|
||||
"group": 1,
|
||||
"id": "karacaoglan",
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Aşık Veysel",
|
||||
"group": 1,
|
||||
"id": "asikV",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Neşet Ertaş",
|
||||
"group": 1,
|
||||
"id": "neset",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Muharrem Ertaş",
|
||||
"group": 1,
|
||||
"id": "muharrem",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
|
||||
},
|
||||
{
|
||||
"name": "Ali Ekber Çiçek",
|
||||
"group": 1,
|
||||
"id": "aliekber",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Dedeoğlu",
|
||||
"group": 1,
|
||||
"id": "dedeoglu",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Pir Sultan Abdal",
|
||||
"group": 1,
|
||||
"id": "pir",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Yunus Emre",
|
||||
"group": 1,
|
||||
"id": "yunus",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Kul Nesimi",
|
||||
"group": 1,
|
||||
"id": "kulN",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Kaygusuz Abdal",
|
||||
"group": 1,
|
||||
"id": "kaygusuz",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "Ahmed Yesevi",
|
||||
"group": 2,
|
||||
"id": "ahmedY",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Mevlana Celaleddin Rumi",
|
||||
"group": 2,
|
||||
"id": "mevlana",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Hacı Bektaş-i Veli",
|
||||
"group": 2,
|
||||
"id": "haci",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Nazım Hikmet",
|
||||
"group": 3,
|
||||
"id": "nazim",
|
||||
"time": 10
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Ahmed Arif",
|
||||
"group": 3,
|
||||
"id": "ahmedA",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Gülten Akın",
|
||||
"group": 3,
|
||||
"id": "gulten",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Nilgün Marmara",
|
||||
"group": 3,
|
||||
"id": "nilgun",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Atilla İlhan",
|
||||
"group": 3,
|
||||
"id": "atilla",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Lale Müldür",
|
||||
"group": 3,
|
||||
"id": "lale",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Neyzen Tevfik",
|
||||
"group": 3,
|
||||
"id": "neyzen",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Melih Cevdet Anday",
|
||||
"group": 3,
|
||||
"id": "melih",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Cahit Sıtkı Tarancı",
|
||||
"group": 3,
|
||||
"id": "cahit",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Orhan Veli Kanık",
|
||||
"group": 3,
|
||||
"id": "orhan",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Ruhi Su",
|
||||
"group": 4,
|
||||
"id": "ruhisu",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Asu Maralman",
|
||||
"group": 4,
|
||||
"id": "asu",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Ceylan Ertem",
|
||||
"group": 4,
|
||||
"id": "ceylan",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Ahmet Kaya",
|
||||
"group": 4,
|
||||
"id": "ahmet",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Fazıl Say",
|
||||
"group": 4,
|
||||
"id": "fazil",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Selda Bağcan",
|
||||
"group": 4,
|
||||
"id": "selda",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Sezen Aksu",
|
||||
"group": 4,
|
||||
"id": "sezen",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Büyük Ev Ablukada",
|
||||
"group": 4,
|
||||
"id": "buyuk",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Sümeyra Çakır",
|
||||
"group": 4,
|
||||
"id": "sumeyra",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Cem Karaca",
|
||||
"group": 4,
|
||||
"id": "cem",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Barış Manço",
|
||||
"group": 4,
|
||||
"id": "baris",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Ayfer Vardar",
|
||||
"group": 4,
|
||||
"id": "ayfer",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Tülay German",
|
||||
"group": 4,
|
||||
"id": "tulay",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Ezhel",
|
||||
"group": 4,
|
||||
"id": "ezhel",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Neşe Karaböcek",
|
||||
"group": 4,
|
||||
"id": "nese",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Erkin Koray",
|
||||
"group": 4,
|
||||
"id": "erkin",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Moğollar",
|
||||
"group": 4,
|
||||
"id": "mogollar",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Fikret Kızılok",
|
||||
"group": 4,
|
||||
"id": "fikret",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "3 Hürel",
|
||||
"group": 4,
|
||||
"id": "3hurel",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Levent Yüksel",
|
||||
"group": 4,
|
||||
"id": "levent",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Serdar Ateşer",
|
||||
"group": 4,
|
||||
"id": "serdar",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "Hümeyra",
|
||||
"group": 4,
|
||||
"id": "humeyra",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "MFÖ",
|
||||
"group": 4,
|
||||
"id": "mfo",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
},
|
||||
{
|
||||
"name": "İlhan Mimaroğlu",
|
||||
"group": 4,
|
||||
"id": "ilhan",
|
||||
"time": 1
|
||||
"time": 1,
|
||||
"bio": "bio1",
|
||||
"url": "https://www.youtube.com/embed/AnsVY_gjJns"
|
||||
}
|
||||
],
|
||||
"links": [{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user