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

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

master
nglk 3 years ago
parent
f589ef5ab8
commit
08b75688be
3 changed files with 113 additions and 39 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 22
      wells/index.html
  2. 28
      wells/static/css/style.css
  3. 102
      wells/static/js/d3_map.js

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
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')) {

Write Preview
Loading…
Cancel
Save