Merge pull request #499 from samhed/fullscreen
Add option to toggle fullscreen mode
This commit is contained in:
Samuel
commit
7e13e968f3
BIN
images/fullscreen.png
Normal file
BIN
images/fullscreen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 851 B |
@ -59,6 +59,9 @@ html {
|
||||
#sendCtrlAltDelButton {
|
||||
display: none;
|
||||
}
|
||||
#fullscreenButton {
|
||||
display: none;
|
||||
}
|
||||
#noVNC_xvp_buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -229,13 +229,14 @@ var Display;
|
||||
saveImg = this._drawCtx.getImageData(0, 0, img_width, img_height);
|
||||
}
|
||||
|
||||
if (canvas.width !== width) { canvas.width = width; }
|
||||
if (canvas.height !== height) { canvas.height = height; }
|
||||
|
||||
if (this._viewport) {
|
||||
canvas.style.height = height + 'px';
|
||||
if (canvas.width !== width) {
|
||||
canvas.width = width;
|
||||
canvas.style.width = width + 'px';
|
||||
}
|
||||
if (canvas.height !== height) {
|
||||
canvas.height = height;
|
||||
canvas.style.height = height + 'px';
|
||||
}
|
||||
|
||||
if (saveImg) {
|
||||
this._drawCtx.putImageData(saveImg, 0, 0);
|
||||
|
||||
@ -38,6 +38,7 @@ var UI;
|
||||
ctrlOn: false,
|
||||
altOn: false,
|
||||
isTouchDevice: false,
|
||||
rememberedClipSetting: null,
|
||||
|
||||
// Setup rfb object, load settings from browser storage, then call
|
||||
// UI.init to setup the UI/menus
|
||||
@ -131,6 +132,23 @@ var UI;
|
||||
UI.setBarPosition();
|
||||
} );
|
||||
|
||||
var isSafari = (navigator.userAgent.indexOf('Safari') != -1 &&
|
||||
navigator.userAgent.indexOf('Chrome') == -1);
|
||||
|
||||
// Only show the button if fullscreen is properly supported
|
||||
// * Safari doesn't support alphanumerical input while in fullscreen
|
||||
if (!isSafari &&
|
||||
(document.documentElement.requestFullscreen ||
|
||||
document.documentElement.mozRequestFullScreen ||
|
||||
document.documentElement.webkitRequestFullscreen ||
|
||||
document.body.msRequestFullscreen)) {
|
||||
$D('fullscreenButton').style.display = "inline";
|
||||
Util.addEvent(window, 'fullscreenchange', UI.updateFullscreenButton);
|
||||
Util.addEvent(window, 'mozfullscreenchange', UI.updateFullscreenButton);
|
||||
Util.addEvent(window, 'webkitfullscreenchange', UI.updateFullscreenButton);
|
||||
Util.addEvent(window, 'msfullscreenchange', UI.updateFullscreenButton);
|
||||
}
|
||||
|
||||
Util.addEvent(window, 'load', UI.keyboardinputReset);
|
||||
|
||||
Util.addEvent(window, 'beforeunload', function () {
|
||||
@ -201,6 +219,7 @@ var UI;
|
||||
$D("noVNC_popup_status").onclick = UI.togglePopupStatus;
|
||||
$D("xvpButton").onclick = UI.toggleXvpPanel;
|
||||
$D("clipboardButton").onclick = UI.toggleClipboardPanel;
|
||||
$D("fullscreenButton").onclick = UI.toggleFullscreen;
|
||||
$D("settingsButton").onclick = UI.toggleSettingsPanel;
|
||||
$D("connectButton").onclick = UI.toggleConnectPanel;
|
||||
$D("disconnectButton").onclick = UI.disconnect;
|
||||
@ -217,10 +236,7 @@ var UI;
|
||||
|
||||
$D("noVNC_connect_button").onclick = UI.connect;
|
||||
|
||||
$D("noVNC_resize").onchange = function () {
|
||||
var connected = UI.rfb && UI.rfb_state === 'normal';
|
||||
UI.enableDisableViewClip(connected);
|
||||
};
|
||||
$D("noVNC_resize").onchange = UI.enableDisableViewClip;
|
||||
},
|
||||
|
||||
onresize: function (callback) {
|
||||
@ -437,6 +453,47 @@ var UI;
|
||||
}
|
||||
},
|
||||
|
||||
// Toggle fullscreen mode
|
||||
toggleFullscreen: function() {
|
||||
if (document.fullscreenElement || // alternative standard method
|
||||
document.mozFullScreenElement || // currently working methods
|
||||
document.webkitFullscreenElement ||
|
||||
document.msFullscreenElement) {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
} else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen();
|
||||
} else if (document.webkitExitFullscreen) {
|
||||
document.webkitExitFullscreen();
|
||||
} else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen();
|
||||
}
|
||||
} else {
|
||||
if (document.documentElement.requestFullscreen) {
|
||||
document.documentElement.requestFullscreen();
|
||||
} else if (document.documentElement.mozRequestFullScreen) {
|
||||
document.documentElement.mozRequestFullScreen();
|
||||
} else if (document.documentElement.webkitRequestFullscreen) {
|
||||
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
|
||||
} else if (document.body.msRequestFullscreen) {
|
||||
document.body.msRequestFullscreen();
|
||||
}
|
||||
}
|
||||
UI.enableDisableViewClip();
|
||||
UI.updateFullscreenButton();
|
||||
},
|
||||
|
||||
updateFullscreenButton: function() {
|
||||
if (document.fullscreenElement || // alternative standard method
|
||||
document.mozFullScreenElement || // currently working methods
|
||||
document.webkitFullscreenElement ||
|
||||
document.msFullscreenElement ) {
|
||||
$D('fullscreenButton').className = "noVNC_status_button_selected";
|
||||
} else {
|
||||
$D('fullscreenButton').className = "noVNC_status_button";
|
||||
}
|
||||
},
|
||||
|
||||
// Show the connection settings panel/menu
|
||||
toggleConnectPanel: function() {
|
||||
// Close the description panel
|
||||
@ -664,7 +721,7 @@ var UI;
|
||||
$D('noVNC_cursor').disabled = true;
|
||||
}
|
||||
|
||||
UI.enableDisableViewClip(connected);
|
||||
UI.enableDisableViewClip();
|
||||
$D('noVNC_resize').disabled = connected;
|
||||
$D('noVNC_shared').disabled = connected;
|
||||
$D('noVNC_view_only').disabled = connected;
|
||||
@ -821,6 +878,7 @@ var UI;
|
||||
if (UI.rfb) {
|
||||
display = UI.rfb.get_display();
|
||||
} else {
|
||||
UI.forceSetting('clip', clip);
|
||||
return;
|
||||
}
|
||||
|
||||
@ -867,15 +925,30 @@ var UI;
|
||||
},
|
||||
|
||||
// Handle special cases where clipping is forced on/off or locked
|
||||
enableDisableViewClip: function (connected) {
|
||||
enableDisableViewClip: function () {
|
||||
var resizeElem = $D('noVNC_resize');
|
||||
var connected = UI.rfb && UI.rfb_state === 'normal';
|
||||
|
||||
if (resizeElem.value === 'downscale' || resizeElem.value === 'scale') {
|
||||
UI.forceSetting('clip', false);
|
||||
// Disable clipping if we are scaling
|
||||
UI.setViewClip(false);
|
||||
$D('noVNC_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.
|
||||
UI.togglePopupStatus("Forcing clipping mode since scrollbars aren't supported by IE in fullscreen");
|
||||
UI.rememberedClipSetting = UI.getSetting('clip');
|
||||
UI.setViewClip(true);
|
||||
$D('noVNC_clip').disabled = true;
|
||||
} else if (document.body.msRequestFullscreen && UI.rememberedClip !== null) {
|
||||
// Restore view clip to what it was before fullscreen on IE
|
||||
UI.setViewClip(UI.rememberedClipSetting);
|
||||
$D('noVNC_clip').disabled = connected || UI.isTouchDevice;
|
||||
} else {
|
||||
$D('noVNC_clip').disabled = connected || UI.isTouchDevice;
|
||||
if (UI.isTouchDevice) {
|
||||
UI.forceSetting('clip', true);
|
||||
UI.setViewClip(true);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
3
vnc.html
3
vnc.html
@ -99,6 +99,9 @@
|
||||
<input type="image" alt="Clipboard" src="images/clipboard.png"
|
||||
id="clipboardButton" class="noVNC_status_button"
|
||||
title="Clipboard" />
|
||||
<input type="image" alt="Fullscreen" src="images/fullscreen.png"
|
||||
id="fullscreenButton" class="noVNC_status_button"
|
||||
title="Fullscreen" />
|
||||
<input type="image" alt="Settings" src="images/settings.png"
|
||||
id="settingsButton" class="noVNC_status_button"
|
||||
title="Settings" />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user