fix most of android issues

aharen · Oct 18, 2019 · 6ad20f1 · 6ad20f1
1 parent 9eb3073
commit 6ad20f1
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 22 deletions.
diff --git a/dist/thaana-keyboard.min.js b/dist/thaana-keyboard.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "thaana-keyboard",
-	"version": "1.0.6",
+	"version": "1.0.7",
 	"description": "Thaana keyboard replaces latin text to thaana unicode characters",
 	"author": "Ahmed Khusaam <hello@khusaam.com>",
 	"license": "MIT",

diff --git a/src/index.js b/src/index.js
@@ -69,50 +69,61 @@ const l2t = function(e, k) {
 	let v = K[k] || k
 
 	// It's a selection
-	if (ts !== te) {
-		et.value = et.value.substring(0, ts) + et.value.substring(te)
+	if (ss !== se) {
+		et.value = et.value.substring(0, ss) + et.value.substring(se)
 	}
-	et.value = et.value.substring(0, ts) + v + et.value.substring(ts)
+
+	et.value = et.value.substring(0, ss) + v + et.value.substring(ss)
 
 	// maintain cursor pointer after replacement
-	et.selectionStart = ts + 1
-	et.selectionEnd = ts + 1
+	et.selectionStart = ss + 1
+	et.selectionEnd = ss + 1
 }
 
 let i = document.querySelector('.thaana-keyboard'),
-	o,
-	ts,
-	te,
-	kk
+	kv, // keydown value
+	ss, // selection start
+	se, // selection end
+	kk, // keydown key
+	ol // old length
 
 i.addEventListener('input', function(e) {
 	// if keydown key was Unidentified (by Android) use input value
 	let ik = kk === 'Unidentified' ? e.data : kk
 
+	// make sure you got the last typed char (Android autocomplete, autosuggest -.-)
+	if (ik !== null) ik = ik.substring(ik.length - 1)
+
+	// Android Backspace/Delete
+	// Challenge!!
+
 	// for only IE and Edge
 	if (['Spacebar', 'Backspace'].indexOf(ik) === -1) {
 
 		// set to null for special keyboard values, except for the IE and Edge (above)
 		if (e.data !== null) {
 
-			// Trying to handle android autocorrect, next-word suggestion
+			// Trying to handle Android autocorrect, next-word suggestion
 			if (ik === e.target.value) {
-				ik = e.target.value.split(o).join('')
+				ik = e.target.value.split(kv).join('')
 			}
 
 			// remove the inserted character latin character
-			e.target.value = o.split(e.target.value).join('')
+			e.target.value = kv.split(e.target.value).join('')
 			l2t(e, ik)
 		}
+	}
 
-		e.stopPropagation()
-		e.preventDefault()
+	// stop word deletion and make sure it's not a selection, again Android autocorrect, next-word suggestion
+	if (ol - e.target.value.length > 1 && ss === se) {
+		e.target.value = kv.substring(0, ol - 1)
 	}
 })
 
 i.addEventListener('keydown', function(e) {
 	kk = e.key
-	o = e.target.value
-	ts = e.target.selectionStart
-	te = e.target.selectionEnd
+	kv = e.target.value
+	ss = e.target.selectionStart
+	se = e.target.selectionEnd
+	ol = e.target.value.length
 })
diff --git a/test/index.html b/test/index.html
@@ -16,6 +16,14 @@
 		.thaana-keyboard {
 			direction: rtl;
 		}
+		iframe {
+		    height: 65vh;
+		}
+		@media screen and (min-width: 640px) {
+			iframe {
+				height: 45vh;
+			}
+		}
 	</style>
 </head>
 <body class="bg-gray-200">
@@ -55,20 +63,24 @@
             </div>
         </div>
 
-        <div class="my-10 bg-gray-300">
+        <div class="my-10">
 			<input type="text" 
 				class="thaana-keyboard p-3 w-full border border-gray-100 rounded outline-none border-gray-300 focus:outline-none focus:border-gray-400 focus:shadow"
 				placeholder="ލިޔެލާ..." />
 		</div>
 
         <div class="flex flex-no-wrap w-full">
 			<iframe
-				class="flex-1 w-full h-screen sm:h-64"
+				class="flex-1 w-full"
 				src="https://carbon.now.sh/embed/?bg=rgba(237%2C242%2C247%2C1)&t=one-dark&wt=none&l=htmlmixed&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=true&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=%252F%252F%2520use%2520the%2520class%2520'thaana-keyboard'%2520on%2520element%250A%253Cinput%2520type%253D%2522text%2522%2520class%253D%2522thaana-keyboard%2522%2520%252F%253E%250A%252F%252F%2520import%2520the%2520file%250A%253Cscript%2520src%253D%2522thaana-keyboard.min.js%2522%253E%253C%252Fscript%253E"
 				style="border:0; overflow:hidden;"
 				sandbox="allow-scripts allow-same-origin">
 			</iframe>
         </div>
+
+        <div class="text-center text-gray-800 my-10 text-sm">
+        	Inspirations: <a href="https://github.com/ajaaibu/thaanaKeyboard" target="_blank" class="underline text-orange-400">jQuery ThaanaKeyboard</a> by <a href="https://about.me/ajaaibu" target="_blank" class="underline text-orange-400">Ajaaibu</a> and <a href="https://github.com/jawish/jtk" target="_blank" class="underline text-orange-400">Javascript Thaana Keyboard</a> by <a href="https://www.jawish.org/blog/" target="_blank" class="underline text-orange-400">Jawish</a>
+        </div>
 	</div>
 	<script src="thaana-keyboard.min.js"></script>
 	<script async defer src="https://buttons.github.io/buttons.js"></script>

diff --git a/test/thaana-keyboard.min.js b/test/thaana-keyboard.min.js