<?xml version="1.0"  encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="xmlspec.xml"?>
<spec role="editors-copy">
  <header>
    <title>Touch and Gestures Events</title>
    <version>1.0</version>
    <authlist>
      <author>
        <name>Olli Pettay</name>
        <email>Olli@pettay.fi</email>
      </author>
    </authlist>
    <status>Draft</status>
    <abstract>blaa blaa</abstract>
    <copyright>Copyright &#169; ..., All rights reserved.</copyright>
  </header>
  <body>
    <div1>
      <head>Pointer events</head>
      <pre>
      interface PointerEvent : UIEvent {
        readonly attribute long streamId;

        readonly attribute long screenX;
        readonly attribute long screenY;

        readonly attribute long clientX;
        readonly attribute long clientY;

        readonly attribute boolean ctrlKey;
        readonly attribute boolean shiftKey;
        readonly attribute boolean altKey;
        readonly attribute boolean metaKey;
        // This misses initPointerEvent method
      };
    </pre>
    </div1>
    <div1>
      <head>Touch events</head>
      <p>
      Touch events are...
      </p>
      <p>
        One event per touch.
      </p>
      <pre>
      interface TouchEvent : PointerEvent {
        //XXX 0 - 1 ? or what?
        readonly attribute float pressure;

        readonly attribute long size; // pixels

        // This misses initTouchEvent method
      };
      </pre>
      <p>
        Event types: touchdown, touchmove, touchup, touchover, touchout
      </p>
    </div1>
    <div1>
      <head>Gesture events</head>
      <p>
      Gesture events are...
      </p>
      <pre>
        interface GestureEvent : PointerEvent {
           // degrees
          readonly attribute float direction;
          readonly attribute float delta;
          // UIEvent detail can be used too
          // No need for pan speed or anything.
          // This misses initGestureEvent
        };
      </pre>
      <p>
        Event types: gestureStart, gestureEnd, pan, rotate, zoom.
      </p>
      <eg><![CDATA[
        <html>
          <head>
            <script>

              var eventsToProcess = new Array();
              var heartBeat;

              function processEvents() {
                // Here the event data could be collapsed together to
                // speed up processing.
                while (eventsToProcess.length()) {
                  var evt = eventsToProcess.shift();
                  switch(evt.type) {
                    case "pan":
                      // Do something
                      break;
                    case "rotate":
                      // Do something
                      break;
                    case "zoom":
                      // Do something
                      break;
                  }
                }
              }

              function heartBeatProcess(evt) { eventsToProcess.push(evt); }

              window.addEventListener("gestureStart",
                                      function(evt) {
                                        heartBeat = setInterval(processEvents, 50);
                                      },
                                      true);
              window.addEventListener("gestureEnd",
                                      function(evt) {
                                        clearInterval(heartBeat);
                                      },
                                      true);

              window.addEventListener("pan", heartBeatProcess, true);
              window.addEventListener("rotate", heartBeatProcess, true);
              window.addEventListener("zoom", heartBeatProcess, true);
            </script>
          </head>
          <body>
            Text content...
          </body>
        </html>
      ]]></eg>
    </div1>
  </body>
</spec>

