Skip to content

Instantly share code, notes, and snippets.

@shayc

shayc/index.html

Created April 20, 2020 07:06
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save shayc/ffb9c68b7d829eed29a3655529130150 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save shayc/ffb9c68b7d829eed29a3655529130150 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. shayc created this gist Apr 20, 2020.
    104 changes: 104 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,104 @@
    <html>
    <head>
    <title>Touch logger</title>
    <style>
    html,
    body {
    width: 100%;
    height: 100%;
    }

    body {
    display: flex;
    margin: 0;
    overflow: hidden;
    touch-action: none;
    }

    .box {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    }

    .box__header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    }

    .box__title {
    margin: 0;
    }

    .box__content {
    flex: 1;
    overflow: auto;
    }

    #touch {
    background: #ddd;
    }
    </style>
    </head>
    <body>
    <section class="box" id="log">
    <header class="box__header">
    <h2 class="box__title">Events log</h2>
    <button id="clear-log" type="button">Clear</button>
    </header>
    <div class="box__content"></div>
    </section>

    <section class="box" id="touch">
    <h2 class="box__title">Touch area</h2>
    </section>

    <script>
    const logElement = document.querySelector('#log .box__content');
    const touchElement = document.querySelector('#touch');
    const clearLogButton = document.querySelector('#clear-log');

    function scrollToBottom(element) {
    element.scrollTop = element.scrollHeight;
    }

    function addLogEntry({ type, timeStamp, fingerCount }) {
    const entryHTML = `<div>${timeStamp}: ${type} ${fingerCount}</div>`;

    logElement.innerHTML = fingerCount
    ? logElement.innerHTML + entryHTML
    : logElement.innerHTML + entryHTML + '<div>---</div>';
    }

    function handleTouch(event) {
    const { type, timeStamp, touches } = event;

    const entry = {
    type,
    timeStamp: timeStamp.toFixed(2),
    fingerCount: touches.length,
    };

    addLogEntry(entry);
    scrollToBottom(logElement);

    console.log(type, event);
    }

    function handleContextmenu(event) {
    event.preventDefault();
    }

    function handleClearLogClick() {
    logElement.innerHTML = '';
    }

    clearLogButton.addEventListener('click', handleClearLogClick);
    touchElement.addEventListener('contextmenu', handleContextmenu);
    touchElement.addEventListener('touchstart', handleTouch);
    touchElement.addEventListener('touchend', handleTouch);
    </script>
    </body>
    </html>