Playground v4.5 : Multiples style modficiations and fixs. Following the PR #6625 comments.

Playground/css/index.css

@@ -79,6 +79,9 @@ body {
     font-size: 38px;
     color: #BB464B;
 }
+#embed-host {
+    z-index: 10;
+}
 .wrapper {
     height: calc(100% - 55px - 35px); /* navbar top and bottom*/
     width: calc(100%);
@@ -356,6 +359,15 @@ body {
     right: 0;
     top: 0;
 }
+.navbar .category.right .button.selected {
+    background-color: white;
+}
+.navbar .category.right.languageJS .examplesButton.selected img {
+    filter: invert(17%) sepia(61%) saturate(651%) hue-rotate(214deg) brightness(91%) contrast(84%);
+}
+.navbar .category.right.languageTS .examplesButton.selected img {
+    filter: invert(34%) sepia(21%) saturate(3832%) hue-rotate(324deg) brightness(88%) contrast(82%);
+}
 
 .navbar .category .buttonJStoTS {
     display: inline-block;
@@ -373,6 +385,9 @@ body {
     float: left;
 }
 
+.button.run {
+    background-color: white;
+}
 .button {
     cursor: pointer;
     display: inline-block;
@@ -404,6 +419,9 @@ body {
     cursor: pointer;
     background-color: white;
 }
+.button:hover span {
+    color: #3f3461;
+}
 .languageJS .button:hover img {
     filter: invert(17%) sepia(61%) saturate(651%) hue-rotate(214deg) brightness(91%) contrast(84%);
 }
@@ -447,6 +465,9 @@ body {
     padding: 1px 5px 1px 15px;
     text-align: left;
 }
+.navbar .select .toDisplay.currentVersionDisplay  .option {
+    text-transform: lowercase; 
+}
 .navbar .select .toDisplay.languageJS {
     background-color: #3f3461;
 }
@@ -478,27 +499,30 @@ body {
     background-color: white;
 }
 .navbar .select .subSelect .toDisplaySub.languageJS .option {
-    color: #9379e6
+    color: white;
+    background-color: #bfabff;
+    
+}
+.navbar .select .subSelect .toDisplaySub.languageJS .option.selected {
+    color: #9379e6;
+    background-color: white;
 }
 .navbar .select .subSelect .toDisplaySub.languageJS .option:hover {
     color: white;
     background-color: #9379e6;
 }
-.navbar .select .subSelect .toDisplaySub.languageJS .option.selected {
+.navbar .select .subSelect .toDisplaySub.languageTS .option {
     color: white;
-    background-color: #bfabff;
+    background-color: #ff7656;
 }
-.navbar .select .subSelect .toDisplaySub.languageTS .option {
+.navbar .select .subSelect .toDisplaySub.languageTS .option.selected {
     color: #e0684b;
+    background-color: white;
 }
 .navbar .select .subSelect .toDisplaySub.languageTS .option:hover {
     color: white;
     background-color: #e0684b;
 }
-.navbar .select .subSelect .toDisplaySub.languageTS .option.selected {
-    color: white;
-    background-color: #ff7656;
-}
 .navbar .select .subSelect .qrCodeImage div {
     width: 256px;
     height: 256px;
@@ -669,6 +693,9 @@ body {
     color: white;
     font-size: 14px;
 }
+.save-layer .save-form img {
+    display: none;
+}
 .save-layer .save-form .separator {
     width: 350px;
     border-bottom: 1px solid #999;

Playground/css/index_mobile.css

@@ -219,9 +219,13 @@
         height: 180px;
     }
 
+    .save-layer {
+        top: 40px;
+        height: calc(100% - 40px);
+    }
     .save-layer .save-form {
         z-index: 15;
-        position: fixed;
+        position: relative;
         width: 100%;
         height: 100%;
         overflow: auto;
@@ -232,6 +236,12 @@
         padding-bottom: 20px;
         box-sizing: border-box;
     }
+    .save-layer .save-form img {
+        float: right;
+        width: 36px;
+        margin: -8px 10px 0 -45px ;
+        filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
+    }
     .save-layer .save-form .separator, .save-layer .save-form input, .save-layer .save-form textarea {
         box-sizing: border-box;
         width: calc(100% - 20px);

Playground/index.html

@@ -329,6 +329,7 @@
 
     <div id="saveLayer" class="save-layer">
         <div class="save-form languageJS ">
+            <img id="saveFormButtonClose" src="css/img/clearButton.svg">
             <label for="saveFormTitle">TITLE</label>
             <div class="separator"></div>
             <input type="text" maxlength="120" id="saveFormTitle" class="save-form-title">

Playground/js/examples.js

@@ -7,63 +7,67 @@ class Examples {
 
         this.isExamplesDisplayed = false;
 
-        // There's a "close" button on the mobile interface.
-        document.getElementById("examplesButtonClose").addEventListener("click", this.hideExamples.bind(this));
+        this.fpsLabel = document.getElementById('fpsLabel');
+        this.examplesButtons = document.getElementsByClassName('examplesButton');
+        this.exampleList = document.getElementById('exampleList');
+
         /**
          * Display / hide with the "examples" button. On any size interface
          */
-        var examplesButton = document.getElementsByClassName("examplesButton");
-        if (examplesButton.length > 0) {
-            for (var i = 0; i < examplesButton.length; i++) {
-                examplesButton[i].parentElement.onclick = function () {
+        if (this.examplesButtons.length > 0) {
+            for (var i = 0; i < this.examplesButtons.length; i++) {
+                this.examplesButtons[i].parentElement.onclick = function () {
                     if (!this.isExamplesDisplayed) this.displayExamples();
                     else this.hideExamples();
                 }.bind(this);
             }
         }
 
+        // There's a "close" button on the mobile interface.
+        document.getElementById('examplesButtonClose').addEventListener('click', this.hideExamples.bind(this));
+
         /**
          * The filter bar is used to search a thing on the examples.
          * This react on any input on the bar, or on a click on the search button.
          */
-        var filterBar = document.getElementById("filterBar");
+        var filterBar = document.getElementById('filterBar');
         if (filterBar) {
-            var filterBarClear = document.getElementById("filterBarClear");
+            var filterBarClear = document.getElementById('filterBarClear');
             var filter = function () {
                 var filterText = filterBar.value.toLowerCase();
-                if (filterText == "") filterBarClear.style.display = "none";
-                else filterBarClear.style.display = "inline-block";
+                if (filterText == '') filterBarClear.style.display = 'none';
+                else filterBarClear.style.display = 'inline-block';
 
-                var lines = document.getElementsByClassName("itemLine");
+                var lines = document.getElementsByClassName('itemLine');
                 for (var lineIndex = 0; lineIndex < lines.length; lineIndex++) {
                     var line = lines[lineIndex];
                     if (line.innerText.toLowerCase().indexOf(filterText) > -1) {
-                        line.style.display = "";
+                        line.style.display = '';
                     } else {
-                        line.style.display = "none";
+                        line.style.display = 'none';
                     }
                 }
 
-                var categories = document.getElementsByClassName("categoryContainer");
+                var categories = document.getElementsByClassName('categoryContainer');
                 var displayCount = categories.length;
 
                 for (var categoryIndex = 0; categoryIndex < categories.length; categoryIndex++) {
                     var category = categories[categoryIndex];
-                    category.style.display = "block";
+                    category.style.display = 'block';
                     if (category.clientHeight < 25) {
-                        category.style.display = "none";
+                        category.style.display = 'none';
                         displayCount--;
                     }
                 }
 
-                if (displayCount == 0) document.getElementById("noResultsContainer").style.display = "block";
-                else document.getElementById("noResultsContainer").style.display = "none";
+                if (displayCount == 0) document.getElementById('noResultsContainer').style.display = 'block';
+                else document.getElementById('noResultsContainer').style.display = 'none';
             }
             filterBar.oninput = function () {
                 filter();
             }
             filterBarClear.onclick = function () {
-                filterBar.value = "";
+                filterBar.value = '';
                 filter();
             }
         }
@@ -73,14 +77,14 @@ class Examples {
      * Function to display the examples menu
      */
     displayExamples() {
+        this.parent.menuPG.removeAllOptions();
+
         this.isExamplesDisplayed = true;
-        document.getElementById("fpsLabel").style.display = "none";
-        document.getElementById("exampleList").style.display = "block";
-        document.getElementsByClassName("wrapper")[0].style.width = "calc(100% - 400px)";
-        var menus = document.getElementsByClassName("toDisplay");
-        for (var i = 0; i < menus.length; i++) {
-            menus[i].style.display = "none";
-        }
+        this.exampleList.style.display = 'block';
+        document.getElementsByClassName('wrapper')[0].style.width = 'calc(100% - 400px)';
+
+        this.fpsLabel.style.display = 'none';
+        this.toggleExamplesButtons.call(this, true);
     };
 
     /**
@@ -88,8 +92,22 @@ class Examples {
      */
     hideExamples() {
         this.isExamplesDisplayed = false;
-        document.getElementById("fpsLabel").style.display = "block";
-        document.getElementById("exampleList").style.display = "none";
-        document.getElementsByClassName("wrapper")[0].style.width = "100%";
+        this.exampleList.style.display = 'none';
+        document.getElementsByClassName('wrapper')[0].style.width = '100%';
+        
+        if(this.parent.menuPG && this.parent.menuPG.isMobileVersion && document.getElementById('jsEditor').style.display == 'block') {}
+        else this.fpsLabel.style.display = 'block';
+        this.toggleExamplesButtons.call(this, false);
+    };
+
+    toggleExamplesButtons(selected) {
+        if (this.examplesButtons.length > 0) {
+            for (var i = 0; i < this.examplesButtons.length; i++) {
+                if(selected)
+                    this.examplesButtons[i].parentElement.classList.add("selected");
+                else
+                    this.examplesButtons[i].parentElement.classList.remove("selected");
+            }
+        }
     };
 }

Playground/js/main.js

@@ -28,14 +28,6 @@ class Main {
      * Main function of the app
      */
     run() {
-
-        // TO DO - Rewrite this with unpkg.com
-        if (location.href.indexOf("indexStable") !== -1) {
-            this.parent.utils.setToMultipleID("currentVersion", "innerHTML", "v.3.0");
-        } else {
-            this.parent.utils.setToMultipleID("currentVersion", "innerHTML", "v.4.0");
-        }
-
         document.getElementById("saveFormButtonOk").addEventListener("click", function () {
             document.getElementById("saveLayer").style.display = "none";
             this.save();
@@ -61,16 +53,21 @@ class Main {
 
 
         // -------------------- UI --------------------
-        // TO DO - A proper UI class ?
-
+        
         // Display BJS version
         this.parent.utils.setToMultipleID("mainTitle", "innerHTML", "v" + BABYLON.Engine.Version);
         // Run
         this.parent.utils.setToMultipleID("runButton", "click", this.compileAndRun.bind(this));
         // New
-        this.parent.utils.setToMultipleID("newButton", "click", this.createNewScript.bind(this));
+        this.parent.utils.setToMultipleID("newButton", "click", function () {
+            this.parent.menuPG.removeAllOptions();
+            this.createNewScript.call(this);
+        }.bind(this));
         // Clear 
-        this.parent.utils.setToMultipleID("clearButton", "click", this.clear.bind(this));
+        this.parent.utils.setToMultipleID("clearButton", "click", function () {
+            this.parent.menuPG.removeAllOptions();
+            this.clear.call(this);
+        }.bind(this));
         // Save
         this.parent.utils.setToMultipleID("saveButton", "click", this.askForSave.bind(this));
         // Zip
@@ -78,15 +75,23 @@ class Main {
             this.parent.zipTool.getZip(this.engine);
         }.bind(this));
         // Themes
-        this.parent.utils.setToMultipleID("darkTheme", "click", [this.parent.settingsPG.setTheme.bind(this.parent.settingsPG, 'dark'), this.parent.menuPG.clickOptionSub.bind(this.parent.menuPG)]);
-        this.parent.utils.setToMultipleID("lightTheme", "click", [this.parent.settingsPG.setTheme.bind(this.parent.settingsPG, 'light'), this.parent.menuPG.clickOptionSub.bind(this.parent.menuPG)]);
+        this.parent.utils.setToMultipleID("darkTheme", "click", function () {
+            this.parent.menuPG.removeAllOptions();
+            this.parent.settingsPG.setTheme.call(this.parent.settingsPG, 'dark');
+        }.bind(this));
+        this.parent.utils.setToMultipleID("lightTheme", "click", function () {
+            this.parent.menuPG.removeAllOptions();
+            this.parent.settingsPG.setTheme.call(this.parent.settingsPG, 'light');
+        }.bind(this));
         // Size
         var displayFontSize = document.getElementsByClassName('displayFontSize');
         for (var i = 0; i < displayFontSize.length; i++) {
             var options = displayFontSize[i].querySelectorAll('.option');
             for (var j = 0; j < options.length; j++) {
-                options[j].addEventListener('click', this.parent.menuPG.clickOptionSub.bind(this.parent.menuPG));
-                options[j].addEventListener('click', this.parent.settingsPG.setFontSize.bind(this.parent.settingsPG, options[j].innerText));
+                options[j].addEventListener('click', function (evt) {
+                    this.parent.menuPG.removeAllOptions();
+                    this.parent.settingsPG.setFontSize.call(this.parent.settingsPG, evt.target.innerText)
+                }.bind(this));
             }
         }
         // Footer links
@@ -99,12 +104,16 @@ class Main {
         }
         // Language (JS / TS)
         this.parent.utils.setToMultipleID("toTSbutton", "click", function () {
-            this.parent.settingsPG.ScriptLanguage = "TS";
-            location.reload();
+            if (this.parent.settingsPG.ScriptLanguage == "JS") {
+                this.parent.settingsPG.ScriptLanguage = "TS";
+                location.reload();
+            }
         }.bind(this));
         this.parent.utils.setToMultipleID("toJSbutton", "click", function () {
-            this.parent.settingsPG.ScriptLanguage = "JS";
-            location.reload();
+            if (this.parent.settingsPG.ScriptLanguage == "TS") {
+                this.parent.settingsPG.ScriptLanguage = "JS";
+                location.reload();
+            }
         }.bind(this));
         // Safe mode
         this.parent.utils.setToMultipleID("safemodeToggle", 'click', function () {
@@ -119,18 +128,31 @@ class Main {
         this.parent.utils.setToMultipleID("editorButton", "click", this.toggleEditor.bind(this));
         // FullScreen
         this.parent.utils.setToMultipleID("fullscreenButton", "click", function () {
+            this.parent.menuPG.removeAllOptions();
             this.parent.menuPG.goFullscreen(this.engine);
         }.bind(this));
         // Editor fullScreen
-        this.parent.utils.setToMultipleID("editorFullscreenButton", "click", this.parent.menuPG.editorGoFullscreen.bind(this.parent.menuPG));
+        this.parent.utils.setToMultipleID("editorFullscreenButton", "click", function () {
+            this.parent.menuPG.removeAllOptions();
+            this.parent.menuPG.editorGoFullscreen.call(this.parent.menuPG)
+        }.bind(this));
         // Format
-        this.parent.utils.setToMultipleID("formatButton", "click", this.parent.monacoCreator.formatCode.bind(this.parent.monacoCreator));
+        this.parent.utils.setToMultipleID("formatButton", "click", function () {
+            this.parent.menuPG.removeAllOptions();
+            this.parent.monacoCreator.formatCode.call(this.parent.monacoCreator)
+        }.bind(this));
         // Minimap
         this.parent.utils.setToMultipleID("minimapToggle", "click", this.parent.monacoCreator.toggleMinimap.bind(this.parent.monacoCreator));
-        // Debug
-        this.parent.utils.setToMultipleID("debugButton", "click", this.toggleDebug.bind(this));
+        // Inspector
+        this.parent.utils.setToMultipleID("debugButton", "click", function () {
+            this.parent.menuPG.removeAllOptions();
+            this.toggleDebug.call(this);
+        }.bind(this));
         // Metadata
-        this.parent.utils.setToMultipleID("metadataButton", "click", this.parent.menuPG.displayMetadata.bind(this.parent.menuPG));
+        this.parent.utils.setToMultipleID("metadataButton", "click", function () {
+            this.parent.menuPG.removeAllOptions();
+            this.parent.menuPG.displayMetadata.call(this.parent.menuPG)
+        }.bind(this));
         // Initialize the metadata form
         this.showNoMetadata();
 
@@ -389,7 +411,8 @@ class Main {
     };
 
     checkSafeMode(message) {
-        if (document.getElementById("safemodeToggle" + this.parent.getCurrentSize).classList.contains('checked')) {
+        if (document.getElementById("safemodeToggle" + this.parent.getCurrentSize) &&
+            document.getElementById("safemodeToggle" + this.parent.getCurrentSize).classList.contains('checked')) {
             let confirm = window.confirm(message);
             if (!confirm) {
                 return false;
@@ -676,21 +699,6 @@ class Main {
     };
 
     /**
-     * BJS version
-     */
-    // TO DO - Rewrite this with unpkg.com
-    setVersion(version) {
-        // switch (version) {
-        //     case "stable":
-        //         location.href = "indexStable.html" + location.hash;
-        //         break;
-        //     default:
-        //         location.href = "index.html" + location.hash;
-        //         break;
-        // }
-    };
-
-    /**
          * Toggle the code editor
          */
     toggleEditor() {

Playground/js/menuPG.js

@@ -46,6 +46,12 @@ class MenuPG {
         for (var index = 0; index < this.allSelect.length; index++) {
             this.allSelect[index].addEventListener('click', this.displayMenu.bind(this));
         }
+        // Handle quit of menus
+        for (var i = 0; i < this.allToDisplay.length; i++) {
+            this.allToDisplay[i].addEventListener('mouseleave', function () {
+                this.removeAllOptions();
+            }.bind(this));
+        }
 
         // Handle mouseover / click on subSelect
         for (var index = 0; index < this.allSubSelect.length; index++) {
@@ -84,7 +90,15 @@ class MenuPG {
         }.bind(this));
 
         // On click anywhere, remove displayed options
+        // Avoid this if clicking in a menu
+        this.skipNextClick = false;
+        document.getElementById("exampleList").addEventListener('click', function () { this.skipNextClick = true; }.bind(this)); // Weird, does'nt work on mobile
+        document.getElementsByClassName("save-form")[0].addEventListener('click', function () { this.skipNextClick = true; }.bind(this));
         window.addEventListener('click', function () {
+            if (this.skipNextClick) {
+                this.skipNextClick = false;
+                return;
+            }
             this.removeAllOptions();
         }.bind(this));
 
@@ -99,7 +113,7 @@ class MenuPG {
                 var newButton = document.createElement("div");
                 newButton.classList.add("option");
                 // newButton.classList.add("noSubSelect");
-                newButton.innerText = CONFIG_last_versions[j][0];
+                newButton.innerText = "v" + CONFIG_last_versions[j][0];
                 newButton.value = CONFIG_last_versions[j][1];
 
                 newButton.addEventListener("click", function (evt) {
@@ -110,9 +124,15 @@ class MenuPG {
                 versionButtons.lastElementChild.appendChild(newButton);
             }
         }
+        this.displayVersionNumber(BABYLON.Engine.Version.substring(0, BABYLON.Engine.Version.search('-')));
+
+        // There's a metadatas close button on the mobile interface.
+        document.getElementById('saveFormButtonClose').addEventListener('click', this.hideMetadata.bind(this));
+        // Avoid closing metadatas when "onmouseleave" on menu
+        this.skipNextHideMetadatas = false;
 
         this.showQRCodes();
-    }
+    };
 
     /**
      * The logo displayed while loading the page
@@ -127,7 +147,8 @@ class MenuPG {
     displayVersionNumber(version) {
         this.hideWaitDiv();
         for (var i = 0; i < this.parent.utils.multipleSize.length; i++) {
-            document.getElementById("currentVersion" + this.parent.utils.multipleSize[i]).parentElement.firstElementChild.innerText = "v." + version;
+
+            document.getElementById("currentVersion" + this.parent.utils.multipleSize[i]).parentElement.firstElementChild.innerText = "v" + version;
         }
     };
 
@@ -216,13 +237,14 @@ class MenuPG {
         }
         if (!target.classList.contains('subSelect') && target.parentNode.style.display == 'block') {
             target.parentNode.style.display = 'none'
+
         }
 
         evt.preventDefault();
         evt.stopPropagation();
     };
 
-    /**
+    /** 
      * Remove displayed subItems
      */
     removeAllSubItems() {
@@ -235,6 +257,7 @@ class MenuPG {
      */
     removeAllOptions() {
         this.parent.examples.hideExamples();
+        this.hideMetadata();
         this.removeAllSubItems();
 
         for (var index = 0; index < this.allToDisplay.length; index++) {
@@ -243,6 +266,7 @@ class MenuPG {
                 a.style.display = 'none';
             }
         }
+
         for (var index = 0; index < this.allToDisplayBig.length; index++) {
             var b = this.allToDisplayBig[index];
             if (b.style.display == 'block') {
@@ -258,10 +282,10 @@ class MenuPG {
         if (this.navBarMobile.offsetHeight > 0) {
             this.removeAllOptions();
             this.canvasZoneElement.style.width = '0';
-            this.switchWrapper.style.left = "";
-            this.switchWrapper.style.right = "0";
+            this.switchWrapper.style.left = '';
+            this.switchWrapper.style.right = '0';
             this.switchWrapperCode.style.display = 'none';
-            this.fpsLabelElement.style.display = 'none';
+            this.fpsLabelElement.style.display = 'none'
             this.jsEditorElement.style.width = '100%';
             this.jsEditorElement.style.display = 'block';
             if (document.getElementsByClassName('gutter-horizontal').length > 0) document.getElementsByClassName('gutter-horizontal')[0].style.display = 'none';
@@ -279,8 +303,8 @@ class MenuPG {
             document.getElementsByClassName('gutter-horizontal')[0].style.display = 'none';
             this.switchWrapperCanvas.style.display = 'none';
             this.canvasZoneElement.style.width = '100%';
-            this.switchWrapper.style.left = "0";
-            this.switchWrapper.style.right = "";
+            this.switchWrapper.style.left = '0';
+            this.switchWrapper.style.right = '';
             this.switchWrapperCode.style.display = 'block';
             this.fpsLabelElement.style.display = 'block';
         }
@@ -341,15 +365,27 @@ class MenuPG {
      * Display the metadatas form
      */
     displayMetadata() {
-        this.removeAllOptions();
+        this.skipNextHideMetadatas = true;
         document.getElementById("saveLayer").style.display = "block";
     };
+    /**
+     * Hide the metadatas form
+     */
+    hideMetadata() {
+        if (this.skipNextHideMetadatas) {
+            this.skipNextHideMetadatas = false;
+            return;
+        }
+        else {
+            this.skipNextHideMetadatas = false;
+            document.getElementById("saveLayer").style.display = "none";
+        }
+    };
+
 
     /**
      * Navigation Overwrites
      */
-    // TO DO - Apply this when click on TS / JS button
-    // TO DO - Make it work with all sizes
     exitPrompt(e) {
         var safeToggle = document.getElementById("safemodeToggle1280");
         if (safeToggle.classList.contains('checked')) {
@@ -360,10 +396,10 @@ class MenuPG {
                 e.returnValue = message;
             }
             return message;
+
         }
     };
 
-    // TO DO - Make it work with all sizes
     showQRCodes() {
         for (var i = 0; i < this.parent.utils.multipleSize.length; i++) {
             $("#qrCodeImage" + this.parent.utils.multipleSize[i]).empty();