JohnLukeBentley/events-close-search-pane-from-anywhere.xhtml

## events-close-search-pane-from-anywhere.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 from anywhere</title>

  <style>
    /* <![CDATA[ */
    /* A comment */
      div {
        width: 200px;
        color: yellow;
      }
      #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;
      }

      label { display: block;}
    /* ]]> */
  </style>

  <script>
  /* <![CDATA[ */

  function isHidden(element) {
    return (element.offsetParent === null)
  }

  function eventHandler(event) {
    var result = "";
    var searchPaneElement = document.getElementById('searchPane');

    switch(event.type) {
      case "keypress":
        result = "Key " + event.key;
        if (event.key == "Escape" && !isHidden(searchPaneElement)) {
          searchPaneElement.parentNode.removeChild(searchPaneElement);
          result += " (search pane closed)"
        }
        break;
      default:
        result = event.type;
    }
    document.getElementById('searchPaneEventStatus').childNodes[0].nodeValue = result;
   }

  window.onload = function() {
    document.addEventListener('keypress', eventHandler, true);
  }
  /* ]]> */
  </script>
</head>
<body>
  <h1>Events - close search pane from anywhere</h1>
  <p>Instructions:</p>
  <ul>
    <li>Position mouse cursor in middle of the window</li>
    <li>Right click to reveal the right click menu</li>
    <li>Press escape twice.</li>
  </ul>
  <div id="sidebar">
    <div id="searchPane" tabindex="1">Search Pane</div>
    Sidebar
  </div>
  <label>Search Pane Event Status: <output id="searchPaneEventStatus">Open</output></label>
</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 from anywhere</title>

	<style>
	/* <![CDATA[ */
	/* A comment */
	div {
	width: 200px;
	color: yellow;
	}
	#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;
	}

	label { display: block;}
	/* ]]> */
	</style>

	<script>
	/* <![CDATA[ */

	function isHidden(element) {
	return (element.offsetParent === null)
	}

	function eventHandler(event) {
	var result = "";
	var searchPaneElement = document.getElementById('searchPane');

	switch(event.type) {
	case "keypress":
	result = "Key " + event.key;
	if (event.key == "Escape" && !isHidden(searchPaneElement)) {
	searchPaneElement.parentNode.removeChild(searchPaneElement);
	result += " (search pane closed)"
	}
	break;
	default:
	result = event.type;
	}
	document.getElementById('searchPaneEventStatus').childNodes[0].nodeValue = result;
	}

	window.onload = function() {
	document.addEventListener('keypress', eventHandler, true);
	}
	/* ]]> */
	</script>
	</head>
	<body>
	<h1>Events - close search pane from anywhere</h1>
	<p>Instructions:</p>
	<ul>
	<li>Position mouse cursor in middle of the window</li>
	<li>Right click to reveal the right click menu</li>
	<li>Press escape twice.</li>
	</ul>
	<div id="sidebar">
	<div id="searchPane" tabindex="1">Search Pane</div>
	Sidebar
	</div>
	<label>Search Pane Event Status: <output id="searchPaneEventStatus">Open</output></label>
	</body>
	</html>