From 85c04a9a33ef0c83409bd7ec775842453869fbac Mon Sep 17 00:00:00 2001
From: nglk <diakaggel@gmail.com>
Date: Mon, 26 Oct 2020 18:08:10 +0100
Subject: [PATCH 1/3] added youtube popup and audio time

---
 static/css/style.css                                  |  4 ++--
 ...cuments-2005_Hybrid_Publishing-vvvw-static-js-.txt |  1 -
 static/js/d3_map.js                                   | 11 ++++++-----
 templates/hello.html                                  | 10 ++++------
 4 files changed, 12 insertions(+), 14 deletions(-)
 delete mode 100644 static/js/d3/-home-angeliki-Documents-2005_Hybrid_Publishing-vvvw-static-js-.txt

diff --git a/static/css/style.css b/static/css/style.css
index 69b3665..b602b2d 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -14,7 +14,7 @@
 
 .bg {
 /*  background-image: url("/static/images/book.jpeg");*/
-  background-image: linear-gradient(#CDCEC9, #9494A0, #652A2E);
+  /* background-image: linear-gradient(#CDCEC9, #9494A0, #652A2E); */
   height: 100%;
   background-repeat: no-repeat;
   background-size: cover;
@@ -186,7 +186,7 @@ stroke-dasharray:6px;
 /* text area */
 .thesis {
 overflow-y: scroll;
-max-height:600px;
+max-height:480px;
 scroll-behavior: smooth;
 font-size: 1em;
 border: 1px black solid;
diff --git a/static/js/d3/-home-angeliki-Documents-2005_Hybrid_Publishing-vvvw-static-js-.txt b/static/js/d3/-home-angeliki-Documents-2005_Hybrid_Publishing-vvvw-static-js-.txt
deleted file mode 100644
index 88592f1..0000000
--- a/static/js/d3/-home-angeliki-Documents-2005_Hybrid_Publishing-vvvw-static-js-.txt
+++ /dev/null
@@ -1 +0,0 @@
-/home/angeliki/Documents/2005_Hybrid_Publishing/vvvw/static/js/test.json
\ No newline at end of file
diff --git a/static/js/d3_map.js b/static/js/d3_map.js
index 8536155..cc84805 100644
--- a/static/js/d3_map.js
+++ b/static/js/d3_map.js
@@ -49,16 +49,17 @@ d3.json("/static/js/group1.json", function(error, json) {
       .attr("width", 16)
       .attr("height", 16);
 
-  node.on({
-  "mouseover": function(d) {
-    d3.select(this).style("cursor", "pointer");
-  }});
-
   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; })
diff --git a/templates/hello.html b/templates/hello.html
index f40851f..39bb20a 100644
--- a/templates/hello.html
+++ b/templates/hello.html
@@ -28,10 +28,7 @@
               <source src="../static/audio/HNI_Soundinstall_3tracks_together1.mp3" type="audio/mpeg">
               Your browser does not support the audio tag.
             </audio></div>
-          <div id="showasikA"><div class='text_audio'>Audio for Aşık Ali İzzet</div><audio id="audioasikA" controls>
-              <source src="../static/audio/FreshMythsDifferentTimes_performance_podcast1.mp3" type="audio/mpeg">
-              Your browser does not support the audio tag.
-            </audio></div>
+          <div id="showasikA"><div class='text_audio'>Bio Aşık Ali İzzet</div><iframe width="560" height="315" src="https://www.youtube.com/embed/AnsVY_gjJns" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
           <!-- <img src="../static/images/test_small.jpeg" alt="poem"> -->
         </div>
       </div>
@@ -43,12 +40,13 @@
 <div class="row">
   <div class="col-md-12">
     <div class="play-stop">
+      <div id="tracktime">0 / 0</div>
       <a id="mBtn" onclick="PSFunction()">(Play)</a>
 
  </div>
  <div class="main_audio">
-   <audio id='audio1'>
-       <source src="../static/audio/FreshMythsDifferentTimes_performance_podcast1.mp3" type="audio/mpeg">
+   <audio id='audio1' ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime/60) + ':' + (currentTime - Math.floor(this.currentTime/60)*60) + ' / ' + Math.floor(this.duration);">
+   <source src="../static/audio/FreshMythsDifferentTimes_performance_podcast1.mp3" type="audio/mpeg">
        Your browser does not support the audio tag.
      </audio>
 </div>

From 4f98414710f72dc4eeffb21ae947b72ab1213ad2 Mon Sep 17 00:00:00 2001
From: nglk <diakaggel@gmail.com>
Date: Mon, 26 Oct 2020 19:10:41 +0100
Subject: [PATCH 2/3] test to play and stop bg audio when clicking somewhere
 else didnt work

---
 static/css/style.css | 11 +++++++++++
 static/js/d3_map.js  | 16 +++++++++-------
 templates/hello.html | 27 +++++----------------------
 3 files changed, 25 insertions(+), 29 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index b602b2d..ba9653d 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -48,6 +48,17 @@
 
 }
 
+/* Audio in background */
+.audio-button {
+  background: white;
+}
+
+.audio-button:hover {
+background: grey;
+cursor: pointer;
+}
+
+
 /* Node styling */
 
 #ahmed text {
diff --git a/static/js/d3_map.js b/static/js/d3_map.js
index cc84805..67c052b 100644
--- a/static/js/d3_map.js
+++ b/static/js/d3_map.js
@@ -108,9 +108,9 @@ d3.json("/static/js/group1.json", function(error, json) {
       var dada = document.getElementById("textdadaloglu");
       dada.className += " active";
       dada.scrollIntoView();
-      var audio1 = document.getElementById("audio-1");
+      var audio1 = document.getElementById("audioBG");
       audio1.currentTime = 12;
-      // audio1.play();
+      audio1.play();
     });
 
 
@@ -120,12 +120,12 @@ d3.json("/static/js/group1.json", function(error, json) {
     var muh = document.getElementById("textasikA");
     muh.className += " active";
     muh.scrollIntoView();
-    var audio2 = document.getElementById("audio-1");
-    audio2.currentTime = 50;
-    // audio2.play();
+    var audio2 = document.getElementById("audioBG");
+    audio2.currentTime = 120;
+    audio2.play();
     });
 
-//pop-up
+//stop events when clicking somewhere else
   $(document).click(function (e) {
     if (!$(e.target).parents().andSelf().is('#dadaloglu')) {
         $("#showdadaloglu").fadeOut();
@@ -135,10 +135,12 @@ d3.json("/static/js/group1.json", function(error, json) {
       };
     if (!$(e.target).parents().andSelf().is('#asikA')) {
       $("#showasikA").fadeOut();
-        $("audioasikA").trigger('pause');
+        $("#audioasikA").trigger('pause');
         var textmuh = document.getElementById("textasikA");
         textmuh.classList.remove("active");
     };
+
   });
 
+
 });
diff --git a/templates/hello.html b/templates/hello.html
index 39bb20a..2cbfc0e 100644
--- a/templates/hello.html
+++ b/templates/hello.html
@@ -40,12 +40,13 @@
 <div class="row">
   <div class="col-md-12">
     <div class="play-stop">
-      <div id="tracktime">0 / 0</div>
+      <div id="tracktime">0:0 / 22:39</div>
       <a id="mBtn" onclick="PSFunction()">(Play)</a>
-
+      <button class="audio-button" onclick="document.getElementById('audioBG').volume -= 0.1">-</button>
+      <button class="audio-button" onclick="document.getElementById('audioBG').volume += 0.1">+</button>
  </div>
  <div class="main_audio">
-   <audio id='audio1' ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime/60) + ':' + (currentTime - Math.floor(this.currentTime/60)*60) + ' / ' + Math.floor(this.duration);">
+   <audio id='audioBG' ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime/60) + ':' + (Math.floor(this.currentTime) - Math.floor(this.currentTime/60)*60) + ' / ' + Math.floor(this.duration/60)+ ':' + (Math.floor(this.duration) - Math.floor(this.duration/60)*60);">
    <source src="../static/audio/FreshMythsDifferentTimes_performance_podcast1.mp3" type="audio/mpeg">
        Your browser does not support the audio tag.
      </audio>
@@ -56,25 +57,7 @@
 </div>
 <!-- scripts for mouse events -->
 <script>
-// function popup(d) {
-// $(d).click(function(){
-//     $("#show1").fadeIn()
-//     console.log("around")
-//  })};
-
-
-
-  // function scrolldiv() {
-  //   var elem = document.getElementById("ele");
-  //   elem.scrollIntoView();
-  // }
-
-  // function play() {
-  //   var audio = document.getElementById("audio-1");
-  //   audio.currentTime = 12;
-  //   audio.play();
-  // }
-  var audio = document.getElementById("audio1");
+  var audio = document.getElementById("audioBG");
   var btn = document.getElementById("mBtn");
 
   function PSFunction() {

From 26901027c0e09a8032d083dd8c0e357cb6e60149 Mon Sep 17 00:00:00 2001
From: nglk <diakaggel@gmail.com>
Date: Tue, 27 Oct 2020 14:08:08 +0100
Subject: [PATCH 3/3] automated functions

---
 static/js/d3_map.js | 49 ++++++++++++++++++++++++++++++---------------
 1 file changed, 33 insertions(+), 16 deletions(-)

diff --git a/static/js/d3_map.js b/static/js/d3_map.js
index 67c052b..24aa52c 100644
--- a/static/js/d3_map.js
+++ b/static/js/d3_map.js
@@ -102,28 +102,45 @@ d3.json("/static/js/group1.json", function(error, json) {
 //}
 
 // scripts for mouse events
-    $("#dadaloglu").click(function(){
-      $("#showdadaloglu").fadeIn()
+
+function popup(name,time) {
+    $("#"+name).click(function(){
+      $("#show"+name).fadeIn()
       console.log("around")
-      var dada = document.getElementById("textdadaloglu");
+      var dada = document.getElementById("text"+name);
       dada.className += " active";
       dada.scrollIntoView();
       var audio1 = document.getElementById("audioBG");
-      audio1.currentTime = 12;
+      audio1.currentTime = time;
       audio1.play();
     });
-
-
-
-    $("#asikA").click(function(){$("#showasikA").fadeIn()
-    console.log("around")
-    var muh = document.getElementById("textasikA");
-    muh.className += " active";
-    muh.scrollIntoView();
-    var audio2 = document.getElementById("audioBG");
-    audio2.currentTime = 120;
-    audio2.play();
-    });
+};
+
+popup('dadaloglu',12);
+popup('asikA',45);
+
+    // $("#dadaloglu").click(function(){
+    //   $("#showdadaloglu").fadeIn()
+    //   console.log("around")
+    //   var dada = document.getElementById("textdadaloglu");
+    //   dada.className += " active";
+    //   dada.scrollIntoView();
+    //   var audio1 = document.getElementById("audioBG");
+    //   audio1.currentTime = 12;
+    //   audio1.play();
+    // });
+    //
+    //
+    //
+    // $("#asikA").click(function(){$("#showasikA").fadeIn()
+    // console.log("around")
+    // var muh = document.getElementById("textasikA");
+    // muh.className += " active";
+    // muh.scrollIntoView();
+    // var audio2 = document.getElementById("audioBG");
+    // audio2.currentTime = 120;
+    // audio2.play();
+    // });
 
 //stop events when clicking somewhere else
   $(document).click(function (e) {