mirror of
https://github.com/GNS3/gns3-server.git
synced 2026-08-29 13:30:12 +03:00
193 lines
5.7 KiB
HTML
193 lines
5.7 KiB
HTML
<!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="Input" type="text" class="form-control" id="input" placeholder="Input" 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" />
|
|
|
|
<br />
|
|
<button type="button" id="exec-copy">execCommand("copy")</button>
|
|
<br />
|
|
<button type="button" id="exec-paste">execCommand("paste")</button>
|
|
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
const input = document.getElementById("input");
|
|
|
|
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.innerHTML = 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");
|
|
|
|
function show_event(e) {
|
|
// console.log("show_event:", e);
|
|
// console.log("event clipboard data:", (e.originalEvent || e).clipboardData);
|
|
}
|
|
|
|
read.onclick = function(e) {
|
|
show_event(e);
|
|
const fmt = format.value;
|
|
read_clipboard_data(fmt);
|
|
}
|
|
readText.onclick = function(e) {
|
|
show_event(e);
|
|
read_clipboard_text();
|
|
}
|
|
|
|
const exec_copy = document.getElementById("exec-copy");
|
|
exec_copy.onclick = function(e) {
|
|
input.select();
|
|
const copy = document.execCommand("copy");
|
|
update_info("copy=" + copy);
|
|
}
|
|
|
|
const exec_paste = document.getElementById("exec-paste");
|
|
exec_paste.onclick = function(e) {
|
|
input.select();
|
|
const paste = document.execCommand("paste");
|
|
update_info("paste=" + paste);
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|