✨ Closed #37 : mod_clipboardButtons

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++;

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");

src/assets/css/mod_clipboardButtons.css

+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);
+}

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 {

src/classes/clipboardButtons.class.js

+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 = `<div id="mod_clipboardButtons_inner">
+            <h1>CLIPBOARD ACCESS</h1>
+            <div>COPY</div>
+            <div>PASTE</div>
+        </div>`;
+
+        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
+};

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);
             }

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");

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",

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",

src/ui.html

@@ -23,6 +23,7 @@
         <link rel="stylesheet" href="assets/css/mod_conninfo.css" />
         <link rel="stylesheet" href="assets/css/mod_globe.css" />
         <link rel="stylesheet" href="assets/css/mod_ramwatcher.css" />
+        <link rel="stylesheet" href="assets/css/mod_clipboardButtons.css" />
 
         <!-- Load main modules classes -->
         <script src="classes/modal.class.js"></script>
@@ -38,6 +39,7 @@
         <script src="classes/conninfo.class.js"></script>
         <script src="classes/locationGlobe.class.js"></script>
         <script src="classes/ramwatcher.class.js"></script>
+        <script src="classes/clipboardButtons.class.js"></script>
     </head>
     <body class="solidBackground">
         <section id="boot_screen">