Merge pull request #24 from ftlabs/bugfix/android_keyboard

[Bugfix] Android Keyboard
Financial-Times · May 10, 2017 · bdddaa6 · bdddaa6
2 parents a440983 + 755c04c
commit bdddaa6
Showing 1 changed file with 49 additions and 13 deletions.
diff --git a/src/js/oCrossword.js b/src/js/oCrossword.js
@@ -275,7 +275,9 @@ OCrossword.prototype.assemble = function assemble() {
 		});
 
 		this.addEventListener(magicInput, 'keydown', function (e) {
-			e.preventDefault();
+			if (!isAndroid()) {
+				e.preventDefault();
+			}
 
 			if (e.keyCode === 13) { //enter
 				magicInputNextEls = null;
@@ -302,7 +304,16 @@ OCrossword.prototype.assemble = function assemble() {
 				return progress(-1);
 			}
 
-			magicInput.value = String.fromCharCode(e.keyCode);
+			if( e.keyCode === 16 || //shift
+				e.keyCode === 20 //caps lock
+			) {
+				magicInput.value = '';
+				return;
+			}
+
+			if(!isAndroid()) {
+				magicInput.value = String.fromCharCode(e.keyCode);
+			}
 
 			progress();
 		});
@@ -367,6 +378,7 @@ OCrossword.prototype.assemble = function assemble() {
 
 		const onResize = function onResize() {
 			var isMobile = false;
+
 			if (window.innerWidth <= 739) {
 				isMobile = true;
 			} else if (window.innerWidth > window.innerHeight && window.innerHeight <=739 ) { //rotated phones and small devices, but not iOS
@@ -462,7 +474,9 @@ OCrossword.prototype.assemble = function assemble() {
 
 		}.bind(this);
 
-		this.onResize = debounce(onResize, 100);
+		if(!isAndroid()) {
+			this.onResize = debounce(onResize, 100);
+		}
 
 		this._raf = requestAnimationFrame(function animate() {
 			this._raf = requestAnimationFrame(animate.bind(this));
@@ -474,7 +488,9 @@ OCrossword.prototype.assemble = function assemble() {
 		}.bind(this));
 
 		function highlightGridByCluesEl(el) {
-			if(blockHighlight) return;
+			if (blockHighlight) {
+				return;
+			}
 
 			while(el.parentNode) {
 				if (el.dataset.oCrosswordNumber) {
@@ -548,7 +564,7 @@ OCrossword.prototype.assemble = function assemble() {
 		}
 
 		function toggleClueSelection(clue) {
-			if(previousClueSelection !== null && isEquivalent(previousClueSelection, clue)) {
+			if (previousClueSelection !== null && isEquivalent(previousClueSelection, clue)) {
 				unsetClue(clue.number, clue.direction);
 				blockHighlight = false;
 				previousClueSelection = null;
@@ -566,7 +582,7 @@ OCrossword.prototype.assemble = function assemble() {
 			let clueDetails;
 			blockHighlight = false;
 
-			if(e.target.nodeName === 'TD' || e.target.nodeName === 'INPUT') {
+			if (e.target.nodeName === 'TD' || e.target.nodeName === 'INPUT') {
 				target = e.target;
 				blockHighlight = true;
 			} else {
@@ -578,7 +594,9 @@ OCrossword.prototype.assemble = function assemble() {
 				clueDetails.direction = defEl.getAttribute('data-o-crossword-direction');
 				clueDetails.answerLength = defEl.getAttribute('data-o-crossword-answer-length');
 
-				if(!toggleClueSelection(clueDetails)) return;
+				if (!toggleClueSelection(clueDetails)) {
+					return;
+				}
 
 				const el = gridEl.querySelector(`td[data-o-crossword-number="${num}"]`);
 				target = el;
@@ -598,7 +616,9 @@ OCrossword.prototype.assemble = function assemble() {
 					}
 				}
 				const clues = gridMap.get(cell);
-				if (!clues) return;
+				if (!clues) {
+					return;
+				}
 
 				// cell.scrollIntoView(); //TODO: this works OK-ish for vertical oriented phones, could be explored
 
@@ -622,7 +642,7 @@ OCrossword.prototype.assemble = function assemble() {
 					currentlySelectedGridItem = clues[index + 1];
 				}
 
-				if(clueDetails !== undefined) {
+				if (clueDetails !== undefined) {
 					currentlySelectedGridItem.number = clueDetails.number;
 					currentlySelectedGridItem.direction = clueDetails.direction;
 					currentlySelectedGridItem.answerLength = clueDetails.answerLength;
@@ -640,7 +660,10 @@ OCrossword.prototype.assemble = function assemble() {
 					currentlySelectedGridItem.answerLength
 				));
 			}
-			if(!this._doFancyBehaviour) return;
+
+			if (!this._doFancyBehaviour) {
+				return;
+			}
 		}.bind(this);
 
 		this.addEventListener(cluesEl, 'mousemove', e => highlightGridByCluesEl(e.target));
@@ -657,7 +680,10 @@ OCrossword.prototype.assemble = function assemble() {
 };
 
 OCrossword.prototype.addEventListener = function(el, type, callback) {
-	if (this.listeners === undefined) this.listeners = [];
+	if (this.listeners === undefined) {
+		this.listeners = [];
+	}
+
 	this.listeners.push({el, type, callback});
 	el.addEventListener(type, callback);
 };
@@ -670,8 +696,13 @@ OCrossword.prototype.removeAllEventListeners = function() {
 
 OCrossword.prototype.destroy = function destroy() {
 	this.removeAllEventListeners();
-	if (this.hammerMC) this.hammerMC.destroy();
-	if (this._raf) cancelAnimationFrame(this._raf);
+	if (this.hammerMC) {
+		this.hammerMC.destroy();
+	}
+
+	if (this._raf) {
+		cancelAnimationFrame(this._raf);
+	}
 };
 
 module.exports = OCrossword;
@@ -680,3 +711,8 @@ function isiOS() {
 	var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
 	return iOS;
 }
+
+function isAndroid() {
+	var android = navigator.userAgent.toLowerCase().indexOf("android") > -1;
+	return android;
+}