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>
<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> -->
<!-- map area -->
<div class="row">
@ -81,19 +83,18 @@
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="map_legend">
<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="box3" onclick="popup_bg(700)"></div> <p>Contemporary poets</p>
<div id="box4" onclick="popup_bg(1000)"></div> <p>Contemporary musicians</p>
<div id="box3" onclick="popup_bg(500)"></div> <p>Contemporary poets</p>
<div id="box4" onclick="popup_bg(700)"></div> <p>Contemporary musicians</p>
</div>
</div>
</div>
</div>
<!--moved about temporarily-->
@ -116,9 +117,9 @@
<script>
function popup_bg(time) {
var box = document.getElementById("audioBG");
if (box.currentTime>0) {
box.currentTime = 0;
}
// if (box.currentTime>0) {
// box.currentTime = 0;
// } else {
box.currentTime = time;
box.play();
btn.innerHTML = "(Pause)";
@ -168,6 +169,9 @@ $("#about").click(function(){
$("#showcolophon").fadeIn()
console.log("around")
});
</script>
<!-- scaleable wrapper -->

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

@ -38,8 +38,8 @@ body {
/*Main areas*/
.map_area {
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
/* margin-top: 20px; */
/* margin-bottom: 20px; */
margin-right: 10px;
margin-left: 20px;
position: relative;
@ -177,6 +177,22 @@ a {
background-color: #73d2de;
}
#box1:hover {
cursor: pointer;
}
#box2:hover {
cursor: pointer;
}
#box3:hover {
cursor: pointer;
}
#box4:hover {
cursor: pointer;
}
.map_legend p {
padding-left: 5px;
font-family: 'Vesper Libre', serif;
@ -363,6 +379,14 @@ h2 {
color: black;
}
#thesisX {
position: absolute;
z-index:5;
left: 480px;
top: 14%;
display: none;
}
/* about and 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")
.text(function(d) { return d.name });
// let drag = d3.behavior.drag();
// // 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);
@ -65,11 +68,26 @@ var divBio = d3.select("body").append("div").style("opacity", 1);
d3.select(this).style("cursor", "pointer");
}})
.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
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.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);
// span.html("<span onclick='this.parentElement.style.display='none'' class='topleft'>&times</span>");
// rest pop up
@ -78,6 +96,8 @@ var divBio = d3.select("body").append("div").style("opacity", 1);
.on("dblclick",connectedNodes);
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
@ -167,23 +187,49 @@ function connectedNodes() {
// scripts for mouse events
// var stopVideo = function (name) {
function stopVideo(name) {
var iframe = document.querySelector( 'iframe');
var video = document.getElementById( "#video"+name );
if ( iframe !== null ) {
var iframeSrc = iframe.src;
iframe.src = iframeSrc;
}
if ( video !== null ) {
video.pause();
}
// function stopVideo(name) {
// var iframe = document.querySelector( 'iframe');
// var video = document.getElementById( "#video"+name );
// if ( iframe !== null ) {
// var iframeSrc = iframe.src;
// iframe.src = iframeSrc;
// }
// if ( video !== null ) {
// 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) {
$("#show"+name).fadeIn()
console.log("around")
$("#thesis").fadeIn()
$("#thesisX").fadeIn()
$("#bio"+name).fadeIn()
var dada = document.getElementById("text"+name);
dada.className += " active";
@ -196,22 +242,22 @@ function popup(name,time) {
//stop events when clicking somewhere else
$(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");
};
});
// $(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");
// };
//
// });
// $(document).click(function (e) {
// if (!$(e.target).parents().andSelf().is('#dadaloglu')) {