From 3f15cbf3d0f39b95b03a0c9abc057f7e9d6ce6d8 Mon Sep 17 00:00:00 2001 From: nglk Date: Sat, 17 Oct 2020 17:43:02 +0200 Subject: [PATCH] change color while scrolling --- static/css/style.css | 4 ++++ static/js/d3_map.js | 10 ++++++-- static/js/group1.json | 53 +++++++++++++++++++------------------------ 3 files changed, 35 insertions(+), 32 deletions(-) diff --git a/static/css/style.css b/static/css/style.css index 3bc69d4..a2c23ea 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -200,3 +200,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 0b27151..9c6cf56 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}) // .style("fill",function (d) { return 'red'; }) @@ -96,6 +96,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; @@ -103,9 +104,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; @@ -117,11 +120,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 045902a..08bcda5 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", @@ -94,11 +88,10 @@ { "name": "Hacı Bektaş-i Veli", "group": 2, - "id": "haci", + "id": "haci" } ], - "links": [ - { + "links": [{ "source": 8, "target": 0, "value": 1