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

didnt fix draggable, bg audio and others, some work partly

Browse Source
This commit is contained in:
nglk 2020-12-15 18:51:50 +01:00
parent f589ef5ab8
commit 08b75688be
3 changed files with 113 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
wells/index.html
View File

@ -56,7 +56,9 @@
<!-- <div class="scaleable-wrapper draggable" id="scaleable-wrapper"> --> <!-- <div class="scaleable-wrapper draggable" id="scaleable-wrapper"> -->
<div> <div>
<div w3-include-html="thesis.html" class="draggable thesis" id="thesis"> <div w3-include-html="thesis.html" class="draggable thesis" id="thesis">
</div></div> </div>
<!-- <span onclick="this.parentElement.style.display='none'" id="thesisX" class='topleft'>&times</span> -->
</div>
<!-- </div> --> <!-- </div> -->
<!-- map area --> <!-- map area -->
<div class="row"> <div class="row">
@ -81,19 +83,18 @@
</div> </div>
</div> </div>
</div>
<div class="row">
<div class="col-md-6"> <div class="col-md-6">
<div class="map_legend"> <div class="map_legend">
<div id="box1" onclick="popup_bg(120)"></div> <p>Folklore literature</p> <div id="box1" onclick="popup_bg(120)"></div> <p>Folklore literature</p>
<div id="box2" onclick="popup_bg(300)"></div> <p>Islamic Mysticism</p> <div id="box2" onclick="popup_bg(300)"></div> <p>Islamic Mysticism</p>
<div id="box3" onclick="popup_bg(700)"></div> <p>Contemporary poets</p> <div id="box3" onclick="popup_bg(500)"></div> <p>Contemporary poets</p>
<div id="box4" onclick="popup_bg(1000)"></div> <p>Contemporary musicians</p> <div id="box4" onclick="popup_bg(700)"></div> <p>Contemporary musicians</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!--moved about temporarily--> <!--moved about temporarily-->
@ -116,9 +117,9 @@
<script> <script>
function popup_bg(time) { function popup_bg(time) {
var box = document.getElementById("audioBG"); var box = document.getElementById("audioBG");
if (box.currentTime>0) { // if (box.currentTime>0) {
box.currentTime = 0; // box.currentTime = 0;
} // } else {
box.currentTime = time; box.currentTime = time;
box.play(); box.play();
btn.innerHTML = "(Pause)"; btn.innerHTML = "(Pause)";
@ -168,6 +169,9 @@ $("#about").click(function(){
$("#showcolophon").fadeIn() $("#showcolophon").fadeIn()
console.log("around") console.log("around")
}); });
</script> </script>
<!-- scaleable wrapper --> <!-- scaleable wrapper -->

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

@ -38,8 +38,8 @@ body {
/*Main areas*/ /*Main areas*/
.map_area { .map_area {
text-align: center; text-align: center;
margin-top: 20px; /* margin-top: 20px; */
margin-bottom: 20px; /* margin-bottom: 20px; */
margin-right: 10px; margin-right: 10px;
margin-left: 20px; margin-left: 20px;
position: relative; position: relative;
@ -177,6 +177,22 @@ a {
background-color: #73d2de; background-color: #73d2de;
} }
#box1:hover {
cursor: pointer;
}
#box2:hover {
cursor: pointer;
}
#box3:hover {
cursor: pointer;
}
#box4:hover {
cursor: pointer;
}
.map_legend p { .map_legend p {
padding-left: 5px; padding-left: 5px;
font-family: 'Vesper Libre', serif; font-family: 'Vesper Libre', serif;
@ -363,6 +379,14 @@ h2 {
color: black; color: black;
} }
#thesisX {
position: absolute;
z-index:5;
left: 480px;
top: 14%;
display: none;
}
/* about and colophon */ /* about and colophon */
#about, #colophon { #about, #colophon {

102
wells/static/js/d3_map.js vendored
View File

@ -47,13 +47,16 @@ d3.json("/static/js/group1.json", function(error, json) {
.attr("dy", ".35em") .attr("dy", ".35em")
.text(function(d) { return d.name }); .text(function(d) { return d.name });
// let drag = d3.behavior.drag(); // // let drag = d3.behavior.drag();
// var drag = d3.behavior.drag() // var drag = d3.behavior.drag()
// .on("drag", function() { // .on("drag", function() {
// var x = d3.event.x; // var x = d3.event.x;
// var y = d3.event.y; // var y = d3.event.y;
// d3.select(this).attr("transform", "translate(" + x + "," + y + ")"); // d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
// }); // });
//
//
var divVideo = d3.select("body").append("div").style("opacity", 1); var divVideo = d3.select("body").append("div").style("opacity", 1);
var divBio = d3.select("body").append("div").style("opacity", 1); var divBio = d3.select("body").append("div").style("opacity", 1);
@ -65,11 +68,26 @@ var divBio = d3.select("body").append("div").style("opacity", 1);
d3.select(this).style("cursor", "pointer"); d3.select(this).style("cursor", "pointer");
}}) }})
.on("click", function(i){ .on("click", function(i){
// $(document).ready(function() {
// var a = 3;
// var dragOpts = {
// cursor: "move",
// cursor: "grab",
// distance: "0",
// };
// $('.draggable').draggable(
// {
// start: function(event, ui) { $(this).css("z-index", a++); }
// });
// });
// popup video // popup video
divVideo.transition().duration(100); 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>"); divVideo.html("<div id='showvideo' class='draggable'><span onclick=this.parentElement.style.display='none';pauseAllVideos("+i.id+"); class='topleft'> &nbsp; &times&nbsp;</span><iframe id='video"+i.id+"' 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.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>"); 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>");
// draggable
// div.on(".drag", null); // div.on(".drag", null);
// span.html("<span onclick='this.parentElement.style.display='none'' class='topleft'>&times</span>"); // span.html("<span onclick='this.parentElement.style.display='none'' class='topleft'>&times</span>");
// rest pop up // rest pop up
@ -78,6 +96,8 @@ var divBio = d3.select("body").append("div").style("opacity", 1);
.on("dblclick",connectedNodes); .on("dblclick",connectedNodes);
force.on("tick", function() { force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; }) link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; }) .attr("y1", function(d) { return d.source.y; })
@ -167,23 +187,49 @@ function connectedNodes() {
// scripts for mouse events // scripts for mouse events
// var stopVideo = function (name) { // var stopVideo = function (name) {
function stopVideo(name) { // function stopVideo(name) {
var iframe = document.querySelector( 'iframe'); // var iframe = document.querySelector( 'iframe');
var video = document.getElementById( "#video"+name ); // var video = document.getElementById( "#video"+name );
if ( iframe !== null ) { // if ( iframe !== null ) {
var iframeSrc = iframe.src; // var iframeSrc = iframe.src;
iframe.src = iframeSrc; // iframe.src = iframeSrc;
} // }
if ( video !== null ) { // if ( video !== null ) {
video.pause(); // video.pause();
} // }
// };
// $(function (){
// $('.topleft').click(function(){
// $('iframe').attr('src', $('iframe').attr('src'));
// });
// });
// function pauseAllVideos(name)
// {
// $("#video"+name).each(function(){
// this.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*')
// });
// }
function pauseAllVideos(name) {
$("video"+name).each(function(){
$(this).stopVideo();
});
}; };
// $(function (){
// $('.topleft').click(function(){
// $('iframe').attr('src', $('iframe').attr('src'));
// });
// });
function popup(name,time) { function popup(name,time) {
$("#show"+name).fadeIn() $("#show"+name).fadeIn()
console.log("around") console.log("around")
$("#thesis").fadeIn() $("#thesis").fadeIn()
$("#thesisX").fadeIn()
$("#bio"+name).fadeIn() $("#bio"+name).fadeIn()
var dada = document.getElementById("text"+name); var dada = document.getElementById("text"+name);
dada.className += " active"; dada.className += " active";
@ -196,22 +242,22 @@ function popup(name,time) {
//stop events when clicking somewhere else //stop events when clicking somewhere else
$(document).click(function (e) { // $(document).click(function (e) {
if (!$(e.target).parents().andSelf().is('#dadaloglu')) { // if (!$(e.target).parents().andSelf().is('#dadaloglu')) {
$("#showdadaloglu").fadeOut(); // $("#showdadaloglu").fadeOut();
$("#audiodadaloglu").trigger('pause'); // $("#audiodadaloglu").trigger('pause');
// var textdada = document.getElementById("textdadaloglu"); // // var textdada = document.getElementById("textdadaloglu");
// textdada.classList.remove("active"); // // textdada.classList.remove("active");
}; // };
if (!$(e.target).parents().andSelf().is('#asikA')) { // if (!$(e.target).parents().andSelf().is('#asikA')) {
$("#showasikA").fadeOut(); // $("#showasikA").fadeOut();
$("#audioasikA").trigger('pause'); // $("#audioasikA").trigger('pause');
// var textasikA = document.getElementById("textasikA"); // // var textasikA = document.getElementById("textasikA");
// textasikA.classList.remove("active"); // // textasikA.classList.remove("active");
stopVideo("#asikA"); // stopVideo("#asikA");
}; // };
//
}); // });
// $(document).click(function (e) { // $(document).click(function (e) {
// if (!$(e.target).parents().andSelf().is('#dadaloglu')) { // if (!$(e.target).parents().andSelf().is('#dadaloglu')) {