JohnLukeBentley/events-close-search-pane-with-escape.xhtml

## events-close-search-pane-with-escape.xhtml
<!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>
	<!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>