switch buttons

Playground/css/index.css

@@ -513,7 +513,7 @@ body {
 .navbar .category .buttonJStoTS {
     display: inline-block;
     vertical-align: top;
-    width: 140px;
+    width: 70px;
     height: 55px;
     border-top-left-radius: 14px;
     margin-left: -15px;
@@ -523,8 +523,13 @@ body {
     cursor: pointer;
 }
 
+.navbar .category .buttonJStoTS.selectedLanguage {
+    width: 140px;
+    cursor: unset;
+}
+
 .navbar .category .buttonJStoTS.floatLeft {
-    float: left;
+    float: left;    
 }
 
 .button,

Playground/index.html

@@ -26,8 +26,8 @@
             </div>
 
             <div class="category languageJS" id="JStoTSbar">
-                <div class="buttonJStoTS languageTS" id="toTSbutton1280" title="Switch to TypeScript">Typescript</div>
-                <div class="buttonJStoTS languageJS" id="toJSbutton1280" title="Switch to JavaScript">Javascript</div>
+                <div class="buttonJStoTS languageTS" id="toTSbutton1280">TS</div>
+                <div class="buttonJStoTS languageJS" id="toJSbutton1280">JS</div>
                 <div class="buttonPG run removeOnDiff" id="runButton1280" title="Run&#10;(Alt+Enter)"><img
                         src="/css/img/playButton.svg"></div>
                 <div class="buttonPG removeOnDiff" id="saveButton1280" title="Save&#10;(Ctrl+S)"><img
@@ -107,8 +107,8 @@
             </div>
 
             <div class="category languageJS" id="JStoTSbar">
-                <div class="buttonJStoTS languageTS" id="toTSbutton1024" title="Switch to TypeScript">TS</div>
-                <div class="buttonJStoTS languageJS" id="toJSbutton1024" title="Switch to JavaScript">JS</div>
+                <div class="buttonJStoTS languageTS" id="toTSbutton1024">TS</div>
+                <div class="buttonJStoTS languageJS" id="toJSbutton1024">JS</div>
                 <div class="buttonSpaceKiller"></div>
                 <div class="buttonPG run removeOnDiff" id="runButton1024" title="Run&#10;(Alt+Enter)"><img
                         src="/css/img/playButton.svg"></div>

Playground/js/main.js

@@ -336,53 +336,56 @@ class Main {
             }
         }
         // Language (JS / TS)
-        this.parent.utils.setToMultipleID("toTSbutton", "click", function () {
-            if (location.hash != null && location.hash != "") {
-                this.parent.settingsPG.ScriptLanguage = "TS";
-                window.location = "./";
-            } else {
-                if (this.parent.settingsPG.ScriptLanguage == "JS") {
-                    //revert in case the reload is cancel due to safe mode
-                    if (document.getElementById("safemodeToggle" + this.parent.utils.getCurrentSize()).classList.contains('checked')) {
-                        // Message before unload
-                        var languageTSswapper = function () {
+        if (this.parent.settingsPG.ScriptLanguage === "JS") {
+            this.parent.utils.setToMultipleID("toTSbutton", "click", function () {
+                if (location.hash != null && location.hash != "") {
+                    this.parent.settingsPG.ScriptLanguage = "TS";
+                    window.location = "./";
+                } else {
+                    if (this.parent.settingsPG.ScriptLanguage == "JS") {
+                        //revert in case the reload is cancel due to safe mode
+                        if (document.getElementById("safemodeToggle" + this.parent.utils.getCurrentSize()).classList.contains('checked')) {
+                            // Message before unload
+                            var languageTSswapper = function () {
+                                this.parent.settingsPG.ScriptLanguage = "TS";
+                                window.removeEventListener('unload', languageTSswapper.bind(this));
+                            };
+                            window.addEventListener('unload', languageTSswapper.bind(this));
+
+                            location.reload();
+                        } else {
                             this.parent.settingsPG.ScriptLanguage = "TS";
-                            window.removeEventListener('unload', languageTSswapper.bind(this));
-                        };
-                        window.addEventListener('unload', languageTSswapper.bind(this));
-
-                        location.reload();
-                    } else {
-                        this.parent.settingsPG.ScriptLanguage = "TS";
-                        location.reload();
+                            location.reload();
+                        }
                     }
                 }
-            }
 
-        }.bind(this));
-        this.parent.utils.setToMultipleID("toJSbutton", "click", function () {
-            if (location.hash != null && location.hash != "") {
-                this.parent.settingsPG.ScriptLanguage = "JS";
-                window.location = "./";
-            } else {
-                if (this.parent.settingsPG.ScriptLanguage == "TS") {
-                    //revert in case the reload is cancel due to safe mode
-                    if (document.getElementById("safemodeToggle" + this.parent.utils.getCurrentSize()).classList.contains('checked')) {
-                        // Message before unload
-                        var LanguageJSswapper = function () {
+            }.bind(this));
+        } else {
+            this.parent.utils.setToMultipleID("toJSbutton", "click", function () {
+                if (location.hash != null && location.hash != "") {
+                    this.parent.settingsPG.ScriptLanguage = "JS";
+                    window.location = "./";
+                } else {
+                    if (this.parent.settingsPG.ScriptLanguage == "TS") {
+                        //revert in case the reload is cancel due to safe mode
+                        if (document.getElementById("safemodeToggle" + this.parent.utils.getCurrentSize()).classList.contains('checked')) {
+                            // Message before unload
+                            var LanguageJSswapper = function () {
+                                this.parent.settingsPG.ScriptLanguage = "JS";
+                                window.removeEventListener('unload', LanguageJSswapper.bind(this));
+                            };
+                            window.addEventListener('unload', LanguageJSswapper.bind(this));
+
+                            location.reload();
+                        } else {
                             this.parent.settingsPG.ScriptLanguage = "JS";
-                            window.removeEventListener('unload', LanguageJSswapper.bind(this));
-                        };
-                        window.addEventListener('unload', LanguageJSswapper.bind(this));
-
-                        location.reload();
-                    } else {
-                        this.parent.settingsPG.ScriptLanguage = "JS";
-                        location.reload();
+                            location.reload();
+                        }
                     }
                 }
-            }
-        }.bind(this));
+            }.bind(this));
+        }
         // Safe mode
         this.parent.utils.setToMultipleID("safemodeToggle", 'click', function () {
             document.getElementById("safemodeToggle1280").classList.toggle('checked');

Playground/js/settingsPG.js

@@ -93,9 +93,15 @@ class SettingsPG {
         }
         if (this.scriptLanguage == "JS") {
             this.parent.utils.setToMultipleID("toJSbutton", "removeClass", "floatLeft");
+            this.parent.utils.setToMultipleID("toJSbutton", "addClass", "selectedLanguage");
+            this.parent.utils.setToMultipleID("toJSbutton", "innerHTML", "Javascript");
+            this.parent.utils.setToMultipleID("toTSbutton", "title", "Switch to TypeScript");
         }
         else if (this.scriptLanguage == "TS") {
             this.parent.utils.setToMultipleID("toJSbutton", "addClass", "floatLeft");
+            this.parent.utils.setToMultipleID("toTSbutton", "addClass", "selectedLanguage");
+            this.parent.utils.setToMultipleID("toTSbutton", "innerHTML", "Typescript");
+            this.parent.utils.setToMultipleID("toJSbutton", "title", "Switch to JavaScript");
         }
     };
 

Playground/js/utils.js

@@ -4,7 +4,7 @@
 class Utils {
     constructor(parent) {
         this.parent = parent;
-        
+
         this.multipleSize = [1280, 1024, 'Mobile'];
     }
 
@@ -14,7 +14,8 @@ class Utils {
     markDirty() {
         if (this.parent.monacoCreator.BlockEditorChange) return;
 
-        this.setToMultipleID("safemodeToggle", "addClass", "checked");!
+        this.setToMultipleID("safemodeToggle", "addClass", "checked");
+        !
         this.setToMultipleID('safemodeToggle', 'innerHTML', 'Safe mode <i class="fa fa-check-square" aria-hidden="true"></i>');
     };
 
@@ -38,7 +39,7 @@ class Utils {
         }
 
         // Not an error with proper location
-        return null;        
+        return null;
     }
 
     /**
@@ -71,8 +72,8 @@ class Utils {
         const jsEditor = this.parent.monacoCreator.jsEditor;
         if (gotoLocation) {
             gotoLocation.addEventListener('click', function () {
-                const position = { 
-                    lineNumber: Number(locationError.lineNumber), 
+                const position = {
+                    lineNumber: Number(locationError.lineNumber),
                     column: Number(locationError.columnNumber)
                 };
 
@@ -89,24 +90,21 @@ class Utils {
         this.multipleSize.forEach(function (size) {
             if (thingToDo == "innerHTML") {
                 document.getElementById(id + size).innerHTML = param
-            }
-            else if (thingToDo == "click") {
+            } else if (thingToDo == "click") {
                 if (param.length > 1) {
                     for (var i = 0; i < param.length; i++) {
                         document.getElementById(id + size).addEventListener("click", param[i]);
                     }
-                }
-                else
+                } else
                     document.getElementById(id + size).addEventListener("click", param);
-            }
-            else if (thingToDo == "addClass") {
+            } else if (thingToDo == "addClass") {
                 document.getElementById(id + size).classList.add(param);
-            }
-            else if (thingToDo == "removeClass") {
+            } else if (thingToDo == "removeClass") {
                 document.getElementById(id + size).classList.remove(param);
-            }
-            else if (thingToDo == "display") {
+            } else if (thingToDo == "display") {
                 document.getElementById(id + size).style.display = param;
+            } else if (thingToDo === "title") {
+                document.getElementById(id + size).setAttribute("title", param);
             }
         });
     };
@@ -115,8 +113,8 @@ class Utils {
      * Function to get the current screen size
      */
     getCurrentSize() {
-        for(var i = 0; i < this.multipleSize.length; i++) {
-            if(document.getElementById("menuButton" + this.multipleSize[i]).offsetHeight > 0) return this.multipleSize[i];
+        for (var i = 0; i < this.multipleSize.length; i++) {
+            if (document.getElementById("menuButton" + this.multipleSize[i]).offsetHeight > 0) return this.multipleSize[i];
         }
     };
 
@@ -134,9 +132,9 @@ class Utils {
             lastCallAt = currentTime
 
             if (isCold && options.leading) {
-                return options.accumulate
-                    ? Promise.resolve(fn.call(this, [args])).then(result => result[0])
-                    : Promise.resolve(fn.call(this, ...args))
+                return options.accumulate ?
+                    Promise.resolve(fn.call(this, [args])).then(result => result[0]) :
+                    Promise.resolve(fn.call(this, ...args))
             }
 
             if (deferred) {
@@ -159,7 +157,7 @@ class Utils {
         function getWait(wait) {
             return (typeof wait === 'function') ? wait() : wait
         }
-    
+
         function defer() {
             const deferred = {}
             deferred.promise = new Promise((resolve, reject) => {
@@ -174,14 +172,14 @@ class Utils {
             clearTimeout(timer)
 
             Promise.resolve(
-                options.accumulate
-                    ? fn.call(this, pendingArgs)
-                    : fn.apply(this, pendingArgs[pendingArgs.length - 1])
-            )
+                    options.accumulate ?
+                    fn.call(this, pendingArgs) :
+                    fn.apply(this, pendingArgs[pendingArgs.length - 1])
+                )
                 .then(thisDeferred.resolve, thisDeferred.reject)
 
             pendingArgs = []
             deferred = null
         }
-    }    
+    }
 }