Skip to content

Instantly share code, notes, and snippets.

@JohnLukeBentley

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

Created March 16, 2018 10:40
Download ZIP

Revisions

  1. JohnLukeBentley created this gist Mar 16, 2018.
    78 changes: 78 additions & 0 deletions events-close-search-pane-from-anywhere.xhtml
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,78 @@
    <!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>