Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!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</title>
<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;
}
label {
display: block;
}
/* ]]> */
</style>
<script>
/* <![CDATA[ */
function getErrorObj(message) {
var err = new Error(message);
err.name = "MyError";
return err;
}
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") {
searchPaneElement.style.visibility = 'hidden';
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":
searchPaneElement.style.visibility = 'visible';
break;
case "keypress":
result = "Key " + event.key;
if (event.key == "Escape") {
searchPaneElement.style.visibility = 'hidden';
searchBoxElement.value = "";
}
default:
throw getErrorObj("Unexpected case in searchBoxEventHandler");
}
}
function AddEventHandler(elementID, eventName) {
var handler = null;
switch (elementID) {
case 'searchPane':
handler = searchPaneEventHandler;
break;
case 'searchBox':
handler = searchBoxEventHandler;
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');
}
/* ]]> */
</script>
</head>
<body>
<h1>Events - close search pane with escape</h1>
<nav id="sidebar">
<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>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>
<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>
@JohnLukeBentley
Copy link
Author

JohnLukeBentley commented Mar 16, 2018

Cleaned up some superfluous code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment