<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

<!DOCTYPE html>

<html>
<meta charset="UTF-8">
<head>
<title>Marionette Test</title>
</head>
<body>
  <h1 id="testh1">Test Page</h1>
  <button id="button1" style="position:absolute;left:0px;top:55px;" type="button" allowevents=true>button1</button>
  <button id="button2" style="position:absolute;left:0px;top:355px;" type="button" allowevents=true>button2</button>
  <button id="button3" style="position:absolute;left:0px;top:455px;" type="button" allowevents=true>button3</button>
  <button id="button4" style="position:absolute;left:100px;top:455px;" type="button" allowevents=true>button4</button>
  <button id="buttonScroll" style="position:absolute;left:100px;top:855px;" type="button" allowevents=true>buttonScroll</button>
  <h2 id="hidden" style="visibility: hidden" class="linkClass">Hidden</h2>
  <button id="buttonFlick" style="position:absolute;left:0px;top:255px;" type="button" allowevents=true>buttonFlick</button>
  <script type="text/javascript">
    let button3Timer = null;
    let button4Timer = null;
    //appends passed in text to the innerHTML of the event's target
    function appendText(text) {
      return function(evt) {
         let element;
         if (evt.type.includes("touch")) {
           if (evt.type == "touchstart") {
             element = evt.target;
           }
           else {
             //since the target of touchstart is the target of all subsequent events, then
             //changedTouches holds the current coordinates of this touch event, so we
             //use these coordinates to find the element under the touch event
             let touches = evt.changedTouches;
             let x = touches[0].clientX;
             let y = touches[0].clientY;
             element = document.elementFromPoint(x,y);
           }
         }
         //handle mouse events or contextmenu
         else {
          element = evt.target;
         }
         // eslint-disable-next-line no-unsanitized/property
         element.innerHTML += text;
      };
    };
    //use this function outside of attachListeners when you want to test sendMouseOnlyEvents on a target
    function attachMouseListeners(element) {
      element.addEventListener("contextmenu", appendText("-contextmenu"));
      element.addEventListener("mousedown", appendText("-mousedown"));
      element.addEventListener("mousemove", appendText("-mousemove"));
      element.addEventListener("mouseup", appendText("-mouseup"));
      element.addEventListener("click", appendText("-click"));
    };
    function attachListeners(id) {
      let element = document.getElementById(id);
      element.addEventListener("touchstart", appendText("-touchstart"));
      element.addEventListener("touchmove", appendText("-touchmove"));
      element.addEventListener("touchend", appendText("-touchend"));
      element.addEventListener("touchcancel", appendText("-touchcancel"));
      attachMouseListeners(element);
    };
    //for tracking time on an element
    function addTimers(id, timer) {
      let element = document.getElementById(id);
      element.addEventListener("touchstart", function(evt) { timer = (new Date()).getTime();});
      // eslint-disable-next-line no-unsanitized/property
      element.addEventListener("touchend", function(evt) { timer = (new Date()).getTime() - timer; evt.target.innerHTML += "-" + timer;});
    }
    attachListeners("button1");
    attachListeners("button2");
    attachListeners("button3");
    attachListeners("button4");
    attachListeners("buttonScroll");
    addTimers("button3");
    addTimers("button4");
    const buttonFlick = document.getElementById("buttonFlick");
    attachMouseListeners(buttonFlick);
    function createDelayed() {
      let newButton = document.createElement("button");
      newButton.id = "delayed";
      newButton.setAttribute("style", "position:absolute;left:220px;top:455px;");
      let content = document.createTextNode("delayed");
      newButton.appendChild(content);
      document.body.appendChild(newButton);
      newButton.addEventListener("mousemove", appendText("-mousemove"));
      newButton.addEventListener("mouseup", appendText("-mouseup"));
      newButton.addEventListener("click", appendText("-click"));
    };
    window.setTimeout(createDelayed, 5000);
  </script>
</body>
</html>
