diff --git a/wells/includes/thesis.html b/wells/includes/thesis.html index bc03e6d..6d7b0f4 100644 --- a/wells/includes/thesis.html +++ b/wells/includes/thesis.html @@ -1,3 +1,4 @@ +

Wells of Knowledge:

Streams of poetry, music and resistance in Turkey

Merve Kılıçer

“If history writing does not emancipate, it must be serving tyranny.” @@ -290,3 +291,6 @@ Links -https://www.alevibektasi.eu/ -http://www.musikidergisi.net/ -http://teis.yesevi.edu.tr/madde-detay/asik-veysel-satiroglu + + +

diff --git a/wells/index.html b/wells/index.html index e9a2802..969a0f2 100644 --- a/wells/index.html +++ b/wells/index.html @@ -54,21 +54,22 @@ +
-
+
-
Bio
+ - -
+ diff --git a/wells/static/css/style.css b/wells/static/css/style.css index 57d5135..74cc4d5 100644 --- a/wells/static/css/style.css +++ b/wells/static/css/style.css @@ -201,7 +201,7 @@ overflow-y: scroll; max-height: 300px; max-width: 30%; scroll-behavior: smooth; -font-size: .6em; +font-size: .9em; border: 1px black solid; padding: 1.5em; margin-right: 10px; @@ -321,16 +321,29 @@ h2 { /* pop up */ -#show_video_bio { +#showvideo { /* display: none; */ - right: 10px; + right: 6%; top:10%; - width: 30% !important; - position: relative; + padding: 2%; + background-color: white; + position: absolute; + z-index: 5; + border: 1px black solid; +} + +#showbio { + /* display: none; */ + right: 10%; + top:80%; + padding: 2%; + background-color: white; + position: absolute; z-index: 5; border: 1px black solid; } + /* .bio{ margin-bottom: 1.2em; margin-top: 2em; @@ -369,7 +382,6 @@ color: #AEB10A; #showabout, #showcolophon { display: none; - left: 20%; /* background-image: url("../images/poster1.png"); */ background-color: white; word-wrap: break-word; @@ -381,6 +393,16 @@ color: #AEB10A; z-index: 5; } +#showcolophon { + left: 30%; + top:10%; +} + +#showabout { + left: 20%; +} + + /*d3 map*/ .link { diff --git a/wells/static/images/circleB.png b/wells/static/images/circleB.png index 962d99a..31cb59b 100644 Binary files a/wells/static/images/circleB.png and b/wells/static/images/circleB.png differ diff --git a/wells/static/js/d3_map.js b/wells/static/js/d3_map.js index fbec5a0..5fc307e 100644 --- a/wells/static/js/d3_map.js +++ b/wells/static/js/d3_map.js @@ -26,22 +26,70 @@ d3.json("/static/js/group1.json", function(error, json) { .enter().append("line") .attr("class", "link"); -var div = d3.select("body").append("div").style("opacity", 1); var node = svg.selectAll(".node") .data(json.nodes) .enter().append("g") .attr("class", function(d){return "node group" + d.group}) - .attr("id", function(d){return d.id}) - .on("click", function(i){ - // popup video - div.transition().duration(100); - div.html("
×
"+i.bio+"
"); - // rest pop up - popup(i.id,i.time); - }) - .on("dblclick",connectedNodes)// Added code - .call(force.drag); + .attr("id", function(d){return d.id}); + + node.append("image") + // .attr("xlink:href", "/static/images/squig2.png") + .attr("xlink:href", "/static/images/circleB.png") + .attr("x", -8) + .attr("y", -8) + .attr("width", 16) + .attr("height", 16); + + node.append("text") + // .attr("xlink:href", "#") + .attr("dx", 12) + .attr("dy", ".35em") + .text(function(d) { return d.name }); + +// let drag = d3.behavior.drag(); +// var drag = d3.behavior.drag() +// .on("drag", function() { +// var x = d3.event.x; +// var y = d3.event.y; +// d3.select(this).attr("transform", "translate(" + x + "," + y + ")"); +// }); + +var divVideo = d3.select("body").append("div").style("opacity", 1); +var divBio = d3.select("body").append("div").style("opacity", 1); + + + + node.on({ + "mouseover": function(d) { + d3.select(this).style("cursor", "pointer"); + }}) + .on("click", function(i){ + // popup video + divVideo.transition().duration(100); + divVideo.html("
  × 
"); + divBio.transition().duration(100); + divBio.html("
  × 
"+i.bio+"
"); + // div.on(".drag", null); + // span.html("×"); + // rest pop up + popup(i.id,i.time); + }) + .on("dblclick",connectedNodes); + + + force.on("tick", function() { + link.attr("x1", function(d) { return d.source.x; }) + .attr("y1", function(d) { return d.source.y; }) + .attr("x2", function(d) { return d.target.x; }) + .attr("y2", function(d) { return d.target.y; }); + + node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); + + + }); + + // under construction @@ -85,36 +133,8 @@ function connectedNodes() { //end highlight nodes - node.append("image") - // .attr("xlink:href", "/static/images/squig2.png") - .attr("xlink:href", "/static/images/circleB.png") - .attr("x", -8) - .attr("y", -8) - .attr("width", 16) - .attr("height", 16); - - node.append("text") - // .attr("xlink:href", "#") - .attr("dx", 12) - .attr("dy", ".35em") - .text(function(d) { return d.name }); - - node.on({ - "mouseover": function(d) { - d3.select(this).style("cursor", "pointer"); - }}); - - force.on("tick", function() { - link.attr("x1", function(d) { return d.source.x; }) - .attr("y1", function(d) { return d.source.y; }) - .attr("x2", function(d) { return d.target.x; }) - .attr("y2", function(d) { return d.target.y; }); - - node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); - }); - // no overlapping //var padding = 10, // separation between circles @@ -146,7 +166,8 @@ function connectedNodes() { //} // scripts for mouse events -var stopVideo = function (name) { +// var stopVideo = function (name) { +function stopVideo(name) { var iframe = document.querySelector( 'iframe'); var video = document.getElementById( "#video"+name ); if ( iframe !== null ) { @@ -190,15 +211,26 @@ function popup(name,time) { stopVideo("#asikA"); }; + }); + + // $(document).click(function (e) { + // 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('#asikA')) { + // $("#showasikA").fadeOut(); + // $("#audioasikA").trigger('pause'); + // // var textasikA = document.getElementById("textasikA"); + // // 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"); - // }; - }); });