ucfopen#9 Simplified layout/styling of alert box. Made it possible to…

… display an alert with only an 'Okay' button. Added alert box for keyboard instructions. Made it easier to confirm/cancel alerts with the keyboard.
FrenjaminBanklin · May 29, 2019 · 408c8d3 · 408c8d3
1 parent ba069e5
commit 408c8d3
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 47 deletions.
diff --git a/src/player.coffee b/src/player.coffee
@@ -51,20 +51,32 @@ Namespace('Crossword').Engine = do ->
 	_zoomedIn             = false
 
 	# constants
-	LETTER_HEIGHT         = 23 # how many pixles high is a space?
-	LETTER_WIDTH          = 27 # how many pixles wide is a space?
+	LETTER_HEIGHT         = 23 # how many pixels high is a space?
+	LETTER_WIDTH          = 27 # how many pixels wide is a space?
 	VERTICAL              = 1 # used to compare dir == 1 or dir == VERTICAL
 	BOARD_WIDTH           = 472 # visible board width
 	BOARD_HEIGHT          = 485 # visible board height
 	BOARD_LETTER_WIDTH    = Math.floor(BOARD_WIDTH / LETTER_WIDTH)
 	BOARD_LETTER_HEIGHT   = Math.floor(BOARD_HEIGHT / LETTER_HEIGHT)
 	NEXT_RECURSE_LIMIT    = 8 # number of characters in a row we'll try to jump forward before dying
 
+	KEYBOARD_HELP = [
+		'Use the Tab key to navigate between the clue list, submit, print, and zoom buttons.'
+		'While the clue list is selected, use the Up and Down arrow keys to navigate between clues.'
+		'While a clue is selected, Press the H key to receive a hint and reduce the value of a correct answer to that clue.'
+		'While a clue is selected, Press the F key to use a free word and have that clue\'s letter tiles in the letter grid filled in automatically.'
+		'While a clue is selected, Press the Return or Enter key to select the first letter tile for that clue in the letter grid.'
+		'While the letter grid is selected, Use the Up, Down, Left, and Right arrow keys inside the letter grid to navigate between letter tiles.'
+		'Press the Return or Enter key to automatically move to the first letter tile of the next clue.'
+		'Press the Tab key to return the clue list.'
+		'Press the Escape key to cancel or the Return or Enter key to confirm during prompts like this one.'
+	]
+
 	CLUE_HELP_TEXT        = 'Press the I key to receive additional instructions. '
 	CLUE_BASE_TEXT        = 'Use the Up and Down arrow keys to navigate between clues. Press the Return or Enter key to select the first letter tile for this clue in the letter grid. Press the Tab key to move to the submit button. '
 	CLUE_CHECK_TEXT       = 'Press the C key to check if all of this clue\'s letters have been filled in. '
 	CLUE_HINT_TEXT        = 'Press the H key to receive a hint and reduce the value of a correct answer to this clue by '
-	CLUE_FREE_WORD_TEXT   = 'Press the F key to have this clue\'s letter tiles in the letter grid filled in automatically. '
+	CLUE_FREE_WORD_TEXT   = 'Press the F key to use a free word and have this clue\'s letter tiles in the letter grid filled in automatically. '
 	CLUE_REPEAT_TEXT      = 'Press the R key to repeat this clue. '
 
 	BOARD_HELP_TEXT       = 'Hold the Control key and the Alt key and press the I key to receive additional instructions. '
@@ -177,6 +189,19 @@ Namespace('Crossword').Engine = do ->
 		$('#checkBtn').click ->
 			_showAlert "Are you sure you're done?", 'Yep, Submit', 'No, Cancel', _submitAnswers
 
+		$('#alertbox').keyup (e) ->
+			switch e.keyCode
+				when 13 #enter
+					$('#okbtn').click();
+				when 27 #escape
+					$('#cancelbtn').click();
+
+		$('#keyboard-instructions').keyup (e) ->
+			if e.keyCode is 13 or e.keyCode is 32
+				formattedKeyboardHelp = ''
+				formattedKeyboardHelp += v + '<br/>' for i, v of KEYBOARD_HELP
+				_showAlert formattedKeyboardHelp, 'Okay', null, _hideAlert
+
 		$('#specialInputBody span').click ->
 			spoof = $.Event('keydown')
 			spoof.which = this.innerText.charCodeAt(0)
@@ -963,12 +988,15 @@ Namespace('Crossword').Engine = do ->
 	# show the modal alert dialog
 	_showAlert = (caption, okayCaption, cancelCaption, action) ->
 		ab = $('#alertbox')
-		ab.addClass 'show'
 		_dom('backgroundcover').classList.add 'show'
 
+		_dom('cancelbtn').classList.add('removed')
+
 		$('#alertcaption').html caption
 		$('#okbtn').val okayCaption
-		$('#cancelbtn').val cancelCaption
+		if cancelCaption
+			_dom('cancelbtn').classList.remove('removed')
+			$('#cancelbtn').val cancelCaption
 
 		ab.find('.submit').unbind('click').click ->
 			_hideAlert()
@@ -977,7 +1005,6 @@ Namespace('Crossword').Engine = do ->
 
 	# hide it
 	_hideAlert = ->
-		_dom('alertbox').classList.remove 'show'
 		_dom('backgroundcover').classList.remove 'show'
 		_dom('clues').focus()
 

diff --git a/src/player.html b/src/player.html
@@ -108,22 +108,24 @@ <h1 id='title' aria-describedby='widget-reader' tabindex='1'></h1>
 				</div>
 			</div>
 
-			<div id='backgroundcover' class='fade'></div>
-			<div id='alertbox'
-				class='fade'
-				aria-labelledby='alertcaption alert-instructions'
-				tabindex='5'>
-				<div id='alertcaption'></div>
-				<div id='alert-instructions' class='reader-instructions'>Use the Tab key to cancel or confirm.</div>
-				<input id='cancelbtn'
-					aria-label='Cancel.'
-					class='cancel button'
-					type='button'>
-				<input id='okbtn'
-					aria-label='Confirm.'
-					type='button'
-					class='submit button'
-					aria-describedby='submit-progress-reader'>
+			<div id='backgroundcover' class='fade'>
+				<div id='alertbox'
+					aria-labelledby='alertcaption alert-instructions'
+					tabindex='5'>
+					<div id='alertcaption'></div>
+					<div id='alert-instructions' class='reader-instructions'>Use the Escape key to cancel or the Return or Enter key to confirm.</div>
+					<input id='cancelbtn'
+						aria-label='Cancel.'
+						class='cancel button'
+						tabindex='0'
+						type='button'>
+					<input id='okbtn'
+						aria-label='Confirm.'
+						tabindex='0'
+						type='button'
+						class='submit button'
+						aria-describedby='submit-progress-reader'>
+				</div>
 			</div>
 
 			<div id='t_hints' style='display:none' class="clue">

diff --git a/src/player.scss b/src/player.scss
@@ -314,6 +314,10 @@ html, body {
 	border:0;
 	cursor: pointer;
 
+	&.removed{
+		display: none;
+	}
+
 	&.disabled{
 		opacity: 0.5;
 		cursor: default !important;
@@ -399,41 +403,51 @@ input {
 }
 
 #backgroundcover {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+
 	position: fixed;
-	top: 0px;
-	right: 0px;
-	bottom: 0px;
-	left: 0px;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: 9999;
 
 	max-height: 592;
 	max-width: 715;
 
-	background: #000;
-	z-index: -5;
+	background: rgba(0, 0, 0, 0.5);
+
+	pointer-events: none;
 	opacity: 0;
 
 	&.show {
-		opacity: 0.5;
-		z-index: 9999;
+		opacity: 1;
+		pointer-events: all;
 	}
 }
 
 #alertbox {
-	width: 300px;
-	left: 50%;
-	top: 49%;
-	margin-left: -250px;
-	margin-top: -50px;
+	display: block;
+	margin: 0 auto;
+	min-width: 300px;
+	max-width: 500px;
 	padding: 15px;
-	position: absolute;
 	background: #fff;
 	border: solid 1px #999;
 	border-radius: 0px;
-	z-index: 10000;
 	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
 	text-align: center;
-	display: none;
-	z-index: -5;
+
+	#alertcaption {
+		text-align: left;
+
+		br {
+			display: block;
+			height: 3px;
+		}
+	}
 
 	.button {
 		margin: 20px 10px 10px;
@@ -449,16 +463,11 @@ input {
 			color:white
 		}
 	}
-
-	&.show {
-		display: block;
-		z-index: 10000;
-	}
 }
 
 .fade {
-	-webkit-transition: all 0.2s ease;
-	transition: all 0.2s ease;
+	-webkit-transition: opacity 0.2s ease;
+	transition: opacity 0.2s ease;
 }
 
 .arrow_box {
@@ -543,7 +552,8 @@ input {
 	right: 50%;
 	top: 70px;
 	text-align: center;
-	display: inline-block;
+	pointer-events: none;
+	display: block;
 }
 .invisible-until-focused:focus {
 	opacity: 1;