<!DOCTYPE html>
<!--
 | Pointer events demo web page.
 | Can be used to verify that pointer events are generated and passed into the
 | correct DOM elements.
 -->
<html class="html">
<head class="head">
  <style>
    body {
      margin: 20px;
      background-color: #0000FF;
      font-size: 20px;
      font-family: Roboto;
    }
    .padded {
      padding: 20px;
      transition: border-left-color 1s linear, border-top-color 1s linear, outline-width 1s linear, outline-color 1s linear;
      background-clip: padding-box;
    }
    .top {
      transform-no: rotate(-45deg);
      display: inline-block;
    }
    .outer {
      background-color: #484;
      border: solid rgba(0, 0, 0, 0)  10px;
      outline: solid #00C0F0 5px;
    }
    .outer:hover {
      background-color: #848;
      border: solid white 10px;
      outline: solid #FF4000 20px;
    }
    .inner {
      animation: blink 1.1s infinite;
      background-color: #8F8;
      outline: solid rgba(0, 0, 0, 1) 0px;
    }
    .inner:hover {
      background-color: #F8F;
      outline: solid rgba(160, 160, 255, 0) 40px;
    }
    .leftswap {
      position:relative;
      left:+185px;
      top:0px;
    }
    .rightswap {
      position:relative;
      left:-185px;
      top:0px;
    }
    .pointereventsnone {
      pointer-events:none;
    }
    .pointereventsauto {
      pointer-events:auto;
    }

  </style>
  <script>
    function phasename(phase) {
      switch(phase) {
        case 0: return ' [none]';
        case 1: return ' [capturing]';
        case 2: return ' [at target]';
        case 3: return ' [bubbling]';
      }
      return ' [unknown: ' + phase + ']';
    }

    function sethandlers(event, classname, callback) {
      var elements = document.getElementsByClassName(classname);
      for (var i = 0; i < elements.length; ++i) {
        elements[i].addEventListener(event, callback);
      }
    }

    function setfocus(classname) {
      var elements = document.getElementsByClassName(classname);
      for (var i = 0; i < elements.length; ++i) {
        console.log('Setting focus \"' + elements[i].className + '\"');
        elements[i].focus();
      }
    }
    function log_event(e) {
      var pointertype = e.pointerType ? e.pointerType + ' ' : '';
      var id = this.getAttribute('id') ?
                   'id=\'' + this.getAttribute('id') + '\' ' : '';
      console.log(e.type + ' ' + pointertype +
                  id + '(' +
                  this.getAttribute('class') + ') ' +
                  phasename(e.eventPhase) +
                  ' (' + e.screenX + ',' + e.screenY + ')');
    }
    function cancel(e) {
      console.log('cancel');
      e.preventDefault();
    }
    function stop(e) {
      console.log('stop');
      e.stopPropagation();
    }
    function capture(e) {
      console.log('capture');
      e.target.setPointerCapture(e.pointerId);
    }
    function setallhandlers(prefix, classname, callback) {
      sethandlers(prefix + 'enter', classname, callback);
      sethandlers(prefix + 'leave', classname, callback);
      sethandlers(prefix + 'over', classname, callback);
      sethandlers(prefix + 'out', classname, callback);
      sethandlers(prefix + 'down', classname, callback);
      sethandlers(prefix + 'up', classname, callback);
      sethandlers(prefix + 'move', classname, callback);
    }

    window.onload = function() {
      setallhandlers('mouse', 'log', log_event);
      setallhandlers('pointer', 'log', log_event);
      setallhandlers('mouse', 'cancel', cancel);
      setallhandlers('pointer', 'cancel', cancel);
      setallhandlers('mouse', 'stop', stop);
      setallhandlers('pointer', 'stop', stop);
      sethandlers('pointerdown', 'capture', capture);
      setfocus('focus');

      document.addEventListener("keydown", e => {
          console.log('Do something on keydown');
      });

      var links = document.getElementsByClassName("clickhere");
      for (var i = 0; i < links.length; i++) {
        links[i].addEventListener("click", function(e) {
          console.log('Click received at (' + e.screenX + ',' + e.screenY +
                      ') on \"' + e.target.innerHTML + '\" during ' +
                      phasename(e.eventPhase));
        });
      }
    }
  </script>
</head>
<body class="body">
  <div class="topdiv">
  <span id="top-left" class="top log pointereventsnone clickhere">
    <div class="outer padded log pointereventsnone">
      <div class="inner padded one log pointereventsauto clickhere">One</div>
      <div class="inner padded two log capture stop cancel focus pointereventsauto clickhere" tabindex='0'>Two</div>
      <div class="inner padded three log stop pointereventsauto clickhere" tabindex='1'>Three</div>
      <div class="padded four log pointereventsauto clickhere">Four</div>
      <div class="inner padded five offsetx log pointereventsauto">Five offset x</div>
      <div class="inner padded six offsety log pointereventsauto">Six offset y</div>
      <div class="padded seven log pointereventsauto">Seven</div>
      <div class="inner padded eight log pointereventsauto">Eight</div>
      <div class="padded nine log pointereventsauto">Nine</div>
      <div class="inner padded leftswap log pointereventsauto">LeftSwap</div>
    </div>
  </span>
  <span id="top-divider" class="top" style="width:50px;"></span>
  <span id="top-right" class="top events">
    <div class="outer padded events">
      <div class="inner padded one events clickhere">One</div>
      <div class="inner padded two events clickhere">Two</div>
      <div class="inner padded three events clickhere">Three</div>
      <div class="padded four events clickhere">Four</div>
      <div class="inner padded five offsetx events">Five offset x</div>
      <div class="inner padded six offsety events">Six offset y</div>
      <div class="padded seven events">Seven</div>
      <div class="inner padded eight events">Eight</div>
      <div class="padded nine events">Nine</div>
      <div class="inner padded rightswap events">RightSwap</div>
    </div>
  </span>
  </div>
</body>
</html>