<!doctype html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
	<link rel="stylesheet" href="../css/doctest.css">
	<script src="./3rdparty/highlight/highlight.pack.js"></script>
    <script src="../dist/iwmlib.3rdparty.js"></script>
	<script src="../dist/iwmlib.js"></script>
</head>
<body onload="Doctest.run()" >
<h1>
	Events
</h1>
<p>
For functional tests it can be useful to simulate event or record and playback events.
This module provides basic support for extracting data from events and serializing
events into a JSON format that allows to save and load sequences of events.
</p>
<p>
Let's look at an example of a HTML structure with click handlers. The click
handler actions log messages that can be tested.</p>
<pre><code class="html">
    &lt;div&gt;
        &lt;img id="women" src="examples/women.jpeg"
            onclick="record(event); Doctest.log('Lady clicked')"/&gt;
        &lt;video id="movie" width="270" data-zoomcap="Kugellaufuhr"
            onclick="record(event); Doctest.log('Movie clicked')"
            controls&gt;
            &lt;source src="examples/movie.mp4" type="video/mp4"&gt;
        &lt;/vide&gt;
    &lt;/div&gt;
</code></pre>
<div id="example" class="interactive"
    style="position:relative; width: 100%; border: 1px solid lightgray">
    <img style="margin:8px" id="women" src="examples/women.jpeg"
         onclick="record(event); Doctest.log('Lady clicked')"/>
    <video id="movie" style="margin:8px" width="250" data-zoomcap="Kugellaufuhr"
        onclick="record(event); Doctest.log('Movie clicked')"
        onmousedown="record(event)"
        onmouseup="record(event)"
        controls>
        <source src="examples/movie.mp4" type="video/mp4">
    </video>
</div>
<button onclick="eventRecorder.stopRecording(); eventRecorder.startReplay()">Replay</button>
<script class="doctest">

    var eventRecorder = new EventRecorder()

    function record(event) {
        let target = event.target
        target.style.boxShadow = "0px 5px 10px gray"
        setTimeout(() => target.style.boxShadow = "", 1000)
        eventRecorder.record(event)
    }

    let womenSel = Events.selector(women)
    let movieSel = Events.selector(movie)

    Events.simulateEvent('click', MouseEvent, { targetSelector: womenSel})
    Events.simulateEvent('click', MouseEvent, { targetSelector: movieSel})

    Doctest.expectLog('Lady clicked',
                        'Movie clicked')

</script>
<h2>
	References
</h2>
<ul>
    <li><a href="https://gist.github.com/iahu/aafc2492d83d70e42c98">Safari Touch Emulator</a></li>
    <li><a href="https://www.reddit.com/r/javascript/comments/2laqaf/how_to_trigger_a_touch_event/">How to Trigger Touch Events</a></li>
</ul>

</body>