Browse Source

fixed conflict

master
alicestrt 4 years ago
parent
commit
419b5f819c
  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. 129
      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

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

71
wells/index.html

@ -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,32 +43,33 @@
</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>
<div w3-include-html="thesis.html" class="draggable thesis" id="thesis">
</div></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>
<source src="static/audio/HNI_Soundinstall_3tracks_together1.mp3" type="audio/mpeg"> <source src="static/audio/HNI_Soundinstall_3tracks_together1.mp3" type="audio/mpeg">
Your browser does not support the audio tag. Your browser does not support the audio tag.
</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 +77,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 +85,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>
@ -169,6 +170,44 @@ $("#about").click(function(){
}); });
</script> </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> </div>
</body> </body>

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

File diff suppressed because it is too large

94
wells/static/css/style.css

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

BIN
wells/static/images/circleB.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 46 KiB

129
wells/static/js/d3_map.js

@ -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,22 +26,70 @@ 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 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});
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){ .on("click", function(i){
popup(i.id,i.time);
// popup video // popup video
div.transition().duration(100).style("opacity", 1); divVideo.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>") 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)// Added code .on("dblclick",connectedNodes);
.call(force.drag);
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 // under construction
@ -85,35 +133,7 @@ function connectedNodes() {
//end highlight nodes //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 // no overlapping
@ -146,7 +166,8 @@ function connectedNodes() {
//} //}
// scripts for mouse events // scripts for mouse events
var stopVideo = function (name) { // var stopVideo = function (name) {
function stopVideo(name) {
var iframe = document.querySelector( 'iframe'); var iframe = document.querySelector( 'iframe');
var video = document.getElementById( "#video"+name ); var video = document.getElementById( "#video"+name );
if ( iframe !== null ) { if ( iframe !== null ) {
@ -162,10 +183,11 @@ 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()
// var dada = document.getElementById("text"+name); $("#bio"+name).fadeIn()
// dada.className += " active"; var dada = document.getElementById("text"+name);
// dada.scrollIntoView(); dada.className += " active";
dada.scrollIntoView();
// var audio1 = document.getElementById("audioBG"); // var audio1 = document.getElementById("audioBG");
// audio1.currentTime = time; // audio1.currentTime = time;
// audio1.play(); // audio1.play();
@ -189,15 +211,26 @@ function popup(name,time) {
stopVideo("#asikA"); stopVideo("#asikA");
}; };
});
// if (!$(e.target).parents().andSelf().is('#asikV')) { // $(document).click(function (e) {
// $("#showasikV").fadeOut(); // if (!$(e.target).parents().andSelf().is('#dadaloglu')) {
// $("#audioasikV").trigger('pause'); // $("#showdadaloglu").fadeOut();
// var textmuh = document.getElementById("textasikV"); // $("#audiodadaloglu").trigger('pause');
// textmuh.classList.remove("active"); // // 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");
// };
//
// });
});
}); });

52
wells/static/js/draggable.js

@ -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

@ -0,0 +1,11 @@
/*!
* jQuery UI Touch Punch 0.2.3
*
* Copyright 20112014, 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);
Loading…
Cancel
Save