diff --git a/static/css/style.css b/static/css/style.css index 9805ef0..01bc778 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -278,3 +278,7 @@ draggable { pointer-events: none; font: 1em sans-serif; } + +.active { + background-color: #80ffd4; +} diff --git a/static/js/d3_map.js b/static/js/d3_map.js index a410bc0..03daa83 100644 --- a/static/js/d3_map.js +++ b/static/js/d3_map.js @@ -27,7 +27,7 @@ d3.json("/static/js/group1.json", function(error, json) { var node = svg.selectAll(".node") .data(json.nodes) .enter().append("g") - .attr("class", "node") + .attr("class", "node "+function(d){return d.class}) .attr("id", function(d){return d.id}) @@ -97,6 +97,7 @@ d3.json("/static/js/group1.json", function(error, json) { $("#showdadaloglu").fadeIn() console.log("around") var dada = document.getElementById("textdadaloglu"); + dada.className += " active"; dada.scrollIntoView(); var audio1 = document.getElementById("audio-1"); audio1.currentTime = 12; @@ -104,9 +105,11 @@ d3.json("/static/js/group1.json", function(error, json) { }); + $("#muharrem").click(function(){$("#showmuharrem").fadeIn() console.log("around") var muh = document.getElementById("textmuharrem"); + muh.className += " active"; muh.scrollIntoView(); var audio2 = document.getElementById("audio-1"); audio2.currentTime = 50; @@ -118,11 +121,14 @@ d3.json("/static/js/group1.json", function(error, json) { if (!$(e.target).parents().andSelf().is('#dadaloglu')) { $("#showdadaloglu").fadeOut(); $("#audiodadaloglu").trigger('pause'); - + var textdada = document.getElementById("textdadaloglu"); + textdada.classList.remove("active"); }; if (!$(e.target).parents().andSelf().is('#muharrem')) { $("#showmuharrem").fadeOut(); $("audiomuharrem").trigger('pause'); + var textmuh = document.getElementById("textmuharrem"); + textmuh.classList.remove("active"); }; }); diff --git a/static/js/group1.json b/static/js/group1.json index 09b3943..6a3473b 100644 --- a/static/js/group1.json +++ b/static/js/group1.json @@ -1,85 +1,79 @@ { - "nodes": [ - { + "nodes": [{ "name": "Dadaloğlu", "group": 1, - "id":"dadaloglu" + "id": "dadaloglu" }, { "name": "Dedekorkut", "group": 1, - "id":"dedekorkut" + "id": "dedekorkut" }, { "name": "Aşık Nesimi", "group": 1, - "id":"asikN" + "id": "asikN" }, { "name": "Aşık Ali İzzet", "group": 1, - "id":"asikA" + "id": "asikA" }, { "name": "Karacaoğlan", "group": 1, - "id":"karacaoglan" + "id": "karacaoglan" }, { "name": "Aşık Mahzuni Şerif", "group": 1, - "id":"asikM" + "id": "asikM" }, { "name": "Aşık Veysel", "group": 1, - "id":"asikV" - } - , + "id": "asikV" + }, { "name": "Neşet Ertaş", "group": 1, - "id":"neset" - } - , + "id": "neset" + }, { "name": "Muharrem Ertaş", "group": 1, - "id":"muharrem" + "id": "muharrem" - } - , + }, { "name": "Ali Ekber Çiçek", "group": 1, - "id":"aliekber" - } - , + "id": "aliekber" + }, { "name": "Dedeoğlu", "group": 1, - "id":"dedeoglu" - } - , + "id": "dedeoglu" + }, { "name": "Pir Sultan Abdal", "group": 1, - "id":"pir" + "id": "pir" }, { "name": "Yunus Emre", "group": 1, - "id":"yunus" + "id": "yunus" }, { "name": "Kul Nesimi", "group": 1, - "id":"kulN" + "id": "kulN" }, { "name": "Kaygusuz Abdal", "group": 1, - "id":"kaygusuz" + "id": "kaygusuz" }, { "name": "Ahmed Yesevi", @@ -99,8 +93,7 @@ "id": "haci" } ], - "links": [ - { + "links": [{ "source": 8, "target": 0, "value": 1