Last active
March 19, 2018 06:18
-
-
Save JohnLukeBentley/7c1f8f8731cee020224ab42bebc4789a to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> | |
<head> | |
<meta charset="utf-8" /> | |
<title>Events - close search pane with escape 02 - 2018-03-19 06:15Z</title> | |
<!-- events-close-search-pane-with-escape.xhtml is a gist of an earlier version of the code below --> | |
<style> | |
/* <![CDATA[ */ | |
/* A comment */ | |
input, nav, select { | |
width: 200px; | |
padding: 0; | |
} | |
nav, select { | |
color: yellow; | |
} | |
nav { | |
float: left; | |
} | |
main { | |
margin-left: 250px; | |
} | |
#sidebar { | |
background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px); | |
height: 500px; | |
} | |
#searchPane { | |
background-color: rgb(0, 120, 0, 0.5); | |
height: 150px; | |
/* visibility: hidden; */ | |
display: none; | |
} | |
label { | |
display: block; | |
} | |
/* ]]> */ | |
</style> | |
<script> | |
/* <![CDATA[ */ | |
function getErrorObj(message) { | |
var err = new Error(message); | |
err.name = "MyError"; | |
return err; | |
} | |
/** A pair of "appear/disapper" functions to hide implementation details | |
E.g. between visibility = 'hidden'; and display = none. **/ | |
function disappearElement(element){ | |
// element.style.visibility = 'hidden'; | |
element.style.display = 'none'; | |
} | |
function appearElement(element) { | |
// element.style.visibility = 'visible'; | |
element.style.display = 'block'; | |
} | |
function searchPaneEventHandler(event) { | |
var result = ""; | |
var searchPaneElement = document.getElementById('searchPane'); | |
var searchBoxElement = document.getElementById('searchBox'); | |
switch (event.type) { | |
case "mouseover": | |
result = "In Search Pane"; | |
break; | |
case "mouseout": | |
result = "Out of Search Pane"; | |
break; | |
case "mousemove": | |
result = "Mousemove:" | |
result += " Layer: " + event.layerX; | |
result += " Page: " + event.pageX; | |
result += " Client: " + event.clientX; | |
result += " Screen: " + event.screenX; | |
break; | |
case "keypress": | |
result = "Key " + event.key; | |
if (event.key == "Escape") { | |
disappearElement(searchPaneElement); | |
document.getElementById('searchBox').focus(); | |
} | |
break; | |
default: | |
throw getErrorObj("Unexpected case in searchPaneEventHandler"); | |
} | |
document.getElementById('searchPaneEventStatus').childNodes[0].nodeValue = result; | |
} | |
function searchBoxEventHandler(event) { | |
var result = ""; | |
var searchPaneElement = document.getElementById('searchPane'); | |
var searchBoxElement = document.getElementById('searchBox'); | |
switch (event.type) { | |
case "input": | |
appearElement(searchPaneElement); | |
break; | |
case "keypress": | |
result = "Key " + event.key; | |
if (event.key == "Escape") { | |
disappearElement(searchPaneElement); | |
searchBoxElement.value = ""; | |
} | |
default: | |
throw getErrorObj("Unexpected case in searchBoxEventHandler"); | |
} | |
} | |
function sidebarEventHandler(event) { | |
var result = ""; | |
var searchPaneElement = document.getElementById('searchPane'); | |
var searchBoxElement = document.getElementById('searchBox'); | |
switch (event.type) { | |
case "keypress": | |
result = "Key " + event.key; | |
if (event.key == "Escape") { | |
disappearElement(searchPaneElement); | |
searchBoxElement.focus(); | |
} | |
break; | |
default: | |
throw getErrorObj("Unexpected case in searchBoxEventHandler"); | |
} | |
document.getElementById('searchPaneEventStatus').childNodes[0].nodeValue = result; | |
} | |
function AddEventHandler(elementID, eventName) { | |
var handler = null; | |
switch (elementID) { | |
case 'searchPane': | |
handler = searchPaneEventHandler; | |
break; | |
case 'searchBox': | |
handler = searchBoxEventHandler; | |
break; | |
case 'sidebar': | |
handler = sidebarEventHandler; | |
break; | |
default: | |
throw getErrorObj("Unexpected case in AddEventHandler"); | |
} | |
document.getElementById(elementID).addEventListener(eventName, handler, true); | |
} | |
window.onload = function() { | |
AddEventHandler('searchPane', 'mouseover'); | |
AddEventHandler('searchPane', 'mouseout'); | |
AddEventHandler('searchPane', 'mousemove'); | |
AddEventHandler('searchPane', 'keypress'); | |
AddEventHandler('searchBox', 'input'); | |
AddEventHandler('searchBox', 'keypress'); | |
AddEventHandler('sidebar', 'keypress'); | |
} | |
/* ]]> */ | |
</script> | |
</head> | |
<body> | |
<h1>Events - close search pane with escape 02 - 2018-03-19 06:15Z</h1> | |
<nav id="sidebar" tabindex="1"> | |
<form> | |
<input name="searchBox" id="searchBox" /> | |
</form> | |
<!-- For divs the tabindex needs to be set to receive focus --> | |
<!-- <div id="searchPane" tabindex="1">Search Pane</div> --> | |
<select id="searchPane" multiple="multiple"> | |
<option>Some bookmark</option> | |
<option>Another bookmark</option> | |
<option>A third bookmark</option> | |
</select> | |
Sidebar | |
</nav> | |
<main> | |
<p>Test scenarios ...</p> | |
<p>Update 2018-03-19 06:15Z: Corrected text for Test 4 which was previously identical to Test 3.</p> | |
<p>Test 1: Escape from searchBox</p> | |
<ul> | |
<li>Enter text in searchBox. Observe searchPane is made visible.</li> | |
<li>Press escape. Observe searchPane is hidden and searchBox is cleared.</li> | |
</ul> | |
<p>Test 2: Escape from searchPane</p> | |
<ul> | |
<li>Enter text in searchBox. Observe searchPane is made visible.</li> | |
<li>Click on bookmark in searchPane.</li> | |
<li>Press escape. Observe searchPane is hidden and searchBox gets focus.</li> | |
<li>Press escape. Observe searchBox is cleared.</li> | |
</ul> | |
<p>Test 3: No stealing of focus if you click outside the searchPane </p> | |
<ul> | |
<li>Enter text in searchBox. Observe searchPane is made visible.</li> | |
<li>Click on bookmark in searchPane.</li> | |
<li>Click in the "Dummy text box for focus testing". </li> | |
<li>Press escape. Observe searchPane and searchBox don't change state and aren't stealing focus.</li> | |
<li>Click on bookmark in searchPane.</li> | |
<li>Press escape. Observe searchPane is hidden and searchBox gets focus.</li> | |
<li>Press escape. Observe searchBox is cleared.</li> | |
</ul> | |
<p>Test 4: You can still close the searchPane after opening it, if you merely move your mouse cursor anywhere else in the window</p> | |
<ul> | |
<li>Enter text in searchBox. Observe searchPane is made visible.</li> | |
<li>Click on bookmark in searchPane.</li> | |
<li>Click on blue part of sideBar</li> | |
<li>Press escape. Observe searchPane is hidden and searchBox gets focus.</li> | |
<li>Press escape. Observe searchBox is cleared.</li> | |
</ul> | |
<p>Test 5: You can still close the searchPane after opening it, even if you click in the non-searchPane areas of the searchBar.</p> | |
<ul> | |
<li>Enter text in searchBox. Observe searchPane is made visible.</li> | |
<li>Click on bookmark in searchPane.</li> | |
<li>Click on the blue area of the sidebar</li> | |
<li>Press escape. Observe searchPane is hidden and searchBox gets focus.</li> | |
</ul> | |
<form> | |
<label>Search Pane Event Status: | |
<output id="searchPaneEventStatus">To be overwritten</output> | |
</label> | |
<label>Dummy text box for focus testing | |
<input /> | |
</label> | |
</form> | |
</main> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Events - close search pane with escape 02 - 2018-03-19 06:15Z.
Update 2018-03-19 06:15Z: Corrected text for Test 4 which was previously identical to Test 3.