updates

assets/src/js/app.js

@@ -60,6 +60,79 @@ $(document).on('ready pjax:success', function() {
     return false;
   });
 
+  if ($('main').hasClass('browse')) {
+    $('.new').click(function(event) {
+      event.preventDefault();
+
+      if ($(this).data("opened")) {
+        $('#new-file').fadeOut(200);
+        $(this).data("opened", false);
+      } else {
+        $('#new-file').fadeIn(200);
+        $(this).data("opened", true);
+      }
+
+      return false;
+    });
+
+    $('#new-file').on('keypress', 'input', function(event) {
+      if (event.keyCode == 13) {
+        event.preventDefault();
+        var value = $(this).val(),
+          splited = value.split(":"),
+          filename = "",
+          archtype = "";
+
+        if (value == "") {
+          notification({
+            text: "You have to write something. If you want to close the box, click the button again.",
+            type: 'warning',
+            timeout: 5000
+          });
+
+          return false;
+        } else if (splited.length == 1) {
+          filename = value;
+        } else if (splited.length == 2) {
+          filename = splited[0];
+          archtype = splited[1];
+        } else {
+          notification({
+            text: "Hmm... I don't understand you. Try writing something like 'name[:archtype]'.",
+            type: 'error'
+          });
+
+          return false;
+        }
+
+        var content = '{"filename": "' + filename + '", "archtype": "' + archtype + '"}';
+
+        $.ajax({
+          type: 'POST',
+          url: window.location.pathname,
+          data: content,
+          dataType: 'json',
+          encode: true,
+        }).done(function(data) {
+          notification({
+            text: "File created successfully. You will be redirected.",
+            type: 'success',
+            timeout: 5000
+          });
+        }).fail(function(data) {
+          // error types
+          notification({
+            text: 'Something went wrong.',
+            type: 'error'
+          });
+          console.log(data);
+        });
+
+        return false;
+      }
+    });
+  }
+
   // If it's editor page
   if ($(".editor")[0]) {
     editor = false;

assets/src/sass/_browse.scss

@@ -24,9 +24,22 @@
 
 .browse .actions .go-right {
   margin-left: auto;
+  position   : relative;
 }
 
 .browse tr {
   line-height  : 2em;
   border-bottom: 1px solid rgba(0,0,0,0.03);
+}
+
+.browse #new-file {
+  display         : none;
+  position        : absolute;
+  right           : 0;
+  top             : 2.5em;
+  background-color: #263238;
+  color           : rgba(255,255,255,.5);
+  border-radius   : .5em;
+  padding         : 1em;
+  width           : 182%;
 }

assets/src/sass/_forms.scss

@@ -1,5 +1,5 @@
 /* FORMS ELEMENTS */
-form input {
+input {
   width           : 100%;
   background-color: rgba(0, 0, 0, 0.25);
   color           : rgba(255, 255, 255, 0.3);
@@ -12,13 +12,13 @@ form input {
   transition      : .5s ease-out all;
 }
 
-form input:focus {
+input:focus {
   color  : rgba(255, 255, 255, 0.7);
   border : 0;
   outline: 0;
 }
 
-form label {
+label {
   width  : 10.5em;
   display: inline-block;
   margin : .1em 0 0;
@@ -109,6 +109,10 @@ button.delete {
   transition: .2s ease-in-out opacity;
 }
 
+div[data-type="array-item"] {
+  position: relative;
+}
+
 label:hover > .actions,
 h1:hover > .actions,
 h3:hover > .actions,
@@ -120,8 +124,4 @@ input[data-parent-type="array"] + .actions {
   position: absolute;
   top     : 1em;
   right   : .5em;
-}
-
-div[data-type="array-item"] {
-  position: relative;
 }

browse/browse.go

@@ -1,6 +1,9 @@
 package browse
 
 import (
+	"bytes"
+	"encoding/json"
+	"errors"
 	"log"
 	"net/http"
 	"os"
@@ -49,6 +52,25 @@ func ServeHTTP(w http.ResponseWriter, r *http.Request, c *config.Config) (int, e
 
 		w.Header().Set("Content-Type", "application/json")
 		w.Write([]byte("{}"))
+	} else if r.Method == "POST" {
+		// Get the JSON information sent using a buffer
+		buffer := new(bytes.Buffer)
+		buffer.ReadFrom(r.Body)
+
+		// Creates the raw file "map" using the JSON
+		var info map[string]interface{}
+		json.Unmarshal(buffer.Bytes(), &info)
+
+		// Check if filename and archtype are specified in
+		// the request
+		if _, ok := info["filename"]; !ok {
+			return 400, errors.New("Filename not specified.")
+		}
+
+		if _, ok := info["archtype"]; !ok {
+			return 400, errors.New("Archtype not specified.")
+		}
+
 	} else {
 		functions := template.FuncMap{
 			"CanBeEdited": utils.CanBeEdited,

templates/browse.tmpl

@@ -14,7 +14,11 @@
         <div class="go-right">
           <input type="file" value="Upload">
           <button id="upload">Upload <i class="fa fa-cloud-upload"></i></button>
-          <button class="default">New <i class="fa fa-plus"></i></button>
+          <button class="default new">New <i class="fa fa-plus"></i></button>
+          <div id="new-file">
+            Write the name of the new file. If you want to use an archetype, add ':archetype' in the end, replacing 'archetype' by its name.
+            <input id="new-file-name" type="text">
+          </div>
         </div>
       </div>
     </div>