diff --git a/src/_boot.js b/src/_boot.js index 04bceeade11b859e6c79671071700b2987fbf301..9cd0dc71c0f0302efed632b20180363c59e23bd1 100644 --- a/src/_boot.js +++ b/src/_boot.js @@ -20,6 +20,7 @@ const ipc = electron.ipcMain; const path = require("path"); const url = require("url"); const fs = require("fs"); +const clip = require("clipboardy"); const Terminal = require("./classes/terminal.class.js").Terminal; ipc.on("log", (e, type, content) => { @@ -108,6 +109,19 @@ app.on('ready', () => { signale.watch("Waiting for frontend connection..."); }; + // Clipboard backend access + ipc.on("clipboard", (e, arg) => { + switch(arg) { + case "read": + clip.read().then(text => { + e.sender.send("clipboard-reply", text); + }); + break; + default: + throw new Error("Illegal clipboard access request"); + } + }); + signale.info("Creating window..."); let {x, y, width, height} = electron.screen.getPrimaryDisplay().bounds; width++; height++; diff --git a/src/_renderer.js b/src/_renderer.js index 3b25f90d6b5ed26b680285ef38de56145f562193..30091d21978e35a3bb31abdce6a73440e7cc82b6 100644 --- a/src/_renderer.js +++ b/src/_renderer.js @@ -223,6 +223,7 @@ initMods = () => { window.mods.sysinfo = new Sysinfo("mod_column_left"); window.mods.cpuinfo = new Cpuinfo("mod_column_left"); window.mods.ramwatcher = new RAMwatcher("mod_column_left"); + window.mods.clipboardButtons = new ClipboardButtons("mod_column_left"); // Right column window.mods.netstat = new Netstat("mod_column_right"); diff --git a/src/assets/css/mod_clipboardButtons.css b/src/assets/css/mod_clipboardButtons.css new file mode 100644 index 0000000000000000000000000000000000000000..07eb8b9b335fd711ee5abbd6290d8b458be53906 --- /dev/null +++ b/src/assets/css/mod_clipboardButtons.css @@ -0,0 +1,63 @@ +div#mod_clipboardButtons { + border-top: 0.092vh solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.3); + font-family: var(--font_main_light); + letter-spacing: 0.092vh; + padding: 0.645vh 0vh; + display: flex; +} + +div#mod_clipboardButtons::before { + content: ""; + border-left: 0.092vh solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.3); + align-self: flex-start; + position: relative; + left: -0.092vh; + top: -1.111vh; + height: 0.833vh; +} + +div#mod_clipboardButtons::after { + content: ""; + border-right: 0.092vh solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.3); + position: relative; + right: -0.092vh; + top: -1.111vh; + height: 0.833vh; +} + +div#mod_clipboardButtons_inner { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-evenly; + flex-wrap: wrap; + width: 100%; +} + +div#mod_clipboardButtons h1 { + font-size: 1.48vh; + margin: 0vh; + margin-bottom: -1vh; + width: 98%; +} + +div#mod_clipboardButtons_inner div { + margin-top: 1.2vh; + background: rgba(var(--color_r), var(--color_g), var(--color_b), 0.1); + height: 3.8vh; + width: 45%; + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + border: 2px solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.5); + border-radius: 2px; + font-family: var(--font_main); + font-weight: bold; + font-size: 1.5vh; + cursor: pointer; +} + +div#mod_clipboardButtons_inner div:active { + background: rgba(var(--color_r), var(--color_g), var(--color_b), 0.8); +} diff --git a/src/assets/css/mod_ramwatcher.css b/src/assets/css/mod_ramwatcher.css index 88d0a32e3f084707bc4f1ef7e56768144ffc5959..725c20a831edcb6b8b4de53a3a2061f782d8c7b3 100644 --- a/src/assets/css/mod_ramwatcher.css +++ b/src/assets/css/mod_ramwatcher.css @@ -58,6 +58,7 @@ div#mod_ramwatcher_pointmap { grid-gap: 0.23vh; padding-top: 0.5vh; padding-left: 0.5vh; + margin-bottom: 0.8vh; } div.mod_ramwatcher_point { diff --git a/src/classes/clipboardButtons.class.js b/src/classes/clipboardButtons.class.js new file mode 100644 index 0000000000000000000000000000000000000000..c853f27944b8797fd7da318fbc42979372d83300 --- /dev/null +++ b/src/classes/clipboardButtons.class.js @@ -0,0 +1,28 @@ +class ClipboardButtons { + constructor(parentId) { + if (!parentId) throw "Missing parameters"; + + // Create DOM + this.parent = document.getElementById(parentId); + this._element = document.createElement("div"); + this._element.setAttribute("id", "mod_clipboardButtons"); + this._element.innerHTML = `
+

CLIPBOARD ACCESS

+
COPY
+
PASTE
+
`; + + this.parent.append(this._element); + + document.querySelector("div#mod_clipboardButtons_inner > div:nth-child(2)").addEventListener("click", e => { + window.term.clipboard.copy(); + }); + document.querySelector("div#mod_clipboardButtons_inner > div:last-child").addEventListener("click", e => { + window.term.clipboard.paste(); + }); + } +} + +module.exports = { + ClipboardButtons +}; diff --git a/src/classes/keyboard.class.js b/src/classes/keyboard.class.js index 92013e74b78726ea6cc3ea2d3947091812381c65..50c901a0ebccf81f6eb918f159c012208239967e 100644 --- a/src/classes/keyboard.class.js +++ b/src/classes/keyboard.class.js @@ -195,7 +195,9 @@ class Keyboard { } else if (cmd === "\n") { term.writelr(""); } else if (cmd === ctrlseq[19] && window.term.term.hasSelection()) { - window.term.copy(); + window.term.clipboard.copy(); + } else if (cmd === ctrlseq[20] && window.term.clipboard.didCopy) { + window.term.clipboard.paste(); } else { term.write(cmd); } diff --git a/src/classes/terminal.class.js b/src/classes/terminal.class.js index 4c66e45e24dfe3b8a9991d2ffe9bf39d7a0948f6..d4832b440b222b3507167245af7d0bb455ab7539 100644 --- a/src/classes/terminal.class.js +++ b/src/classes/terminal.class.js @@ -166,11 +166,23 @@ class Terminal { this.socket.send(cmd+"\r"); }; - this.copy = () => { - if (!this.term.hasSelection()) return false; - document.execCommand("copy"); - this.term.clearSelection(); - }; + this.clipboard = { + copy: () => { + if (!this.term.hasSelection()) return false; + document.execCommand("copy"); + this.term.clearSelection(); + this.clipboard.didCopy = true; + }, + paste: () => { + this.Ipc.once("clipboard-reply", (e, txt) => { + this.write(txt); + this.clipboard.didCopy = false; + }); + this.Ipc.send("clipboard", "read"); + }, + didCopy: false + } + } else if (opts.role === "server") { this.Pty = require("node-pty"); diff --git a/src/package-lock.json b/src/package-lock.json index 2dfd6b43b037fdfa500cb36e7ac199d93dd2c679..8a96f768bd4e562f576519e499d93888e6c5717c 100644 --- a/src/package-lock.json +++ b/src/package-lock.json @@ -12,6 +12,11 @@ "color-convert": "^1.9.0" } }, + "arch": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/arch/-/arch-2.1.1.tgz", + "integrity": "sha512-BLM56aPo9vLLFVa8+/+pJLnrZ7QGGTVHWsCwieAWT9o9K8UeGaQbzZbGoabWLOo2ksBCztoXdqBZBplqLDDCSg==" + }, "async-limiter": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.0.tgz", @@ -70,6 +75,15 @@ "supports-color": "^5.3.0" } }, + "clipboardy": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-1.2.3.tgz", + "integrity": "sha512-2WNImOvCRe6r63Gk9pShfkwXsVtKCroMAevIbiae021mS850UkWPbevxsBz3tnvjZIEGvlwaqCPsw+4ulzNgJA==", + "requires": { + "arch": "^2.1.0", + "execa": "^0.8.0" + } + }, "color": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/color/-/color-3.0.0.tgz", diff --git a/src/package.json b/src/package.json index 9e59cef052b164bccf423717ddb3eda0c29877df..3339326f5e77aed52b4a6a882204b9de250ed1d7 100644 --- a/src/package.json +++ b/src/package.json @@ -24,6 +24,7 @@ "homepage": "https://github.com/GitSquared/edex-ui#readme", "dependencies": { "battery-level": "3.0.0", + "clipboardy": "1.2.3", "color": "3.0.0", "node-pty": "0.7.6", "pretty-bytes": "5.1.0", diff --git a/src/ui.html b/src/ui.html index d41a553860b8978be27513a87aef194bfe5a3e51..dde293eb9f3afbd99f8cc6dd113cf7d8423a644b 100644 --- a/src/ui.html +++ b/src/ui.html @@ -23,6 +23,7 @@ + @@ -38,6 +39,7 @@ +