domonic/events.html at master · byteface/domonic · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<html><head><title>Test Capturing Browser Events</title></head><script src="https://code.jquery.com/jquery-4.0.0.min.js"></script><body><script>
            const socket = new WebSocket("ws://0.0.0.0:5555");

            function stringify_object(object, depth=0, max_depth=2) {
                //console.log;
                // change max_depth to see more levels, for a touch event, 2 is good
                if (depth > max_depth)
                    return 'Object';

                const obj = {};
                for (let key in object) {
                    let value = object[key];
                    if (value instanceof Node)
                        // specify which properties you want to see from the node
                        value = {id: value.id};
                    else if (value instanceof Window)
                        value = 'Window';
                    else if (value instanceof Object)
                        value = stringify_object(value, depth+1, max_depth);

                    if(key=="originalEvent"){ // note im stripping this one off
                        continue;
                    }
                    obj[key] = value;
                }
                return depth? obj: JSON.stringify(obj);
            }

            function resolve_domonic_socket_target(target) {
                if (!target || target === "body")
                    return document.body;
                if (target === "window")
                    return window;
                if (target === "document")
                    return document;
                if (typeof target === "string")
                    return document.querySelector(target);
                return target;
            }

            function attach_domonic_listener(target, event_name) {
                const resolved = resolve_domonic_socket_target(target);
                if (!resolved || !resolved.addEventListener)
                    return;
                resolved.addEventListener(event_name, function(event) {
                    socket.send(stringify_object(event));
                }, false);
            }

            function register_domonic_socket_events(){
                attach_domonic_listener("body", "mousedown");
                attach_domonic_listener("body", "mousemove");
                attach_domonic_listener("body", "mouseup");
                attach_domonic_listener("body", "keydown");
                attach_domonic_listener("body", "keyup");
                attach_domonic_listener("window", "wheel");
                attach_domonic_listener("window", "cut");
                attach_domonic_listener("window", "copy");
                attach_domonic_listener("window", "paste");
                attach_domonic_listener("body", "drag");
                attach_domonic_listener("body", "dragend");
                attach_domonic_listener("body", "dragenter");
                attach_domonic_listener("body", "dragleave");
                attach_domonic_listener("body", "dragover");
                attach_domonic_listener("body", "dragstart");
                attach_domonic_listener("body", "drop");
                attach_domonic_listener("window", "hashchange");
            }

            if (document.readyState === "loading")
                document.addEventListener("DOMContentLoaded", register_domonic_socket_events);
            else
                register_domonic_socket_events();
</script><div class="dropzone"><div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">This div is draggable</div></div><div class="dropzone"></div></body></html>