js: Tolerate the non-existence of some HTML elements

Specifically, the permalinks, the apology, and the resizable div.
This commit is contained in:
Ben Harris
2022-10-29 11:58:37 +01:00
parent ea4ba47662
commit 06f6e878a0
2 changed files with 76 additions and 65 deletions

View File

@ -166,14 +166,17 @@ mergeInto(LibraryManager.library, {
*/ */
js_update_permalinks: function(desc, seed) { js_update_permalinks: function(desc, seed) {
desc = encodeURI(UTF8ToString(desc)).replace(/#/g, "%23"); desc = encodeURI(UTF8ToString(desc)).replace(/#/g, "%23");
permalink_desc.href = "#" + desc; if (permalink_desc !== null)
permalink_desc.href = "#" + desc;
if (seed == 0) { if (permalink_seed !== null) {
permalink_seed.style.display = "none"; if (seed == 0) {
} else { permalink_seed.style.display = "none";
seed = encodeURI(UTF8ToString(seed)).replace(/#/g, "%23");; } else {
permalink_seed.href = "#" + seed; seed = encodeURI(UTF8ToString(seed)).replace(/#/g, "%23");;
permalink_seed.style.display = ""; permalink_seed.href = "#" + seed;
permalink_seed.style.display = "";
}
} }
}, },
@ -547,7 +550,9 @@ mergeInto(LibraryManager.library, {
js_canvas_set_size: function(w, h) { js_canvas_set_size: function(w, h) {
onscreen_canvas.width = w; onscreen_canvas.width = w;
offscreen_canvas.width = w; offscreen_canvas.width = w;
resizable_div.style.width = w / (window.devicePixelRatio || 1) + "px"; if (resizable_div !== null)
resizable_div.style.width =
w / (window.devicePixelRatio || 1) + "px";
onscreen_canvas.height = h; onscreen_canvas.height = h;
offscreen_canvas.height = h; offscreen_canvas.height = h;

View File

@ -472,63 +472,68 @@ function initPuzzle() {
ctx.stroke(); ctx.stroke();
} }
resizable_div = document.getElementById("resizable"); resizable_div = document.getElementById("resizable");
resizable_div.appendChild(resize_handle); if (resizable_div !== null) {
resize_handle.id = "resizehandle"; resizable_div.appendChild(resize_handle);
resize_handle.title = "Drag to resize the puzzle. Right-click to restore the default size."; resize_handle.id = "resizehandle";
var resize_xbase = null, resize_ybase = null, restore_pending = false; resize_handle.title = "Drag to resize the puzzle. Right-click to restore the default size.";
var resize_xoffset = null, resize_yoffset = null; var resize_xbase = null, resize_ybase = null, restore_pending = false;
var resize_puzzle = Module.cwrap('resize_puzzle', var resize_xoffset = null, resize_yoffset = null;
'void', ['number', 'number']); var resize_puzzle = Module.cwrap('resize_puzzle',
var restore_puzzle_size = Module.cwrap('restore_puzzle_size', 'void', []); 'void', ['number', 'number']);
resize_handle.oncontextmenu = function(event) { return false; } var restore_puzzle_size = Module.cwrap('restore_puzzle_size',
resize_handle.onmousedown = function(event) { 'void', []);
if (event.button == 0) { resize_handle.oncontextmenu = function(event) { return false; }
var xy = element_coords(onscreen_canvas); resize_handle.onmousedown = function(event) {
resize_xbase = xy.x + onscreen_canvas.offsetWidth / 2; if (event.button == 0) {
resize_ybase = xy.y; var xy = element_coords(onscreen_canvas);
resize_xoffset = xy.x + onscreen_canvas.offsetWidth - event.pageX; resize_xbase = xy.x + onscreen_canvas.offsetWidth / 2;
resize_yoffset = xy.y + onscreen_canvas.offsetHeight - event.pageY; resize_ybase = xy.y;
} else { resize_xoffset =
restore_pending = true; xy.x + onscreen_canvas.offsetWidth - event.pageX;
} resize_yoffset =
resize_handle.setCapture(true); xy.y + onscreen_canvas.offsetHeight - event.pageY;
event.preventDefault(); } else {
}; restore_pending = true;
window.addEventListener("mousemove", function(event) { }
if (resize_xbase !== null && resize_ybase !== null) { resize_handle.setCapture(true);
var dpr = window.devicePixelRatio || 1;
resize_puzzle(
(event.pageX + resize_xoffset - resize_xbase) * dpr * 2,
(event.pageY + resize_yoffset - resize_ybase) * dpr);
event.preventDefault(); event.preventDefault();
// Chrome insists on selecting text during a resize drag };
// no matter what I do window.addEventListener("mousemove", function(event) {
if (window.getSelection) if (resize_xbase !== null && resize_ybase !== null) {
window.getSelection().removeAllRanges(); var dpr = window.devicePixelRatio || 1;
else resize_puzzle(
document.selection.empty(); } (event.pageX + resize_xoffset - resize_xbase) * dpr * 2,
}); (event.pageY + resize_yoffset - resize_ybase) * dpr);
window.addEventListener("mouseup", function(event) { event.preventDefault();
if (resize_xbase !== null && resize_ybase !== null) { // Chrome insists on selecting text during a resize drag
resize_xbase = null; // no matter what I do
resize_ybase = null; if (window.getSelection)
onscreen_canvas.focus(); // return focus to the puzzle window.getSelection().removeAllRanges();
event.preventDefault(); else
} else if (restore_pending) { document.selection.empty(); }
// If you have the puzzle at larger than normal size and });
// then right-click to restore, I haven't found any way to window.addEventListener("mouseup", function(event) {
// stop Chrome and IE popping up a context menu on the if (resize_xbase !== null && resize_ybase !== null) {
// revealed piece of document when you release the button resize_xbase = null;
// except by putting the actual restore into a setTimeout. resize_ybase = null;
// Gah. onscreen_canvas.focus(); // return focus to the puzzle
setTimeout(function() { event.preventDefault();
restore_pending = false; } else if (restore_pending) {
restore_puzzle_size(); // If you have the puzzle at larger than normal size and
onscreen_canvas.focus(); // then right-click to restore, I haven't found any way to
}, 20); // stop Chrome and IE popping up a context menu on the
event.preventDefault(); // revealed piece of document when you release the button
} // except by putting the actual restore into a setTimeout.
}); // Gah.
setTimeout(function() {
restore_pending = false;
restore_puzzle_size();
onscreen_canvas.focus();
}, 20);
event.preventDefault();
}
});
}
/* /*
* Arrange to detect changes of device pixel ratio. Adapted from * Arrange to detect changes of device pixel ratio. Adapted from
@ -558,7 +563,8 @@ function initPuzzle() {
// we haven't crashed for one reason or another during setup, then // we haven't crashed for one reason or another during setup, then
// it's probably safe to hide the 'sorry, no puzzle here' div and // it's probably safe to hide the 'sorry, no puzzle here' div and
// show the div containing the actual puzzle. // show the div containing the actual puzzle.
document.getElementById("apology").style.display = "none"; var apology = document.getElementById("apology");
if (apology !== null) apology.style.display = "none";
document.getElementById("puzzle").style.display = ""; document.getElementById("puzzle").style.display = "";
}; };
} }