Remove header/footer layouts

codefrau · Mar 24, 2024 · c7154a5 · c7154a5
1 parent 698cf3f
commit c7154a5
Show file tree

Hide file tree

Showing 12 changed files with 17 additions and 172 deletions.
diff --git a/demo/simple.css b/demo/simple.css
@@ -1,5 +1,5 @@
 body {
-    background-color: #eae6d1;
+    background-color: #333;
     font-family: sans-serif;
 }
 canvas {
@@ -16,25 +16,6 @@ canvas.pixelated {
     image-rendering: pixelated;
     -ms-interpolation-mode: nearest-neighbor;
 }
-label {
-    padding-right: 3em;
-}
-div#sqHeader {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    padding: 10px;
-    border-bottom: 6px double gray;
-}
-div#sqFooter {
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    padding: 10px;
-    border-top: 6px double gray;
-}
 div#sqSpinner {
     position: fixed;
     margin: auto; top: 0; left: 0; bottom: 0; right: 0;

diff --git a/demo/simple.html b/demo/simple.html
@@ -30,7 +30,6 @@
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="msapplication-TileImage" content="icon.png">
 
-<link rel="stylesheet" href="../lib/gh-fork-ribbon.css">
 <link rel="stylesheet" href="../lib/addtohomescreen.css">
 <script src="../lib/addtohomescreen.js"></script>
 
@@ -41,25 +40,6 @@
 
 </head>
 <body>
-    <div id="sqHeader">
-        <h1>SqueakJS</h1>
-        <label title="Swap middle and right mouse buttons"><input id="sqSwapButtons" type="checkbox">swap buttons</label>
-        <label title="Make Squeak as large as possible"><input id="sqFullscreen" type="checkbox">full screen</label>
-        <div class="github-fork-ribbon-wrapper right">
-            <div class="github-fork-ribbon">
-                <a href="https://github.com/codefrau/SqueakJS" target="_blank">Fork me on GitHub</a>
-            </div>
-        </div>
-    </div>
-    <div id="sqFooter">
-        <p><a href="../" target="_blank">SqueakJS</a> is a Virtual Machine
-        for the Squeak dialect of Smalltalk, written in pure JavaScript by Vanessa Freudenberg.
-        Above is a stripped-down version of Squeak 2.2, which was released in 1998.
-        Modern Squeak versions are much more advanced, but more demanding, too. You can try
-        them on the SqueakJS <a href="../run">launcher page</a>.
-        Also, you may want to try the <a href= "https://smalltalkzoo.thechm.org/HOPL-Squeak.html?mini">Lively SqueakJS Debugger</a>.
-        </p>
-    </div>
     <canvas id="sqCanvas"></canvas>
     <div id="sqSpinner"><div></div></div>
 </body>

diff --git a/demo/simple.js b/demo/simple.js
@@ -21,25 +21,14 @@
  */
 
 
-var fullscreen = navigator.standalone ||
-    window.matchMedia('(max-device-width: 800px) and (max-device-height: 800px)').matches;
-
 window.onload = function() {
     SqueakJS.runSqueak('squeakjs.image', sqCanvas, {
         appName: "SqueakJS",
         files: ['squeakjs.image', 'squeakjs.changes'],
-        fullscreen: fullscreen,
-        swapButtons: true,
-        header: sqHeader,
-        footer: sqFooter,
         spinner: sqSpinner,
-        swapCheckbox: sqSwapButtons,
-        fullscreenCheckbox: sqFullscreen,
     });
 };
 
-if (addToHomescreen.isStandalone)
-    fullscreen = true;
-else addToHomescreen({
+if (!addToHomescreen.isStandalone) addToHomescreen({
     appID: 'squeakjs.demo.add2home',
 });
diff --git a/etoys/etoys.css b/etoys/etoys.css
@@ -1,5 +1,5 @@
 body {
-    background-color: #eae6d1;
+    background-color: #333;
     font-family: sans-serif;
 }
 canvas {
@@ -16,22 +16,6 @@ canvas.pixelated {
     image-rendering: pixelated;
     -ms-interpolation-mode: nearest-neighbor;
 }
-div#sqHeader {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    padding: 10px;
-    border-bottom: 6px double gray;
-}
-div#sqFooter {
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    padding: 10px;
-    border-top: 6px double gray;
-}
 div#sqSpinner {
     position: fixed;
     margin: auto; top: 0; left: 0; bottom: 0; right: 0;

diff --git a/etoys/etoys.js b/etoys/etoys.js
@@ -20,27 +20,24 @@
  * THE SOFTWARE.
  */
 
-var fullscreen = navigator.standalone ||
-    window.matchMedia('(max-device-width: 800px) and (max-device-height: 800px)').matches;
 
 window.onload = function() {
     var url = "https://freudenbergs.de/vanessa/squeakjs/etoys.image";
     SqueakJS.runSqueak(url, sqCanvas, {
         appName: "Etoys",
         fixedWidth: 1200,
         fixedHeight: 900,
-        fullscreen: fullscreen,
-        header: sqHeader,
-        footer: sqFooter,
         spinner: sqSpinner,
         files: ["Etoys/EtoysV5.stc"],
         root: "/Etoys",
         templates: { "/Etoys": "Etoys" },
+        onStart: function(vm, display, options) {
+            // debugger
+            // vm.breakOn("Latin1Environment class>>systemConverterClass");
+        },
     });
 };
 
-if (addToHomescreen.isStandalone)
-    fullscreen = true;
-else addToHomescreen({
+if (!addToHomescreen.isStandalone) addToHomescreen({
     appID: 'squeakjs.etoys.add2home',
 });
diff --git a/etoys/index.html b/etoys/index.html
@@ -40,21 +40,6 @@
 
 </head>
 <body>
-    <div id="sqHeader">
-        <h1>SqueakJS/Etoys</h1>
-        <div class="github-fork-ribbon-wrapper right">
-            <div class="github-fork-ribbon">
-                <a href="https://github.com/codefrau/SqueakJS" target="_blank">Fork me on GitHub</a>
-            </div>
-        </div>
-    </div>
-    <div id="sqFooter">
-        <p>This is <a href="../" target="_blank">SqueakJS</a>
-        running <a href="http://squeakland.org/" target="_blank">Etoys</a> without the usual browser plugin.
-        You can also run it in the <a href= "https://smalltalkzoo.thechm.org/HOPL-Squeak.html?etoys">Lively SqueakJS</a> debugger.
-        Feedback and contributions welcome! — Vanessa Freudenberg
-        </p>
-    </div>
     <canvas id="sqCanvas" width="1200" height="900"></canvas>
     <div id="sqSpinner"><div></div></div>
 </body>

diff --git a/run/index.html b/run/index.html
@@ -12,7 +12,6 @@
         sqText.style.display = "none";
         sqCanvas.style.display = "block";
         SqueakJS.runSqueak(imageName, sqCanvas,{
-            fullscreen: true,
             spinner: sqSpinner,
             appName: imageName && imageName.replace(/.*\//, "").replace(/\.image$/, ""),
             onStart: function(vm, display, options) {
@@ -242,8 +241,8 @@ <h2>Run SqueakJS apps</h2>
         The apps are configured to use template files (e.g. example projects and artwork)
         that are loaded from a server on demand.
         <ul>
-            <li><a href="../etoys/#fullscreen=true" target="_blank">Etoys</a></li>
-            <li><a href="../scratch/#fullscreen=true" target="_blank">Scratch</a></li>
+            <li><a href="../etoys/" target="_blank">Etoys</a></li>
+            <li><a href="../scratch/" target="_blank">Scratch</a></li>
             <li>demo of the <a href="../demo/simple.html#document=JSBridge.st" target="_blank">JavaScript bridge</a> (not really an app)</li>
             <li><a href="https://codefrau.github.io/jasmine/" target="_blank">Croquet Jasmine</a> (2004)</li>
         </ul>

diff --git a/scratch/index.html b/scratch/index.html
@@ -30,7 +30,6 @@
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="msapplication-TileImage" content="scratch.png">
 
-<link rel="stylesheet" href="../lib/gh-fork-ribbon.css">
 <link rel="stylesheet" href="../lib/addtohomescreen.css">
 <script src="../lib/addtohomescreen.js"></script>
 
@@ -40,19 +39,6 @@
 
 </head>
 <body>
-    <div id="sqHeader">
-        <h1>Scratch on SqueakJS</h1>
-        <label title="Make Scratch as large as possible"><input id="sqFullscreen" type="checkbox">full screen</label>
-        <div class="github-fork-ribbon-wrapper right">
-            <div class="github-fork-ribbon">
-                <a href="https://github.com/codefrau/SqueakJS" target="_blank">Fork me on GitHub</a>
-            </div>
-        </div>
-    </div>
-    <div id="sqFooter">
-        <p>This is <a href="../" target="_blank">SqueakJS</a> running a Scratch image.
-        Feedback and contributions welcome! — Vanessa Freudenberg</p>
-    </div>
     <canvas id="sqCanvas"></canvas>
     <div id="sqSpinner"><div></div></div>
 </body>

diff --git a/scratch/scratch.css b/scratch/scratch.css
@@ -1,5 +1,5 @@
 body {
-    background-color: #eae6d1;
+    background-color: #333;
     font-family: sans-serif;
 }
 canvas {
@@ -16,22 +16,6 @@ canvas.pixelated {
     image-rendering: pixelated;
     -ms-interpolation-mode: nearest-neighbor;
 }
-div#sqHeader {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    padding: 10px;
-    border-bottom: 6px double gray;
-}
-div#sqFooter {
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    padding: 10px;
-    border-top: 6px double gray;
-}
 div#sqSpinner {
     position: fixed;
     margin: auto; top: 0; left: 0; bottom: 0; right: 0;

diff --git a/scratch/scratch.js b/scratch/scratch.js
@@ -27,18 +27,12 @@ window.onload = function() {
     var url = "https://freudenbergs.de/vanessa/squeakjs/scratch/Scratch.image";
     SqueakJS.runSqueak(url, sqCanvas, {
         appName: "Scratch",
-        fullscreen: fullscreen,
-        header: sqHeader,
-        footer: sqFooter,
         spinner: sqSpinner,
-        fullscreenCheckbox: sqFullscreen,
         root: "/Scratch",
         templates: ["Projects", "Media", "Help", "locale"],
     });
 };
 
-if (addToHomescreen.isStandalone)
-    fullscreen = true;
-else addToHomescreen({
+if (addToHomescreen.isStandalone) addToHomescreen({
     appID: 'squeakjs.scratch.add2home',
 });
diff --git a/squeak.js b/squeak.js
@@ -127,9 +127,6 @@ function setupFullscreen(display, canvas, options) {
         display.fullscreen = fullscreen;
         var fullwindow = fullscreen || options.fullscreen;
         box.style.background = fullwindow ? 'black' : '';
-        if (options.header) options.header.style.display = fullwindow ? 'none' : '';
-        if (options.footer) options.footer.style.display = fullwindow ? 'none' : '';
-        if (options.fullscreenCheckbox) options.fullscreenCheckbox.checked = fullscreen;
         setTimeout(onresize, 0);
     }
 
@@ -146,35 +143,16 @@ function setupFullscreen(display, canvas, options) {
     } else {
         var isFullscreen = false;
         checkFullscreen = function() {
-            if ((options.header || options.footer) && isFullscreen != display.fullscreen) {
+            if (isFullscreen != display.fullscreen) {
                 isFullscreen = display.fullscreen;
                 fullscreenChange(isFullscreen);
             }
         };
     }
 
-    if (options.fullscreenCheckbox) options.fullscreenCheckbox.onclick = function() {
-        display.fullscreen = options.fullscreenCheckbox.checked;
-        checkFullscreen();
-    };
-
     return checkFullscreen;
 }
 
-function setupSwapButtons(options) {
-    if (options.swapCheckbox) {
-        var imageName = Squeak.Settings["squeakImageName"] || "default",
-            settings = JSON.parse(Squeak.Settings["squeakSettings:" + imageName] || "{}");
-        if ("swapButtons" in settings) options.swapButtons = settings.swapButtons;
-        options.swapCheckbox.checked = options.swapButtons;
-        options.swapCheckbox.onclick = function() {
-            options.swapButtons = options.swapCheckbox.checked;
-            settings["swapButtons"] = options.swapButtons;
-            Squeak.Settings["squeakSettings:" + imageName] = JSON.stringify(settings);
-        };
-    }
-}
-
 function recordModifiers(evt, display) {
     var shiftPressed = evt.shiftKey,
         ctrlPressed = evt.ctrlKey && !evt.altKey,
@@ -358,8 +336,6 @@ function createSqueakDisplay(canvas, options) {
         document.body.style.margin = 0;
         document.body.style.backgroundColor = 'black';
         document.ontouchmove = function(evt) { evt.preventDefault(); };
-        if (options.header) options.header.style.display = 'none';
-        if (options.footer) options.footer.style.display = 'none';
     }
     var display = {
         context: canvas.getContext("2d"),
@@ -383,7 +359,6 @@ function createSqueakDisplay(canvas, options) {
         changedCallback: null,  // invoked when display size/scale changes
         // additional functions added below
     };
-    setupSwapButtons(options);
     if (options.pixelated) {
         canvas.classList.add("pixelated");
         display.cursorCanvas && display.cursorCanvas.classList.add("pixelated");
@@ -964,18 +939,11 @@ function createSqueakDisplay(canvas, options) {
             else
                 onresize();
         }, 300);
-        // if no fancy layout, don't bother
-        if ((!options.header || !options.footer) && !options.fullscreen) {
-            display.width = canvas.width;
-            display.height = canvas.height;
-            return;
-        }
         // CSS won't let us do what we want so we will layout the canvas ourselves.
-        var fullscreen = options.fullscreen || display.fullscreen,
-            x = 0,
-            y = fullscreen ? 0 : options.header.offsetTop + options.header.offsetHeight,
+        var x = 0,
+            y = 0,
             w = window.innerWidth,
-            h = fullscreen ? window.innerHeight : Math.max(100, options.footer.offsetTop - y),
+            h = window.innerHeight,
             paddingX = 0, // padding outside canvas
             paddingY = 0;
         // above are the default values for laying out the canvas
@@ -1077,7 +1045,6 @@ SqueakJS.runImage = function(buffer, name, display, options) {
             var vm = new Squeak.Interpreter(image, display, options);
             SqueakJS.vm = vm;
             Squeak.Settings["squeakImageName"] = name;
-            setupSwapButtons(options);
             display.clear();
             display.showBanner("Starting " + SqueakJS.appName);
             var spinner = setupSpinner(vm, options);

diff --git a/standalone/nw.html b/standalone/nw.html
@@ -17,12 +17,11 @@
 	    oldRunImg(buffer, name, display, options);
 	}.bind(SqueakJS);
         SqueakJS.runSqueak(imageName, sqCanvas, {
-            fullscreen: true,
             spinner: sqSpinner,
             appName: imageName && imageName.replace(/\.image$/, ""),
         });
     }
-    
+
     window.onload = function() {
         var p = require("path");
         var imageArg = nw.App.argv.find((a) => { return a.endsWith(".image") });