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

styles and failed draggable and scalaeable

Browse Source
This commit is contained in:
nglk 2020-12-04 16:54:54 +01:00
parent ce8d627db4
commit 40a8300e82
6 changed files with 1342 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
wells/index.html
View File

@ -5,6 +5,7 @@
<meta http-equiv="Access-Control-Allow-Origin" content="*"> <meta http-equiv="Access-Control-Allow-Origin" content="*">
<title>VVVW</title> <title>VVVW</title>
<link rel="stylesheet" href="static/css/style.css"> <link rel="stylesheet" href="static/css/style.css">
<link href="static/styles/jquery-ui.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="static/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <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 src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/p5/p5.min.js"></script> <script type="text/javascript" src="static/js/p5/p5.min.js"></script>
@ -14,6 +15,7 @@
<script src="static/js/jquery-1.12.4.js"></script> <script src="static/js/jquery-1.12.4.js"></script>
<script src="static/js/jquery-ui.js"></script> <script src="static/js/jquery-ui.js"></script>
<script src="static/js/d3.v3.min.js"></script> <script src="static/js/d3.v3.min.js"></script>
<script src="static/js/jquery.ui.touch-punch.min.js"></script>
<script src="static/js/draggable.js"></script> <script src="static/js/draggable.js"></script>
</head> </head>
<body> <body>
@ -41,22 +43,24 @@
</div> </div>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<div id="about"> <span id="about">
<a href="#" >About</a>| <a href="#" >about</a> |
</div> </span>
<div id="colophon"> <span id="colophon">
<a href="#" >Colophon</a> <a href="#" >colophon</a>
</div> </span>
</div> </div>
</div> </div>
<!-- new row should start here --> <!-- new row should start here -->
<!-- pop up thesis -->
<!-- <div class="scaleable-wrapper draggable" id="scaleable-wrapper"> -->
<div w3-include-html="thesis.html" class="draggable thesis" id="thesis">
</div>
<!-- </div> -->
<!-- map area --> <!-- map area -->
<div class="row"> <div class="row">
<div class="col-md-10 offset-md-1"> <div class="col-md-10 offset-md-1">
<div class="map_area"> <div class="map_area">
<div w3-include-html="thesis.html" class="thesis draggable" id="showthesis">
</div>
<!-- <p>Related media</p> --> <!-- <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> <!-- <audio id="audiodadaloglu" controls>
@ -65,8 +69,6 @@
</audio> --> </audio> -->
<img src="static/images/poem.png"> <img src="static/images/poem.png">
</div> </div>
<!-- <img src="static/images/test_small.jpeg" alt="poem"> --> <!-- <img src="static/images/test_small.jpeg" alt="poem"> -->
<!-- popups about and colophon --> <!-- popups about and colophon -->
@ -74,7 +76,6 @@
</div><br> </div><br>
<div id="showcolophon" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div>colophon texthjgjhghjgfhdgfhdgfhdsgfhsgfhsgdfjhgdsfhsfgdfjgsfgdshsgfhsgfffffffffffffdfhdsfjsgdfjgjdsgfsjdgfjshgdf</div> <div id="showcolophon" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div>colophon texthjgjhghjgfhdgfhdgfhdsgfhsgfhsgdfjhgdsfhsfgdfjgsfgdshsgfhsgfffffffffffffdfhdsfjsgdfjgjdsgfsjdgfjshgdf</div>
</div> </div>
<script src="static/js/d3_map.js"></script> <script src="static/js/d3_map.js"></script>
</div> </div>
</div> </div>
@ -83,7 +84,6 @@
<div class="row"> <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>
@ -168,6 +168,43 @@ $("#about").click(function(){
console.log("around") console.log("around")
}); });
</script> </script>
<!-- scaleable wrapper -->
<!-- <script>
var $el = $("#thesis");
var elHeight = $el.outerHeight();
var elWidth = $el.outerWidth();
var $wrapper = $("#scaleable-wrapper");
$wrapper.resizable({
resize: doResize
});
function doResize(event, ui) {
var scale, origin;
scale = Math.min(
ui.size.width / elWidth,
ui.size.height / elHeight
);
$el.css({
transform: "translate(-50%, -50%) " + "scale(" + scale + ")"
});
}
var starterData = {
size: {
width: $wrapper.width(),
height: $wrapper.height()
}
}
doResize(null, starterData);
</script> -->
</div> </div>
</body> </body>
</html> </html>

1176
wells/static/css/jquery-ui.css vendored Executable file
View File

File diff suppressed because it is too large Load Diff

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

@ -33,7 +33,7 @@ body {
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
opacity: 0.2; opacity: 0.2;
filter: blur(20px); filter: blur(10px);
} }
/*Main areas*/ /*Main areas*/
.map_area { .map_area {
@ -194,25 +194,44 @@ a {
/* text area */ /* text area */
/* with position:fixed and svg {position:relative} the text can overlay the map */ /* with position:fixed and svg {position:relative} the text can overlay the map */
.thesis { .thesis {
text-align: left !important; text-align: left !important;
display: none; display: none;
overflow-y: scroll; overflow-y: scroll;
max-height: 300px; max-height: 300px;
max-width: 40%; max-width: 30%;
scroll-behavior: smooth; scroll-behavior: smooth;
font-size: .6em; font-size: .6em;
border: 1px black solid; border: 1px black solid;
padding: 2em; padding: 1.5em;
margin-right: 10px; margin-right: 10px;
margin-top: 20px; margin-top: 20px;
line-height: 1.6em; line-height: 1.6em;
font-family: 'Vesper Libre', serif; font-family: 'Vesper Libre', serif;
scrollbar-color: #d81159 #dbf6f9; scrollbar-color: #d87fa0 #dbf6f9;
position: fixed; position: relative;
z-index:4; z-index:4;
background: white; background: white;
left: 60%; left: 2px;
top: 2%; top: 10%;
}
.scaleable-wrapper {
padding: 0.8%;
padding-bottom: 0.8%;
resize: both;
position: relative;
}
/* #resizable {
} */
.ui-resizable-se {
width: 10px;
height: 10px;
position: absolute;
bottom: 0;
right: 0;
} }
.scrollable { .scrollable {
@ -301,22 +320,26 @@ h2 {
/* pop up */ /* pop up */
.show { #show_video_bio {
display: none; /* display: none; */
left: 20%; right: 10px;
/* width: 10% !important; */ top:10%;
position: fixed; width: 30% !important;
position: relative;
z-index: 5; z-index: 5;
border: 1px black solid; border: 1px black solid;
} }
.text_audio{ /* .bio{
margin-bottom: 1.2em; margin-bottom: 1.2em;
margin-top: 2em; margin-top: 2em;
font-family:'Vesper Libre', serif; font-family:'Vesper Libre', serif;
font-size: .8em; font-size: .8em;
padding-left: 1em; padding-left: 1em;
} z-index: 5;
background-color: white;
border:1px black solid;
} */
/* Style the close button */ /* Style the close button */
.topleft { .topleft {
@ -328,10 +351,20 @@ h2 {
/* about and colophon */ /* about and colophon */
/* #about { #about, #colophon {
font-family:'Walter Turncoat', cursive;
color: #AEB10A;
}
#about a {
text-decoration: none;
color: #AEB10A;
}
} */ #colophon a {
text-decoration: none;
color: #AEB10A;
}
#showabout, #showcolophon { #showabout, #showcolophon {
display: none; display: none;

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

@ -8,7 +8,7 @@ var svg = d3.select(".map_area").append("svg")
var force = d3.layout.force() var force = d3.layout.force()
.gravity(0.009) .gravity(0.009)
.distance(400) .distance(500)
.charge(-30) .charge(-30)
.size([width, height]); .size([width, height]);
@ -26,19 +26,18 @@ d3.json("/static/js/group1.json", function(error, json) {
.enter().append("line") .enter().append("line")
.attr("class", "link"); .attr("class", "link");
var div = d3.select("body").append("div").style("opacity", 0); var div = d3.select("body").append("div").style("opacity", 1);
var node = svg.selectAll(".node") var node = svg.selectAll(".node")
.data(json.nodes) .data(json.nodes)
.enter().append("g") .enter().append("g")
.attr("class", "node ")
.attr("class", function(d){return "node group" + d.group}) .attr("class", function(d){return "node group" + d.group})
.attr("id", function(d){return d.id}) .attr("id", function(d){return d.id})
.on("click", function(i){ .on("click", function(i){
popup(i.id,i.time); popup(i.id,i.time);
// popup video // popup video
div.transition().duration(100).style("opacity", 1); div.transition().duration(100);
div.html("<div class='draggable' class='show' id='show"+i.id+"'><div class='text_audio'>"+i.bio+"</div><iframe width='300' height='150' src='"+i.url+"' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>") 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>")
}) })
.on("dblclick",connectedNodes)// Added code .on("dblclick",connectedNodes)// Added code
.call(force.drag); .call(force.drag);
@ -162,7 +161,8 @@ var stopVideo = function (name) {
function popup(name,time) { function popup(name,time) {
$("#show"+name).fadeIn() $("#show"+name).fadeIn()
console.log("around") console.log("around")
$("#showthesis").fadeIn() $("#thesis").fadeIn()
$("#bio"+name).fadeIn()
// var dada = document.getElementById("text"+name); // var dada = document.getElementById("text"+name);
// dada.className += " active"; // dada.className += " active";
// dada.scrollIntoView(); // dada.scrollIntoView();

52
wells/static/js/draggable.js
View File

@ -1,4 +1,9 @@
// draggable // draggable
$(document).ready(function() { $(document).ready(function() {
var a = 3; var a = 3;
var dragOpts = { var dragOpts = {
@ -11,11 +16,52 @@ $(document).ready(function() {
// left: 0 // left: 0
// } // }
}; };
$('.draggable').draggable(
$('.draggable').draggable({ {
start: function(event, ui) { $(this).css("z-index", a++); } start: function(event, ui) { $(this).css("z-index", a++); }
}); });
}); // // font size relative to div draggable/resizable size
// var $wrapper = $(".scaleable-wrapper");
// $wrapper.each(function (d) {
// var $this = $(this);
// // var elHeight = $this.outerHeight();
// var elWidth = $this.outerWidth();
//
// $this.resizable({
// resize: doResize
// });
//
// function doResize(event, ui) {
//
// var scale, origin;
//
// scale = Math.min(
// // ui.size.height / elHeight,
// ui.size.width / elWidth
// );
// // scale=1.0;
// // scale=2*scale
//
// $this.css({
// // transform: "translate(-50%, -50%) " + "scale(" + scale + ")"
// transform: "translate(0%, 0%) " + "scale(" + scale + ")"
//
// });
//
// }
//
// var starterData = {
// size: {
// // height: $this.height(),
// width: $this.width()
// }
// }
// // console.log("starterData", starterData, this);
// doResize(null, starterData);
//
//
// });
});

11
wells/static/js/jquery.ui.touch-punch.min.js vendored Executable file
View File

@ -0,0 +1,11 @@
/*!
* jQuery UI Touch Punch 0.2.3
*
* Copyright 2011–2014, Dave Furfero
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* Depends:
* jquery.ui.widget.js
* jquery.ui.mouse.js
*/
!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);