#273 #298 add clipboard test page

Xpra-org · May 11, 2024 · 68f6b36 · 68f6b36
1 parent fe55d1a
commit 68f6b36
Showing 1 changed file with 171 additions and 0 deletions.
diff --git a/html5/clipboard.html b/html5/clipboard.html
@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!--
+	Copyright (c) 2024 Antoine Martin <antoine@xpra.org>
+	Licensed under MPL 2.0
+	-->
+
+    <title>Xpra HTML5 Clipboard Test Page</title>
+    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="icon" type="image/png" href="favicon.png" />
+
+  </head>
+
+  <body>
+    <div class="container">
+      <form action="./index.html">
+
+        <div>
+          <label for="input">Input</label>
+          <input
+            title="Server"
+            type="text"
+            class="form-control"
+            id="input"
+            placeholder="Server"
+            maxlength="256"
+          />
+        </div>
+
+        <hr />
+
+        <div>
+          <input type="checkbox" id="autofocus" />
+          <br />
+          <label for="pasteboard">Pasteboard:</label><br/>
+          <textarea id="pasteboard" readonly></textarea>
+        </div>
+
+        <hr />
+
+        <div>
+          <label for="contents">Contents:</label><br/>
+          <pre id="contents"></pre>
+        </div>
+
+        <hr />
+
+        <div>
+          <label for="info">Events:</label><br/>
+          <pre id="info"></pre>
+        </div>
+
+        <hr />
+
+        <button type="button" id="readText">readText()</button>
+        <br />
+        <button type="button" id="read">read()</button>
+        <input type="text" id="format" value="text/html" />
+
+      </form>
+    </div>
+
+    <script>
+      const info = document.getElementById("info");
+      const lines = [];
+
+      function update_info(newtext) {
+        console.log(newtext);
+        while (lines.length>10) {
+          lines.shift();
+        }
+        lines.push(newtext);
+        info.innerText = lines.join("\n");
+      }
+
+      const autofocus = document.getElementById("autofocus");
+      const pasteboard = document.getElementById("pasteboard");
+
+      pasteboard.onblur = function() {
+        if (autofocus.checked) {
+          pasteboard.focus();
+        }
+      }
+
+      autofocus.onchange = function () {
+        pasteboard.autofocus = autofocus.checked;
+        if (autofocus.checked) {
+          pasteboard.focus();
+        }
+      }
+
+      const contents = document.getElementById("contents");
+
+      if (navigator.clipboard) {
+        update_info("`navigator.clipboard` found");
+        if (navigator.clipboard.clipboardData) {
+          update_info("`navigator.clipboard.clipboardData` found");
+        }
+        else {
+          update_info("No `navigator.clipboard.clipboardData`");
+        }
+      }
+      else {
+        update_info("Error: `navigator.clipboard` is missing!");
+      }
+
+      function read_clipboard_data(format) {
+        update_info("requesting "+format);
+        navigator.clipboard.read().then((data) => {
+          update_info("got "+format+" clipboard data: "+data);
+          for (const item of data) {
+            for (const type of item.types) {
+              const item_data = item.getType(type).then((item_data) => {
+                update_info("got "+type+"="+item_data);
+                const fileReader = new FileReader();
+                fileReader.addEventListener("load", (event) => {
+                  update_info("loaded "+type+"="+event+" using "+event.target);
+                  update_info("result="+event.target.result);
+                },
+                (error) => {
+                  update_info("failed to load "+type+" clipboard data: "+error);
+                });
+                fileReader.readAsText(item_data);
+              },
+              (error) => {
+                update_info("failed to get "+type+" clipboard data: "+error);
+              });
+            }
+          }
+          contents.innerText = data;
+        },
+        (error) => {
+          update_info("failed to read "+format+": "+error);
+        });
+      }
+      if (navigator.clipboard.read) {
+        read_clipboard_data("text/html");
+        read_clipboard_data("text/plain");
+      }
+      else {
+        update_info("missing `navigator.clipboard.read`");
+      }
+
+      function read_clipboard_text() {
+        update_info("requesting contents via readText()");
+        navigator.clipboard.readText().then((text) => {
+          update_info("readText() clipboard data: '"+text+"'");
+          contents.innerText = text;
+          // const clipboard_buffer = unescape(encodeURIComponent(text));
+        },
+        (error) => {
+          update_info("failed to readText(): "+error);
+        });
+      }
+      read_clipboard_text();
+
+      const read = document.getElementById("read");
+      const readText = document.getElementById("readText");
+      const format = document.getElementById("format");
+
+      read.onclick = function() {
+        const fmt = format.value;
+        read_clipboard_data(fmt);
+      }
+      readText.onclick = function() {
+        read_clipboard_text();
+      }
+    </script>
+  </body>
+</html>