Move to the new API.

Add a save form to add Name / Description / Tags

Playground/index.css

@@ -122,3 +122,67 @@ ul#scriptsList {
 .monaco-editor .invisible {
     visibility: visible;
 }
+
+
+/* Save form & co */
+
+.save-message {
+    display: none;
+    float: left;
+    width: 100%;
+    background-color: rgba(0,0,0,.5);
+    text-align: center;
+    color: white;
+    font-size: 1.1em;
+    line-height: 2em;
+}
+
+.save-layer {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+
+    background-color: rgba(120,120,120,.5);
+    text-align: center;
+}
+.save-layer .save-form {
+    position: absolute;
+    top: 150px;
+    left: calc(50% - 205px);
+
+    width: 410px;
+    height: 390px;
+    padding-top: 15px;
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+    border-radius: 6px;
+
+    background-color: rgba(27,27,27,0.75);/*#1b1b1b;*/
+    background-image: -moz-linear-gradient(top,rgba(34,34,34,.75),rgba(17,17,17,.75));
+    background-image: -webkit-gradient(linear,0 0,0 100%,from(rgba(34,34,34,.75)),to(rgba(17,17,17,.75)));
+    background-image: -webkit-linear-gradient(top,rgba(34,34,34,.75),rgba(17,17,17,.75));
+    background-image: -o-linear-gradient(top,rgba(34,34,34,.75),rgba(17,17,17,.75));
+    background-image: linear-gradient(to bottom,rgba(34,34,34,.75),rgba(17,17,17,.75));
+    background-repeat: repeat-x;
+    border-color: #252525;
+    color: white;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-size: 14px;
+}
+.save-layer .save-form .separator {
+    width: 350px;
+    border-bottom: 1px solid #999;
+    margin: auto;
+    margin-top: -6px;
+    margin-bottom: 10px;
+}
+.save-layer .save-form .save-form-buttons {
+    margin-top: 10px;
+}
+.save-layer .save-form input, .save-layer .save-form textarea {
+    width: 350px;
+}

Playground/index.html

@@ -107,6 +107,9 @@
                 <ul class="dropdown-menu" id="scriptsList"></ul>
             </div>
         </div>
+        <div class="save-message" id="saveMessage">
+            Be the first to fill this playground metadata!
+        </div>
     </div>
 
     <x-splitbox>
@@ -136,6 +139,24 @@
         </div>
     </div>
 
+    <div id="saveLayer" class="save-layer">
+        <div class="save-form">
+            <label for="saveFormTitle">TITLE</label>
+            <div class="separator"></div>
+            <input type="text" maxlength="120" id="saveFormTitle" class="save-form-title">
+            <label for="saveFormDescription">DESCRIPTION</label>
+            <div class="separator"></div>
+            <textarea id="saveFormDescription" rows="4" cols="10"></textarea>
+            <label for="saveFormTags">TAGS (separated by comma)</label>
+            <div class="separator"></div>
+            <textarea id="saveFormTags" rows="4" cols="10"></textarea>
+            <div class="save-form-buttons">
+                <button class="btn save-form-button" id="saveFormButtonOk">OK</button>
+                <button class="btn save-form-button" id="saveFormButtonCancel">Cancel</button>
+            </div>
+        </div>
+    </div>
+
     <script src="https://code.jquery.com/jquery.js"></script>
     <script src="bootstrap/js/bootstrap.min.js"></script>
     <script src="index.js"></script>

Playground/index.js

@@ -16,8 +16,11 @@
             document.getElementById('safemodeToggle').checked = true;
         });
 
-        var snippetUrl = "https://babylonjs-api.azurewebsites.net/api/snippet";
+        var snippetUrl = "https://babylonjs-api2.azurewebsites.net/snippets";
         var currentSnippetToken;
+        var currentSnippetTitle = null;
+        var currentSnippetDescription = null;
+        var currentSnippetTags = null;
         var engine;
         var fpsLabel = document.getElementById("fpsLabel");
         var scripts;
@@ -501,6 +504,14 @@
 
         // Snippet
         var save = function () {
+
+            // Retrieve title if necessary
+            if(document.getElementById("saveLayer")) {
+                currentSnippetTitle = document.getElementById("saveFormTitle").value;
+                currentSnippetDescription = document.getElementById("saveFormDescription").value;
+                currentSnippetTags = document.getElementById("saveFormTags").value;
+            }
+
             var xmlHttp = new XMLHttpRequest();
             xmlHttp.onreadystatechange = function () {
                 if (xmlHttp.readyState === 4) {
@@ -509,10 +520,12 @@
                         var snippet = JSON.parse(xmlHttp.responseText);
                         var newUrl = baseUrl + "#" + snippet.id;
                         currentSnippetToken = snippet.id;
-                        if (snippet.version !== "0") {
+                        if (snippet.version && snippet.version !== "0") {
                             newUrl += "#" + snippet.version;
                         }
                         location.href = newUrl;
+                        // Hide the complete title & co message
+                        document.getElementById("saveMessage").style.display = "none";
                         compileAndRun();
                     } else {
                         showError("Unable to save your code. It may be too long.", null);
@@ -523,14 +536,39 @@
             xmlHttp.open("POST", snippetUrl + (currentSnippetToken ? "/" + currentSnippetToken : ""), true);
             xmlHttp.setRequestHeader("Content-Type", "application/json");
 
-            var payload = {
-                code: jsEditor.getValue()
+            var dataToSend = {
+                payload: {
+                    code: jsEditor.getValue()
+                },
+                name: currentSnippetTitle,
+                description: currentSnippetDescription,
+                tags: currentSnippetTags
             };
 
-            xmlHttp.send(JSON.stringify(payload));
+            xmlHttp.send(JSON.stringify(dataToSend));
         }
 
-        document.getElementById("saveButton").addEventListener("click", save);
+        document.getElementById("saveButton").addEventListener("click", function() {
+            if(currentSnippetTitle == null
+                && currentSnippetDescription == null
+                && currentSnippetTags == null) {
+
+                document.getElementById("saveLayer").style.display = "block";
+            }
+            else {
+                save();
+            }
+        });
+        document.getElementById("saveFormButtonOk").addEventListener("click", function () {
+            document.getElementById("saveLayer").style.display = "none";
+            save();
+        });
+        document.getElementById("saveFormButtonCancel").addEventListener("click", function () {
+            document.getElementById("saveLayer").style.display = "none";
+        });
+        document.getElementById("saveMessage").addEventListener("click", function() {
+            document.getElementById("saveMessage").style.display = "none";
+        });
         document.getElementById("mainTitle").innerHTML = "Babylon.js v" + BABYLON.Engine.Version + " Playground";
 
         var previousHash = "";
@@ -557,9 +595,30 @@
                         xmlHttp.onreadystatechange = function () {
                             if (xmlHttp.readyState === 4) {
                                 if (xmlHttp.status === 200) {
-                                    var snippet = JSON.parse(xmlHttp.responseText);
+                                    var snippet = JSON.parse(xmlHttp.responseText)[0];
+
                                     blockEditorChange = true;
-                                    jsEditor.setValue(snippet.code.toString());
+                                    jsEditor.setValue(JSON.parse(snippet.jsonPayload).code.toString());
+
+                                    // Check if title / descr / tags are already set
+                                    if((snippet.name != null && snippet.name != "")
+                                        || (snippet.description != null && snippet.description != "")
+                                        || (snippet.tags != null && snippet.tags != ""))
+                                    {
+                                        currentSnippetTitle = snippet.name;
+                                        currentSnippetDescription = snippet.description;
+                                        currentSnippetTags = snippet.tags;
+
+                                        if(document.getElementById("saveLayer")) {
+                                            var elem = document.getElementById("saveLayer");
+                                            elem.outerHTML = "";
+                                            delete elem;
+                                        }
+                                    }
+                                    else {
+                                        document.getElementById("saveMessage").style.display = "block";
+                                    }
+
                                     jsEditor.setPosition({ lineNumber: 0, column: 0 });
                                     blockEditorChange = false;
                                     compileAndRun();

Playground/package.json

@@ -4,7 +4,7 @@
   "description": "Babylon.js is a 3D engine based on webgl and javascript",
   "main": "",
   "repository": { "url": "https://github.com/BabylonJS/Babylon.js/" },
-  "readme": "https://github.com/BabylonJS/Babylon.js/edit/master/readme.md",
+  "readme": "https://github.com/BabylonJS/Babylon.js/blob/master/readme.md",
   "license": "(Apache-2.0)",
   "devDependencies": {
     "monaco-editor": "^0.7.0"