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

styles and failed draggable and scalaeable

master
nglk 3 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
Split 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="*">
<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
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;
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
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
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