godot/platform/javascript/godot_shell.html
L. Krause ca28c068c0 Implement input focus behavior in HTML5
- Key and mouse events are only consumed if canvas is focused
 - NOTIFICATION_WM_MOUSE_ENTER, _MOUSE_EXIT, _FOCUS_IN and _FOCUS_OUT are
   emitted
2017-07-22 17:25:15 +02:00

348 lines
10 KiB
HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body {
margin: 0;
border: 0 none;
padding: 0;
text-align: center;
background-color: #222226;
font-family: 'Droid Sans', Arial, sans-serif;
}
/* Godot Engine default theme style
* ================================ */
.godot {
color: #e0e0e0;
background-color: #3b3943;
background-image: linear-gradient(to bottom, #403e48, #35333c);
border: 1px solid #45434e;
box-shadow: 0 0 1px 1px #2f2d35;
}
button.godot {
font-family: 'Droid Sans', Arial, sans-serif; /* override user agent style */
padding: 1px 5px;
background-color: #37353f;
background-image: linear-gradient(to bottom, #413e49, #3a3842);
border: 1px solid #514f5d;
border-radius: 1px;
box-shadow: 0 0 1px 1px #2a2930;
}
button.godot:hover {
color: #f0f0f0;
background-color: #44414e;
background-image: linear-gradient(to bottom, #494652, #423f4c);
border: 1px solid #5a5667;
box-shadow: 0 0 1px 1px #26252b;
}
button.godot:active {
color: #fff;
background-color: #3e3b46;
background-image: linear-gradient(to bottom, #36343d, #413e49);
border: 1px solid #4f4c59;
box-shadow: 0 0 1px 1px #26252b;
}
button.godot:disabled {
color: rgba(230, 230, 230, 0.2);
background-color: #3d3d3d;
background-image: linear-gradient(to bottom, #434343, #393939);
border: 1px solid #474747;
box-shadow: 0 0 1px 1px #2d2b33;
}
/* Canvas / wrapper
* ================ */
#container {
display: inline-block; /* scale with canvas */
vertical-align: top; /* prevent extra height */
position: relative; /* root for absolutely positioned overlay */
margin: 0;
border: 0 none;
padding: 0;
background-color: #0c0c0c;
}
#canvas {
display: block;
margin: 0 auto;
/* canvas must have border and padding set to zero to
* calculate cursor coordinates correctly */
border: 0 none;
padding: 0;
color: white;
}
#canvas:focus {
outline: none;
}
/* Status display
* ============== */
#status-container {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
/* don't consume click events - make children visible explicitly */
visibility: hidden;
}
#status {
line-height: 1.3;
cursor: pointer;
visibility: visible;
padding: 4px 6px;
}
/* Debug output
* ============ */
#output-panel {
display: none;
max-width: 700px;
font-size: small;
margin: 6px auto 0;
padding: 0 4px 4px;
text-align: left;
line-height: 2.2;
}
#output-header {
display: flex;
justify-content: space-between;
align-items: center;
}
#output-container {
padding: 6px;
background-color: #2c2a32;
box-shadow: inset 0 0 1px 1px #232127;
color: #bbb;
}
#output-scroll {
line-height: 1;
height: 12em;
overflow-y: scroll;
white-space: pre-wrap;
font-size: small;
font-family: "Lucida Console", Monaco, monospace;
}
</style>
$GODOT_HEAD_INCLUDE
</head>
<body>
<div id="container">
<canvas id="canvas" width="640" height="480" tabindex="0" oncontextmenu="event.preventDefault();">
HTML5 canvas appears to be unsupported in the current browser.<br />
Please try updating or use a different browser.
</canvas>
<div id="status-container">
<span id="status" class="godot" onclick="this.style.visibility='hidden';">Downloading page...</span>
</div>
</div>
<div id="output-panel" class="godot">
<div id="output-header">
Output:
<button class="godot" type="button" autocomplete="off" onclick="Presentation.clearOutput();">Clear</button>
</div>
<div id="output-container"><div id="output-scroll"></div></div>
</div>
<!-- Scripts -->
<script type="text/javascript">//<![CDATA[
var Presentation = (function() {
var statusElement = document.getElementById("status");
var canvasElement = document.getElementById("canvas");
var presentation = {
postRun: [],
setStatusVisible: function setStatusVisible(visible) {
statusElement.style.visibility = (visible ? "visible" : "hidden");
},
setStatus: function setStatus(text) {
if (text.length === 0) {
// emscripten sets empty string as status after "Running..."
// per timeout, but another status may have been set by then
if (Presentation.setStatus.lastText === "Running...")
Presentation.setStatusVisible(false);
return;
}
Presentation.setStatus.lastText = text;
while (statusElement.lastChild) {
statusElement.removeChild(statusElement.lastChild);
}
var lines = text.split("\n");
lines.forEach(function(line, index) {
statusElement.appendChild(document.createTextNode(line));
statusElement.appendChild(document.createElement("br"));
});
var closeNote = document.createElement("span");
closeNote.style.fontSize = "small";
closeNote.textContent = "click to close";
statusElement.appendChild(closeNote);
Presentation.setStatusVisible(true);
},
isWebGL2Available: function isWebGL2Available() {
var context;
try {
context = canvasElement.getContext("webgl2") || canvasElement.getContext("experimental-webgl2");
} catch (e) {}
return !!context;
},
};
window.onerror = function(event) { presentation.setStatus("Failure during start-up\nSee JavaScript console") };
if ($GODOT_DEBUG_ENABLED) { // debugging enabled
var outputRoot = document.getElementById("output-panel");
var outputElement = document.getElementById("output-scroll");
const maxOutputMessages = 400;
presentation.setOutputVisible = function setOutputVisible(visible) {
outputRoot.style.display = (visible ? "block" : "none");
};
presentation.clearOutput = function clearOutput() {
while (outputElement.firstChild) {
outputElement.firstChild.remove();
}
};
presentation.setOutputVisible(true);
presentation.print = function print(text) {
if (arguments.length > 1) {
text = Array.prototype.slice.call(arguments).join(" ");
}
if (text.length <= 0) return;
while (outputElement.childElementCount >= maxOutputMessages) {
outputElement.firstChild.remove();
}
var msg = document.createElement("div");
if (String.prototype.trim.call(text).startsWith("**ERROR**")
|| String.prototype.trim.call(text).startsWith("**EXCEPTION**")) {
msg.style.color = "#d44";
} else if (String.prototype.trim.call(text).startsWith("**WARNING**")) {
msg.style.color = "#ccc000";
} else if (String.prototype.trim.call(text).startsWith("**SCRIPT ERROR**")) {
msg.style.color = "#c6d";
}
msg.textContent = text;
var scrollToBottom = outputElement.scrollHeight - (outputElement.clientHeight + outputElement.scrollTop) < 10;
outputElement.appendChild(msg);
if (scrollToBottom) {
outputElement.scrollTop = outputElement.scrollHeight;
}
};
presentation.postRun.push(function() {
window.onerror = function(event) { presentation.print("**EXCEPTION**:", event) };
});
} else {
presentation.postRun.push(function() { window.onerror = null; });
}
return presentation;
})();
// Emscripten interface
var Module = (function() {
const BASE_NAME = '$GODOT_BASE';
var module = {
thisProgram: BASE_NAME,
wasmBinaryFile: BASE_NAME + '.wasm',
TOTAL_MEMORY: $GODOT_TMEM,
print: function print(text) {
if (arguments.length > 1) {
text = Array.prototype.slice.call(arguments).join(" ");
}
console.log(text);
if (typeof Presentation !== "undefined" && typeof Presentation.print === "function") {
Presentation.print(text);
}
},
printErr: function printErr(text) {
if (arguments.length > 1) {
text = Array.prototype.slice.call(arguments).join(" ");
}
console.error(text);
if (typeof Presentation !== "undefined" && typeof Presentation.print === "function") {
Presentation.print("**ERROR**:", text)
}
},
canvas: document.getElementById("canvas"),
setStatus: function setStatus(text) {
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
var now = Date.now();
if (m) {
if (now - Date.now() < 30) // if this is a progress update, skip it if too soon
return;
text = m[1];
}
if (typeof Presentation !== "undefined" && typeof Presentation.setStatus == "function") {
Presentation.setStatus(text);
}
}
};
// As a default initial behavior, pop up an alert when WebGL context is lost. To make your
// application robust, you may want to override this behavior before shipping!
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
module.canvas.addEventListener("webglcontextlost", function(e) { alert("WebGL context lost. Plase reload the page."); e.preventDefault(); }, false);
if (typeof Presentation !== "undefined" && Presentation.postRun instanceof Array) {
module.postRun = Presentation.postRun;
}
return module;
})();
if (!Presentation.isWebGL2Available()) {
Presentation.setStatus("WebGL 2 appears to be unsupported.\nPlease update browser and drivers.");
Presentation.preventLoading = true;
} else {
Presentation.setStatus("Downloading...");
}
if (Presentation.preventLoading) {
// prevent *fs.js and Emscripten's SCRIPT placeholder from loading any files
Presentation._XHR_send = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function() {};
Presentation._Node_appendChild = Node.prototype.appendChild;
Node.prototype.appendChild = function(node) {
if (!(node instanceof HTMLScriptElement)) {
return Presentation._Node_appendChild.call(this, node);
}
}
}
//]]></script>
<script type="text/javascript" src="$GODOT_BASEfs.js"></script>
{{{ SCRIPT }}}
<script type="text/javascript">
if (Presentation.preventLoading) {
XMLHttpRequest.prototype.send = Presentation._XHR_send;
Node.prototype.appendChild = Presentation._Node_appendChild;
}
</script>
</body>
</html>