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="*">
<title>VVVW</title>
<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">
<script src="static/js/jquery.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-ui.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>
</head>
<body>
@ -41,22 +43,24 @@
</div>
</div>
<div class="col-md-3">
<div id="about">
<a href="#" >About</a>|
</div>
<div id="colophon">
<a href="#" >Colophon</a>
</div>
<span id="about">
<a href="#" >about</a> |
</span>
<span id="colophon">
<a href="#" >colophon</a>
</span>
</div>
</div>
<!-- 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 -->
<div class="row">
<div class="col-md-10 offset-md-1">
<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>
@ -65,8 +69,6 @@
</audio> -->
<img src="static/images/poem.png">
</div>
<!-- <img src="static/images/test_small.jpeg" alt="poem"> -->
<!-- popups about and colophon -->
@ -74,7 +76,6 @@
</div><br>
<div id="showcolophon" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><div>colophon texthjgjhghjgfhdgfhdgfhdsgfhsgfhsgdfjhgdsfhsfgdfjgsfgdshsgfhsgfffffffffffffdfhdsfjsgdfjgjdsgfsjdgfjshgdf</div>
</div>
<script src="static/js/d3_map.js"></script>
</div>
</div>
@ -83,7 +84,6 @@
<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>
@ -168,6 +168,43 @@ $("#about").click(function(){
console.log("around")
});
</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>
</body>
</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;
left: 0px;
opacity: 0.2;
filter: blur(20px);
filter: blur(10px);
}
/*Main areas*/
.map_area {
@ -194,25 +194,44 @@ a {
/* text area */
/* with position:fixed and svg {position:relative} the text can overlay the map */
.thesis {
text-align: left !important;
text-align: left !important;
display: none;
overflow-y: scroll;
max-height: 300px;
max-width: 40%;
max-width: 30%;
scroll-behavior: smooth;
font-size: .6em;
border: 1px black solid;
padding: 2em;
padding: 1.5em;
margin-right: 10px;
margin-top: 20px;
line-height: 1.6em;
font-family: 'Vesper Libre', serif;
scrollbar-color: #d81159 #dbf6f9;
position: fixed;
scrollbar-color: #d87fa0 #dbf6f9;
position: relative;
z-index:4;
background: white;
left: 60%;
top: 2%;
left: 2px;
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 {
@ -301,22 +320,26 @@ h2 {
/* pop up */
.show {
display: none;
left: 20%;
/* width: 10% !important; */
position: fixed;
#show_video_bio {
/* display: none; */
right: 10px;
top:10%;
width: 30% !important;
position: relative;
z-index: 5;
border: 1px black solid;
}
.text_audio{
/* .bio{
margin-bottom: 1.2em;
margin-top: 2em;
font-family:'Vesper Libre', serif;
font-size: .8em;
padding-left: 1em;
}
z-index: 5;
background-color: white;
border:1px black solid;
} */
/* Style the close button */
.topleft {
@ -328,10 +351,20 @@ h2 {
/* 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 {
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()
.gravity(0.009)
.distance(400)
.distance(500)
.charge(-30)
.size([width, height]);
@ -26,19 +26,18 @@ d3.json("/static/js/group1.json", function(error, json) {
.enter().append("line")
.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")
.data(json.nodes)
.enter().append("g")
.attr("class", "node ")
.attr("class", function(d){return "node group" + d.group})
.attr("id", function(d){return d.id})
.on("click", function(i){
popup(i.id,i.time);
// popup video
div.transition().duration(100).style("opacity", 1);
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.transition().duration(100);
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
.call(force.drag);
@ -162,7 +161,8 @@ var stopVideo = function (name) {
function popup(name,time) {
$("#show"+name).fadeIn()
console.log("around")
$("#showthesis").fadeIn()
$("#thesis").fadeIn()
$("#bio"+name).fadeIn()
// var dada = document.getElementById("text"+name);
// dada.className += " active";
// dada.scrollIntoView();

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

@ -1,4 +1,9 @@
// draggable
$(document).ready(function() {
var a = 3;
var dragOpts = {
@ -11,11 +16,52 @@ $(document).ready(function() {
// left: 0
// }
};
$('.draggable').draggable({
$('.draggable').draggable(
{
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);