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

flexible and draggable objects. Complete example of diagram in full page

Browse Source
This commit is contained in:
nglk 2020-11-12 13:27:42 +01:00
parent bbd1c8bcbd
commit ef43b8b658
8 changed files with 281 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
static/js/bootstrap.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

5
static/js/d3.v3.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

4
static/js/jquery-3.2.1.slim.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

5
static/js/popper.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

152
wells/index-fixed.html Normal file
View File

@ -0,0 +1,152 @@
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<title>VVVW</title>
<link rel="stylesheet" href="static/css/style.css">
<link rel="stylesheet" href="static/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/p5/p5.min.js"></script>
<script src="static/js/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="static/js/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="static/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="static/js/jquery-1.12.4.js"></script>
<script src="static/js/jquery-ui.js"></script>
<script src="static/js/d3.v3.min.js"></script>
</head>
<body>
<div class="container-fluid p-0">
<div class="bg">
<div class="row">
<div class="col-md-7">
<div class="map_area">
<script src="static/js/d3_map.js"></script>
</div>
<div class="row">
<div class="col-md-12">
<p id="legend_title">Map legend</p>
<div class="map_legend">
<div class="box1"></div> <p>Folklore literature</p>
<div class="box2"></div> <p>Islamic Mysticism</p>
<div class="box3"></div> <p>Contemporary poets</p>
<div class="box4"></div> <p>Contemporary musicians</p>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<div class="scrollable">
<div class="row">
<div class="col-md-12">
<div w3-include-html="thesis.html" class="thesis">
</div>
</div>
</div>
<div class="row">
<div class="col-md-10">
<div class="media_area">
<!-- <p>Related media</p> -->
<div 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>
<div id="showasikA"><div class='text_audio'>Bio Aşık Ali İzzet</div><iframe width="560" height="280" src="https://www.youtube.com/embed/AnsVY_gjJns" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="showasikV"><div class='text_audio'>Bio</div><iframe width="560" height="280" src="https://www.youtube.com/embed/5_9PAugYb4s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="280" src="https://www.youtube.com/embed/t64yH04XWs8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div id="showmuharrem"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/Ffa2CONoW5Q" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="shownazim"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/11XRG-cz3lY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="showneyzen"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/CD-CEeaLGdk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="showruhisu"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/fKOKxuFyEdg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="showasu"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/mETzamzufh4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<!-- <img src="static/images/test_small.jpeg" alt="poem"> -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="play-stop">
<div id="tracktime">0:0 / 22:39</div>
<a id="mBtn" onclick="PSFunction()">(Play)</a>
<button class="audio-button" onclick="document.getElementById('audioBG').volume -= 0.1">-</button>
<button class="audio-button" onclick="document.getElementById('audioBG').volume += 0.1">+</button>
</div>
<div class="main_audio">
<audio id='audioBG' ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime/60) + ':' + (Math.floor(this.currentTime) - Math.floor(this.currentTime/60)*60) + ' / ' + Math.floor(this.duration/60)+ ':' + (Math.floor(this.duration) - Math.floor(this.duration/60)*60);">
<source src="static/audio/FreshMythsDifferentTimes_performance_podcast1.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
</div>
</div>
</div>
</div>
<!-- scripts for mouse events -->
<script>
var audio = document.getElementById("audioBG");
var btn = document.getElementById("mBtn");
function PSFunction() {
if (audio.paused) {
audio.play();
btn.innerHTML = "(Pause)";
} else {
audio.pause();
btn.innerHTML = "(Play)";
}
}
</script>
<script>
function includeHTML() {
var z, i, elmnt, file, xhttp;
/* Loop through a collection of all HTML elements: */
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/* Make an HTTP request using the attribute value as the file name: */
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/* Remove the attribute, and call this function once more: */
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/* Exit the function: */
return;
}
}
}
includeHTML();
</script>
</div>
</body>
</html>

131
wells/index.html
View File

@ -2,10 +2,10 @@
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<title>VVVW</title>
<link rel="stylesheet" href="static/css/style.css">
<link rel="stylesheet" href="static/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="static/js/d3.v3.min.js"></script>
<script src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/p5/p5.min.js"></script>
<script src="static/js/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
@ -13,89 +13,80 @@
<script src="static/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="static/js/jquery-1.12.4.js"></script>
<script src="static/js/jquery-ui.js"></script>
<script src="static/js/d3.v3.min.js"></script>
<script src="static/js/draggable.js"></script>
</head>
<body>
<div class="container-fluid p-0">
<div class="bg">
<div class="row">
<div class="col-md-7">
<!-- background audio -->
<div class="col-md-9" style="position: static;">
<div class="row">
<div class="col-md-12">
<div class="play-stop">
<div id="tracktime">0:0 / 22:39</div>
<a id="mBtn" onclick="PSFunction()">(Play)</a>
<button class="audio-button" onclick="document.getElementById('audioBG').volume -= 0.1">-</button>
<button class="audio-button" onclick="document.getElementById('audioBG').volume += 0.1">+</button>
</div>
<div class="main_audio">
<audio id='audioBG' ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime/60) + ':' + (Math.floor(this.currentTime) - Math.floor(this.currentTime/60)*60) + ' / ' + Math.floor(this.duration/60)+ ':' + (Math.floor(this.duration) - Math.floor(this.duration/60)*60);">
<source src="static/audio/FreshMythsDifferentTimes_performance_podcast1.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
</div>
</div>
</div>
<!-- map area -->
<div class="map_area">
<div w3-include-html="thesis.html" class="thesis draggable" id="showthesis">
</div>
<!-- <p>Related media</p> -->
<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>
<div class="draggable" id="showasikA"><div class='text_audio'>Bio Aşık Ali İzzet</div><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><iframe width="560" height="280" src="https://www.youtube.com/embed/AnsVY_gjJns" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="draggable" id="showasikV"><div class='text_audio'>Bio</div><iframe width="560" height="280" src="https://www.youtube.com/embed/5_9PAugYb4s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="280" src="https://www.youtube.com/embed/t64yH04XWs8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="draggable" id="showmuharrem"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/Ffa2CONoW5Q" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="draggable" id="shownazim"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/11XRG-cz3lY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="draggable" id="showneyzen"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/CD-CEeaLGdk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="draggable" id="showruhisu"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/fKOKxuFyEdg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div class="draggable" id="showasu"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/mETzamzufh4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<!-- <img src="static/images/test_small.jpeg" alt="poem"> -->
<script src="static/js/d3_map.js"></script>
</div>
<div class="row">
<div class="col-md-12">
<p id="legend_title">Map legend</p>
<div class="map_legend">
<div class="box1"></div> <p>Folklore literature</p>
<div class="box2"></div> <p>Islamic Mysticism</p>
<div class="box3"></div> <p>Contemporary poets</p>
<div class="box4"></div> <p>Contemporary musicians</p>
</div>
</div>
</div>
</div>
<div class="col-md-5">
<div class="scrollable">
<div class="row">
<div class="col-md-12">
<div w3-include-html="thesis.html" class="thesis">
</div>
</div>
</div>
<div class="row">
<div class="col-md-10">
<div class="media_area">
<!-- <p>Related media</p> -->
<div 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>
<div id="showasikA"><div class='text_audio'>Bio Aşık Ali İzzet</div><iframe width="560" height="280" src="https://www.youtube.com/embed/AnsVY_gjJns" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="showasikV"><div class='text_audio'>Bio</div><iframe width="560" height="280" src="https://www.youtube.com/embed/5_9PAugYb4s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="280" src="https://www.youtube.com/embed/t64yH04XWs8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div id="showmuharrem"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/Ffa2CONoW5Q" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="shownazim"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/11XRG-cz3lY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="showneyzen"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/CD-CEeaLGdk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="showruhisu"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/fKOKxuFyEdg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<div id="showasu"><div class='text_audio'></div><iframe width="560" height="280" src="https://www.youtube.com/embed/mETzamzufh4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
<!-- <img src="static/images/test_small.jpeg" alt="poem"> -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="play-stop">
<div id="tracktime">0:0 / 22:39</div>
<a id="mBtn" onclick="PSFunction()">(Play)</a>
<button class="audio-button" onclick="document.getElementById('audioBG').volume -= 0.1">-</button>
<button class="audio-button" onclick="document.getElementById('audioBG').volume += 0.1">+</button>
</div>
<div class="main_audio">
<audio id='audioBG' ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime/60) + ':' + (Math.floor(this.currentTime) - Math.floor(this.currentTime/60)*60) + ' / ' + Math.floor(this.duration/60)+ ':' + (Math.floor(this.duration) - Math.floor(this.duration/60)*60);">
<source src="static/audio/FreshMythsDifferentTimes_performance_podcast1.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
</div>
</div>
<p id="legend_title">Map legend</p>
<div class="map_legend">
<div class="box1"></div> <p>Folklore literature</p>
<div class="box2"></div> <p>Islamic Mysticism</p>
<div class="box3"></div> <p>Contemporary poets</p>
<div class="box4"></div> <p>Contemporary musicians</p>
</div>
</div>
</div>
</div>

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

@ -5,9 +5,11 @@
@import url('https://fonts.googleapis.com/css2?family=Walter+Turncoat&display=swap');
* {
border: 0px black solid;
}
body {
overflow: scroll;
}
.container-fluid {
overflow: hidden;
}
@ -28,6 +30,8 @@
margin-bottom: 20px;
margin-right: 10px;
margin-left: 20px;
z-index: -1 !important;
position: relative;
}
.media_area {
margin-top: 10px;
@ -59,6 +63,10 @@ background: grey;
cursor: pointer;
}
.main_audio {
position: relative;
}
/* Node styling */
@ -66,6 +74,7 @@ cursor: pointer;
fill: #92817a ;
font-size: 18px;
font-family: 'Vesper Libre', serif;
z-index: 2;
}
@ -74,13 +83,14 @@ cursor: pointer;
fill: #bedbbb;
font-size: 18px;
font-family: 'Vesper Libre', serif;
z-index: 1;
}
.group4 {
fill: #8db956;
font-family: 'Vesper Libre', serif;
font-size: 18px;
z-index: 4;
}
@ -88,6 +98,7 @@ cursor: pointer;
fill: #707070;
font-family: 'Vesper Libre', serif;
font-size: 18px;
z-index: 3;
}
@ -97,6 +108,8 @@ svg{
height:100%;
margin-left: 30px;
margin-top: 10px;
z-index: 1;
position: relative;
}
path{
fill: transparent;
@ -160,21 +173,25 @@ stroke-dasharray:6px;
padding-left: 5px;
font-family: 'Vesper Libre', serif;
display: inline;
font-size: 15px;
font-size: .6em;
}
#legend_title {
font-family: 'Vesper Libre', serif;
font-size: 20px;
padding-left: 10px;
font-size: .8em;
padding-left: 2em;
position: relative;
}
/* text area */
/* with position:fixed and svg {position:relative} the text can overlay the map */
.thesis {
display: none;
overflow-y: scroll;
max-height:450px;
max-height: 500px;
max-width: 30%;
scroll-behavior: smooth;
font-size: 1em;
font-size: .6em;
border: 1px black solid;
padding: 2em;
margin-right: 10px;
@ -182,7 +199,11 @@ margin-top: 20px;
line-height: 1.6em;
font-family: 'Vesper Libre', serif;
scrollbar-color: #cdcec9 #bedbbb;
position: relative;
position: fixed;
z-index:4;
background: white;
left: 40%;
top: 2%;
}
.scrollable {
@ -204,12 +225,14 @@ h2 {
.play-stop {
position: absolute;
bottom: 1.6em;
/* position: absolute; */
/* bottom: 1em; */
z-index: 1;
margin-left: calc( 50% - 1.8em );
padding-left: 2em;
/* margin-left: calc( 50% - 1.8em );
margin-top: 5em; */
overflow: hidden;
font-size: 1.2em;
font-size: .8em;
font-weight: bold;
font-family:'Walter Turncoat', cursive;
color: #AEB10A;
@ -267,6 +290,8 @@ draggable {
display: none;
left: 20%;
width: 50% !important;
position: fixed;
z-index: 5;
}
.text_audio{
@ -275,6 +300,12 @@ draggable {
font-family:'Vesper Libre', serif;
}
/* Style the close button */
.topleft {
float: right;
cursor: pointer;
font-size: 100%;
}
/*d3 map*/
.link {

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

@ -1,14 +1,14 @@
var width = 500,
var width = 700,
height = 350
var svg = d3.select(".map_area").append("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", `${-width/3.1} ${-height/2.3} ${width*2.5} ${height*2.5}`);
.attr("viewBox", `${-width/1.3} ${-height/1.6} ${width*2.3} ${height*2.3}`);
var force = d3.layout.force()
.gravity(0.009)
.distance(250)
.distance(300)
.charge(-30)
.size([width, height]);
@ -109,6 +109,7 @@ d3.json("/static/js/group1.json", function(error, json) {
function popup(name,time) {
$("#show"+name).fadeIn()
console.log("around")
$("#showthesis").fadeIn()
var dada = document.getElementById("text"+name);
dada.className += " active";
dada.scrollIntoView();