From f8dbb7b78ee94d7386abf6f80cb60a5b11811a74 Mon Sep 17 00:00:00 2001
From: golub <golub@xpub.nl>
Date: Tue, 16 Jun 2020 14:21:37 +0200
Subject: [PATCH] Update '12/index_test.html'

---
 12/index_test.html | 152 +++++++++++++++++++++++++++++++++++++--------
 1 file changed, 126 insertions(+), 26 deletions(-)

diff --git a/12/index_test.html b/12/index_test.html
index 4052d93..b454948 100644
--- a/12/index_test.html
+++ b/12/index_test.html
@@ -6,8 +6,7 @@
   <meta charset="UTF-8">
   <title>Special issue 12</title>
   <link rel="stylesheet" type="text/css" href="style.css">
-  <link rel="stylesheet" href=
-  "https://fonts.googleapis.com/css?family=Roboto Mono">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto Mono">
   <script src="lib/jquery.js"></script>
   <script src="lib/jquery-ui.min.js"></script>
 </head>
@@ -44,8 +43,59 @@
   <div class="c_downclock">
   	<iframe id="cdownclock" style="width:400px; height:300px; border:none; background-image:url(IMG/2/2.gif); background-repeat:no-repeat;" src='blank12_6.html'> </iframe>
   </div>
+  
+<div id="implicancies_06">
+      <div id="resources_06" class=""><iframe name="resources" id="iframe_06" src='resources_06.html'></iframe></div>
+      <!--  <div id="info"><div id="title"></div><div id="authors"></div> -->
+      <div id="week_06">
+        <div class="schedule_06">
+          PROGRAMME #12.6<br>
+        </div>
+        <div class="audio_06">
+          <audio controls=""><source src="" type="audio/ogg">
+          <track default="" kind="captions" srclang="en" src=
+          "archive_12.6.vtt"></audio>
+        </div>
+        <div id="table_content_06">
+          <ul>
+            <li id="track_6_1"> ⇢ track / name / duration </li>
+            <li id="track_6_2"> ⇢ track / name / duration </li>
+            <li id="track_6_3"> ⇢ track / name / duration </li>
+            <li id="track_6_4"> ⇢ track / name / duration </li>
+            <li id="track_6_5"> ⇢ track / name / duration </li>
+            <li id="track_6_6"> ⇢ track / name / duration </li>
+            <li id="track_6_7"> ⇢ track / name / duration </li>
+            <li id="track_6_8"> ⇢ track / name / duration </li>
+            <li id="track_6_9"> ⇢ track / name / duration </li>
+            <li id="track_6_10"> ⇢ track / name / duration </li>
+          </ul>
+        </div>
+      </div></div>
 
+<div id="comment06">
+  <button id="comment_btn"> ETHERPAD </button>
+</div>
+
+<div id="etherpad_06" class="e06_hidden">
+    <div id="etherpad_06header">click here to move</div>
+    <iframe id="iframe_pad06" src="https://pad.xpub.nl/p/radio_implicancies_12.6" ></iframe>
+</div>
+  
+<div id="chat06">
+  <button id="chat_btn"> CHAT </button>
+</div>
 
+<div id="chatwindow" class="ch06_hidden">
+    <div id="chat_06header">click here to move</div>
+    <iframe src="https://kiwiirc.com/client/irc.kiwiirc.com/?nick=pssss|?&theme=cli#xpub" style="border:0;"></iframe>
+</div>
+
+
+
+  <div class="archive">
+    <div class="previous">ARCHIVE</div>
+<br>
+<br>
   <div id="implicancies_05">
     <div id="shell_03" class=""><div class="" id="shell_03header">click here to move</div><iframe name="shell" id="iframe_clock" src='blank12_5.html'></iframe></div>
     <div id="info">
@@ -99,10 +149,7 @@
 <br>
     <br>
   </div>
-  <div class="archive">
-    <div class="previous">
-     ARCHIVE
-    </div>
+
     <div id="implicancies_04">
       <div id="resources_04" class=""><iframe name="resources" id="iframe_04" src='resources_04.html'></iframe></div>
       <!--  <div id="info"><div id="title"></div><div id="authors"></div> -->
@@ -112,11 +159,8 @@
           04/06 at 16:00 (UTC+2)
         </div>
         <div class="audio_04">
-          <audio controls=""><source src=
-          "archive_12.4.mp3" type=
-          "audio/mp3">
-          <track default="" kind="captions" srclang="en" src=
-          "archive_12.4.vtt"></audio>
+          <audio controls=""><source src="archive_12.4.mp3" type="audio/mp3">
+          <track default="" kind="captions" srclang="en" src="archive_12.4.vtt"></audio>
         </div>
         <div id="table_content_04">
           <ul>
@@ -137,13 +181,6 @@
         </div>
       </div>
 
-    <!-- <div id="shell_03" class="hidden"><iframe name="shell" id="iframe"></iframe></div> -->
-    <!--  <p> 
-            live comment during the broadcast: <br><a href="https://pad.xpub.nl/p/radio_implicancies_12.4" target="etherpad"> >> ETHERPAD << </a>&nbsp;&nbsp;
-          </p> 
-      <div id="etherpad" class="hidden">live comment during the broadcast: <br><a href="https://pad.xpub.nl/p/radio_implicancies_12.4" class="link_04" target="etherpad"> >> ETHERPAD << </a><iframe name="etherpad" id="iframe2" ></iframe></div>
-        <div id="info"><div id="title"></div><div id="authors"></div>
-      </div>-->
       <div id="etherpad_04">
         live comment during the broadcast:<br>
         <a href="https://pad.xpub.nl/p/radio_implicancies_12.4"
@@ -152,6 +189,10 @@
       </div>
       
     </div>
+
+    <br>
+    <br>
+    <br>
     <div id="week_03" class="player">
       <!--           <script src="https://threejs.org/build/three.js"></script>
     <script src="torusKnot.js"></script> -->
@@ -242,7 +283,7 @@
       "https://pad.xpub.nl/p/implicancies-02" target=
       "_blank">pad</a> for resources;</p>
     </div>
-  </div>
+
   <div id="week_01" class="player">
     <div class="sec_title_01">
       #12.1 - 14/05
@@ -275,6 +316,7 @@
     "https://pad.xpub.nl/p/implicancies-01" target="_blank">pad</a>
     for resources.</p>
   </div><!--  <div class="contributors"> -->
+</div> <!-- div archive -->
   <script src="player2.js"></script> 
   <script src="liveplayer.js"></script> 
   <script>
@@ -284,7 +326,7 @@ $("#week_05").draggable({handle: '#week_05header'});
 $("#resources_05").draggable({handle: '#resources_05header'});
 $("#etherpad_drag").draggable({handle: '#etherpad_drag_header'});
 
-			player(document.querySelector("#week_04"), document.querySelector("#iframe_04"));    
+      player(document.querySelector("#week_04"), document.querySelector("#iframe_04"));    
             player(document.querySelector("#week_03")); 
             player(document.querySelector("#week_02"));
             player(document.querySelector("#week_01"));  
@@ -292,17 +334,17 @@ $("#etherpad_drag").draggable({handle: '#etherpad_drag_header'});
             document.querySelector("#iframe").addEventListener("load",function(){
             document.querySelector("#shell_03").classList.remove("hidden");                                                 
       });   
-    		var iframe_loaded=false;
+        var iframe_loaded=false;
             document.querySelector("#implicancies_05 #etherpad_drag").addEventListener("load",function(){
             iframe_loaded=true;                                                  
       });     
          
             document.querySelector("#implicancies_05 .etherpadlink").addEventListener("click",function(e){
                 console.log("click", e);
-              	document.querySelector("#implicancies_05 #etherpad_drag").classList.toggle("hidden");
-              	if(iframe_loaded){
-                	console.log("preventDefault")
-                	e.preventDefault()
+                document.querySelector("#implicancies_05 #etherpad_drag").classList.toggle("hidden");
+                if(iframe_loaded){
+                  console.log("preventDefault")
+                  e.preventDefault()
                 }
             });
 
@@ -316,9 +358,67 @@ $("#etherpad_drag").draggable({handle: '#etherpad_drag_header'});
               document.querySelector("#implicancies_05 #resources_05").classList.toggle("hidden");
             });
     
-     
+
+// Implicancies 12.6
+//Make the PAD DIV element draggagle:
+dragElement(document.getElementById("etherpad_06"));
+dragElement(document.getElementById("chatwindow"));
+
+function dragElement(elmnt) {
+  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+  if (document.getElementById(elmnt.id + "header")) {
+    /* if present, the header is where you move the DIV from:*/
+    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
+  } else {
+    /* otherwise, move the DIV from anywhere inside the DIV:*/
+    elmnt.onmousedown = dragMouseDown;
+  }
+
+  function dragMouseDown(e) {
+    e = e || window.event;
+    e.preventDefault();
+    // get the mouse cursor position at startup:
+    pos3 = e.clientX;
+    pos4 = e.clientY;
+    document.onmouseup = closeDragElement;
+    // call a function whenever the cursor moves:
+    document.onmousemove = elementDrag;
+  }
+
+  function elementDrag(e) {
+    e = e || window.event;
+    e.preventDefault();
+    // calculate the new cursor position:
+    pos1 = pos3 - e.clientX;
+    pos2 = pos4 - e.clientY;
+    pos3 = e.clientX;
+    pos4 = e.clientY;
+    // set the element's new position:
+    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
+    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
+  }
+
+  function closeDragElement() {
+    /* stop moving when mouse button is released:*/
+    document.onmouseup = null;
+    document.onmousemove = null;
+  }
+}    
+
+$(document).ready(function(){
+  $("#comment_btn").click(function(){
+    $("#etherpad_06").toggle();
+  });
+});  
+    
+$(document).ready(function(){
+  $("#chat_btn").click(function(){
+    $("#chatwindow").toggle();
+  });
+}); 
     
             
   </script>
 </body>
 </html>
+