xpra icon
Bug tracker and wiki

Ticket #1689: test.html

File test.html, 7.7 KB (added by Antoine Martin, 2 years ago)

page similar to the client, clipboard works here...

Line 
1<html>
2        <head>
3                <title>xpra websockets client</title>
4                <meta charset="utf-8">
5                <meta name="description" content="xpra websockets client">
6
7                <link rel="stylesheet" href="css/client.css">
8                <link rel="stylesheet" href="css/spinner.css">
9
10                <script type="text/javascript" src="js/lib/jquery.js"></script>
11        </head>
12        <body>
13                <div id="dpi" style="width: 1in; height: 1in; left: -100%; top: -100%; position: absolute;">
14                </div>
15
16                <div id="progress" class="overlay" style="display: none">
17                        <p id="progress-label"></p>
18                        <p id="progress-details"></p>
19                        <progress id="progress-bar" max="100" value="10"></progress>
20                </div>
21
22                <div id="screen" style="width: 100%; height:100%;">
23                </div>
24
25                <div class="notifications">
26                </div>
27
28                <div id="1" class="wmclass-XTerm window window-NORMAL ui-draggable ui-draggable-handle ui-resizable wmclass-xterm windowinfocus" style="opacity: 1; z-index: 7501; width: 499px; height: 346px; left: 0px; top: -40px; cursor: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAA/ElEQVR4nO2UMU7DQBBF39gISxTRtmk5B+6pI07gJifhHvYN8AHwFpS01NQpsFeWiBSFyEORtRS5cBY5aZB/s6OZnf92mw+zpqgoihf1qut629fW2g8RuZsMcM7tjDEqIpplmSZJooA65w7GmFWIx83YsCzLd+fcA4CIoKoAWGu/2raNpn4AYAlkenRWfz4Da+D+EoAIWAwAK2DhZ0EGY+qA3aD343vdJQCTNQNmwD8BDO9EgXvndRrX+Ki4SlwDmqapxnH857geVZ7nb/2rm6bZ93VVVRsReQrxkDPzJfAIGODAMeBugW/gFficCoi8YQToyU4H7AlM1KvqFy2clxcAefJYAAAAAElFTkSuQmCC&quot;) 11 12, auto;"><div id="spinner1" class="spinneroverlay" style="display: none;"><div class="spinnermiddle"><div class="spinner"></div></div></div><div id="head1" class="windowhead"> <span class="windowicon"><img src="data:image/png;base64,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" id="windowicon1"></span> <span class="windowtitle" id="title1" style="left: 32px;">antoine@desktop:~/projects/Xpra/trunk/src</span> <span class="windowbuttons"> <span id="maximize1"><img src="../icons/maximize.png"></span> <span id="close1"><img src="../icons/close.png"></span> </span></div><canvas width="499" height="316"></canvas><div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div></div></div>
29
30            <div contenteditable="true">
31                    <textarea id="pasteboard" onblur="this.focus()" autofocus="autofocus" style="display: block; position: absolute; left: -99em;"></textarea>
32            </div>
33
34                <script>
35
36                            var pasteboard = $('#pasteboard');
37                            console.log("pasteboard=", pasteboard);
38                                if (true) {
39                                    //clipboard hooks:
40                                    $(document).on('paste', '[contenteditable]', function(e) {
41                                                var paste_data = (e.originalEvent || e).clipboardData.getData('text/plain');
42                                                console.log("paste event, data=", paste_data);
43                                        return false;
44                                        });
45                                    $(document).on('copy','[contenteditable]',function(e) {
46                                        console.log("copy event");
47                                        return true;
48                                        });
49                                    $(document).on('cut','[contenteditable]',function(e) {
50                                        var clipboard_buffer = client.get_clipboard_buffer();
51                                        $('#pasteboard').text(decodeURIComponent(escape(clipboard_buffer)));
52                                        $('#pasteboard').select();
53                                                console.log("cut event, clipboard buffer=", clipboard_buffer);
54                                        return true;
55                                        });
56                                        $('#screen').on('click', function (e) {
57                                                //console.log("click pending=", client.clipboard_pending, "buffer=", client.clipboard_buffer);
58                                                if (false) {
59                                                var clipboard_buffer = client.get_clipboard_buffer();
60                                                $('#pasteboard').text(clipboard_buffer);
61                                                $('#pasteboard').select();
62                                                        client.log("click event, with pending clipboard buffer=", clipboard_buffer);
63                                                        //for IE:
64                                                        var success = true;
65                                                        if (window.clipboardData && window.clipboardData.setData) {
66                                                        clipboardData.setData("Text", this.clipboard_buffer);
67                                                        }
68                                                    else {
69                                                                success = document.execCommand('copy');
70                                                                //console.log("copy success=", success);
71                                                        }
72                                                        if (success) {
73                                                        client.clipboard_pending = false;
74                                                        }
75                                                }
76                                        });
77                                }
78                                //keyboard input for tablets:
79                                pasteboard.on("input", function(e) {
80                                        var txt = pasteboard.val();
81                                        pasteboard.val("");
82                                        client._debug("oninput:", txt);
83                                        if (!client.topwindow) {
84                                                return;
85                                        }
86                                        for (var i = 0, len = txt.length; i < len; i++) {
87                                                var str = txt[i];
88                                                var keycode = str.charCodeAt(0);
89                                                try {
90                                                        modifiers = [];
91                                                        keyval = keycode;
92                                                        group = 0;
93                                                        packet = ["key-action", client.topwindow, str, true, modifiers, keyval, str, keycode, group];
94                                                        client._debug(packet);
95                                                        client.send(packet);
96                                                        packet = ["key-action", client.topwindow, str, false, modifiers, keyval, str, keycode, group];
97                                                        client._debug(packet);
98                                                        client.send(packet);
99                                                }
100                                                catch (e) {
101                                                        client.error("input handling error: "+e);
102                                                }
103                                        }
104                                });
105                </script>
106        </body>
107</html>