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

styles and failed draggable and scalaeable

master
nglk 4 years ago
parent
ce8d627db4
commit
40a8300e82
6 changed files with 1342 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. 63
      wells/index.html
  2. 1176
      wells/static/css/jquery-ui.css
  3. 67
      wells/static/css/style.css
  4. 12
      wells/static/js/d3_map.js
  5. 52
      wells/static/js/draggable.js
  6. 11
      wells/static/js/jquery.ui.touch-punch.min.js

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
View File

File diff suppressed because it is too large

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
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
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);
Write Preview
Loading…
Cancel
Save