Merge pull request #21 from ftlabs/bugfix/character_drop

[BUGFIX] Character drop
Financial-Times · May 8, 2017 · 4ad10d7 · 4ad10d7
2 parents cfd5862 + ad5186c
commit 4ad10d7
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 16 deletions.
diff --git a/src/js/oCrossword.js b/src/js/oCrossword.js
@@ -266,62 +266,69 @@ OCrossword.prototype.assemble = function assemble() {
 		magicInput.type = 'text';
 		magicInput.style.display = 'none';
 
-		this.addEventListener(magicInput, 'keyup', function (e) {
-			if (e.keyCode === 13) {
-				e.preventDefault();
+		this.addEventListener(magicInput, 'keydown', function (e) {
+			e.preventDefault();
+
+			if (e.keyCode === 13) { //enter
 				magicInputNextEls = null;
 				return progress();
 			}
 			if (
-				e.keyCode === 9 ||
-				e.keyCode === 40 ||
-				e.keyCode === 39 ||
-				e.keyCode === 32
+				e.keyCode === 9 || //tab
+				e.keyCode === 40 ||//down
+				e.keyCode === 39 ||//right
+				e.keyCode === 32 //space
 			) {
-				e.preventDefault();
 				return progress();
 			}
 			if (
-				e.keyCode === 37 ||
-				e.keyCode === 38
+				e.keyCode === 37 || //left
+				e.keyCode === 38 //up
 			) {
-				e.preventDefault();
 				return progress(-1);
 			}
 			if (
-				e.keyCode === 8
+				e.keyCode === 8 //backspace
 			) {
-				e.preventDefault();
-				return magicInput.value = '';
+				magicInput.value = '';
+				return progress(-1);
 			}
+
+			magicInput.value = String.fromCharCode(e.keyCode);
+
 			progress();
 		});
 
+		//on keyup rem receiving-input class
+
 		const progress = debounce(function progress(direction) {
 			direction = direction === -1 ? -1 : 1;
 			const oldMagicInputEl = magicInputTargetEl;
+
 			if (
 				magicInputTargetEl &&
 				magicInput.value.match(/^[^\s]/)
 			) {
 				magicInputTargetEl.textContent = magicInput.value[0];
 			}
+
 			magicInputTargetEl = null;
+
 			if (magicInputNextEls) {
 				const index = magicInputNextEls.indexOf(oldMagicInputEl);
 				if (magicInputNextEls[index + direction]) {
 					return takeInput(magicInputNextEls[index + direction], magicInputNextEls);
 				}
 			}
-			magicInputTargetEl = null;
+
 			magicInputNextEls = null;
 			magicInput.value = '';
 			magicInput.blur();
+			magicInput.style.display = 'none';
 		}, 16);
 		this.addEventListener(magicInput, 'focus', magicInput.select());
 
 		function takeInput(el, nextEls) {
-
 			if (
 				magicInputTargetEl &&
 				magicInput.value.match(/^[^\s]/)

diff --git a/src/scss/_base.scss b/src/scss/_base.scss
@@ -42,6 +42,7 @@
 		-webkit-overflow-scrolling: touch;
 		position: relative;
 		font-size: 1.5em;
+		text-transform: uppercase;
 
 		.o-crossword-clue-displayer {
 			font-size: 1rem;
@@ -51,6 +52,7 @@
 			border-top-width: 0;
 			box-sizing: border-box;
 			@include oColorsFor(o-crossword-border, border);
+			text-transform: none;
 		}
 
 		.o-crossword-magic-input {
@@ -64,6 +66,7 @@
 			box-sizing: border-box;
 			background: rgba(0,0,0,0.2);
 			font-size: inherit;
+    		text-transform: inherit;
 		}
 	}