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

fixed conflict

master
alicestrt 4 years ago
parent
288e4a1a70 f589ef5ab8
commit
419b5f819c
8 changed files with 1455 additions and 90 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. 4
      wells/includes/thesis.html
  2. 71
      wells/index.html
  3. 1176
      wells/static/css/jquery-ui.css
  4. 94
      wells/static/css/style.css
  5. BIN
      wells/static/images/circleB.png
  6. 137
      wells/static/js/d3_map.js
  7. 52
      wells/static/js/draggable.js
  8. 11
      wells/static/js/jquery.ui.touch-punch.min.js

4
wells/includes/thesis.html
View File

@ -1,3 +1,4 @@
<div>
<h1>Wells of Knowledge: <p>Streams of poetry, music and resistance in Turkey</h1>
<h2>Merve Kılıçer</h2>
<p><i>“If history writing does not emancipate, it must be serving tyranny.”
@ -290,3 +291,6 @@ Links
-https://www.alevibektasi.eu/
-http://www.musikidergisi.net/
-http://teis.yesevi.edu.tr/madde-detay/asik-veysel-satiroglu
</div>

71
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,32 +43,33 @@
</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>
<div w3-include-html="thesis.html" class="draggable thesis" id="thesis">
</div></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>
<!-- <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>
<!-- <img src="static/images/poem.png">
</div> -->
<!-- <img src="static/images/test_small.jpeg" alt="poem"> -->
<!-- popups about and colophon -->
@ -74,7 +77,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 +85,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>
@ -169,6 +170,44 @@ $("#about").click(function(){
});
</script>
<<<<<<< HEAD
=======
<!-- 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> -->
>>>>>>> f589ef5ab8aff787a3421ad0701fb57769be1f4c
</div>
</body>

1176
wells/static/css/jquery-ui.css
View File

File diff suppressed because it is too large

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

@ -62,7 +62,8 @@ body {
/* Audio in background */
.audio-button {
background: white;
background: transparent;
color:inherit;
}
.audio-button:hover {
@ -194,25 +195,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;
font-size: .9em;
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 +321,39 @@ h2 {
/* pop up */
.show {
display: none;
left: 20%;
/* width: 10% !important; */
position: fixed;
#showvideo {
/* display: none; */
right: 6%;
top:10%;
padding: 2%;
background-color: white;
position: absolute;
z-index: 5;
border: 1px black solid;
}
.text_audio{
#showbio {
/* display: none; */
right: 10%;
top:80%;
padding: 2%;
background-color: white;
position: absolute;
z-index: 5;
border: 1px black solid;
}
/* .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,14 +365,23 @@ 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;
left: 20%;
/* background-image: url("../images/poster1.png"); */
background-color: white;
word-wrap: break-word;
@ -347,6 +393,16 @@ h2 {
z-index: 5;
}
#showcolophon {
left: 30%;
top:10%;
}
#showabout {
left: 20%;
}
/*d3 map*/
.link {

BIN
wells/static/images/circleB.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 46 KiB

137
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,22 +26,70 @@ 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 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>")
})
.on("dblclick",connectedNodes)// Added code
.call(force.drag);
.attr("id", function(d){return d.id});
node.append("image")
// .attr("xlink:href", "/static/images/squig2.png")
.attr("xlink:href", "/static/images/circleB.png")
.attr("x", -8)
.attr("y", -8)
.attr("width", 16)
.attr("height", 16);
node.append("text")
// .attr("xlink:href", "#")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name });
// let drag = d3.behavior.drag();
// var drag = d3.behavior.drag()
// .on("drag", function() {
// var x = d3.event.x;
// var y = d3.event.y;
// d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
// });
var divVideo = d3.select("body").append("div").style("opacity", 1);
var divBio = d3.select("body").append("div").style("opacity", 1);
node.on({
"mouseover": function(d) {
d3.select(this).style("cursor", "pointer");
}})
.on("click", function(i){
// popup video
divVideo.transition().duration(100);
divVideo.html("<div id='showvideo'><span onclick=this.parentElement.style.display='none';stopVideo("+i.id+"); class='topleft'> &nbsp; &times&nbsp;</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>");
divBio.transition().duration(100);
divBio.html("<div id='showbio'><span onclick=this.parentElement.style.display='none' class='topleft'> &nbsp; &times&nbsp;</span><div id='bio"+i.id+"'>"+i.bio+"</div>");
// div.on(".drag", null);
// span.html("<span onclick='this.parentElement.style.display='none'' class='topleft'>&times</span>");
// rest pop up
popup(i.id,i.time);
})
.on("dblclick",connectedNodes);
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
// under construction
@ -85,36 +133,8 @@ function connectedNodes() {
//end highlight nodes
node.append("image")
// .attr("xlink:href", "/static/images/squig2.png")
.attr("xlink:href", "/static/images/circleB.png")
.attr("x", -8)
.attr("y", -8)
.attr("width", 16)
.attr("height", 16);
node.append("text")
// .attr("xlink:href", "#")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name });
node.on({
"mouseover": function(d) {
d3.select(this).style("cursor", "pointer");
}});
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
// no overlapping
//var padding = 10, // separation between circles
@ -146,7 +166,8 @@ function connectedNodes() {
//}
// scripts for mouse events
var stopVideo = function (name) {
// var stopVideo = function (name) {
function stopVideo(name) {
var iframe = document.querySelector( 'iframe');
var video = document.getElementById( "#video"+name );
if ( iframe !== null ) {
@ -162,10 +183,11 @@ var stopVideo = function (name) {
function popup(name,time) {
$("#show"+name).fadeIn()
console.log("around")
$("#showthesis").fadeIn()
// var dada = document.getElementById("text"+name);
// dada.className += " active";
// dada.scrollIntoView();
$("#thesis").fadeIn()
$("#bio"+name).fadeIn()
var dada = document.getElementById("text"+name);
dada.className += " active";
dada.scrollIntoView();
// var audio1 = document.getElementById("audioBG");
// audio1.currentTime = time;
// audio1.play();
@ -189,15 +211,26 @@ function popup(name,time) {
stopVideo("#asikA");
};
});
// $(document).click(function (e) {
// if (!$(e.target).parents().andSelf().is('#dadaloglu')) {
// $("#showdadaloglu").fadeOut();
// $("#audiodadaloglu").trigger('pause');
// // var textdada = document.getElementById("textdadaloglu");
// // textdada.classList.remove("active");
// };
// if (!$(e.target).parents().andSelf().is('#asikA')) {
// $("#showasikA").fadeOut();
// $("#audioasikA").trigger('pause');
// // var textasikA = document.getElementById("textasikA");
// // textasikA.classList.remove("active");
// stopVideo("#asikA");
// };
//
// });
// if (!$(e.target).parents().andSelf().is('#asikV')) {
// $("#showasikV").fadeOut();
// $("#audioasikV").trigger('pause');
// var textmuh = document.getElementById("textasikV");
// textmuh.classList.remove("active");
// };
});
});

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