Errata for Touch Events: 5.3 Usage Examples - code formatting

The code formatting on the examples in 
http://www.w3.org/TR/touch-events/#usage-examples is a bit confusing at 
the moment, with some weird indentation and some overlay long lines (and 
lack of a <script></script> element).

Could these be prettified/rationalised a bit? See below:

Example 1:

<div id='touchable'>This element is touchable.</div>

<script>
document.getElementById('touchable').addEventListener('touchstart', 
function(ev) {

     if (ev.touches.item(0) == ev.targetTouches.item(0))
     {
         /*
          * If the first touch on the surface is also targeting the
          * "touchable" element, the code below should execute.
          * Since targetTouches is a subset of touches which covers the
          * entire surface, TouchEvent.touches >= TouchEvents.targetTouches
          * is always true.
          */
         document.write('Hello Touch Events!');
     }

     if (ev.touches.length == ev.targetTouches.length)
     {
         /*
          * If all of the active touch points are on the "touchable"
          * element, the length properties should be the same.
          */
         document.write('All points are on target element')
     }

     if (ev.touches.length > 1)
     {
         /*
          * On a single touch input device, there can only be one point
          * of contact on the surface, so the following code can only
          * execute when the terminal supports multiple touches.
          */
         document.write('Hello Multiple Touch!');
     }

}, false);
</script>



Example 2:

<div id='touchable'>This element is touchable.</div>

<script>
document.getElementById('touchable').addEventListener('touchend', 
function(ev) {
     /*
      * Example output when three touch points are on the surface,
      * two of them being on the "touchable" element and one point
      * in the "touchable" element is lifted from the surface:
      *
      * Touch points removed: 1
      * Touch points left on element: 1
      * Touch points left on document: 2
      */
     document.write('Removed: ' + ev.changedTouches.length);
     document.write('Remaining on element: ' + ev.targetTouches.length);
     document.write('Remaining on document: ' + ev.touches.length);
}, false);
</script>


P
-- 
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke

Received on Thursday, 30 October 2014 12:54:30 UTC