key map

app.py

@@ -20,16 +20,189 @@ TITLE = "Concatenative Synthesis: Rule Based Text to Sign Language Translator"
 CUSTOM_JS = """<script>
 const rtlLanguages = ["urdu", "arabic"];
 
-function updateTextareaDir(language) {
-    const sourceTextarea = document.getElementById("source-textbox").querySelector("textarea");
+const keyMap = {
+  "urdu": {
+    "1": "۱",
+    "2": "۲",
+    "3": "۳",
+    "4": "۴",
+    "5": "۵",
+    "6": "٦",
+    "7": "۷",
+    "8": "۸",
+    "9": "۹",
+    "0": "۰",
+    "q": "ق",
+    "w": "و",
+    "e": "ع",
+    "r": "ر",
+    "t": "ت",
+    "y": "ے",
+    "u": "ء",
+    "i": "ی",
+    "o": "ہ",
+    "p": "پ",
+    "a": "ا",
+    "s": "س",
+    "d": "د",
+    "f": "ف",
+    "g": "گ",
+    "h": "ح",
+    "j": "ج",
+    "k": "ک",
+    "l": "ل",
+    "z": "ز",
+    "x": "ش",
+    "c": "چ",
+    "v": "ط",
+    "b": "ب",
+    "n": "ن",
+    "m": "م",
+    "R": "ڑ",
+    "T": "ٹ",
+    "Y": "َ",
+    "U": "ئ",
+    "I": "ِ",
+    "P": "ُ",
+    "A": "آ",
+    "S": "ص",
+    "D": "ڈ",
+    "F": "أ",
+    "G": "غ",
+    "H": "ھ",
+    "J": "ض",
+    "K": "خ",
+    "Z": "ذ",
+    "X": "ژ",
+    "C": "ث",
+    "V": "ظ",
+    "N": "ں",
+    ",": "،",
+    ".": "۔",
+    "?": "؟",
+    ";": "؛",
+  },
+  "hindi": {
+    "1": "१",
+    "2": "२",
+    "3": "३",
+    "4": "४",
+    "5": "५",
+    "6": "६",
+    "7": "७",
+    "8": "८",
+    "9": "९",
+    "0": "०",
+    "=": "ृ",
+    "!": "ऍ",
+    "@": "ॅ",
+    "#": "्र",
+    "$": "र्",
+    "%": "ज्ञ",
+    "^": "त्र",
+    "&": "क्ष",
+    "*": "श्र",
+    "_": "ः",
+    "+": "ऋ",
+    "q": "ौ",
+    "w": "ै",
+    "e": "ा",
+    "r": "ी",
+    "t": "ू",
+    "y": "ब",
+    "u": "ह",
+    "i": "ग",
+    "o": "द",
+    "p": "ज",
+    "[": "ड",
+    "]": "़",
+    '\\\\': "ॉ",
+    "Q": "औ",
+    "W": "ऐ",
+    "E": "आ",
+    "R": "ई",
+    "T": "ऊ",
+    "Y": "भ",
+    "U": "ङ",
+    "I": "घ",
+    "O": "ध",
+    "P": "झ",
+    "{": "ढ",
+    "}": "ञ",
+    "|": "ऑ",
+    "a": "ो",
+    "s": "े",
+    "d": "्",
+    "f": "ि",
+    "g": "ु",
+    "h": "प",
+    "j": "र",
+    "k": "क",
+    "l": "त",
+    ";": "च",
+    "'": "ट",
+    "A": "ओ",
+    "S": "ए",
+    "D": "अ",
+    "F": "इ",
+    "G": "उ",
+    "H": "फ",
+    "J": "ऱ",
+    "K": "ख",
+    "L": "थ",
+    ":": "छ",
+    '"': "ठ",
+    "z": "ॆ",
+    "x": "ं",
+    "c": "म",
+    "v": "न",
+    "b": "व",
+    "n": "ल",
+    "m": "स",
+    ".": "।",
+    "/": "य",
+    "Z": "ऎ",
+    "X": "ँ",
+    "C": "ण",
+    "V": "ऩ",
+    "B": "ऴ",
+    "N": "ळ",
+    "M": "श",
+    "<": "ष",
+    ">": "य़",
+    // "?":"य़",
+    }
+};
 
-    if (rtlLanguages.includes(language)) {
-        sourceTextarea.setAttribute("dir", "rtl");
-    } else {
-        sourceTextarea.setAttribute("dir", "ltr");
+function updateTextareaDir(language) {
+  const sourceTextarea = document.getElementById("source-textbox").querySelector("textarea");
+
+  if (rtlLanguages.includes(language)) {
+    sourceTextarea.setAttribute("dir", "rtl");
+  } else {
+    sourceTextarea.setAttribute("dir", "ltr");
+  }
+
+  function keypressHandler(event) {
+    const key = event.key;
+    if (keyMap[language].hasOwnProperty(key)) {
+      event.preventDefault();
+      const mappedValue = keyMap[language][key];
+      const start = sourceTextarea.selectionStart;
+      const end = sourceTextarea.selectionEnd;
+      sourceTextarea.value = sourceTextarea.value.slice(0, start) + mappedValue + sourceTextarea.value.slice(end);
+      sourceTextarea.selectionStart = sourceTextarea.selectionEnd = start + mappedValue.length;
     }
+  }
+
+  sourceTextarea.removeEventListener("keypress", sourceTextarea.keypressHandler);
+  sourceTextarea.addEventListener("keypress", keypressHandler);
+
+  // Save the handler function to the textarea element for future removal
+  sourceTextarea.keypressHandler = keypressHandler;
 }
-</script>"""
+</script>
+"""
 # todo: add dropdown keyboard custom component with key mapping
 # todo: output full height