/*
* noVNC: HTML5 VNC client
- * Copyright (C) 2012 Joel Martin
- * Copyright (C) 2016 Samuel Mannehed for Cendio AB
- * Copyright (C) 2016 Pierre Ossman for Cendio AB
+ * Copyright (C) 2019 The noVNC Authors
* Licensed under MPL 2.0 (see LICENSE.txt)
*
* See README.md for usage and integration instructions.
import * as Log from '../core/util/logging.js';
import _, { l10n } from './localization.js';
-import { isTouchDevice } from '../core/util/browser.js';
+import { isTouchDevice, isSafari, hasScrollbarGutter, dragThreshold }
+ from '../core/util/browser.js';
import { setCapture, getPointerEvent } from '../core/util/events.js';
import KeyTable from "../core/input/keysym.js";
import keysyms from "../core/input/keysymdef.js";
import RFB from "../core/rfb.js";
import * as WebUtil from "./webutil.js";
+const PAGE_TITLE = "noVNC";
+
const UI = {
connected: false,
controlbarMouseDownClientY: 0,
controlbarMouseDownOffsetY: 0,
- isSafari: false,
lastKeyboardinput: null,
defaultKeyboardinputLen: 100,
- inhibit_reconnect: true,
- reconnect_callback: null,
- reconnect_password: null,
+ inhibitReconnect: true,
+ reconnectCallback: null,
+ reconnectPassword: null,
- prime: function(callback) {
- if (document.readyState === "interactive" || document.readyState === "complete") {
- UI.load(callback);
- } else {
- document.addEventListener('DOMContentLoaded', UI.load.bind(UI, callback));
- }
- },
+ prime() {
+ return WebUtil.initSettings().then(() => {
+ if (document.readyState === "interactive" || document.readyState === "complete") {
+ return UI.start();
+ }
- // Setup rfb object, load settings from browser storage, then call
- // UI.init to setup the UI/menus
- load: function(callback) {
- WebUtil.initSettings(UI.start, callback);
+ return new Promise((resolve, reject) => {
+ document.addEventListener('DOMContentLoaded', () => UI.start().then(resolve).catch(reject));
+ });
+ });
},
// Render default UI and initialize settings menu
- start: function(callback) {
-
- // Setup global variables first
- UI.isSafari = (navigator.userAgent.indexOf('Safari') !== -1 &&
- navigator.userAgent.indexOf('Chrome') === -1);
+ start() {
UI.initSettings();
// Translate the DOM
l10n.translateDOM();
+ fetch('./package.json')
+ .then((response) => {
+ if (!response.ok) {
+ throw Error("" + response.status + " " + response.statusText);
+ }
+ return response.json();
+ })
+ .then((packageInfo) => {
+ Array.from(document.getElementsByClassName('noVNC_version')).forEach(el => el.innerText = packageInfo.version);
+ })
+ .catch((err) => {
+ Log.Error("Couldn't fetch package.json: " + err);
+ Array.from(document.getElementsByClassName('noVNC_version_wrapper'))
+ .concat(Array.from(document.getElementsByClassName('noVNC_version_separator')))
+ .forEach(el => el.style.display = 'none');
+ });
+
// Adapt the interface for touch screen devices
if (isTouchDevice) {
document.documentElement.classList.add("noVNC_touch");
// Remove the address bar
- setTimeout(function() { window.scrollTo(0, 1); }, 100);
+ setTimeout(() => window.scrollTo(0, 1), 100);
}
// Restore control bar position
UI.openConnectPanel();
}
- if (typeof callback === "function") {
- callback(UI.rfb);
- }
+ return Promise.resolve(UI.rfb);
},
- initFullscreen: function() {
+ initFullscreen() {
// Only show the button if fullscreen is properly supported
// * Safari doesn't support alphanumerical input while in fullscreen
- if (!UI.isSafari &&
+ if (!isSafari() &&
(document.documentElement.requestFullscreen ||
document.documentElement.mozRequestFullScreen ||
document.documentElement.webkitRequestFullscreen ||
}
},
- initSettings: function() {
+ initSettings() {
// Logging selection dropdown
const llevels = ['error', 'warn', 'info', 'debug'];
for (let i = 0; i < llevels.length; i += 1) {
// set manually
let port = window.location.port;
if (!port) {
- if (window.location.protocol.substring(0,5) == 'https') {
+ if (window.location.protocol.substring(0, 5) == 'https') {
port = 443;
- }
- else if (window.location.protocol.substring(0,4) == 'http') {
+ } else if (window.location.protocol.substring(0, 4) == 'http') {
port = 80;
}
}
UI.initSetting('encrypt', (window.location.protocol === "https:"));
UI.initSetting('view_clip', false);
UI.initSetting('resize', 'off');
+ UI.initSetting('quality', 6);
+ UI.initSetting('compression', 2);
UI.initSetting('shared', true);
UI.initSetting('view_only', false);
+ UI.initSetting('show_dot', false);
UI.initSetting('path', 'websockify');
UI.initSetting('repeaterID', '');
UI.initSetting('reconnect', false);
UI.setupSettingLabels();
},
// Adds a link to the label elements on the corresponding input elements
- setupSettingLabels: function() {
+ setupSettingLabels() {
const labels = document.getElementsByTagName('LABEL');
for (let i = 0; i < labels.length; i++) {
const htmlFor = labels[i].htmlFor;
* EVENT HANDLERS
* ------v------*/
- addControlbarHandlers: function() {
+ addControlbarHandlers() {
document.getElementById("noVNC_control_bar")
.addEventListener('mousemove', UI.activateControlbar);
document.getElementById("noVNC_control_bar")
}
},
- addTouchSpecificHandlers: function() {
- document.getElementById("noVNC_mouse_button0")
- .addEventListener('click', function () { UI.setMouseButton(1); });
- document.getElementById("noVNC_mouse_button1")
- .addEventListener('click', function () { UI.setMouseButton(2); });
- document.getElementById("noVNC_mouse_button2")
- .addEventListener('click', function () { UI.setMouseButton(4); });
- document.getElementById("noVNC_mouse_button4")
- .addEventListener('click', function () { UI.setMouseButton(0); });
+ addTouchSpecificHandlers() {
document.getElementById("noVNC_keyboard_button")
.addEventListener('click', UI.toggleVirtualKeyboard);
document.getElementById("noVNC_keyboardinput")
.addEventListener('blur', UI.onblurVirtualKeyboard);
document.getElementById("noVNC_keyboardinput")
- .addEventListener('submit', function () { return false; });
+ .addEventListener('submit', () => false);
document.documentElement
.addEventListener('mousedown', UI.keepVirtualKeyboard, true);
.addEventListener('touchmove', UI.dragControlbarHandle);
},
- addExtraKeysHandlers: function() {
+ addExtraKeysHandlers() {
document.getElementById("noVNC_toggle_extra_keys_button")
.addEventListener('click', UI.toggleExtraKeys);
document.getElementById("noVNC_toggle_ctrl_button")
.addEventListener('click', UI.toggleCtrl);
+ document.getElementById("noVNC_toggle_windows_button")
+ .addEventListener('click', UI.toggleWindows);
document.getElementById("noVNC_toggle_alt_button")
.addEventListener('click', UI.toggleAlt);
document.getElementById("noVNC_send_tab_button")
.addEventListener('click', UI.sendCtrlAltDel);
},
- addMachineHandlers: function() {
+ addMachineHandlers() {
document.getElementById("noVNC_shutdown_button")
- .addEventListener('click', function() { UI.rfb.machineShutdown(); });
+ .addEventListener('click', () => UI.rfb.machineShutdown());
document.getElementById("noVNC_reboot_button")
- .addEventListener('click', function() { UI.rfb.machineReboot(); });
+ .addEventListener('click', () => UI.rfb.machineReboot());
document.getElementById("noVNC_reset_button")
- .addEventListener('click', function() { UI.rfb.machineReset(); });
+ .addEventListener('click', () => UI.rfb.machineReset());
document.getElementById("noVNC_power_button")
.addEventListener('click', UI.togglePowerPanel);
},
- addConnectionControlHandlers: function() {
+ addConnectionControlHandlers() {
document.getElementById("noVNC_disconnect_button")
.addEventListener('click', UI.disconnect);
document.getElementById("noVNC_connect_button")
document.getElementById("noVNC_cancel_reconnect_button")
.addEventListener('click', UI.cancelReconnect);
- document.getElementById("noVNC_password_button")
- .addEventListener('click', UI.setPassword);
+ document.getElementById("noVNC_credentials_button")
+ .addEventListener('click', UI.setCredentials);
},
- addClipboardHandlers: function() {
+ addClipboardHandlers() {
document.getElementById("noVNC_clipboard_button")
.addEventListener('click', UI.toggleClipboardPanel);
document.getElementById("noVNC_clipboard_text")
// Add a call to save settings when the element changes,
// unless the optional parameter changeFunc is used instead.
- addSettingChangeHandler: function(name, changeFunc) {
+ addSettingChangeHandler(name, changeFunc) {
const settingElem = document.getElementById("noVNC_setting_" + name);
if (changeFunc === undefined) {
- changeFunc = function () { UI.saveSetting(name); };
+ changeFunc = () => UI.saveSetting(name);
}
settingElem.addEventListener('change', changeFunc);
},
- addSettingsHandlers: function() {
+ addSettingsHandlers() {
document.getElementById("noVNC_settings_button")
.addEventListener('click', UI.toggleSettingsPanel);
UI.addSettingChangeHandler('encrypt');
UI.addSettingChangeHandler('resize');
- UI.addSettingChangeHandler('resize', UI.enableDisableViewClip);
UI.addSettingChangeHandler('resize', UI.applyResizeMode);
+ UI.addSettingChangeHandler('resize', UI.updateViewClip);
+ UI.addSettingChangeHandler('quality');
+ UI.addSettingChangeHandler('quality', UI.updateQuality);
+ UI.addSettingChangeHandler('compression');
+ UI.addSettingChangeHandler('compression', UI.updateCompression);
UI.addSettingChangeHandler('view_clip');
UI.addSettingChangeHandler('view_clip', UI.updateViewClip);
UI.addSettingChangeHandler('shared');
UI.addSettingChangeHandler('view_only');
UI.addSettingChangeHandler('view_only', UI.updateViewOnly);
+ UI.addSettingChangeHandler('show_dot');
+ UI.addSettingChangeHandler('show_dot', UI.updateShowDotCursor);
UI.addSettingChangeHandler('host');
UI.addSettingChangeHandler('port');
UI.addSettingChangeHandler('path');
UI.addSettingChangeHandler('reconnect_delay');
},
- addFullscreenHandlers: function() {
+ addFullscreenHandlers() {
document.getElementById("noVNC_fullscreen_button")
.addEventListener('click', UI.toggleFullscreen);
* ------v------*/
// Disable/enable controls depending on connection state
- updateVisualState: function(state) {
+ updateVisualState(state) {
document.documentElement.classList.remove("noVNC_connecting");
document.documentElement.classList.remove("noVNC_connected");
document.documentElement.classList.remove("noVNC_disconnecting");
document.documentElement.classList.remove("noVNC_reconnecting");
- const transition_elem = document.getElementById("noVNC_transition_text");
+ const transitionElem = document.getElementById("noVNC_transition_text");
switch (state) {
case 'init':
break;
case 'connecting':
- transition_elem.textContent = _("Connecting...");
+ transitionElem.textContent = _("Connecting...");
document.documentElement.classList.add("noVNC_connecting");
break;
case 'connected':
document.documentElement.classList.add("noVNC_connected");
break;
case 'disconnecting':
- transition_elem.textContent = _("Disconnecting...");
+ transitionElem.textContent = _("Disconnecting...");
document.documentElement.classList.add("noVNC_disconnecting");
break;
case 'disconnected':
break;
case 'reconnecting':
- transition_elem.textContent = _("Reconnecting...");
+ transitionElem.textContent = _("Reconnecting...");
document.documentElement.classList.add("noVNC_reconnecting");
break;
default:
return;
}
- UI.enableDisableViewClip();
-
if (UI.connected) {
+ UI.updateViewClip();
+
UI.disableSetting('encrypt');
UI.disableSetting('shared');
UI.disableSetting('host');
UI.disableSetting('port');
UI.disableSetting('path');
UI.disableSetting('repeaterID');
- UI.setMouseButton(1);
// Hide the controlbar after 2 seconds
UI.closeControlbarTimeout = setTimeout(UI.closeControlbar, 2000);
UI.keepControlbar();
}
- // State change disables viewport dragging.
- // It is enabled (toggled) by direct click on the button
- UI.setViewDrag(false);
-
- // State change also closes the password dialog
- document.getElementById('noVNC_password_dlg')
+ // State change closes dialogs as they may not be relevant
+ // anymore
+ UI.closeAllPanels();
+ document.getElementById('noVNC_credentials_dlg')
.classList.remove('noVNC_open');
},
- showStatus: function(text, status_type, time) {
+ showStatus(text, statusType, time) {
const statusElem = document.getElementById('noVNC_status');
- clearTimeout(UI.statusTimeout);
-
- if (typeof status_type === 'undefined') {
- status_type = 'normal';
+ if (typeof statusType === 'undefined') {
+ statusType = 'normal';
}
// Don't overwrite more severe visible statuses and never
// errors. Only shows the first error.
- let visible_status_type = 'none';
if (statusElem.classList.contains("noVNC_open")) {
if (statusElem.classList.contains("noVNC_status_error")) {
- visible_status_type = 'error';
- } else if (statusElem.classList.contains("noVNC_status_warn")) {
- visible_status_type = 'warn';
- } else {
- visible_status_type = 'normal';
+ return;
+ }
+ if (statusElem.classList.contains("noVNC_status_warn") &&
+ statusType === 'normal') {
+ return;
}
- }
- if (visible_status_type === 'error' ||
- (visible_status_type === 'warn' && status_type === 'normal')) {
- return;
}
- switch (status_type) {
+ clearTimeout(UI.statusTimeout);
+
+ switch (statusType) {
case 'error':
statusElem.classList.remove("noVNC_status_warn");
statusElem.classList.remove("noVNC_status_normal");
}
// Error messages do not timeout
- if (status_type !== 'error') {
+ if (statusType !== 'error') {
UI.statusTimeout = window.setTimeout(UI.hideStatus, time);
}
},
- hideStatus: function() {
+ hideStatus() {
clearTimeout(UI.statusTimeout);
document.getElementById('noVNC_status').classList.remove("noVNC_open");
},
- activateControlbar: function(event) {
+ activateControlbar(event) {
clearTimeout(UI.idleControlbarTimeout);
// We manipulate the anchor instead of the actual control
// bar in order to avoid creating new a stacking group
UI.idleControlbarTimeout = window.setTimeout(UI.idleControlbar, 2000);
},
- idleControlbar: function() {
+ idleControlbar() {
+ // Don't fade if a child of the control bar has focus
+ if (document.getElementById('noVNC_control_bar')
+ .contains(document.activeElement) && document.hasFocus()) {
+ UI.activateControlbar();
+ return;
+ }
+
document.getElementById('noVNC_control_bar_anchor')
.classList.add("noVNC_idle");
},
- keepControlbar: function() {
+ keepControlbar() {
clearTimeout(UI.closeControlbarTimeout);
},
- openControlbar: function() {
+ openControlbar() {
document.getElementById('noVNC_control_bar')
.classList.add("noVNC_open");
},
- closeControlbar: function() {
+ closeControlbar() {
UI.closeAllPanels();
document.getElementById('noVNC_control_bar')
.classList.remove("noVNC_open");
+ UI.rfb.focus();
},
- toggleControlbar: function() {
+ toggleControlbar() {
if (document.getElementById('noVNC_control_bar')
.classList.contains("noVNC_open")) {
UI.closeControlbar();
}
},
- toggleControlbarSide: function () {
+ toggleControlbarSide() {
// Temporarily disable animation, if bar is displayed, to avoid weird
// movement. The transitionend-event will not fire when display=none.
const bar = document.getElementById('noVNC_control_bar');
const barDisplayStyle = window.getComputedStyle(bar).display;
if (barDisplayStyle !== 'none') {
bar.style.transitionDuration = '0s';
- bar.addEventListener('transitionend', function () {
- this.style.transitionDuration = ""; });
+ bar.addEventListener('transitionend', () => bar.style.transitionDuration = '');
}
const anchor = document.getElementById('noVNC_control_bar_anchor');
UI.controlbarDrag = true;
},
- showControlbarHint: function (show) {
+ showControlbarHint(show) {
const hint = document.getElementById('noVNC_control_bar_hint');
if (show) {
hint.classList.add("noVNC_active");
}
},
- dragControlbarHandle: function (e) {
+ dragControlbarHandle(e) {
if (!UI.controlbarGrabbed) return;
const ptr = getPointerEvent(e);
}
if (!UI.controlbarDrag) {
- // The goal is to trigger on a certain physical width, the
- // devicePixelRatio brings us a bit closer but is not optimal.
- const dragThreshold = 10 * (window.devicePixelRatio || 1);
const dragDistance = Math.abs(ptr.clientY - UI.controlbarMouseDownClientY);
if (dragDistance < dragThreshold) return;
},
// Move the handle but don't allow any position outside the bounds
- moveControlbarHandle: function (viewportRelativeY) {
+ moveControlbarHandle(viewportRelativeY) {
const handle = document.getElementById("noVNC_control_bar_handle");
const handleHeight = handle.getBoundingClientRect().height;
const controlbarBounds = document.getElementById("noVNC_control_bar")
handle.style.transform = "translateY(" + parentRelativeY + "px)";
},
- updateControlbarHandle: function () {
+ updateControlbarHandle() {
// Since the control bar is fixed on the viewport and not the page,
// the move function expects coordinates relative the the viewport.
const handle = document.getElementById("noVNC_control_bar_handle");
UI.moveControlbarHandle(handleBounds.top);
},
- controlbarHandleMouseUp: function(e) {
+ controlbarHandleMouseUp(e) {
if ((e.type == "mouseup") && (e.button != 0)) return;
// mouseup and mousedown on the same place toggles the controlbar
UI.showControlbarHint(false);
},
- controlbarHandleMouseDown: function(e) {
+ controlbarHandleMouseDown(e) {
if ((e.type == "mousedown") && (e.button != 0)) return;
const ptr = getPointerEvent(e);
UI.activateControlbar();
},
- toggleExpander: function(e) {
+ toggleExpander(e) {
if (this.classList.contains("noVNC_open")) {
this.classList.remove("noVNC_open");
} else {
* ------v------*/
// Initial page load read/initialization of settings
- initSetting: function(name, defVal) {
+ initSetting(name, defVal) {
// Check Query string followed by cookie
let val = WebUtil.getConfigVar(name);
if (val === null) {
return val;
},
+ // Set the new value, update and disable form control setting
+ forceSetting(name, val) {
+ WebUtil.setSetting(name, val);
+ UI.updateSetting(name);
+ UI.disableSetting(name);
+ },
+
// Update cookie and form control setting. If value is not set, then
// updates from control to current cookie setting.
- updateSetting: function(name) {
+ updateSetting(name) {
// Update the settings control
let value = UI.getSetting(name);
}
}
} else {
- /*Weird IE9 error leads to 'null' appearring
- in textboxes instead of ''.*/
- if (value === null) {
- value = "";
- }
ctrl.value = value;
}
},
// Save control setting to cookie
- saveSetting: function(name) {
+ saveSetting(name) {
const ctrl = document.getElementById('noVNC_setting_' + name);
let val;
if (ctrl.type === 'checkbox') {
},
// Read form control compatible setting from cookie
- getSetting: function(name) {
+ getSetting(name) {
const ctrl = document.getElementById('noVNC_setting_' + name);
let val = WebUtil.readSetting(name);
if (typeof val !== 'undefined' && val !== null && ctrl.type === 'checkbox') {
- if (val.toString().toLowerCase() in {'0':1, 'no':1, 'false':1}) {
+ if (val.toString().toLowerCase() in {'0': 1, 'no': 1, 'false': 1}) {
val = false;
} else {
val = true;
// These helpers compensate for the lack of parent-selectors and
// previous-sibling-selectors in CSS which are needed when we want to
// disable the labels that belong to disabled input elements.
- disableSetting: function(name) {
+ disableSetting(name) {
const ctrl = document.getElementById('noVNC_setting_' + name);
ctrl.disabled = true;
ctrl.label.classList.add('noVNC_disabled');
},
- enableSetting: function(name) {
+ enableSetting(name) {
const ctrl = document.getElementById('noVNC_setting_' + name);
ctrl.disabled = false;
ctrl.label.classList.remove('noVNC_disabled');
* PANELS
* ------v------*/
- closeAllPanels: function() {
+ closeAllPanels() {
UI.closeSettingsPanel();
UI.closePowerPanel();
UI.closeClipboardPanel();
* SETTINGS (panel)
* ------v------*/
- openSettingsPanel: function() {
+ openSettingsPanel() {
UI.closeAllPanels();
UI.openControlbar();
UI.updateSetting('encrypt');
UI.updateSetting('view_clip');
UI.updateSetting('resize');
+ UI.updateSetting('quality');
+ UI.updateSetting('compression');
UI.updateSetting('shared');
UI.updateSetting('view_only');
UI.updateSetting('path');
.classList.add("noVNC_selected");
},
- closeSettingsPanel: function() {
+ closeSettingsPanel() {
document.getElementById('noVNC_settings')
.classList.remove("noVNC_open");
document.getElementById('noVNC_settings_button')
.classList.remove("noVNC_selected");
},
- toggleSettingsPanel: function() {
+ toggleSettingsPanel() {
if (document.getElementById('noVNC_settings')
.classList.contains("noVNC_open")) {
UI.closeSettingsPanel();
* POWER
* ------v------*/
- openPowerPanel: function() {
+ openPowerPanel() {
UI.closeAllPanels();
UI.openControlbar();
.classList.add("noVNC_selected");
},
- closePowerPanel: function() {
+ closePowerPanel() {
document.getElementById('noVNC_power')
.classList.remove("noVNC_open");
document.getElementById('noVNC_power_button')
.classList.remove("noVNC_selected");
},
- togglePowerPanel: function() {
+ togglePowerPanel() {
if (document.getElementById('noVNC_power')
.classList.contains("noVNC_open")) {
UI.closePowerPanel();
},
// Disable/enable power button
- updatePowerButton: function() {
+ updatePowerButton() {
if (UI.connected &&
UI.rfb.capabilities.power &&
!UI.rfb.viewOnly) {
* CLIPBOARD
* ------v------*/
- openClipboardPanel: function() {
+ openClipboardPanel() {
UI.closeAllPanels();
UI.openControlbar();
.classList.add("noVNC_selected");
},
- closeClipboardPanel: function() {
+ closeClipboardPanel() {
document.getElementById('noVNC_clipboard')
.classList.remove("noVNC_open");
document.getElementById('noVNC_clipboard_button')
.classList.remove("noVNC_selected");
},
- toggleClipboardPanel: function() {
+ toggleClipboardPanel() {
if (document.getElementById('noVNC_clipboard')
.classList.contains("noVNC_open")) {
UI.closeClipboardPanel();
}
},
- clipboardReceive: function(e) {
- Log.Debug(">> UI.clipboardReceive: " + e.detail.text.substr(0,40) + "...");
+ clipboardReceive(e) {
+ Log.Debug(">> UI.clipboardReceive: " + e.detail.text.substr(0, 40) + "...");
document.getElementById('noVNC_clipboard_text').value = e.detail.text;
Log.Debug("<< UI.clipboardReceive");
},
- clipboardClear: function() {
+ clipboardClear() {
document.getElementById('noVNC_clipboard_text').value = "";
UI.rfb.clipboardPasteFrom("");
},
- clipboardSend: function() {
+ clipboardSend() {
const text = document.getElementById('noVNC_clipboard_text').value;
- Log.Debug(">> UI.clipboardSend: " + text.substr(0,40) + "...");
+ Log.Debug(">> UI.clipboardSend: " + text.substr(0, 40) + "...");
UI.rfb.clipboardPasteFrom(text);
Log.Debug("<< UI.clipboardSend");
},
* CONNECTION
* ------v------*/
- openConnectPanel: function() {
+ openConnectPanel() {
document.getElementById('noVNC_connect_dlg')
.classList.add("noVNC_open");
},
- closeConnectPanel: function() {
+ closeConnectPanel() {
document.getElementById('noVNC_connect_dlg')
.classList.remove("noVNC_open");
},
- connect: function(event, password) {
+ connect(event, password) {
// Ignore when rfb already exists
if (typeof UI.rfb !== 'undefined') {
if (typeof password === 'undefined') {
password = WebUtil.getConfigVar('password');
- UI.reconnect_password = password;
+ UI.reconnectPassword = password;
}
if (password === null) {
return;
}
- UI.closeAllPanels();
UI.closeConnectPanel();
UI.updateVisualState('connecting');
url = UI.getSetting('encrypt') ? 'wss' : 'ws';
url += '://' + host;
- if(port) {
+ if (port) {
url += ':' + port;
}
url += '/' + path;
UI.rfb.addEventListener("disconnect", UI.disconnectFinished);
UI.rfb.addEventListener("credentialsrequired", UI.credentials);
UI.rfb.addEventListener("securityfailure", UI.securityFailed);
- UI.rfb.addEventListener("capabilities", function () { UI.updatePowerButton(); });
+ UI.rfb.addEventListener("capabilities", UI.updatePowerButton);
UI.rfb.addEventListener("clipboard", UI.clipboardReceive);
UI.rfb.addEventListener("bell", UI.bell);
UI.rfb.addEventListener("desktopname", UI.updateDesktopName);
UI.rfb.clipViewport = UI.getSetting('view_clip');
UI.rfb.scaleViewport = UI.getSetting('resize') === 'scale';
UI.rfb.resizeSession = UI.getSetting('resize') === 'remote';
+ UI.rfb.qualityLevel = parseInt(UI.getSetting('quality'));
+ UI.rfb.compressionLevel = parseInt(UI.getSetting('compression'));
+ UI.rfb.showDotCursor = UI.getSetting('show_dot');
UI.updateViewOnly(); // requires UI.rfb
},
- disconnect: function() {
- UI.closeAllPanels();
+ disconnect() {
UI.rfb.disconnect();
UI.connected = false;
// Disable automatic reconnecting
- UI.inhibit_reconnect = true;
+ UI.inhibitReconnect = true;
UI.updateVisualState('disconnecting');
// Don't display the connection settings until we're actually disconnected
},
- reconnect: function() {
- UI.reconnect_callback = null;
+ reconnect() {
+ UI.reconnectCallback = null;
// if reconnect has been disabled in the meantime, do nothing.
- if (UI.inhibit_reconnect) {
+ if (UI.inhibitReconnect) {
return;
}
- UI.connect(null, UI.reconnect_password);
+ UI.connect(null, UI.reconnectPassword);
},
- cancelReconnect: function() {
- if (UI.reconnect_callback !== null) {
- clearTimeout(UI.reconnect_callback);
- UI.reconnect_callback = null;
+ cancelReconnect() {
+ if (UI.reconnectCallback !== null) {
+ clearTimeout(UI.reconnectCallback);
+ UI.reconnectCallback = null;
}
UI.updateVisualState('disconnected');
UI.openConnectPanel();
},
- connectFinished: function (e) {
+ connectFinished(e) {
UI.connected = true;
- UI.inhibit_reconnect = false;
+ UI.inhibitReconnect = false;
let msg;
if (UI.getSetting('encrypt')) {
UI.rfb.focus();
},
- disconnectFinished: function (e) {
+ disconnectFinished(e) {
const wasConnected = UI.connected;
// This variable is ideally set when disconnection starts, but
} else {
UI.showStatus(_("Failed to connect to server"), 'error');
}
- } else if (UI.getSetting('reconnect', false) === true && !UI.inhibit_reconnect) {
+ } else if (UI.getSetting('reconnect', false) === true && !UI.inhibitReconnect) {
UI.updateVisualState('reconnecting');
const delay = parseInt(UI.getSetting('reconnect_delay'));
- UI.reconnect_callback = setTimeout(UI.reconnect, delay);
+ UI.reconnectCallback = setTimeout(UI.reconnect, delay);
return;
} else {
UI.updateVisualState('disconnected');
UI.showStatus(_("Disconnected"), 'normal');
}
+ document.title = PAGE_TITLE;
+
UI.openControlbar();
UI.openConnectPanel();
},
- securityFailed: function (e) {
+ securityFailed(e) {
let msg = "";
// On security failures we might get a string with a reason
// directly from the server. Note that we can't control if
* PASSWORD
* ------v------*/
- credentials: function(e) {
+ credentials(e) {
// FIXME: handle more types
- document.getElementById('noVNC_password_dlg')
+
+ document.getElementById("noVNC_username_block").classList.remove("noVNC_hidden");
+ document.getElementById("noVNC_password_block").classList.remove("noVNC_hidden");
+
+ let inputFocus = "none";
+ if (e.detail.types.indexOf("username") === -1) {
+ document.getElementById("noVNC_username_block").classList.add("noVNC_hidden");
+ } else {
+ inputFocus = inputFocus === "none" ? "noVNC_username_input" : inputFocus;
+ }
+ if (e.detail.types.indexOf("password") === -1) {
+ document.getElementById("noVNC_password_block").classList.add("noVNC_hidden");
+ } else {
+ inputFocus = inputFocus === "none" ? "noVNC_password_input" : inputFocus;
+ }
+ document.getElementById('noVNC_credentials_dlg')
.classList.add('noVNC_open');
- setTimeout(function () {
- document.getElementById('noVNC_password_input').focus();
- }, 100);
+ setTimeout(() => document
+ .getElementById(inputFocus).focus(), 100);
- Log.Warn("Server asked for a password");
- UI.showStatus(_("Password is required"), "warning");
+ Log.Warn("Server asked for credentials");
+ UI.showStatus(_("Credentials are required"), "warning");
},
- setPassword: function(e) {
+ setCredentials(e) {
// Prevent actually submitting the form
e.preventDefault();
- const inputElem = document.getElementById('noVNC_password_input');
- const password = inputElem.value;
+ let inputElemUsername = document.getElementById('noVNC_username_input');
+ const username = inputElemUsername.value;
+
+ let inputElemPassword = document.getElementById('noVNC_password_input');
+ const password = inputElemPassword.value;
// Clear the input after reading the password
- inputElem.value = "";
- UI.rfb.sendCredentials({ password: password });
- UI.reconnect_password = password;
- document.getElementById('noVNC_password_dlg')
+ inputElemPassword.value = "";
+
+ UI.rfb.sendCredentials({ username: username, password: password });
+ UI.reconnectPassword = password;
+ document.getElementById('noVNC_credentials_dlg')
.classList.remove('noVNC_open');
},
* FULLSCREEN
* ------v------*/
- toggleFullscreen: function() {
+ toggleFullscreen() {
if (document.fullscreenElement || // alternative standard method
document.mozFullScreenElement || // currently working methods
document.webkitFullscreenElement ||
document.body.msRequestFullscreen();
}
}
- UI.enableDisableViewClip();
UI.updateFullscreenButton();
},
- updateFullscreenButton: function() {
+ updateFullscreenButton() {
if (document.fullscreenElement || // alternative standard method
document.mozFullScreenElement || // currently working methods
document.webkitFullscreenElement ||
* ------v------*/
// Apply remote resizing or local scaling
- applyResizeMode: function() {
+ applyResizeMode() {
if (!UI.rfb) return;
UI.rfb.scaleViewport = UI.getSetting('resize') === 'scale';
* VIEW CLIPPING
* ------v------*/
- // Update parameters that depend on the viewport clip setting
- updateViewClip: function() {
+ // Update viewport clipping property for the connection. The normal
+ // case is to get the value from the setting. There are special cases
+ // for when the viewport is scaled or when a touch device is used.
+ updateViewClip() {
if (!UI.rfb) return;
- const cur_clip = UI.rfb.clipViewport;
- let new_clip = UI.getSetting('view_clip');
-
- if (isTouchDevice) {
- // Touch devices usually have shit scrollbars
- new_clip = true;
- }
-
- if (cur_clip !== new_clip) {
- UI.rfb.clipViewport = new_clip;
+ const scaling = UI.getSetting('resize') === 'scale';
+
+ if (scaling) {
+ // Can't be clipping if viewport is scaled to fit
+ UI.forceSetting('view_clip', false);
+ UI.rfb.clipViewport = false;
+ } else if (!hasScrollbarGutter) {
+ // Some platforms have scrollbars that are difficult
+ // to use in our case, so we always use our own panning
+ UI.forceSetting('view_clip', true);
+ UI.rfb.clipViewport = true;
+ } else {
+ UI.enableSetting('view_clip');
+ UI.rfb.clipViewport = UI.getSetting('view_clip');
}
// Changing the viewport may change the state of
UI.updateViewDrag();
},
- // Handle special cases where viewport clipping is forced on/off or locked
- enableDisableViewClip: function() {
- const resizeSetting = UI.getSetting('resize');
- // Disable clipping if we are scaling, connected or on touch
- if (resizeSetting === 'scale' ||
- isTouchDevice) {
- UI.disableSetting('view_clip');
- } else {
- UI.enableSetting('view_clip');
- }
- },
-
/* ------^-------
* /VIEW CLIPPING
* ==============
* VIEWDRAG
* ------v------*/
- toggleViewDrag: function() {
+ toggleViewDrag() {
if (!UI.rfb) return;
- const drag = UI.rfb.dragViewport;
- UI.setViewDrag(!drag);
- },
-
- // Set the view drag mode which moves the viewport on mouse drags
- setViewDrag: function(drag) {
- if (!UI.rfb) return;
-
- UI.rfb.dragViewport = drag;
-
+ UI.rfb.dragViewport = !UI.rfb.dragViewport;
UI.updateViewDrag();
},
- updateViewDrag: function() {
+ updateViewDrag() {
if (!UI.connected) return;
const viewDragButton = document.getElementById('noVNC_view_drag_button');
viewDragButton.classList.remove("noVNC_selected");
}
- // Different behaviour for touch vs non-touch
- // The button is disabled instead of hidden on touch devices
- if (isTouchDevice) {
+ if (UI.rfb.clipViewport) {
viewDragButton.classList.remove("noVNC_hidden");
-
- if (UI.rfb.clipViewport) {
- viewDragButton.disabled = false;
- } else {
- viewDragButton.disabled = true;
- }
} else {
- viewDragButton.disabled = false;
-
- if (UI.rfb.clipViewport) {
- viewDragButton.classList.remove("noVNC_hidden");
- } else {
- viewDragButton.classList.add("noVNC_hidden");
- }
+ viewDragButton.classList.add("noVNC_hidden");
}
},
/* ------^-------
* /VIEWDRAG
* ==============
+ * QUALITY
+ * ------v------*/
+
+ updateQuality() {
+ if (!UI.rfb) return;
+
+ UI.rfb.qualityLevel = parseInt(UI.getSetting('quality'));
+ },
+
+/* ------^-------
+ * /QUALITY
+ * ==============
+ * COMPRESSION
+ * ------v------*/
+
+ updateCompression() {
+ if (!UI.rfb) return;
+
+ UI.rfb.compressionLevel = parseInt(UI.getSetting('compression'));
+ },
+
+/* ------^-------
+ * /COMPRESSION
+ * ==============
* KEYBOARD
* ------v------*/
- showVirtualKeyboard: function() {
+ showVirtualKeyboard() {
if (!isTouchDevice) return;
const input = document.getElementById('noVNC_keyboardinput');
// Move the caret to the end
input.setSelectionRange(l, l);
} catch (err) {
- // setSelectionRange is undefined in Google Chrome
+ // setSelectionRange is undefined in Google Chrome
}
},
- hideVirtualKeyboard: function() {
+ hideVirtualKeyboard() {
if (!isTouchDevice) return;
const input = document.getElementById('noVNC_keyboardinput');
input.blur();
},
- toggleVirtualKeyboard: function () {
+ toggleVirtualKeyboard() {
if (document.getElementById('noVNC_keyboard_button')
.classList.contains("noVNC_selected")) {
UI.hideVirtualKeyboard();
}
},
- onfocusVirtualKeyboard: function(event) {
+ onfocusVirtualKeyboard(event) {
document.getElementById('noVNC_keyboard_button')
.classList.add("noVNC_selected");
if (UI.rfb) {
}
},
- onblurVirtualKeyboard: function(event) {
+ onblurVirtualKeyboard(event) {
document.getElementById('noVNC_keyboard_button')
.classList.remove("noVNC_selected");
if (UI.rfb) {
}
},
- keepVirtualKeyboard: function(event) {
+ keepVirtualKeyboard(event) {
const input = document.getElementById('noVNC_keyboardinput');
// Only prevent focus change if the virtual keyboard is active
event.preventDefault();
},
- keyboardinputReset: function() {
+ keyboardinputReset() {
const kbi = document.getElementById('noVNC_keyboardinput');
kbi.value = new Array(UI.defaultKeyboardinputLen).join("_");
UI.lastKeyboardinput = kbi.value;
},
- keyEvent: function (keysym, code, down) {
+ keyEvent(keysym, code, down) {
if (!UI.rfb) return;
UI.rfb.sendKey(keysym, code, down);
// the keyboardinput element instead and generate the corresponding key events.
// This code is required since some browsers on Android are inconsistent in
// sending keyCodes in the normal keyboard events when using on screen keyboards.
- keyInput: function(event) {
+ keyInput(event) {
if (!UI.rfb) return;
* EXTRA KEYS
* ------v------*/
- openExtraKeys: function() {
+ openExtraKeys() {
UI.closeAllPanels();
UI.openControlbar();
.classList.add("noVNC_selected");
},
- closeExtraKeys: function() {
+ closeExtraKeys() {
document.getElementById('noVNC_modifiers')
.classList.remove("noVNC_open");
document.getElementById('noVNC_toggle_extra_keys_button')
.classList.remove("noVNC_selected");
},
- toggleExtraKeys: function() {
- if(document.getElementById('noVNC_modifiers')
+ toggleExtraKeys() {
+ if (document.getElementById('noVNC_modifiers')
.classList.contains("noVNC_open")) {
UI.closeExtraKeys();
} else {
}
},
- sendEsc: function() {
- UI.rfb.sendKey(KeyTable.XK_Escape, "Escape");
+ sendEsc() {
+ UI.sendKey(KeyTable.XK_Escape, "Escape");
},
- sendTab: function() {
- UI.rfb.sendKey(KeyTable.XK_Tab);
+ sendTab() {
+ UI.sendKey(KeyTable.XK_Tab, "Tab");
},
- toggleCtrl: function() {
+ toggleCtrl() {
const btn = document.getElementById('noVNC_toggle_ctrl_button');
if (btn.classList.contains("noVNC_selected")) {
- UI.rfb.sendKey(KeyTable.XK_Control_L, "ControlLeft", false);
+ UI.sendKey(KeyTable.XK_Control_L, "ControlLeft", false);
btn.classList.remove("noVNC_selected");
} else {
- UI.rfb.sendKey(KeyTable.XK_Control_L, "ControlLeft", true);
+ UI.sendKey(KeyTable.XK_Control_L, "ControlLeft", true);
btn.classList.add("noVNC_selected");
}
},
- toggleAlt: function() {
+ toggleWindows() {
+ const btn = document.getElementById('noVNC_toggle_windows_button');
+ if (btn.classList.contains("noVNC_selected")) {
+ UI.sendKey(KeyTable.XK_Super_L, "MetaLeft", false);
+ btn.classList.remove("noVNC_selected");
+ } else {
+ UI.sendKey(KeyTable.XK_Super_L, "MetaLeft", true);
+ btn.classList.add("noVNC_selected");
+ }
+ },
+
+ toggleAlt() {
const btn = document.getElementById('noVNC_toggle_alt_button');
if (btn.classList.contains("noVNC_selected")) {
- UI.rfb.sendKey(KeyTable.XK_Alt_L, "AltLeft", false);
+ UI.sendKey(KeyTable.XK_Alt_L, "AltLeft", false);
btn.classList.remove("noVNC_selected");
} else {
- UI.rfb.sendKey(KeyTable.XK_Alt_L, "AltLeft", true);
+ UI.sendKey(KeyTable.XK_Alt_L, "AltLeft", true);
btn.classList.add("noVNC_selected");
}
},
- sendCtrlAltDel: function() {
+ sendCtrlAltDel() {
UI.rfb.sendCtrlAltDel();
+ // See below
+ UI.rfb.focus();
+ UI.idleControlbar();
+ },
+
+ sendKey(keysym, code, down) {
+ UI.rfb.sendKey(keysym, code, down);
+
+ // Move focus to the screen in order to be able to use the
+ // keyboard right after these extra keys.
+ // The exception is when a virtual keyboard is used, because
+ // if we focus the screen the virtual keyboard would be closed.
+ // In this case we focus our special virtual keyboard input
+ // element instead.
+ if (document.getElementById('noVNC_keyboard_button')
+ .classList.contains("noVNC_selected")) {
+ document.getElementById('noVNC_keyboardinput').focus();
+ } else {
+ UI.rfb.focus();
+ }
+ // fade out the controlbar to highlight that
+ // the focus has been moved to the screen
+ UI.idleControlbar();
},
/* ------^-------
* MISC
* ------v------*/
- setMouseButton: function(num) {
- const view_only = UI.rfb.viewOnly;
- if (UI.rfb && !view_only) {
- UI.rfb.touchButton = num;
- }
-
- const blist = [0, 1,2,4];
- for (let b = 0; b < blist.length; b++) {
- const button = document.getElementById('noVNC_mouse_button' +
- blist[b]);
- if (blist[b] === num && !view_only) {
- button.classList.remove("noVNC_hidden");
- } else {
- button.classList.add("noVNC_hidden");
- }
- }
- },
-
- updateViewOnly: function() {
+ updateViewOnly() {
if (!UI.rfb) return;
UI.rfb.viewOnly = UI.getSetting('view_only');
.classList.add('noVNC_hidden');
document.getElementById('noVNC_toggle_extra_keys_button')
.classList.add('noVNC_hidden');
+ document.getElementById('noVNC_clipboard_button')
+ .classList.add('noVNC_hidden');
} else {
document.getElementById('noVNC_keyboard_button')
.classList.remove('noVNC_hidden');
document.getElementById('noVNC_toggle_extra_keys_button')
.classList.remove('noVNC_hidden');
+ document.getElementById('noVNC_clipboard_button')
+ .classList.remove('noVNC_hidden');
}
- UI.setMouseButton(1); //has it's own logic for hiding/showing
},
- updateLogging: function() {
- WebUtil.init_logging(UI.getSetting('logging'));
+ updateShowDotCursor() {
+ if (!UI.rfb) return;
+ UI.rfb.showDotCursor = UI.getSetting('show_dot');
+ },
+
+ updateLogging() {
+ WebUtil.initLogging(UI.getSetting('logging'));
},
- updateDesktopName: function(e) {
+ updateDesktopName(e) {
UI.desktopName = e.detail.name;
// Display the desktop name in the document title
- document.title = e.detail.name + " - noVNC";
+ document.title = e.detail.name + " - " + PAGE_TITLE;
},
- bell: function(e) {
+ bell(e) {
if (WebUtil.getConfigVar('bell', 'on') === 'on') {
const promise = document.getElementById('noVNC_bell').play();
// The standards disagree on the return value here
if (promise) {
- promise.catch(function(e) {
+ promise.catch((e) => {
if (e.name === "NotAllowedError") {
// Ignore when the browser doesn't let us play audio.
// It is common that the browsers require audio to be
},
//Helper to add options to dropdown.
- addOption: function(selectbox, text, value) {
+ addOption(selectbox, text, value) {
const optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
};
// Set up translations
-const LINGUAS = ["de", "el", "es", "nl", "pl", "sv", "tr", "zh_CN", "zh_TW"];
+const LINGUAS = ["cs", "de", "el", "es", "fr", "ja", "ko", "nl", "pl", "pt_BR", "ru", "sv", "tr", "zh_CN", "zh_TW"];
l10n.setup(LINGUAS);
-if (l10n.language !== "en" && l10n.dictionary === undefined) {
- WebUtil.fetchJSON('app/locale/' + l10n.language + '.json', function (translations) {
- l10n.dictionary = translations;
-
- // wait for translations to load before loading the UI
- UI.prime();
- }, function (err) {
- Log.Error("Failed to load translations: " + err);
- UI.prime();
- });
-} else {
+if (l10n.language === "en" || l10n.dictionary !== undefined) {
UI.prime();
+} else {
+ fetch('app/locale/' + l10n.language + '.json')
+ .then((response) => {
+ if (!response.ok) {
+ throw Error("" + response.status + " " + response.statusText);
+ }
+ return response.json();
+ })
+ .then((translations) => { l10n.dictionary = translations; })
+ .catch(err => Log.Error("Failed to load translations: " + err))
+ .then(UI.prime);
}
export default UI;
projects / mirror_novnc.git / blobdiff