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 3 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
Split 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. 214
      wells/static/js/group1.json

9
wells/index.html
View File

@ -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">&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>
@ -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
View File

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

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

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

Write Preview
Loading…
Cancel
Save