Merge pull request #1231 from atomgomba/feature-copy-cli-history-to-clipboard

Add button to copy CLI contents to clipboard

Author: mikeller

locales/en/messages.json

@@ -2256,6 +2256,12 @@
     "cliClearOutputHistoryBtn": {
         "message": "Clear output history"
     },
+    "cliCopyToClipboardBtn": {
+        "message": "Copy to clipboard"
+    },
+    "cliCopySuccessful": {
+        "message": "Copied!"
+    },
 
     "loggingNote": {
         "message": "Data will be logged in this tab <span class=\"message-negative\">only</span>, leaving the tab will <span class=\"message-negative\">cancel</span> logging and application will return to its normal <strong>\"configurator\"</strong> state.<br /> You are free to select the global update period, data will be written into the log file every <strong>1</strong> second for performance reasons."

src/js/main.js

@@ -283,7 +283,7 @@ function startProcess() {
                         TABS.onboard_logging.initialize(content_ready);
                         break;
                     case 'cli':
-                        TABS.cli.initialize(content_ready);
+                        TABS.cli.initialize(content_ready, nwGui);
                         break;
 
                     default:

src/js/tabs/cli.js

@@ -41,7 +41,49 @@ function getCliCommand(command, cliBuffer) {
     return commandWithBackSpaces(command, buffer, noOfCharsToDelete);
 }
 
-TABS.cli.initialize = function (callback) {
+function copyToClipboard(text, nwGui) {
+    function onCopySuccessful() {
+        const button = $('.tab-cli .copy');
+        const origText = button.text();
+        const origWidth = button.css("width");
+        button.text(i18n.getMessage("cliCopySuccessful"));
+        button.css({
+            width: origWidth,
+            textAlign: "center",
+        });
+        setTimeout(() => {
+            button.text(origText);
+            button.css({
+                width: "",
+                textAlign: "",
+            });
+        }, 1500);
+    }
+
+    function onCopyFailed(ex) {
+        console.warn(ex);
+    }
+
+    function nwCopy(text) {
+        try {
+            let clipboard = nwGui.Clipboard.get();
+            clipboard.set(text, "text");
+            onCopySuccessful();
+        } catch (ex) {
+            onCopyFailed(ex);
+        }
+    }
+
+    function webCopy(text) {
+        navigator.clipboard.writeText(text)
+            .then(onCopySuccessful, onCopyFailed);
+    }
+
+    let copyFunc = nwGui ? nwCopy : webCopy;
+    copyFunc(text);
+}
+
+TABS.cli.initialize = function (callback, nwGui) {
     var self = this;
 
     if (GUI.active_tab != 'cli') {
@@ -51,6 +93,9 @@ TABS.cli.initialize = function (callback) {
     self.outputHistory = "";
     self.cliBuffer = "";
 
+    // nwGui variable is set in main.js
+    const clipboardCopySupport = !(nwGui == null && !navigator.clipboard);
+
     $('#content').load("./tabs/cli.html", function () {
         // translate to user-selected language
         i18n.localizePage();
@@ -107,6 +152,14 @@ TABS.cli.initialize = function (callback) {
             $('.tab-cli .window .wrapper').empty();
         });
 
+        if (clipboardCopySupport) {
+            $('.tab-cli .copy').click(function() {
+                copyToClipboard(self.outputHistory, nwGui);
+            });
+        } else {
+            $('.tab-cli .copy').hide();
+        }
+
         // Tab key detection must be on keydown,
         // `keypress`/`keyup` happens too late, as `textarea` will have already lost focus.
         textarea.keydown(function (event) {

src/tabs/cli.html

@@ -17,6 +17,7 @@
         <div class="btn save_btn pull-right">
             <a class="save" href="#" i18n="cliSaveToFileBtn"></a>
             <a class="clear" href="#" i18n="cliClearOutputHistoryBtn"></a>
+            <a class="copy" href="#" i18n="cliCopyToClipboardBtn"></a>
         </div>
     </div>
 </div>