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 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>
@JohnLukeBentley
Copy link
Author

JohnLukeBentley commented Mar 19, 2018

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.

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