/* jslint white: false, browser: true */
/* global window, document.getElementById, Util, WebUtil, RFB, Display */
-/* [module]
- * import Util from "../core/util";
- * import KeyTable from "../core/input/keysym";
- * import keysyms from "./keysymdef";
- * import RFB from "../core/rfb";
- * import Display from "../core/display";
- * import WebUtil from "./webutil";
- */
+import Util from "../core/util.js";
+import KeyTable from "../core/input/keysym.js";
+import keysyms from "../core/input/keysymdef.js";
+import RFB from "../core/rfb.js";
+import Display from "../core/display.js";
+import WebUtil from "./webutil.js";
var UI;
{'app': ["locale/" + Util.Localisation.language + ".js"]});
}
- /* [begin skip-as-module] */
- // Load supporting scripts
- WebUtil.load_scripts(
- {'core': ["base64.js", "websock.js", "des.js", "input/keysymdef.js",
- "input/xtscancodes.js", "input/util.js", "input/devices.js",
- "display.js", "inflator.js", "rfb.js", "input/keysym.js"]});
-
- window.onscriptsload = function () { UI.load(); };
- /* [end skip-as-module] */
-
var _ = Util.Localisation.get;
UI = {
document.documentElement.classList.add("noVNC_touch");
// Remove the address bar
setTimeout(function() { window.scrollTo(0, 1); }, 100);
- UI.forceSetting('clip', true);
- } else {
- UI.initSetting('clip', false);
}
// Restore control bar position
UI.initSetting('encrypt', (window.location.protocol === "https:"));
UI.initSetting('true_color', true);
UI.initSetting('cursor', !Util.isTouchDevice);
+ UI.initSetting('clip', false);
UI.initSetting('resize', 'off');
UI.initSetting('shared', true);
UI.initSetting('view_only', false);
UI.initSetting('repeaterID', '');
UI.initSetting('reconnect', false);
UI.initSetting('reconnect_delay', 5000);
+
+ UI.setupSettingLabels();
+ },
+
+ // Adds a link to the label elements on the corresponding input elements
+ setupSettingLabels: function() {
+ var labels = document.getElementsByTagName('LABEL');
+ for (var i = 0; i < labels.length; i++) {
+ var htmlFor = labels[i].htmlFor;
+ if (htmlFor != '') {
+ var elem = document.getElementById(htmlFor);
+ if (elem) elem.label = labels[i];
+ } else {
+ // If 'for' isn't set, use the first input element child
+ var children = labels[i].children;
+ for (var j = 0; j < children.length; j++) {
+ if (children[j].form !== undefined) {
+ children[j].label = labels[i];
+ break;
+ }
+ }
+ }
+ }
},
initRFB: function() {
addResizeHandlers: function() {
window.addEventListener('resize', UI.applyResizeMode);
window.addEventListener('resize', UI.updateViewClip);
- window.addEventListener('resize', UI.updateViewDrag);
},
addControlbarHandlers: function() {
UI.addSettingChangeHandler('encrypt');
UI.addSettingChangeHandler('true_color');
UI.addSettingChangeHandler('cursor');
+ UI.addSettingChangeHandler('cursor', UI.updateLocalCursor);
UI.addSettingChangeHandler('resize');
UI.addSettingChangeHandler('resize', UI.enableDisableViewClip);
UI.addSettingChangeHandler('resize', UI.applyResizeMode);
UI.addSettingChangeHandler('clip');
+ UI.addSettingChangeHandler('clip', UI.updateViewClip);
UI.addSettingChangeHandler('shared');
UI.addSettingChangeHandler('view_only');
+ UI.addSettingChangeHandler('view_only', UI.updateViewOnly);
UI.addSettingChangeHandler('host');
UI.addSettingChangeHandler('port');
UI.addSettingChangeHandler('path');
// Disable/enable controls depending on connection state
updateVisualState: function() {
//Util.Debug(">> updateVisualState");
- document.getElementById('noVNC_setting_encrypt').disabled = UI.connected;
- document.getElementById('noVNC_setting_true_color').disabled = UI.connected;
- if (Util.browserSupportsCursorURIs()) {
- document.getElementById('noVNC_setting_cursor').disabled = UI.connected;
- } else {
- UI.updateSetting('cursor', !Util.isTouchDevice);
- document.getElementById('noVNC_setting_cursor').disabled = true;
- }
UI.enableDisableViewClip();
- document.getElementById('noVNC_setting_shared').disabled = UI.connected;
- document.getElementById('noVNC_setting_view_only').disabled = UI.connected;
- document.getElementById('noVNC_setting_host').disabled = UI.connected;
- document.getElementById('noVNC_setting_port').disabled = UI.connected;
- document.getElementById('noVNC_setting_path').disabled = UI.connected;
- document.getElementById('noVNC_setting_repeaterID').disabled = UI.connected;
- document.getElementById('noVNC_setting_reconnect').disabled = UI.connected;
- document.getElementById('noVNC_setting_reconnect_delay').disabled = UI.connected;
+
+ if (Util.browserSupportsCursorURIs() && !Util.isTouchDevice) {
+ UI.enableSetting('cursor');
+ } else {
+ UI.disableSetting('cursor');
+ }
if (UI.connected) {
+ UI.disableSetting('encrypt');
+ UI.disableSetting('true_color');
+ UI.disableSetting('shared');
+ UI.disableSetting('host');
+ UI.disableSetting('port');
+ UI.disableSetting('path');
+ UI.disableSetting('repeaterID');
UI.updateViewClip();
UI.setMouseButton(1);
// Hide the controlbar after 2 seconds
UI.closeControlbarTimeout = setTimeout(UI.closeControlbar, 2000);
} else {
+ UI.enableSetting('encrypt');
+ UI.enableSetting('true_color');
+ UI.enableSetting('shared');
+ UI.enableSetting('host');
+ UI.enableSetting('port');
+ UI.enableSetting('path');
+ UI.enableSetting('repeaterID');
UI.updateXvpButton(0);
UI.keepControlbar();
}
status_type = 'normal';
}
- statusElem.classList.remove("noVNC_status_normal",
- "noVNC_status_warn",
- "noVNC_status_error");
+ statusElem.classList.remove("noVNC_status_normal");
+ statusElem.classList.remove("noVNC_status_warn");
+ statusElem.classList.remove("noVNC_status_error");
switch (status_type) {
case 'warning':
return val;
},
- // Force a setting to be a certain value
- forceSetting: function(name, val) {
- UI.updateSetting(name, val);
- return val;
- },
-
// Read form control compatible setting from cookie
getSetting: function(name) {
var ctrl = document.getElementById('noVNC_setting_' + name);
return val;
},
+ // 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) {
+ var ctrl = document.getElementById('noVNC_setting_' + name);
+ ctrl.disabled = true;
+ ctrl.label.classList.add('noVNC_disabled');
+ },
+
+ enableSetting: function(name) {
+ var ctrl = document.getElementById('noVNC_setting_' + name);
+ ctrl.disabled = false;
+ ctrl.label.classList.remove('noVNC_disabled');
+ },
+
/* ------^-------
* /SETTINGS
* ==============
UI.updateSetting('cursor');
} else {
UI.updateSetting('cursor', !Util.isTouchDevice);
- document.getElementById('noVNC_setting_cursor').disabled = true;
+ UI.disableSetting('cursor');
}
UI.updateSetting('clip');
UI.updateSetting('resize');
UI.rfb.set_encrypt(UI.getSetting('encrypt'));
UI.rfb.set_true_color(UI.getSetting('true_color'));
- UI.rfb.set_local_cursor(UI.getSetting('cursor'));
UI.rfb.set_shared(UI.getSetting('shared'));
- UI.rfb.set_view_only(UI.getSetting('view_only'));
UI.rfb.set_repeaterID(UI.getSetting('repeaterID'));
+ UI.updateLocalCursor();
+ UI.updateViewOnly();
+
UI.rfb.connect(host, port, password, path);
},
var display = UI.rfb.get_display();
var resizeMode = UI.getSetting('resize');
display.set_scale(1);
- UI.rfb.get_mouse().set_scale(1);
+
+ // Make sure the viewport is adjusted first
+ UI.updateViewClip();
if (resizeMode === 'remote') {
} else if (resizeMode === 'scale' || resizeMode === 'downscale') {
var downscaleOnly = resizeMode === 'downscale';
- var scaleRatio = display.autoscale(screen.w, screen.h, downscaleOnly);
-
- if (!UI.rfb.get_view_only()) {
- UI.rfb.get_mouse().set_scale(scaleRatio);
- Util.Debug('Scaling by ' + UI.rfb.get_mouse().get_scale());
- }
+ display.autoscale(screen.w, screen.h, downscaleOnly);
+ UI.fixScrollbars();
}
}
},
var cur_clip = display.get_viewport();
var new_clip = UI.getSetting('clip');
+ var resizeSetting = UI.getSetting('resize');
+ if (resizeSetting === 'downscale' || resizeSetting === 'scale') {
+ // Disable clipping if we are scaling
+ new_clip = false;
+ } else if (Util.isTouchDevice) {
+ // Touch devices usually have shit scrollbars
+ new_clip = true;
+ }
+
if (cur_clip !== new_clip) {
display.set_viewport(new_clip);
}
// When clipping is enabled, the screen is limited to
// the size of the browser window.
display.viewportChangeSize(size.w, size.h);
+ UI.fixScrollbars();
}
+
+ // Changing the viewport may change the state of
+ // the dragging button
+ UI.updateViewDrag();
},
// Handle special cases where clipping is forced on/off or locked
enableDisableViewClip: function() {
var resizeSetting = UI.getSetting('resize');
-
- if (UI.isSafari) {
- // Safari auto-hides the scrollbars which makes them
- // impossible to use in most cases
- UI.setViewClip(true);
- document.getElementById('noVNC_setting_clip').disabled = true;
- } else if (resizeSetting === 'downscale' || resizeSetting === 'scale') {
- // Disable clipping if we are scaling
- UI.forceSetting('clip', false);
- UI.setViewClip(false);
- document.getElementById('noVNC_setting_clip').disabled = true;
- } else if (document.msFullscreenElement) {
- // The browser is IE and we are in fullscreen mode.
- // - We need to force clipping while in fullscreen since
- // scrollbars doesn't work.
- var msg = _("Forcing clipping mode since " +
- "scrollbars aren't supported " +
- "by IE in fullscreen");
- Util.Debug(msg);
- UI.showStatus(msg);
- UI.rememberedClipSetting = UI.getSetting('clip');
- UI.setViewClip(true);
- document.getElementById('noVNC_setting_clip').disabled = true;
- } else if (document.body.msRequestFullscreen &&
- UI.rememberedClipSetting !== null) {
- // Restore view clip to what it was before fullscreen on IE
- UI.setViewClip(UI.rememberedClipSetting);
- document.getElementById('noVNC_setting_clip').disabled =
- UI.connected || Util.isTouchDevice;
+ // Disable clipping if we are scaling, connected or on touch
+ if (resizeSetting === 'downscale' || resizeSetting === 'scale' ||
+ Util.isTouchDevice) {
+ UI.disableSetting('clip');
} else {
- document.getElementById('noVNC_setting_clip').disabled =
- UI.connected || Util.isTouchDevice;
- if (Util.isTouchDevice) {
- UI.setViewClip(true);
- }
+ UI.enableSetting('clip');
}
},
}
},
+ updateLocalCursor: function() {
+ UI.rfb.set_local_cursor(UI.getSetting('cursor'));
+ },
+
+ updateViewOnly: function() {
+ UI.rfb.set_view_only(UI.getSetting('view_only'));
+ },
+
updateLogging: function() {
WebUtil.init_logging(UI.getSetting('logging'));
},
updateSessionSize: function(rfb, width, height) {
UI.updateViewClip();
- UI.updateViewDrag();
+ UI.fixScrollbars();
+ },
+
+ fixScrollbars: function() {
+ // This is a hack because Chrome screws up the calculation
+ // for when scrollbars are needed. So to fix it we temporarily
+ // toggle them off and on.
+ var screen = document.getElementById('noVNC_screen');
+ screen.style.overflow = 'hidden';
+ // Force Chrome to recalculate the layout by asking for
+ // an element's dimensions
+ screen.getBoundingClientRect();
+ screen.style.overflow = null;
},
updateDesktopName: function(rfb, name) {
*/
};
- /* [module] UI.load(); */
+ UI.load();
})();
-/* [module] export default UI; */
+export default UI;