Geo Kay Flag

by Tamo Tamm

HTML

<div class="geoflag-wrapper">
 <div class="geoflag-slider" id="geoflagSlider">
 <img id="geoflag" src="https://smiles.do.am/img/geo.png" alt="geo">
 <img id="geoflag" src="https://smiles.do.am/img/eng.png" alt="Eng">
 <input type="checkbox" id="geoKeys_inp09" style="display: none;">
 </div>
 </div>
 
 <textarea onkeypress="return makeGeo(this,event);" name="message" id="message"></textarea>

CSS

.geoflag-slider {display: flex;width: 200%;height: 100%;transition: transform 0.2s ease-in-out;}
.geoflag-slider img {width: 50%;margin:0;top:0;position:relative;left: 0;}
.geoflag-wrapper {width: 23px;overflow: hidden;position: relative;cursor: pointer;}

JavaScript

$(document).ready(function() {
 var isGeorgianSound = true; // ცვლადი ხმის მდგომარეობის გასაკონტროლებლად

 $("[onkeypress*=convertToGeorgian09]").keypress(function(e) {
 if (e.which == 96) { // შეამოწმეთ უკანა ღილაკი (`)
 e.preventDefault();

 // გადართეთ მდგომარეობა შემდეგი პრესისთვის
 isGeorgianSound = !isGeorgianSound;

 // თქვენი არსებული კოდი ენის გადასართავად
 var element09 = document.querySelector("#geoKeys_inp09");
 element09.checked = !element09.checked;
 toggleLanguage09();
 }
 });
});
 function playSound(url) {
 var audio = new Audio(url);
 audio.play();
 }
function convertToGeorgian09(t, e) {
var element09 = document.querySelector("#geoKeys_inp09");
var translations = {
a: "ა", A: "ა",
b: "ბ", B: "ბ",
g: "გ", G: "გ",
d: "დ", D: "დ",
e: "ე", E: "ე",
v: "ვ", V: "ვ",
z: "ზ", Z: "ძ",
t: "ტ", T: "თ",
i: "ი", I: "ი",
k: "კ", K: "კ",
l: "ლ", L: "ლ",
m: "მ", M: "მ",
n: "ნ", N: "ნ",
o: "ო", O: "ო",
p: "პ", P: "პ",
j: "ჯ", J: "ჟ",
r: "რ", R: "ღ",
s: "ს", S: "შ",
u: "უ", U: "უ",
f: "ფ", F: "ფ",
q: "ქ", Q: "ქ",
y: "ყ", Y: "ყ",
c: "ც", C: "ჩ",
x: "ხ", X: "ხ",
h: "ჰ", H: "ჰ",
w: "წ", W: "ჭ"
};
var e = e || event;
var charCode = e.which || e.keyCode;
var charStr = String.fromCharCode(charCode);

if (charCode === 8) {
return true;
} else if (charStr !== "gel" && translations.hasOwnProperty(charStr)) {
if (element09.checked) {
var start = t.selectionStart;
var end = t.selectionEnd;

t.value = t.value.substring(0, start) + translations[charStr] + t.value.substring(end);
t.selectionStart = t.selectionEnd = start + 1;

return false;
}
}
return true;
}

function toggleLanguage09() {
 var element09 = document.querySelector("#geoKeys_inp09");
 var geoflagSlider = document.querySelector("#geoflagSlider");

 // სლაიდერის გადართვა მონიშნული ველის მდგომარეობის მიხედვით
if (element09.checked) {
 geoflagSlider.style.transform = "translateX(0%)"; // გადაერთეთ პირველ სურათზე
 playSound('https://smiles.do.am/audio/onclick.mp3'); // დაუკარით ქართული ხმა
 } else {
...