Playgreound : Pull #6540 part 2.

- Reviewed the mobile CSS
- Modified the index.html but not other .html
- Rewrote a large portion of index.js, splited in classes.
- Still have to split the big "Run" function
- Added some "TO DO" for things I must dig a little more...

Playground/css/color_ts.css

@@ -1,4 +1,7 @@
-@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400");
+/* To change the colors of the SVG images, use this website :
+https://codepen.io/sosuke/pen/Pjoqqp */
+
+@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400");
 @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css");
 #waitTitle {
     color: rgb(208, 23, 211);

Playground/css/img/canvas3Dbutton.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 55"><defs><style>.cls-1{fill:none;}</style></defs><title>canvas3Dbutton</title><g id="Icon_buttons" data-name="Icon buttons"><rect class="cls-1" width="55" height="55"/><path d="M27.71,17.25l8.94,4.47V32.88l-8.94,4.48-8.94-4.48V21.72ZM27,35.47V26.7l-6.87-3.45V32ZM21,22.15l6.71,3.35,6.71-3.35L27.71,18.8ZM35.27,32V23.25L28.4,26.7v8.77Z"/></g></svg>

Playground/css/img/hamburgerButton.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 55"><defs><style>.cls-1{fill:none;}</style></defs><title>hamburgerButton</title><g id="UI"><rect x="18.46" y="20.1" width="17.99" height="2.36"/><rect x="18.46" y="26.34" width="17.99" height="2.36"/><rect x="18.46" y="32.59" width="17.99" height="2.36"/></g><g id="Icon_buttons" data-name="Icon buttons"><rect class="cls-1" width="55" height="55"/></g></svg>

Playground/css/img/logoTS.svg

@@ -0,0 +1,41 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 630 630">
+<!--
+The MIT License (MIT)
+
+Copyright (c) 2015 Remo H. Jansen <remo.jansen@wolksoftware.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+-->
+<rect width="630" height="630" fill="#000"/>
+<g transform="translate(0.000000,630.000000) scale(0.100000,-0.100000)"
+fill="#007ACC" stroke="none">
+<path d="M0 3150 l0 -3150 3150 0 3150 0 0 3150 0 3150 -3150 0 -3150 0 0
+-3150z m5077 251 c160 -40 282 -111 394 -227 58 -62 144 -175 151 -202 2 -8
+-272 -192 -438 -295 -6 -4 -30 22 -57 62 -81 118 -166 169 -296 178 -191 13
+-314 -87 -313 -254 0 -49 7 -78 27 -118 42 -87 120 -139 365 -245 451 -194
+644 -322 764 -504 134 -203 164 -527 73 -768 -100 -262 -348 -440 -697 -499
+-108 -19 -364 -16 -480 5 -253 45 -493 170 -641 334 -58 64 -171 231 -164 243
+3 4 29 20 58 37 28 16 134 77 234 135 l181 105 38 -56 c53 -81 169 -192 239
+-229 201 -106 477 -91 613 31 58 53 82 108 82 189 0 73 -9 105 -47 160 -49 70
+-149 129 -433 252 -325 140 -465 227 -593 365 -74 80 -144 208 -173 315 -24
+89 -30 312 -11 402 67 314 304 533 646 598 111 21 369 13 478 -14z m-1479
+-263 l2 -258 -410 0 -410 0 0 -1165 0 -1165 -290 0 -290 0 0 1165 0 1165 -410
+0 -410 0 0 253 c0 140 3 257 7 260 3 4 502 6 1107 5 l1101 -3 3 -257z" />
+</g>
+</svg>

Playground/css/index.css

@@ -161,6 +161,14 @@ body {
     font-weight: 700;
     color: white;
     font-size: 25px;
+    line-height: 36px;
+}
+#exampleList #exampleBanner h1 img {
+    float: right;
+    width: 36px;
+    margin-right: 10px;
+    margin-left: -45px;
+    filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
 }
 #exampleList .horizontalSeparator {
     width: 80%;

Playground/css/index550.css

@@ -4,76 +4,160 @@
     .navBar710 { display: none; }
     .navBar550 { display: block; }
 
-    #fpsLabel {
-        position: fixed;
-        top: calc(100% - 35px);
+    #exampleList {
+        height: calc(100% - 40px);
+        top: 40px;
         bottom: 0;
-        right: 0;
-        box-shadow: none;
     }
     .navbarBottom {
         display: none;
     }
     .wrapper {
-        height: calc(100% - 55px - 35px);
+        height: calc(100% - 40px);
+    }
+    .wrapper #canvasZone {
+        width: 0;
+    }
+    #fpsLabel {
+        position: fixed;
+        top: 40px;
+        right: 0;
+        line-height: 32px;
+        height: 35px;
+        padding: 0;
+        padding-right: 5px;
+        box-shadow: none;
+    }
+    .wrapper #jsEditor {
+        width: 100%;
     }
 
-    #JStoTSbar {
-        padding-left: 8px;
+    #switchWrapper {
+        position: fixed;
+        bottom: 0;
+        right: 0;
+        width: 40px;
+        height: 40px;
+    }
+    #switchWrapper img {
+        width: 40px;
+        height: 40px;
+        filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
     }
+
+
     #JStoTSbar .buttonJStoTS {
         border-top-left-radius: 12px;
     }
 
-    .navbar .categoryTitle {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        height: 35px;
-        line-height: 35px;
+    .navbar, .navbar .category, #JStoTSbar {
+        height: 40px;
+        line-height: 40px;
+        padding: 0;
         width: 100%;
     }
+    .navbar .category.right {
+        display: none;
+    }
+    .navbar .categoryTitle {
+        height: 40px;
+        line-height: 40px;
+        padding: 0;
+        width: calc(100% - 40px);
+        margin-left: -5px;
+    }
     .navbar .categoryTitle .logo, .navbar .categoryTitle .version {
         vertical-align: top;
         height: 100%;
-        margin: 0;
+        margin-right: 10px;
+    }
+    .navbar .categoryTitle .logo, .navbar .categoryTitle .logo {
+        float: left;
+    }
+    .navbar .categoryTitle .version {
+        float: right;
     }
     .navbar .categoryTitle .logo, .navbar .categoryTitle .version .versionSub {
         vertical-align: top;
     }
 
+    .navbar.languageJS .select {
+        background-color: #3f3461;
+    }
+    .navbar.languageTS .select {
+        background-color: #bb464b;
+    }
+    .navbar .select, .navbar .select img {
+        width: 40px;
+        height: 40px;
+    }
+    .navbar .select img {
+        filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
+    }
+    .navbar .select img:hover {
+        filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
+    }
+    .navbar .select img:hover {
+        filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
+    }
     .navbar .select .toDisplay {
         position: fixed;
         left: 0;
-        width: 100%;
-        height: calc(100% - 55px);
-        text-align: center;
+        top: 40px;
+        width: 180px;
+        height: auto;
+        min-height: 100px;
+        max-height: calc(100% - 40px);
+        text-align: left;
         overflow-y: auto;
     }
+    .navbar .select .toDisplay.languageJS .option {
+        background-color: #3f3461;
+    }
+    .navbar .select .toDisplay.languageTS .option {
+        background-color: #bb464b;
+    }
     .navbar .select .toDisplay .option {
-        text-align: center;
         padding: 1px;
-        border-top: 1px solid white;
         font-size: 15px;
         height: 33px;
         line-height: 33px;
     }
-    .navbar .select .toDisplay .option:last-of-type {
-        border-bottom: 1px solid white;
+    .navbar .select .toDisplay .option  img {
+        float: left;
+        width: auto;
+        height: 100%;
+        filter: invert(98%) sepia(0%) saturate(7500%) hue-rotate(207deg) brightness(104%) contrast(104%);
+    }
+    .navbar .select .toDisplay .option:nth-of-type(1) img, .navbar .select .toDisplay .option:nth-of-type(2) img {
+        width: 20px;
+        margin: 0 7px;
+        filter: none;
     }
 
     .navbar .select .subSelect .toDisplaySub {
         position: fixed;
-        top: 55px;
-        left: 0;
-        top: 55px;
-        width: 100%;
-        height: calc(100% - 55px);
-        text-align: center;
+        top: 75px;
+        left: 180px;
+        min-width: 180px;
+        width: 180px;
+        height: auto;
+        max-height: calc(100% - 55px);
+        text-align: left;
         overflow-y: auto;
+        color: white;
+    }
+    .navbar .select .subSelect .toDisplaySub.languageJS {
+        background-color: #9379e6;
+    }
+    .navbar .select .subSelect .toDisplaySub.languageTS {
+        background-color: #e0684b;
+    }
+    .navbar .select .subSelect .toDisplaySub.languageJS .option {
+        color: white;
     }
-    .navbar .select .subSelect .toDisplaySub .option {
-        margin-top: 1px;
+    .navbar .select .subSelect .toDisplaySub.languageTS .option {
+        color: white;
     }
 
     .save-layer .save-form {

Playground/index.html

@@ -1,10 +1,6 @@
 <!DOCTYPE html>
 <html>
 
-<!--
-    // TO DO - Delete this ? It's not used anymore. It's now included in the index.html with a switch button JS / TS
- -->
-
 <head>
     <title>Babylon.js Playground</title>
     <meta charset='utf-8' />
@@ -26,7 +22,7 @@
     <!-- jszip -->
     <script src="js/libs/jszip.min.js"></script>
     <script src="js/libs/fileSaver.js"></script>
-    
+
     <!-- Dependencies -->
     <script src="https://preview.babylonjs.com/ammo.js"></script>
     <script src="https://preview.babylonjs.com/cannon.js"></script>
@@ -49,7 +45,8 @@
 
     <!-- Extensions -->
     <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js" async></script>
-    <script src="https://rawgit.com/BabylonJS/Extensions/master/CompoundShader/src/babylonx.CompoundShader.js" async></script>
+    <script src="https://rawgit.com/BabylonJS/Extensions/master/CompoundShader/src/babylonx.CompoundShader.js"
+        async></script>
 
     <!-- Scene Manager -->
     <script src="https://mackeyk24.github.io/toolkit/babylon.manager.js"></script>
@@ -83,12 +80,12 @@
                     </div>
                     <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub displayFontSize languageJS">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option selected" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</div>
+                            <div class="option" onclick="settingsPG.setFontSize(12);">12</div>
+                            <div class="option selected" onclick="settingsPG.setFontSize(14);">14</div>
+                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
+                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
+                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
+                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
                         </div>
                     </div>
                     <div class="option noSubSelect" id="safemodeToggle1280">Safe mode
@@ -103,7 +100,8 @@
                     <div class="option noSubSelect" id="minimapToggle1280">Minimap
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
+                            class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
                             <div class="option" id="qrCodeImage">QR Code Image</div>
                         </div>
@@ -156,12 +154,12 @@
                     </div>
                     <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub displayFontSize">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option selected" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</div>
+                            <div class="option" onclick="settingsPG.setFontSize(12);">12</div>
+                            <div class="option selected" onclick="settingsPG.setFontSize(14);">14</div>
+                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
+                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
+                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
+                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
                         </div>
                     </div>
                     <div class="option noSubSelect" id="safemodeToggle920">Safe mode
@@ -176,7 +174,8 @@
                     <div class="option noSubSelect" id="minimapToggle920">Minimap
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
+                            class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
                             <div class="option" id="qrCodeImage">QR Code Image</div>
                         </div>
@@ -229,12 +228,12 @@
                     </div>
                     <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub displayFontSize">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option selected" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</div>
+                            <div class="option" onclick="settingsPG.setFontSize(12);">12</div>
+                            <div class="option selected" onclick="settingsPG.setFontSize(14);">14</div>
+                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
+                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
+                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
+                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
                         </div>
                     </div>
                     <div class="option noSubSelect" id="safemodeToggle710">Safe mode
@@ -249,7 +248,8 @@
                     <div class="option noSubSelect" id="minimapToggle710">Minimap
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i
+                            class="fa fa-chevron-right" aria-hidden="true"></i>
                         <div class="toDisplaySub">
                             <div class="option" id="qrCodeImage">QR Code Image</div>
                         </div>
@@ -276,61 +276,60 @@
 
     <!-- Mobile -->
     <div class="navbar navBar550 languageJS">
-        <div class="categoryTitle">
-            <img class="logo" src="css/img/logo_v4.svg">
-            <div class="version"><span class="versionSub" id="mainTitle550"></span></div>
-        </div>
-
         <div class="category languageJS" id="JStoTSbar">
-            <div class="buttonJStoTS languageTS" id="toTSbutton550">TS</div>
-            <div class="buttonJStoTS languageJS" id="toJSbutton550">JS</div>
-            <div class="buttonSpaceKiller"></div>
-            <div class="button run" id="runButton550"><img src="css/img/playButton.svg"></div>
-            <div class="button" id="saveButton550"><img src="css/img/saveButton.svg"></div>
-            <div class="button removeOnPhone" id="zipButton550"><img src="css/img/downloadButton.svg"></div>
-            <div class="button" id="newButton550"><img src="css/img/newButton.svg"></div>
-            <div class="button removeOnPhone" id="clearButton550"><img src="css/img/clearButton.svg"></div>
-
-            <div class="button select"><img src="css/img/optionsButton.svg">
+            <div class="button select"><img src="css/img/hamburgerButton.svg">
                 <div class="toDisplay">
-                    <div class="option subSelect">Theme <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option noSubSelect languageTS" id="toTSbutton550"><img src="css/img/logoTS.svg">TypeScript</div>
+                    <div class="option noSubSelect languageJS" id="toJSbutton550"><img src="css/img/logoJS.svg">JavaScript</div>
+                    <div class="option noSubSelect run" id="runButton550"><img src="css/img/playButton.svg">Run</div>
+                    <div class="option noSubSelect" id="saveButton550"><img src="css/img/saveButton.svg">Save</div>
+                    <div class="option noSubSelect" id="zipButton550"><img src="css/img/downloadButton.svg">Download
+                    </div>
+                    <div class="option noSubSelect" id="newButton550"><img src="css/img/newButton.svg">New</div>
+                    <div class="option noSubSelect" id="clearButton550"><img src="css/img/clearButton.svg">Clear</div>
+                    <div class="option noSubSelect" id="debugButton550"><img src="css/img/inspectorButton.svg">Inspector
+                    </div>
+                    <div class="option subSelect"><img src="css/img/optionsButton.svg">Theme
                         <div class="toDisplaySub">
                             <div class="option selected" id="darkTheme550">Dark</div>
                             <div class="option" id="lightTheme550">Light</div>
                         </div>
                     </div>
-                    <div class="option subSelect">Font size <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect"><img src="css/img/optionsButton.svg">Font size
                         <div class="toDisplaySub displayFontSize">
-                            <div class="option" onclick="setFontSize(12);">12</div>
-                            <div class="option selected" onclick="setFontSize(14);">14</div>
-                            <div class="option" onclick="setFontSize(16);">16</div>
-                            <div class="option" onclick="setFontSize(18);">18</div>
-                            <div class="option" onclick="setFontSize(20);">20</div>
-                            <div class="option" onclick="setFontSize(22);">22</div>
+                            <div class="option" onclick="settingsPG.setFontSize(8);">8</div>
+                            <div class="option" onclick="settingsPG.setFontSize(10);">10</div>
+                            <div class="option selected" onclick="settingsPG.setFontSize(12);">12</div>
+                            <div class="option" onclick="settingsPG.setFontSize(14);">14</div>
+                            <div class="option" onclick="settingsPG.setFontSize(16);">16</div>
+                            <div class="option" onclick="settingsPG.setFontSize(18);">18</div>
+                            <div class="option" onclick="settingsPG.setFontSize(20);">20</div>
+                            <div class="option" onclick="settingsPG.setFontSize(22);">22</div>
                         </div>
                     </div>
-                    <div class="option noSubSelect" id="safemodeToggle550">Safe mode
+                    <div style="display: none;" class="option noSubSelect" id="safemodeToggle550">Safe mode
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option checked noSubSelect" id="editorButton550">Editor
+                    <div style="display: none;" class="option checked noSubSelect" id="editorButton550">Editor
                         <i class="fa fa-check-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option nosubselect" id="fullscreenButton550" style="display: none">Fullscreen</div>
-                    <div class="option nosubselect" id="editorFullscreenButton550" style="display: none">Editor Fullscreen</div>
-                    <div class="option nosubselect" id="formatButton550">Format code</div>
-                    <div class="option nosubselect" id="minimapToggle550">Minimap
+                    <div style="display: none;" class="option nosubselect" id="fullscreenButton550" style="display: none">Fullscreen</div>
+                    <div style="display: none;" class="option nosubselect" id="editorFullscreenButton550" style="display: none">Editor
+                        Fullscreen</div>
+                    <div class="option nosubselect" id="formatButton550"><img src="css/img/optionsButton.svg">Format code</div>
+                    <div style="display: none;" class="option nosubselect" id="minimapToggle550">Minimap
                         <i class="fa fa-square" aria-hidden="true"></i>
                     </div>
-                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();">QR Code Link <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option subSelect" id="qrCodeHover" onmouseover="showQRCode();"><img src="css/img/optionsButton.svg">QR Code Link
                         <div class="toDisplaySub">
                             <div class="option" id="qrCodeImage">QR Code Image</div>
                         </div>
                     </div>
-                    <div class="option uncheck noSubSelect" id="debugButton550">Inspector
-                        <i class="fa fa-square" aria-hidden="true"></i>
-                    </div>
-                    <div class="option nosubselect" id="metadataButton550">Metadata</div>
-                    <div class="option subSelect">Links / Tools <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                    <div class="option nosubselect" id="metadataButton550"><img
+                            src="css/img/metadataButton.svg">Metadata</div>
+                    <div class="option nosubselect"><img class="examplesButton"
+                            src="css/img/examplesButton.svg">Examples</div>
+                    <div class="option subSelect"><img src="css/img/examplesButton.svg">Links / Tools
                         <div class="toDisplaySub displayFooterLinks">
                             <div class="option link">
                                 <a target='_new' href="https://www.netlify.com/">Deployed by Netlify</a>
@@ -351,6 +350,10 @@
                     </div>
                 </div>
             </div>
+            <div class="categoryTitle">
+                <img class="logo" src="css/img/logo_v4.svg">
+                <div class="version"><span class="versionSub" id="mainTitle550"></span></div>
+            </div>
         </div>
 
         <div class="category right">
@@ -361,7 +364,11 @@
                     <div class="option" onclick="setVersion('3.0');">3.0</div>
                 </div>
             </div>
-            <div class="button select"><img class="examplesButton" src="css/img/examplesButton.svg"></div>
+        </div>
+
+        <div id="switchWrapper" class="languageJS">
+            <img id="switchWrapperCode" src="css/img/codeButton.svg">
+            <img id="switchWrapperCanvas" src="css/img/canvas3Dbutton.svg">
         </div>
     </div>
 
@@ -375,11 +382,12 @@
     </div>
     <div id="exampleList" class="javascript">
         <div id="exampleBanner" class="languageJS">
-            <h1>Examples</h1>
+            <h1>Examples<img id="examplesButtonClose" src="css/img/clearButton.svg"></h1>
         </div>
         <div class="horizontalSeparator"></div>
         <input id="filterBar" type="text" placeholder="Filter examples...">
-        <img id="filterBarClear" src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
+        <img id="filterBarClear"
+            src="https://d33wubrfki0l68.cloudfront.net/17ca450bae302631f4857cd8c3992234ec5dd9a7/057f9/img/ui/clear_button.png">
     </div>
 
     <div class="fpsLabel languageJS" id="fpsLabel">FPS</div>
@@ -447,9 +455,13 @@
     <script src="js/qrcode.js"></script>
 
     <!-- Main scripts -->
-    <script src="js/actions.js"></script>
     <script src="js/pbt.js"></script>
     <script src="js/libs/typescript.js"></script>
+    <script src="js/examples.js"></script>
+    <script src="js/monacoCreator.js"></script>
+    <script src="js/settingsPG.js"></script>
+    <script src="js/menuPG.js"></script>
+    <script src="js/utils.js"></script>
     <script src="js/index.js"></script>
 
     <!-- Global site tag (gtag.js) - Google Analytics -->

Playground/js/actions.js

@@ -1,138 +0,0 @@
-(function () {
-
-    var allSelect = document.querySelectorAll('.select');
-    var allToDisplay = document.querySelectorAll('.toDisplay');
-    var allToDisplayBig = document.querySelectorAll('.toDisplayBig');
-    var allSubItems = document.querySelectorAll('.toDisplaySub');
-    var allSubSelect = document.querySelectorAll('.subSelect');
-    var allNoSubSelect = document.querySelectorAll('.noSubSelect');
-
-    // Remove displayed subItems
-    var removeAllSubItems = function () {
-        for (var index = 0; index < allSubItems.length; index++) {
-            allSubItems[index].style.display = 'none';
-        }
-    }
-    // Remove displayed options
-    var removeAllOptions = function () {
-        removeAllSubItems();
-
-        for (var index = 0; index < allToDisplay.length; index++) {
-            var a = allToDisplay[index];
-            if (a.style.display == 'block') {
-                a.style.display = 'none';
-            }
-        }
-        for (var index = 0; index < allToDisplayBig.length; index++) {
-            var b = allToDisplayBig[index];
-            if (b.style.display == 'block') {
-                b.style.display = 'none';
-            }
-        }
-    }
-
-    // Remove displayed options
-    window.addEventListener('click', function (evt) {
-        removeAllOptions();
-    });
-
-    // Resize jsEditor and canvas when in mobile mode
-    var jsEditor = document.getElementById('jsEditor');
-    var canvasZone = document.getElementById('canvasZone');
-    var navBar550 = document.getElementsByClassName('navBar550')[0];
-    var reiszeBigJsEditor = function() {
-        if(navBar550.offsetHeight > 0) {
-            canvasZone.style.width = '40px';
-            jsEditor.style.width = 'calc(100% - 40px)';
-        }
-    };
-    var resizeBigCanvas = function() {
-        if(navBar550.offsetHeight > 0) {
-            jsEditor.style.width = '40px';
-            canvasZone.style.width = 'calc(100% - 40px)';
-        }
-    };
-    jsEditor.addEventListener('click', reiszeBigJsEditor);
-    canvasZone.addEventListener('click', resizeBigCanvas);
-    document.getElementById('runButton550').addEventListener('click', resizeBigCanvas);
-
-    // Handle click on select elements
-    for (var index = 0; index < allSelect.length; index++) {
-        var s = allSelect[index];
-        // Get child called to display
-        var displayItems = function (e) {
-            if (e.target.nodeName != "IMG") {
-                e.preventDefault();
-                e.stopPropagation();
-                return;
-            }
-            var toDisplay = this.querySelector('.toDisplay');
-            if (toDisplay) {
-                if (toDisplay.style.display == 'block') {
-                    removeAllOptions();
-                } else {
-                    removeAllOptions();
-                    toDisplay.style.display = 'block';
-                }
-            }
-            toDisplay = this.querySelector('.toDisplayBig');
-            if (toDisplay) {
-                if (toDisplay.style.display == 'block') {
-                    removeAllOptions();
-                } else {
-                    removeAllOptions();
-                    toDisplay.style.display = 'block';
-                }
-            }
-            e.preventDefault();
-            e.stopPropagation();
-        }
-        s.addEventListener('click', displayItems);
-    }
-
-    // Handle mouseover / click on subSelect
-    var onSubselect = function (evt) {
-        // If it's in mobile mode, avoid the "mouseenter" bug
-        if(evt.type == "mouseenter" && navBar550.offsetHeight > 0) return;
-
-        removeAllSubItems();
-        var toDisplay = this.querySelector('.toDisplaySub');
-        if (toDisplay)
-            toDisplay.style.display = 'block';
-        evt.preventDefault();
-        evt.stopPropagation();
-    };
-    for (var index = 0; index < allSubSelect.length; index++) {
-        var ss = allSubSelect[index];
-        ss.addEventListener('click', onSubselect);
-        ss.addEventListener('mouseenter', onSubselect);
-    }
-    for (var index = 0; index < allNoSubSelect.length; index++) {
-        var ss = allNoSubSelect[index];
-        ss.addEventListener('mouseenter', removeAllSubItems);
-    }
-
-    // Examples must remove all the other menus
-    var examplesButton = document.getElementsByClassName("examplesButton");
-    for (var i = 0; i < examplesButton.length; i++) {
-        examplesButton[i].addEventListener("click", function () {
-            removeAllOptions();
-        });
-    }
-
-    // Handle click on subOptions
-    clickOptionSub = function(evt) {
-        evt.preventDefault();
-        evt.stopPropagation();
-
-        if(!navBar550.offsetHeight > 0) return; // If is not in mobile, this doesnt apply
-        if(!this.classList) return;
-
-        if (this.classList.contains('link')) {
-            window.open(this.querySelector('a').href, '_new');
-        }
-        if (!this.classList.contains('subSelect') && this.parentNode.style.display == 'block') {
-            this.parentNode.style.display = 'none'
-        }
-    }
-})();

Playground/js/examples.js

@@ -0,0 +1,93 @@
+/**
+ * This JS file is for examples list and actions linked to examples.
+ */
+class Examples {
+    constructor() {
+        this.isExamplesDisplayed = false;
+
+        // There's a "close" button on the mobile interface.
+        document.getElementById("examplesButtonClose").addEventListener("click", this.hideExamples.bind(this));
+        /**
+         * 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.isExamplesDisplayed) this.displayExamples();
+                    else 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");
+        if (filterBar) {
+            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";
+
+                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 = "";
+                    } else {
+                        line.style.display = "none";
+                    }
+                }
+
+                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";
+                    if (category.clientHeight < 25) {
+                        category.style.display = "none";
+                        displayCount--;
+                    }
+                }
+
+                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 = "";
+                filter();
+            }
+        }
+    }
+
+    /**
+     * Function to display the examples menu
+     */
+    displayExamples = function() {
+        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";
+        }
+    };
+
+    /**
+     * Function to hide the examples menu
+     */
+    hideExamples = function() {
+        this.isExamplesDisplayed = false;
+        document.getElementById("fpsLabel").style.display = "block";
+        document.getElementById("exampleList").style.display = "none";
+        document.getElementsByClassName("wrapper")[0].style.width = "100%";
+    };
+}

Playground/js/frame.js

@@ -1,4 +1,6 @@
-(function() {
+import { utils } from "mocha";
+
+(function() {
     var snippetUrl = "https://snippet.babylonjs.com";
     var currentSnippetToken;
     var engine;
@@ -26,11 +28,11 @@
         xhr.onreadystatechange = function() {
             if (xhr.readyState === 4) {
                 if (xhr.status === 200) {
-                    blockEditorChange = true;
+                    monacoCreator.BlockEditorChange.lockEditorChange = true;
                     console.log(xhr.responseText);
                     jsEditor.setValue(xhr.responseText);
                     jsEditor.setPosition({ lineNumber: 0, column: 0 });
-                    blockEditorChange = false;
+                    monacoCreator.BlockEditorChange = false;
                     compileAndRun();
 
                     document.getElementById("currentScript").innerHTML = title;
@@ -44,7 +46,7 @@
     };
 
     var showError = function(error) {
-        console.warn(error);
+        utils.showError(error, null);
     };
 
     compileAndRun = function(code) {

Playground/js/menuPG.js

@@ -0,0 +1,169 @@
+/**
+ * This JS file is for UI displaying
+ */
+class MenuPG {
+    constructor() {
+        this.allSelect = document.querySelectorAll('.select');
+        this.allToDisplay = document.querySelectorAll('.toDisplay');
+        this.allToDisplayBig = document.querySelectorAll('.toDisplayBig');
+        this.allSubItems = document.querySelectorAll('.toDisplaySub');
+        this.allSubSelect = document.querySelectorAll('.subSelect');
+        this.allNoSubSelect = document.querySelectorAll('.noSubSelect');
+        
+        this.jsEditorElement = document.getElementById('jsEditor');
+        this.canvasZoneElement = document.getElementById('canvasZone');
+        this.switchWrapperCode = document.getElementById('switchWrapperCode');
+        this.switchWrapperCanvas = document.getElementById('switchWrapperCanvas');
+        this.fpsLabelElement = document.getElementById('fpsLabel');
+        this.navBar550 = document.getElementsByClassName('navBar550')[0];
+        
+        // On click anywhere, remove displayed options
+        window.addEventListener('click', this.removeallOptions);
+
+        // In mobile mode, resize JSEditor and canvas
+        this.switchWrapperCode.addEventListener('click', this.resizeBigJsEditor.bind(this));
+        this.switchWrapperCanvas.addEventListener('click', this.resizeBigCanvas.bind(this));
+        document.getElementById('runButton550').addEventListener('click', this.resizeBigCanvas.bind(this));
+        
+        // Code editor by default.
+        // TO DO - Check why it doesn't work.
+        if(this.navBar550.offsetHeight > 0) this.resizeBigJsEditor();
+        
+        // Handle click on select elements
+        for (var index = 0; index < this.allSelect.length; index++) {
+            this.allSelect[index].addEventListener('click', this.displayMenu.bind(this));
+        }
+        
+        // Handle mouseover / click on subSelect
+        for (var index = 0; index < this.allSubSelect.length; index++) {
+            var ss = this.allSubSelect[index];
+            ss.addEventListener('click', this.displaySubitems.bind(this));
+            ss.addEventListener('mouseenter', this.displaySubitems.bind(this));
+        }
+        for (var index = 0; index < this.allNoSubSelect.length; index++) {
+            var ss = this.allNoSubSelect[index];
+            ss.addEventListener('mouseenter', this.removeAllSubItems.bind(this));
+        }
+        
+        // Examples must remove all the other menus
+        var examplesButton = document.getElementsByClassName("examplesButton");
+        for (var i = 0; i < examplesButton.length; i++) {
+            examplesButton[i].addEventListener("click", this.removeallOptions);
+        }
+    }
+
+    /**
+     * Display children menu of the caller
+     */
+    displayMenu = function (evt) {
+        if (evt.target.nodeName != "IMG") {
+            evt.preventDefault();
+            evt.stopPropagation();
+            return;
+        }
+        var toDisplay = evt.target.parentNode.querySelector('.toDisplay');
+        if (toDisplay) {
+            if (toDisplay.style.display == 'block') {
+                this.removeAllOptions();
+            } else {
+                this.removeAllOptions();
+                toDisplay.style.display = 'block';
+            }
+        }
+        toDisplay = evt.target.parentNode.querySelector('.toDisplayBig');
+        if (toDisplay) {
+            if (toDisplay.style.display == 'block') {
+                this.removeAllOptions();
+            } else {
+                this.removeAllOptions();
+                toDisplay.style.display = 'block';
+            }
+        }
+        evt.preventDefault();
+        evt.stopPropagation();
+    };
+    /**
+     * Display children subMenu of the caller
+     */
+    displaySubitems = function (evt) {
+        // If it's in mobile mode, avoid the "mouseenter" bug
+        if(evt.type == "mouseenter" && this.navBar550.offsetHeight > 0) return;
+        this.removeAllSubItems();
+    
+        var toDisplay = evt.target.querySelector('.toDisplaySub');
+        if (toDisplay) toDisplay.style.display = 'block';
+
+        evt.preventDefault();
+        evt.stopPropagation();
+    };
+    // Handle click on subOptions
+    clickOptionSub = function(evt) {
+        if(!this.navBar550.offsetHeight > 0) return; // If is not in mobile, this doesnt apply
+        if(!this.classList) return;
+    
+        if (this.classList.contains('link')) {
+            window.open(this.querySelector('a').href, '_new');
+        }
+        if (!this.classList.contains('subSelect') && this.parentNode.style.display == 'block') {
+            this.parentNode.style.display = 'none'
+        }
+
+        evt.preventDefault();
+        evt.stopPropagation();
+    };
+
+    /**
+     * Remove displayed subItems
+     */
+    removeAllSubItems = function () {
+        for (var index = 0; index < this.allSubItems.length; index++) {
+            this.allSubItems[index].style.display = 'none';
+        }
+    };
+    /**
+     * Remove displayed options
+     */
+    removeAllOptions = function () {
+        this.removeAllSubItems();
+    
+        for (var index = 0; index < this.allToDisplay.length; index++) {
+            var a = this.allToDisplay[index];
+            if (a.style.display == 'block') {
+                a.style.display = 'none';
+            }
+        }
+        for (var index = 0; index < this.allToDisplayBig.length; index++) {
+            var b = this.allToDisplayBig[index];
+            if (b.style.display == 'block') {
+                b.style.display = 'none';
+            }
+        }
+    };
+
+    /**
+     * Hide the canvas and display JS editor
+     */
+    resizeBigJsEditor = function() {
+        if(this.navBar550.offsetHeight > 0) {
+            this.removeAllOptions();
+            this.canvasZoneElement.style.width = '0';
+            this.switchWrapperCode.style.display = 'none';
+            this.fpsLabelElement.style.display = 'none';
+            this.jsEditorElement.style.width = '100%';
+            this.switchWrapperCanvas.style.display = 'block';
+        }
+    };
+    /**
+     * Hide the JS editor and display the canvas
+     */
+    resizeBigCanvas = function() {
+        if(this.navBar550.offsetHeight > 0) {
+            this.removeAllOptions();
+            this.jsEditorElement.style.width = '0';
+            this.switchWrapperCanvas.style.display = 'none';
+            this.canvasZoneElement.style.width = '100%';
+            this.switchWrapperCode.style.display = 'block';
+            this.fpsLabelElement.style.display = 'block';
+        }
+    };
+};

Playground/js/monacoCreator.js

@@ -0,0 +1,101 @@
+/**
+ * This JS file is for Monaco management
+ */
+class MonacoCreator {
+    constructor() {
+        this.jsEditor = null;
+        this.monacoMode = "javascript";
+        this.blockEditorChange = false;
+        
+        this.loadMonaco();
+    }
+
+    // ACCESSORS
+
+    get JsEditor() {
+        return this.jsEditor;
+    };
+
+    get MonacoMode() {
+        return this.monacoMode;
+    };
+    set MonacoMode(mode) {
+        if(this.monacoMode != "javascript"
+        && this.monacoMode != "typescript")
+            console.warn("Error while defining Monaco Mode");
+        this.monacoMode = mode;
+    };
+
+    get BlockEditorChange() {
+        return this.blockEditorChange;
+    };
+    set BlockEditorChange(value) {
+        this.blockEditorChange = value;
+    };
+
+    // FUNCTIONS
+
+    /**
+     * Load the Monaco Node module.
+     */
+    loadMonaco = function () {
+        var xhr = new XMLHttpRequest();
+
+        xhr.open('GET', "babylon.d.txt", true);
+
+        xhr.onreadystatechange = function () {
+            if (xhr.readyState === 4) {
+                if (xhr.status === 200) {
+                    require.config({ paths: { 'vs': 'node_modules/monaco-editor/min/vs' } });
+                    require(['vs/editor/editor.main'], function () {
+                        if (this.monacoMode === "javascript") {
+                            monaco.languages.typescript.javascriptDefaults.addExtraLib(xhr.responseText, 'babylon.d.ts');
+                        } else {
+                            monaco.languages.typescript.typescriptDefaults.addExtraLib(xhr.responseText, 'babylon.d.ts');
+                        }
+
+                        run();
+                    });
+                }
+            }
+        };
+        xhr.send(null);
+    };
+
+    /**
+     * Function to (re)create the editor
+     */
+    createMonacoEditor = function() {
+        var oldCode = "";
+        if(this.jsEditor) {
+            oldCode = this.jsEditor.getValue();
+            this.jsEditor.dispose();
+        }
+
+        var editorOptions = {
+            value: "",
+            language: this.monacoMode,
+            lineNumbers: true,
+            tabSize: "auto",
+            insertSpaces: "auto",
+            roundedSelection: true,
+            automaticLayout: true,
+            scrollBeyondLastLine: false,
+            readOnly: false,
+            theme: settingsPG.vsTheme,
+            contextmenu: false,
+            folding: true,
+            showFoldingControls: "always",
+            renderIndentGuides: true,
+            minimap: {
+                enabled: true
+            }
+        };
+        editorOptions.minimap.enabled = document.getElementById("minimapToggle1280").classList.contains('checked');
+        this.jsEditor = monaco.editor.create(document.getElementById('jsEditor'), editorOptions);
+        this.jsEditor.setValue(oldCode);
+        this.jsEditor.onKeyUp(function () {
+            utils.markDirty();
+        });
+    };
+};

Playground/js/settingsPG.js

@@ -0,0 +1,133 @@
+/**
+ * This JS file is for settings :
+ * - Theme
+ * - Script language
+ * - Font size
+ */
+/**
+ * TO DO :
+ * - Set the font in the localStorage
+ */
+class SettingsPG {
+    constructor(monacoCreator) {
+        this.monacoCreator = monacoCreator;
+
+        // The elements that will color with languages
+        this.elementForscriptLanguage = [
+            '#exampleList #exampleBanner',
+            '.navbar',
+            '.navbar .category',
+            '.navbar .select .toDisplay',
+            '.navbar .select .toDisplay .subSelect .toDisplaySub',
+            '#fpsLabel',
+            '.save-form',
+            '#switchWrapper'
+        ];
+        // The elements that will color with theme
+        this.elementToTheme = [
+            '.wrapper #jsEditor',
+            '.wrapper .gutter'
+        ];
+        // Editor font size
+        this.fontSize = 14;
+        // Editor theme
+        this.vsTheme = localStorage.getItem("bjs-playground-theme") || 'light';
+        // Editor language
+        this.scriptLanguage = localStorage.getItem("bjs-playground-scriptLanguage") || 'JS';
+        this.defaultScene = "scripts/basic scene.js";
+        if(this.scriptLanguage == "JS") {
+            this.defaultScene = "scripts/basic scene.js";
+            monacoCreator.monacoMode = "javascript";
+        }
+        else if(this.scriptLanguage == "TS") {
+            this.defaultScene = "scripts/basic scene.txt";
+            monacoCreator.monacoMode = "typescript";
+        }
+    }
+
+    get ScriptLanguage() {
+        return this.scriptLanguage;
+    }
+    set ScriptLanguage(value) {
+        localStorage.setItem("bjs-playground-scriptLanguage", "TS");
+        this.scriptLanguage = value;
+    }
+    get DefaultScene() {
+        return this.defaultScene;
+    }
+
+
+    /**
+     * Change font size
+     */
+    setFontSize = function (size) {
+        this.fontSize = size;
+        this.monacoCreator.jsEditor.updateOptions({ fontSize: size });
+        var array = document.getElementsByClassName("displayFontSize");
+        for (var i = 0; i < array.length; i++) {
+            var subArray = array[i].children;
+            for (var j = 0; j < subArray.length; j++) {
+                subArray[j].classList.remove("selected");
+                if (subArray[j].innerText == size)
+                    subArray[j].classList.add("selected");
+            }
+        }
+    };
+    /**
+     * Toggle Typescript / Javascript language
+     */
+    setScriptLanguage = function () {
+        for (var index = 0; index < this.elementForscriptLanguage.length; index++) {
+            var obj = this.elementForscriptLanguage[index];
+            var domObjArr = document.querySelectorAll(obj);
+            for (var domObjIndex = 0; domObjIndex < domObjArr.length; domObjIndex++) {
+                var domObj = domObjArr[domObjIndex];
+                domObj.classList.remove('languageJS');
+                domObj.classList.remove('languageTS');
+                domObj.classList.add("language" + this.scriptLanguage);
+            }
+        }
+        if (this.scriptLanguage == "JS") {
+            setToMultipleID("toJSbutton", "removeClass", "floatLeft");
+        }
+        else if (this.scriptLanguage == "TS") {
+            setToMultipleID("toJSbutton", "addClass", "floatLeft");
+        }
+    };
+    /**
+     * Set the theme (dark / light)
+     */
+    setTheme = function (theme) {
+        localStorage.setItem("bjs-playground-theme", theme);
+        // Get the Monaco theme name.
+        // Change the selected button style
+        setToMultipleID("darkTheme", "removeClass", "selected");
+        setToMultipleID("lightTheme", "removeClass", "selected");
+        if (theme == 'dark') {
+            this.vsTheme = 'vs-dark';
+            setToMultipleID("darkTheme", "addClass", "selected");
+        }
+        else {
+            this.vsTheme = 'vs';
+            setToMultipleID("lightTheme", "addClass", "selected");
+        }
+
+        this.monacoCreator.createMonacoEditor();
+
+        this.setFontSize(this.fontSize);
+        // Color the elements to theme
+        for (var index = 0; index < this.elementToTheme.length; index++) {
+            var obj = this.elementToTheme[index];
+            var domObjArr = document.querySelectorAll(obj);
+            for (var domObjIndex = 0; domObjIndex < domObjArr.length; domObjIndex++) {
+                var domObj = domObjArr[domObjIndex];
+                domObj.classList.remove('light');
+                domObj.classList.remove('dark');
+                domObj.classList.add(theme);
+            }
+        }
+    };
+    restoreTheme = function(monacoCreator) {
+        this.setTheme(this.vsTheme, monacoCreator);
+    };
+};

Playground/js/utils.js

@@ -0,0 +1,49 @@
+/**
+ * This JS file contains utils functions
+ */
+class Utils {
+    constructor() {
+    }
+
+    // TO DO - Comment this
+    markDirty = function () {
+        if (monacoCreator.BlockEditorChange) return;
+
+        // setToMultipleID("currentScript", "innerHTML", "Custom");
+        setToMultipleID("safemodeToggle", "addClass", "checked");
+        // setToMultipleID("minimapToggle", "addClass", "checked"); // Why ?!
+        setToMultipleID('safemodeToggle', 'innerHTML', 'Safe mode <i class="fa fa-check-square" aria-hidden="true"></i>');
+    };
+
+    /**
+     * Used to show error messages
+     * @param {String} errorMessage 
+     * @param {String} errorEvent 
+     */
+    showError = function(errorMessage, errorEvent) {
+        var errorContent =
+            '<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button>';
+        if (errorEvent) {
+            var regEx = /\(.+:(\d+):(\d+)\)\n/g;
+
+            var match = regEx.exec(errorEvent.stack);
+            if (match) {
+                errorContent += "Line ";
+                var lineNumber = match[1];
+                var columnNumber = match[2];
+
+                errorContent += lineNumber + ':' + columnNumber + ' - ';
+            }
+        }
+
+        errorContent += errorMessage + '</div>';
+
+        document.getElementById("errorZone").style.display = 'block';
+        document.getElementById("errorZone").innerHTML = errorContent;
+
+        // Close button error
+        document.getElementById("errorZone").querySelector('.close').addEventListener('click', function () {
+            document.getElementById("errorZone").style.display = 'none';
+        });
+    };
+}