added lang selector to the ace editor

DoubleDoorDevelopment · Oct 13, 2014 · dc23a13 · dc23a13
1 parent f73e805
commit dc23a13
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 9 deletions.
diff --git a/src/main/resources/templates/editors/ace.ftl b/src/main/resources/templates/editors/ace.ftl
@@ -5,20 +5,42 @@
     }
 </style>
 
+<select id="modeSelector" onchange="setMode(this.value)">
+</select>
+
 <div id="editor">${fm.getFileContentsAsString()}</div>
 
 <script src="/static/js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
 <script>
     var editor = ace.edit("editor");
     editor.setTheme("ace/theme/chrome");
-    /**
-     *  TODO: Make proper lang detection with manual override on the page itself. (dropdown?) See http://ajaxorg.github.io/ace-builds/kitchen-sink.html
-     *  editor.getSession().setMode("ace/mode/html");
-     */
     editor.getSession().setTabSize(4);
     editor.getSession().setUseSoftTabs(true);
     editor.setShowPrintMargin(false);
 
+    var modes = ["abap","actionscript","ada","apache_conf","applescript","asciidoc","assembly_x86","autohotkey","batchfile","c9search","cirru","clojure","cobol","coffee","coldfusion","csharp","css","curly","c_cpp","d","dart","diff","django","dockerfile","dot","eiffel","ejs","erlang","forth","ftl","gcode","gherkin","gitignore","glsl","golang","groovy","haml","handlebars","haskell","haxe","html","html_ruby","ini","io","jack","jade","java","javascript","json","jsoniq","jsp","jsx","julia","latex","less","liquid","lisp","livescript","logiql","lsl","lua","luapage","lucene","makefile","markdown","matlab","mel","mushcode","mysql","nix","objectivec","ocaml","pascal","perl","pgsql","php","plain_text","powershell","praat","prolog","properties","protobuf","python","r","rdoc","rhtml","ruby","rust","sass","scad","scala","scheme","scss","sh","sjs","smarty","snippets","soy_template","space","sql","stylus","svg","tcl","tex","text","textile","toml","twig","typescript","vala","vbscript","velocity","verilog","vhdl","xml","xquery","yaml"];
+
+    var modeSelector = document.getElementById("modeSelector");
+    modes.forEach(function(mode) {
+        modeSelector.innerHTML += "<option value=\"" + mode + "\">" + mode + "</option>";
+    });
+
+    var extention = "${fm.getExtension()}";
+    if (modes.indexOf(extention) != -1)
+    {
+        modeSelector.value = extention;
+        editor.getSession().setMode("ace/mode/" + extention);
+    }
+    else
+    {
+        modeSelector.value = "text";
+        editor.getSession().setMode("ace/mode/text");
+    }
+
+    function setMode(mode)
+    {
+        editor.getSession().setMode("ace/mode/" + mode);
+    }
 </script>
 <#if !readonly>
 <button type="button" class="btn btn-primary btn-block" onclick="call('filemanager', '${fm.server.name}', '${fm.stripServer(fm.file)}', 'set', editor.getValue());">Save</button>

diff --git a/src/main/resources/templates/newserver.ftl b/src/main/resources/templates/newserver.ftl
@@ -7,7 +7,7 @@
         window.location = "../servers/${server.name}";
     </script>
 <#else>
-    <form class="form-horizontal" role="form" method="post">
+    <form class="form-horizontal" name="form" role="form" method="post" onsubmit="return validateForm()">
         <#if admin>
             <div class="form-group">
                 <label for="owner" class="col-sm-2 control-label">Owner</label>
@@ -21,12 +21,12 @@
                 </div>
             </div>
         </#if>
-        <div class="form-group">
+        <div class="form-group" id="name-div">
             <label for="name" class="col-sm-2 control-label">Server Name</label>
 
             <div class="col-sm-10">
-                <input type="text" class="form-control" id="name" name="name" required>
-                <span class="help-block">"${user.username}-" will be used as a prefix automatically.</span>
+                <input type="text" class="form-control" id="name" name="name" required onchange="checkName()">
+                <span class="help-block" id="name-help" >"${user.username}-" will be used as a prefix automatically.</span>
             </div>
         </div>
         <#if !Settings.fixedPorts>
@@ -129,10 +129,33 @@
         <!-- submit btn -->
         <div class="form-group">
             <div class="col-sm-offset-2 col-sm-10">
-                <button type="submit" class="btn btn-primary">Submit!</button>
+                <button id="submit" type="submit" class="btn btn-primary">Submit!</button>
                 <span class="help-block">By clicking submit you indicate that you agree to <a href="https://account.mojang.com/documents/minecraft_eula">Mojang's EULA.</a></span>
             </div>
         </div>
     </form>
+<script>
+    function checkName() {
+        var name = document.getElementById("name").value;
+        while (!name.match(/^[\w]+$/))
+        {
+            name = prompt('Your server name contains non allowed characters.\nPlease remove all spaces and special characters.', name);
+            if (name == null) break;
+        }
+
+        if (name == null || !name.match(/^[\w]+$/))
+        {
+            document.getElementById("submit").disabled = true;
+            document.getElementById("name-div").className = "form-group has-error";
+
+        }
+        else
+        {
+            document.getElementById("name").value = name;
+            document.getElementById("submit").disabled = false;
+            document.getElementById("name-div").className = "form-group";
+        }
+    }
+</script>
 </#if>
 <#include "footer.ftl">