static/JS/script.js

var sourceLangModal = document.getElementById('sourceLangModal');
var targetLangModal = document.getElementById('targetLangModal');
var selectedSourceLangSpan = document.getElementById('selected_source_language');
var selectedTargetLangSpan = document.getElementById('selected_target_language');
var sourceLangInput = document.getElementById('source_lang');
var targetLangInput = document.getElementById('target_lang');
var textInput = document.getElementById('text');
var translatedText = document.getElementById('translated_text');
var speakButton = document.getElementById('speak_button');
var copyElements = document.querySelectorAll('.copy');
var copyButton = document.getElementById('copyButton');
var successButton = document.getElementById('successButton');





function searchLanguages(inputId, modalId) {
        var searchInput = document.getElementById(inputId);
        var searchKeyword = searchInput.value.toLowerCase();
        
        var languageList = document.getElementById(modalId).getElementsByTagName('li');
        
        for (var i = 0; i < languageList.length; i++) {
            var language = languageList[i].textContent.toLowerCase();
            if (language.includes(searchKeyword)) {
                languageList[i].style.display = 'block';
            } else {
                languageList[i].style.display = 'none';
            }
        }
    }



function copy() {
  var copiedValues = [];

  for (var i = 0; i < copyElements.length; i++) {
    var value = copyElements[i].value;
    copiedValues.push(value);
  }

  var copiedString = copiedValues.join('\n');

  // Salin nilai yang disalin ke clipboard hanya jika tersedia izin
  if (navigator.clipboard && navigator.clipboard.writeText) {
    navigator.clipboard.writeText(copiedString)
      .then(function() {
        console.log('Nilai input telah disalin ke clipboard.');
        // Sembunyikan tombol "Copy" dan tampilkan tombol "Success"
        copyButton.style.display = 'none';
        successButton.style.display = 'block';
        // Kembalikan tampilan tombol seperti semula setelah beberapa waktu (misalnya 2 detik)
        setTimeout(function() {
          copyButton.style.display = 'block';
          successButton.style.display = 'none';
        }, 2000);
      })
      .catch(function(error) {
        console.error('Gagal menyalin nilai input:', error);
      });
  } else {
    console.error('Penyalinan ke clipboard tidak didukung pada browser ini.');
  }
}

copyButton.addEventListener('click', copy);


function swapLanguages() {
    var sourceLang = sourceLangInput.value;
    var targetLang = targetLangInput.value;

    // Menukar nilai bahasa sumber dan bahasa target
    sourceLangInput.value = targetLang;
    targetLangInput.value = sourceLang;

    // Menukar teks di dalam textarea
    var sourceText = document.getElementById('text').value;
    var targetText = document.getElementById('translated_text').value;
    document.getElementById('text').value = targetText;
    document.getElementById('translated_text').value = sourceText;

    // Menampilkan nama bahasa di dalam elemen span
    selectedSourceLangSpan.textContent = getLanguageName(targetLang);
    selectedTargetLangSpan.textContent = getLanguageName(sourceLang);
  }


function openLanguageModal(type) {
  if (type === 'source') {
    targetLangModal.style.display = 'none';
    sourceLangModal.style.display = 'block';
  } else if (type === 'target') {
    sourceLangModal.style.display = 'none';
    targetLangModal.style.display = 'block';
  }
}

function selectLanguage(language, type) {
  if (type === 'source') {
    sourceLangInput.value = language;
    selectedSourceLangSpan.textContent = getLanguageName(language);
    sourceLangModal.style.display = 'none';
  } else if (type === 'target') {
    targetLangInput.value = language;
    selectedTargetLangSpan.textContent = getLanguageName(language) || 'English';    
    targetLangModal.style.display = 'none';
  }
}

function getLanguageName(language) {

   switch (language) {
      case 'en':
         return 'English';
      case 'id':
         return 'Indonesia';
      case 'jv':
         return 'Jawa';
      case 'su':
         return 'Sunda';
      case 'ja':
         return 'Jepang';
      case 'is':
         return 'Islan';
      case 'it':
         return 'Italia';
      case 'de':
         return 'Jerman';
      case 'kn':
         return 'Kannada';
      case 'ko':
         return 'Korea';
      case 'co':
         return 'Korsika';
      case 'ht':
         return 'Kreol Haiti';
      case 'kri':
         return 'Krio';
      case 'hr':
         return 'Kroat';
      case 'ku':
         return 'Kurdi (Kurmanji)';
      case 'ckb':
         return 'Kurdi (Sorani)';
      case 'lo':
         return 'Laos';
      case 'la':
         return 'Latin';
      case 'lv':
         return 'Latvia';
      case 'ln':
         return 'Lingala';
      case 'lt':
         return 'Lituania';
      case 'lg':
         return 'Luganda';
      case 'lb':
         return 'Luksemburg';
      case 'hu':
         return 'Magyar';
      case 'mai':
         return 'Maithili';
      case 'mk':
         return 'Makedonia';
      case 'mg':
         return 'Malagasi';
      case 'ml':
         return 'Malayalam';
      case 'mt':
         return 'Malta';
      case 'mi':
         return 'Maori';
      case 'mr':
         return 'Marathi';
      case 'mni':
         return 'Meiteilon (Manipuri)';
      case 'ms':
         return 'Melayu';
      case 'lus':
         return 'Mizo';
      case 'mn':
         return 'Mongol';
      case 'ne':
         return 'Nepal';
      case 'no':
         return 'Norsk';
      case 'or':
         return 'Odia (Oriya)';
      case 'om':
         return 'Oromo';
      case 'ps':
         return 'Pashto';
      case 'pl':
         return 'Polandia';
      case 'pt':
         return 'Portugis';
      case 'fr':
         return 'Prancis';
      case 'pa':
         return 'Punjabi';
      case 'qu':
         return 'Quechua';
      case 'ro':
         return 'Rumania';
      case 'ru':
         return 'Rusia';
      case 'sm':
         return 'Samoa';
      case 'sa':
         return 'Sanskerta';
      case 'nso':
         return 'Sepedi';
      case 'sr':
         return 'Serb';
      case 'st':
         return 'Sesotho';
      case 'sn':
         return 'Shona';
      case 'sd':
         return 'Sindhi';
      case 'si':
         return 'Sinhala';
      case 'sk':
         return 'Slovakia';
      case 'sl':
         return 'Slovenia';
      case 'so':
         return 'Somali';
      case 'es':
         return 'Spanyol';
      case 'sw':
         return 'Swahili';
      case 'sv':
         return 'Swensk';
      case 'tl':
         return 'Tagalog';
      case 'tg':
         return 'Tajik';
      case 'ta':
         return 'Tamil';
      case 'tt':
         return 'Tatar';
      case 'te':
         return 'Telugu';
      case 'th':
         return 'Thai';
      case 'ti':
         return 'Tigrinya';
      case 'ts':
         return 'Tsonga';
      case 'tr':
         return 'Turki';
      case 'tk':
         return 'Turkmen';
      case 'tw':
         return 'Twi';
      case 'uk':
         return 'Ukraina';
      case 'ur':
         return 'Urdu';
      case 'ug':
         return 'Uyghur';
      case 'uz':
         return 'Uzbek';
      case 'vi':
         return 'Vietnam';
      case 'cy':
         return 'Wales';
      case 'xh':
         return 'Xhosa';
      case 'yi':
         return 'Yiddi';
      case 'yo':
         return 'Yoruba';
      case 'el':
         return 'Yunani';
      case 'zu':
         return 'Zulu';
      case 'af':
         return 'Afrikans';
      case 'sq':
         return 'Albania';
      case 'am':
         return 'Amhara';
      case 'ar':
         return 'Arab';
      case 'hy':
         return 'Armenia';
      case 'as':
         return 'Assam';
      case 'ay':
         return 'Aymara';
      case 'az':
         return 'Azerbaijan';
      case 'bm':
         return 'Bambara';
      case 'eu':
         return 'Basque';
      case 'nl':
         return 'Belanda';
      case 'be':
         return 'Belarussia';
      case 'bn':
         return 'Bengali';
      case 'bho':
         return 'Bhojpuri';
      case 'bs':
         return 'Bosnia';
      case 'bg':
         return 'Bulgaria';
      case 'my':
         return 'Burma';
      case 'ceb':
         return 'Cebuano';
      case 'cs':
         return 'Ceko';
      case 'ny':
         return 'Chichewa';
      case 'zh-CN':
         return 'China (Aks. Sederhana)';
      case 'zh-TW':
         return 'China (Aks. Tradisional)';
      case 'da':
         return 'Denmark';
      case 'dv':
         return 'Divehi';
      case 'doi':
         return 'Dogri';
      case 'eo':
         return 'Esperanto';
      case 'et':
         return 'Estonia';
      case 'ee':
         return 'Ewe';
      case 'fa':
         return 'Farsi';
      case 'fi':
         return 'Finlandia';
      case 'fy':
         return 'Frisia';
      case 'gd':
         return 'Gaelig';
      case 'gd':
         return 'Gaelik Skotlandia';
      case 'gl':
         return 'Galisia';
      case 'ka':
         return 'Georgia';
      case 'gn':
         return 'Guarani';
      case 'gu':
         return 'Gujarati';
      case 'ha':
         return 'Hausa';
      case 'haw':
         return 'Hawaii';
      case 'hi':
         return 'Hindi';
      case 'hmn':
         return 'Hmong';
      case 'he':
         return 'Ibrani';
      case 'ig':
         return 'Igbo';
      case 'ilo':
         return 'Ilocano';
      case 'ca':
         return 'Katala';
      case 'kk':
         return 'Kazak';
      case 'km':
         return 'Khmer';
      case 'rw':
         return 'Kinyarwanda';
      case 'ky':
         return 'Kirghiz';
      case 'kok':
         return 'Konkani';


      default:
         return language;
   }
}


function translateText() {
   var text = textInput.value;
   var targetLang = targetLangInput.value;

   var data = {
      text: text,
      target_lang: targetLang
   };


   var xhr = new XMLHttpRequest();
   xhr.open('POST', '/translate', true);
   xhr.setRequestHeader('Content-Type', 'application/json');

   xhr.onload = function () {
      if (xhr.status === 200) {
         var response = JSON.parse(xhr.responseText);
         document.getElementById('translated_text').textContent = response.translated_text;
      } else {
         console.log('Error:', xhr.status);
      }
   };

   xhr.onerror = function () {
      console.log('Request error');
   };

   xhr.send(JSON.stringify(data));
}


// Add event listener to the text input
textInput.addEventListener('textarea', translateText);


var recognition; // Variable to hold the recognition object

function toggleRecognition() {
   if (!recognition) {
      startRecognition();
   } else {
      stopRecognition();
   }
}

function startRecognition() {
   recognition = new webkitSpeechRecognition();
   recognition.continuous = false;
   recognition.interimResults = false;
   recognition.lang = "id-ID";
   recognition.start();

   recognition.onresult = function (event) {
      var speechResult = event.results[0][0].transcript;
      const chatboxInput = document.querySelector('textarea');
      chatboxInput.value = speechResult;
      translateText();
   };

   recognition.onend = function () {
      // Reset the recognition variable and button display
      recognition = null;
      var startRecognitionButton = document.getElementById('startRecognitionButton');
      var stopRecognitionButton = document.getElementById('stopRecognitionButton');
      startRecognitionButton.style.display = "inline-block";
      stopRecognitionButton.style.display = "none";
   };

   // Set button display
   var startRecognitionButton = document.getElementById('startRecognitionButton');
   var stopRecognitionButton = document.getElementById('stopRecognitionButton');
   startRecognitionButton.style.display = "none";
   stopRecognitionButton.style.display = "inline-block";
}

function stopRecognition() {
   recognition.stop();
}


var isSpeaking = false;

function speakText(text) {
   if (!isSpeaking) {
      isSpeaking = true;

      const speechSynthesis = window.speechSynthesis;
      const utterance = new SpeechSynthesisUtterance(text);

      utterance.lang = 'id-ID';
      utterance.volume = 1;
      utterance.rate = 1;
      utterance.pitch = 1;

      utterance.onend = function (event) {
         isSpeaking = false;
      };

      speechSynthesis.speak(utterance);
   }
}

speakButton.addEventListener('click', function () {
   var translatedText = document.getElementById('translated_text').textContent;
   speakText(translatedText);
});