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

fixed conflict

master
alicestrt 3 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
Unified 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> <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
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,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
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 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; z-index: 5;
border: 1px black solid; 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-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
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() 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});
.on("click", function(i){
popup(i.id,i.time); node.append("image")
// popup video // .attr("xlink:href", "/static/images/squig2.png")
div.transition().duration(100).style("opacity", 1); .attr("xlink:href", "/static/images/circleB.png")
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>") .attr("x", -8)
}) .attr("y", -8)
.on("dblclick",connectedNodes)// Added code .attr("width", 16)
.call(force.drag); .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 // under construction
@ -85,36 +133,8 @@ 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
//var padding = 10, // separation between circles //var padding = 10, // separation between circles
@ -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");
}; };
});
// $(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 // 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