alicestrt
/
vvvw
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

separated bio from video, fixed x close popup and video stops when clicking x

master
nglk 4 years ago
parent
5d4aba1118
commit
f589ef5ab8
5 changed files with 116 additions and 57 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. 4
      wells/includes/thesis.html
  2. 9
      wells/index.html
  3. 34
      wells/static/css/style.css
  4. BIN
      wells/static/images/circleB.png
  5. 114
      wells/static/js/d3_map.js

4
wells/includes/thesis.html
View File

@ -1,3 +1,4 @@
<div>
<h1>Wells of Knowledge: <p>Streams of poetry, music and resistance in Turkey</h1>
<h2>Merve Kılıçer</h2>
<p><i>“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
</div>

9
wells/index.html
View File

@ -54,21 +54,22 @@
<!-- new row should start here -->
<!-- pop up thesis -->
<!-- <div class="scaleable-wrapper draggable" id="scaleable-wrapper"> -->
<div>
<div w3-include-html="thesis.html" class="draggable thesis" id="thesis">
</div>
</div></div>
<!-- </div> -->
<!-- map area -->
<div class="row">
<div class="col-md-10 offset-md-1">
<div class="map_area">
<!-- <p>Related media</p> -->
<div class="draggable" id="showdadaloglu"><div class='text_audio'>Bio</div>
<!-- <div class="draggable" id="showdadaloglu"><div class='text_audio'>Bio</div> -->
<!-- <audio id="audiodadaloglu" controls>
<source src="static/audio/HNI_Soundinstall_3tracks_together1.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio> -->
<img src="static/images/poem.png">
</div>
<!-- <img src="static/images/poem.png">
</div> -->
<!-- <img src="static/images/test_small.jpeg" alt="poem"> -->
<!-- popups about and colophon -->

34
wells/static/css/style.css
View File

@ -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 {

BIN
wells/static/images/circleB.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 46 KiB

114
wells/static/js/d3_map.js
View File

@ -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})
.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
div.transition().duration(100);
div.html("<div id='show_video_bio'><span onclick='this.parentElement.style.display='none'' class='topleft'>&times</span><iframe width='300' height='150' src='"+i.url+"' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe><div id='bio"+i.id+"'>"+i.bio+"</div></div>");
divVideo.transition().duration(100);
divVideo.html("<div id='showvideo'><span onclick=this.parentElement.style.display='none';stopVideo("+i.id+"); class='topleft'> &nbsp; &times&nbsp;</span><iframe width='300' height='150' src='"+i.url+"' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe></div>");
divBio.transition().duration(100);
divBio.html("<div id='showbio'><span onclick=this.parentElement.style.display='none' class='topleft'> &nbsp; &times&nbsp;</span><div id='bio"+i.id+"'>"+i.bio+"</div>");
// div.on(".drag", null);
// span.html("<span onclick='this.parentElement.style.display='none'' class='topleft'>&times</span>");
// rest pop up
popup(i.id,i.time);
})
.on("dblclick",connectedNodes)// Added code
.call(force.drag);
.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,35 +133,7 @@ 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
@ -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");
};
});
// if (!$(e.target).parents().andSelf().is('#asikV')) {
// $("#showasikV").fadeOut();
// $("#audioasikV").trigger('pause');
// var textmuh = document.getElementById("textasikV");
// textmuh.classList.remove("active");
// $(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");
// };
//
// });
});
});

Write Preview
Loading…
Cancel
Save