js: Add a mode where the puzzle tries to fill the viewport

This is activated by putting the puzzle in an element with id
"puzzlecanvascontain".  In that case, the puzzle's default size is as
close to filling that element as is achievable.  Unlike in the normal
mode, this sets the CSS size of the canvas directly.

Because it might take a little while for the page to settle down after
loading, and because the size of the viewport might change, this listens
for "resize" and "load" events, and only bothers changing anything when
the page is fully loaded.

Waiting for the document to be complete might be a problem if we had
images and so forth that we could plausibly be waiting for, but we
don't.

1 files changed, 12 insertions, 0 deletions

diff --git a/emcclib.js b/emcclib.js
index 60dbbf9..cee6d85 100644
--- a/emcclib.js
+++ b/emcclib.js
@@ -574,6 +574,12 @@ mergeInto(LibraryManager.library, {
      * alone and return false.
      */
     js_canvas_get_preferred_size: function(wp, hp) {
+        if (document.readyState == "complete" && containing_div !== null) {
+            var dpr = window.devicePixelRatio || 1;
+            setValue(wp, containing_div.clientWidth * dpr, "i32");
+            setValue(hp, containing_div.clientHeight * dpr, "i32");
+            return true;
+        }
         return false;
     },
 
@@ -591,6 +597,12 @@ mergeInto(LibraryManager.library, {
         if (resizable_div !== null)
             resizable_div.style.width =
                 w / (window.devicePixelRatio || 1) + "px";
+        else {
+            onscreen_canvas.style.width =
+                w / (window.devicePixelRatio || 1) + "px";
+            onscreen_canvas.style.height =
+                h / (window.devicePixelRatio || 1) + "px";
+        }
 
         onscreen_canvas.height = h;
         offscreen_canvas.height = h;