Update notification when clipboard is updated

- use existing UI/API
- add 'noVNC_setting_notify_clipboard_received'
- add support for Clipboard module introduced with fb7e891841 (PR #1993)

app/styles/base.css

@@ -902,30 +902,6 @@ html {
 #noVNC_bell {
     display: none;
 }
-/* ----------------------------------------
- *
- * Styles for Showing the Clipboard updated
-*/
-.notification {
-  position: fixed;
-  top: 20px;
-  right: 20px;
-  background-color: grey;
-  color: white;
-  padding: 10px 20px;
-  border-radius: 8px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
-  font-family: sans-serif;
-  font-size: 16px;
-  opacity: 1;
-  transition: opacity 0.5s ease;
-  z-index: 9999;
-}
-
-.fade-out {
-  opacity: 0;
-}
-
 
 /* ----------------------------------------
  * Media sizing

app/ui.js

@@ -185,6 +185,7 @@ const UI = {
         UI.initSetting('bell', 'on');
         UI.initSetting('view_only', false);
         UI.initSetting('show_dot', false);
+        UI.initSetting('notify_clipboard_received', false);
         UI.initSetting('path', 'websockify');
         UI.initSetting('repeaterID', '');
         UI.initSetting('reconnect', false);
@@ -371,6 +372,8 @@ const UI = {
         UI.addSettingChangeHandler('view_only', UI.updateViewOnly);
         UI.addSettingChangeHandler('show_dot');
         UI.addSettingChangeHandler('show_dot', UI.updateShowDotCursor);
+        UI.addSettingChangeHandler('notify_clipboard_received');
+        UI.addSettingChangeHandler('notify_clipboard_received', UI.updateNotifyClipboardReceived);
         UI.addSettingChangeHandler('host');
         UI.addSettingChangeHandler('port');
         UI.addSettingChangeHandler('path');
@@ -892,6 +895,7 @@ const UI = {
         UI.updateSetting('logging');
         UI.updateSetting('reconnect');
         UI.updateSetting('reconnect_delay');
+        UI.updateSetting('notify_clipboard_received');
 
         document.getElementById('noVNC_settings')
             .classList.add("noVNC_open");
@@ -993,25 +997,17 @@ const UI = {
             UI.openClipboardPanel();
         }
     },
-    showCopiedNotification() {
-        // This is responsible for showing the notification when text is updated in the clipboard.
-        const notificationBox = document.createElement("div");
-        notificationBox.className = "notification";
-        notificationBox.innerText = "Clipboard updated";
-        document.body.appendChild(notificationBox);
 
-        setTimeout(() => {
+    notifyClipboardReceived() {
-            notificationBox.classList.add("fade-out");
+        // When enabled with setting 'notify_clipboard_received', shows
-            setTimeout(() => {
+        // notification when a 'clipboard-received'-event is fired by
-                notificationBox.remove();
+        // the RFB instance.
-            }, 500); // Wait for fade-out transition
+        UI.showStatus(_('Clipboard updated'), 3000);
-        }, 3000); // Display for 3 seconds
     },
 
     clipboardReceive(e) {
         Log.Debug(">> UI.clipboardReceive: " + e.detail.text.substr(0, 40) + "...");
         document.getElementById('noVNC_clipboard_text').value = e.detail.text;
-        UI.showCopiedNotification();
         Log.Debug("<< UI.clipboardReceive");
     },
 
@@ -1119,6 +1115,7 @@ const UI = {
 
         UI.updateViewOnly(); // requires UI.rfb
         UI.updateClipboard();
+        UI.updateNotifyClipboardReceived();
     },
 
     disconnect() {
@@ -1824,6 +1821,14 @@ const UI = {
         UI.rfb.showDotCursor = UI.getSetting('show_dot');
     },
 
+    updateNotifyClipboardReceived() {
+        if (!UI.rfb) return;
+        UI.rfb.removeEventListener('clipboardreceived', UI.notifyClipboardReceived);
+        if (UI.getSetting('notify_clipboard_received')) {
+            UI.rfb.addEventListener('clipboardreceived', UI.notifyClipboardReceived);
+        }
+    },
+
     updateLogging() {
         WebUtil.initLogging(UI.getSetting('logging'));
     },

vnc.html

@@ -296,6 +296,13 @@
                                     Show dot when no cursor
                                 </label>
                             </li>
+                            <li>
+                                <label>
+                                    <input id="noVNC_setting_notify_clipboard_received" type="checkbox"
+                                           class="toggle">
+                                    Show clipboard notification
+                                </label>
+                            </li>
                             <li><hr></li>
                             <!-- Logging selection dropdown -->
                             <li>