aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--emcclib.js12
-rw-r--r--emccpre.js22
2 files changed, 34 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;
diff --git a/emccpre.js b/emccpre.js
index f7e0cc5..318f799 100644
--- a/emccpre.js
+++ b/emccpre.js
@@ -144,6 +144,10 @@ var undo_button, redo_button;
// for positioning the resize handle.
var resizable_div;
+// Alternatively, an extrinsically sized div that we will size the
+// puzzle to fit.
+var containing_div;
+
// Helper function to find the absolute position of a given DOM
// element on a page, by iterating upwards through the DOM finding
// each element's offset from its parent, and thus calculating the
@@ -659,6 +663,24 @@ function initPuzzle() {
rescale_puzzle();
}
+ /*
+ * If the puzzle is sized to fit the page, try to detect changes
+ * of size of the containing element. Ideally this would use a
+ * ResizeObserver on the containing_div, but I want this to work
+ * on KaiOS 2.5, which doesn't have ResizeObserver. Instead we
+ * watch events that might indicate that the div has changed size.
+ */
+ containing_div = document.getElementById("puzzlecanvascontain");
+ if (containing_div !== null) {
+ var resize_handler = function(event) {
+ rescale_puzzle();
+ }
+ window.addEventListener("resize", resize_handler);
+ // Also catch the point when the document finishes loading,
+ // since sometimes we seem to get the div's size too early.
+ window.addEventListener("load", resize_handler);
+ }
+
Module.preRun = function() {
// Merge environment variables from HTML script element.
// This means you can add something like this to the HTML: