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

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

Browse Source
This commit is contained in:
nglk 2020-12-09 16:55:10 +01:00
parent 5d4aba1118
commit f589ef5ab8
5 changed files with 117 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

128
wells/static/js/d3_map.js vendored
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})
.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>");
// 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("<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);
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,16 +211,27 @@ 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");
// };
//
// });
});
// function stop(name) {