fixed conflict
This commit is contained in:
commit
419b5f819c
@ -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>
|
||||
|
||||
@ -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">×</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
vendored
Executable file
1176
wells/static/css/jquery-ui.css
vendored
Executable file
File diff suppressed because it is too large
Load Diff
@ -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 {
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 46 KiB |
139
wells/static/js/d3_map.js
vendored
139
wells/static/js/d3_map.js
vendored
@ -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'> × </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'> × </span><div id='bio"+i.id+"'>"+i.bio+"</div>");
|
||||
// div.on(".drag", null);
|
||||
// span.html("<span onclick='this.parentElement.style.display='none'' class='topleft'>×</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,35 +133,7 @@ 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
|
||||
|
||||
@ -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,16 +211,27 @@ function popup(name,time) {
|
||||
stopVideo("#asikA");
|
||||
};
|
||||
|
||||
|
||||
// if (!$(e.target).parents().andSelf().is('#asikV')) {
|
||||
// $("#showasikV").fadeOut();
|
||||
// $("#audioasikV").trigger('pause');
|
||||
// var textmuh = document.getElementById("textasikV");
|
||||
// textmuh.classList.remove("active");
|
||||
// };
|
||||
|
||||
});
|
||||
|
||||
// $(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");
|
||||
// };
|
||||
//
|
||||
// });
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
// function stop(name) {
|
||||
|
||||
@ -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
11
wells/static/js/jquery.ui.touch-punch.min.js
vendored
Executable 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);
|
||||
Loading…
Reference in New Issue
Block a user