Restructure of entry/app.js to load CSS first

src/entry/app.js

@@ -12,6 +12,8 @@ import Camera from '../painteditor/Camera';
 // Entry-points for each page
 // Previously index.html
 function indexStartup () {
+    gn('gettings').ontouchend = indexGettingstarted;
+    gn('startcode').ontouchend = indexGohome;
     ScratchAudio.init();
     var urlvars = getUrlVars();
     if (urlvars.back) {
@@ -85,6 +87,7 @@ function indexGettingstarted () {
 // Previously home.html
 
 function homeStartup () {
+    gn('logotab').ontouchend = homeGoBack;
     homeStrings();
     iOS.getsettings(doNext);
     function doNext (str) {
@@ -354,36 +357,36 @@ function inappBlocksGuide () {
 
 // App-wide entry-point
 window.onload = () => {
-    let page = window.scratchJrPage;
+    // Function to be called after settings, locale strings, and Media Lib
-    let root = './';
+    // are asynchronously loaded. This is overwritten per HTML page below.
-    if (page == 'inappAbout' || page == 'inappInterfaceGuide' ||
+    let entryFunction = () => {};
-        page == 'inappPaintEditorGuide' || page == 'inappBlocksGuide') {
-        root = '../';
-    }
-    // Load settings from JSON
-    loadSettings(root, () => {
-        // Load locale strings from JSON
-        Localization.includeLocales(root, () => {
-            // Load Media Lib from JSON
-            MediaLib.loadMediaLib(root, () => {
-                // Continue to load the page
 
-                if (page == 'index') {
+    // Root directory for includes. Needed in case we are in the inapp-help
+    // directory (and root becomes '../')
+    let root = './';
+
+    // scratchJrPage is defined in the HTML pages
+    let page = window.scratchJrPage;
+
+    switch (page) {
+    case 'index':
+        // Index page (splash screen)
         preprocessAndLoadCss('css', 'css/font.css');
         preprocessAndLoadCss('css', 'css/base.css');
         preprocessAndLoadCss('css', 'css/start.css');
         preprocessAndLoadCss('css', 'css/thumbs.css');
-                    gn('gettings').ontouchend = indexGettingstarted;
+        entryFunction = () => iOS.waitForInterface(indexStartup);
-                    gn('startcode').ontouchend = indexGohome;
+        break;
-                    iOS.waitForInterface(indexStartup);
+    case 'home':
-                } else if (page == 'home') {
+        // Lobby pages
         preprocessAndLoadCss('css', 'css/font.css');
         preprocessAndLoadCss('css', 'css/base.css');
         preprocessAndLoadCss('css', 'css/lobby.css');
         preprocessAndLoadCss('css', 'css/thumbs.css');
-                    gn('logotab').ontouchend = homeGoBack;
+        entryFunction = () => iOS.waitForInterface(homeStartup);
-                    iOS.waitForInterface(homeStartup);
+        break;
-                } else if (page == 'editor') {
+    case 'editor':
+        // Editor pages
         preprocessAndLoadCss('css', 'css/font.css');
         preprocessAndLoadCss('css', 'css/base.css');
         preprocessAndLoadCss('css', 'css/editor.css');
@@ -392,28 +395,52 @@ window.onload = () => {
         preprocessAndLoadCss('css', 'css/editormodal.css');
         preprocessAndLoadCss('css', 'css/librarymodal.css');
         preprocessAndLoadCss('css', 'css/paintlook.css');
-                    iOS.waitForInterface(editorCreateScratchJr);
+        entryFunction = () => iOS.waitForInterface(editorCreateScratchJr);
-                } else if (page == 'gettingStarted') {
+        break;
+    case 'gettingStarted':
+        // Getting started video page
         preprocessAndLoadCss('css', 'css/font.css');
         preprocessAndLoadCss('css', 'css/base.css');
         preprocessAndLoadCss('css', 'css/gs.css');
-                    iOS.waitForInterface(gettingStartedVideo);
+        entryFunction = () => iOS.waitForInterface(gettingStartedVideo);
-                } else if (page == 'inappAbout') {
+        break;
+    case 'inappAbout':
+        // About ScratchJr in-app help frame
         preprocessAndLoadCss('style', 'style/about.css');
-                    inappAbout();
+        entryFunction = () => inappAbout();
-                } else if (page == 'inappInterfaceGuide') {
+        root = '../';
+        break;
+    case 'inappInterfaceGuide':
+        // Interface guide in-app help frame
         preprocessAndLoadCss('style', 'style/style.css');
         preprocessAndLoadCss('style', 'style/interface.css');
-                    inappInterfaceGuide();
+        entryFunction = () => inappInterfaceGuide();
-                } else if (page == 'inappPaintEditorGuide') {
+        root = '../';
+        break;
+    case 'inappPaintEditorGuide':
+        // Paint editor guide in-app help frame
         preprocessAndLoadCss('style', 'style/style.css');
         preprocessAndLoadCss('style', 'style/paint.css');
-                    inappPaintEditorGuide();
+        entryFunction = () => inappPaintEditorGuide();
-                } else if (page == 'inappBlocksGuide') {
+        root = '../';
+        break;
+    case 'inappBlocksGuide':
+        // Blocks guide in-app help frame
         preprocessAndLoadCss('style', 'style/style.css');
         preprocessAndLoadCss('style', 'style/blocks.css');
-                    inappBlocksGuide();
+        entryFunction = () => inappBlocksGuide();
+        root = '../';
+        break;
     }
+
+    // Start up sequence
+    // Load settings from JSON
+    loadSettings(root, () => {
+        // Load locale strings from JSON
+        Localization.includeLocales(root, () => {
+            // Load Media Lib from JSON
+            MediaLib.loadMediaLib(root, () => {
+                entryFunction();
             });
         });
     });