Support ko and en version

test_data/about.html

@@ -69,7 +69,7 @@
        <b>Methods of connection</b></br>
        Individuals collecting fragments each have their own folder. When they put a story, picture, audio, or video file inside a folder, each fragment is assigned a serial number, and gets accumulated in the fragments of hospitality website.The fragments connect us. 
   We hope that we can choose the “nature and attitude” of the medium that mediates our connection.
-        <img onclick="showEnglish()" src="src/img/language_kor.svg" style="width:20px; vertical-align:text-top">
+        <img onclick="showKorean()" src="src/img/language_kor.svg" style="width:20px; vertical-align:text-top">
 	</br></br>
        *We borrowed the method of exchange and sharing from distribusi, a project that proposes the form of publication that documents and updates communal project. 
         <a href="https://test.roelof.info/nooo2-three-takes-on-taking-care.html" target="_blank">디스트리붓시</a>
@@ -119,7 +119,7 @@
        <b>연결의 방향</b></br>
        환대의 조각들을 모으고 있는 개인은 자기만의 폴더를 가지고 있다. 각자의 이야기, 그림, 소리, 영상 파일을 하나씩 폴더에 넣으면, 각각의 조각은 일련의 번호를 부여받고, 환대의 조각들 페이지에 차곡히 쌓인다. 조각들이 우리를 연결한다.
        우리의 연결을 매개하는 매체의 ‘성질과 태도'를 우리가 선택할 수 있으면 좋겠다.
-       <img onclick="showKorean()" src="src/img/language_en.svg" style="width:20px; vertical-align:text-top">
+       <img onclick="showEnglish()" src="src/img/language_en.svg" style="width:20px; vertical-align:text-top">
 
 	</br></br>
        *공동 프로젝트를 문서화하고 업데이트하는 새로운 방식의 출판을 제안하는 프로젝트, 디스트리붓시의 공유 방식을 빌려왔다.
@@ -136,7 +136,14 @@
 
   <script>
     // reference https://blog.naver.com/jaelong191/221509952654
-    console.log("cookie~!")
+    // console.log("cookie~!")
+    
+    if (getCookie('lang') ==='en') {
+      showEnglish();
+    } else {
+      showKorean();
+    }
+
 
     function setCookie(cookie_name, value, days) {
       let exdate = new Date();
@@ -146,11 +153,11 @@
       document.cookie = cookie_name + '=' + cookie_value;
     }
 
-    function deleteCookie (cookie_name) {
+    // function deleteCookie (cookie_name) {
-      let expireDate = new Date();
+    //   let expireDate = new Date();
-      expireDate.setDate(expireDate.getDate() - 1);
+    //   expireDate.setDate(expireDate.getDate() - 1);
-      document.cookie = cookie_name + "= " + "; expires=" + expireDate.toGMTString();
+    //   document.cookie = cookie_name + "= " + "; expires=" + expireDate.toGMTString();
-    }
+    // }
 
     function getCookie(cookie_name) {
       let x, y;
@@ -166,23 +173,18 @@
       }
     }
 
-    if (getCookie('lang') ==='en') {
+    function showEnglish(){
-      showEnglish();
+      console.log("english")
-    } else {
+      document.querySelector(".ko").style.display = 'none';
-      showKorean();
+      document.querySelector(".en").style.display = '';
+      setCookie('lang', 'en', 100);
     }
     
     function showKorean(){
-      document.querySelector(".ko").style.display = 'none';
+      console.log("korean")
-      document.querySelector(".en").style.display = '';
-      deleteCookie('lang');
-
-    }
-
-    function showEnglish(){
       document.querySelector(".en").style.display = 'none';
       document.querySelector(".ko").style.display = '';
-      setCookie('lang', 'en', 100);
+      setCookie('lang', 'ko', 100);
     }
   
   </script>

test_data/src/scripts/updateIntroduction.js

@@ -1,23 +1,13 @@
+  if (getCookie('lang') ==='en') {
+    showEnglish();
+  } else {
+    showKorean();
+  }
 
-  var introductions_requestURL = `${window.location.origin}/src/introduction.json`;
-  var introductions_request = new XMLHttpRequest();
-  introductions_request.open('GET', introductions_requestURL);
-  introductions_request.responseType = 'json';
-  introductions_request.send();
 
-  var introductions = null;
-  introductions_request.onload = function() {
-    introductions = introductions_request.response;
 
-    let path = (window.location.pathname).split('/')[1];
-    let participant = findElementByProperty(introductions, 'path', path);
-    document.getElementById("introduction").innerHTML = participant.introduction;
 
-    let p_frag = document.createElement("img");
-    p_frag.setAttribute("src", `/src/img/author_${participant.fragId}.svg`)
-    document.getElementById("fragment_wrapper").appendChild(p_frag)
 
-}
 
 let findElementByProperty = (arr, key, value) => {
     for(var i = 0, len = arr.length; i < len; i++)
@@ -29,3 +19,106 @@ let findElementByProperty = (arr, key, value) => {
   console.log(window.location.hash);
 
 
+
+  function setCookie(cookie_name, value, days) {
+    let exdate = new Date();
+    exdate.setDate(exdate.getDate() +  days);
+
+    var cookie_value = escape(value) + ((days == null)? '':'; expires=' + exdate.toUTCString());
+    document.cookie = cookie_name + '=' + cookie_value;
+  }
+
+  function deleteCookie (cookie_name) {
+    let expireDate = new Date();
+    expireDate.setDate(expireDate.getDate() - 1);
+    document.cookie = cookie_name + "= " + "; expires=" + expireDate.toGMTString();
+  }
+
+  function getCookie(cookie_name) {
+    let x, y;
+    let val = document.cookie.split(';');
+
+    for (let i = 0; i < val.length; i++) {
+      x = val[i].substring(0, val[i].indexOf('='));
+      y = val[i].substr(val[i].indexOf('=') + 1);
+      x = x.replace(/^\s+|\s+$/g, '');
+      if (x == cookie_name) {
+        return unescape(y);
+      }
+    }
+  }
+
+
+
+  function showKorean(){
+    console.log("kor")
+    var introductions_requestURL = `${window.location.origin}/src/introduction.json`;
+    var introductions_request = new XMLHttpRequest();
+    introductions_request.open('GET', introductions_requestURL);
+    introductions_request.responseType = 'json';
+    introductions_request.send();
+  
+    // var introductions = null;
+    introductions_request.onload = function() {
+      let introductions = introductions_request.response;
+      console.log(introductions)
+      
+      let path = (window.location.pathname).split('/')[1];
+      let participant = findElementByProperty(introductions, 'path', path);
+      document.getElementById("introduction").innerHTML = participant.introduction;
+      
+      let lang_button = document.createElement("img");
+      lang_button.setAttribute("src", `/src/img/language_en.svg`)
+      lang_button.setAttribute("style", "width:20px; vertical-align:text-top")
+      lang_button.onclick = showEnglish
+      document.getElementById("introduction").appendChild(lang_button)
+
+      let p_frag = document.createElement("img");
+      p_frag.setAttribute("src", `/src/img/author_${participant.fragId}.svg`)
+      
+      let el = document.getElementById("fragment_wrapper");
+      while(el.hasChildNodes()){
+        el.removeChild(el.firstChild);
+      }
+      el.appendChild(p_frag);
+
+    }
+    // deleteCookie('lang');
+
+  }
+
+  function showEnglish(){
+    console.log("en")
+    var introductions_requestURL = `${window.location.origin}/src/introduction_en.json`;
+    var introductions_request = new XMLHttpRequest();
+    introductions_request.open('GET', introductions_requestURL);
+    introductions_request.responseType = 'json';
+    introductions_request.send();
+  
+    introductions_request.onload = function() {
+      let introductions = introductions_request.response;
+      console.log(introductions_request)
+      
+      let path = (window.location.pathname).split('/')[1];
+      let participant = findElementByProperty(introductions, 'path', path);
+      document.getElementById("introduction").innerHTML = participant.introduction;
+      
+      let lang_button = document.createElement("img");
+      lang_button.setAttribute("src", `/src/img/language_kor.svg`)
+      lang_button.setAttribute("style", "width:20px; vertical-align:text-top")
+      lang_button.onclick = showKorean
+      document.getElementById("introduction").appendChild(lang_button)
+      
+      
+      let p_frag = document.createElement("img");
+      p_frag.setAttribute("src", `/src/img/author_${participant.fragId}.svg`)
+
+      let el = document.getElementById("fragment_wrapper");
+      while(el.hasChildNodes()){
+        el.removeChild(el.firstChild);
+      }
+      el.appendChild(p_frag);
+  
+    }
+    // deleteCookie('lang');
+  }