fix #9

Gruntfile.js

@@ -82,6 +82,7 @@ module.exports = function(grunt) {
             'node_modules/codemirror/mode/sass/sass.js',
             'node_modules/codemirror/mode/htmlmixed/htmlmixed.js',
             'assets/src/js/highlight/highlight.pack.js',
+            'node_modules/js-cookie/src/js.cookie.js'
           ]
         }
       },

assets/src/js/app.js

@@ -25,7 +25,7 @@ $(document).on('ready pjax:success', function() {
   });
 
   // Delete a file or a field in editor
-  $(".delete").click(function(event) {
+  $("body").on('click', '.delete', function(event) {
     event.preventDefault();
     button = $(this);
 
@@ -49,11 +49,15 @@ $(document).on('ready pjax:success', function() {
       });
     } else {
       name = button.parent().parent().attr("for") || button.parent().parent().parent().attr("id");
+      name = name.replace(/\[/, '\\[');
+      name = name.replace(/\]/, '\\]');
       console.log(name)
 
-      $('#' + name).fadeOut().remove();
       $('label[for="' + name + '"]').fadeOut().remove();
+      $('#' + name).fadeOut().remove();
     }
+
+    return false;
   });
 
   // If it's editor page
@@ -62,6 +66,14 @@ $(document).on('ready pjax:success', function() {
     preview = $("#preview-area");
     textarea = $("#content-area");
 
+    $('body').on('keypress', 'input', function(event) {
+      if (event.keyCode == 13) {
+        event.preventDefault();
+        $('input[value="Save"]').focus().click();
+        return false;
+      }
+    });
+
     // If it has a textarea
     if (textarea[0]) {
       options = {
@@ -154,10 +166,11 @@ $(document).on('ready pjax:success', function() {
         console.log(data);
       });
 
+      return false;
     });
 
     // Adds one more field to the current group
-    $(".add").click(function(event) {
+    $("body").on('click', '.add', function(event) {
       event.preventDefault();
 
       if ($("#new").length) {
@@ -167,10 +180,10 @@ $(document).on('ready pjax:success', function() {
       title = $(this).parent().parent();
       fieldset = title.parent();
       type = fieldset.data("type");
-      name = fieldset.data("name");
+      name = fieldset.attr("id");
 
       if (title.is('h1')) {
-        fieldset = $('.sidebar .content');
+        fieldset = $('.frontmatter .container');
         fieldset.prepend('<div id="ghost"></div>');
         title = $('#ghost');
         type = "object";
@@ -180,24 +193,61 @@ $(document).on('ready pjax:success', function() {
         title.after('<input id="new" placeholder="Write the field name and press enter..."></input>');
         element = $("#new");
 
+        if (!Cookies.get('placeholdertip')) {
+          Cookies.set('placeholdertip', 'true', {
+            expires: 365
+          });
+
+          notification({
+            text: 'Write the field name and then press enter. If you want to create an array or an object, end the name with ":array" or ":object".',
+            type: 'information'
+          });
+        }
+
         $(element).keypress(function(event) {
           if (event.which == 13) {
             event.preventDefault();
             value = element.val();
-            element.remove();
 
             if (value == "") {
+              element.remove();
               return false;
             }
 
-            if (name == "undefined") {
+            elements = value.split(":")
-              name = value
+
-            } else {
+            if (elements.length > 2) {
-              name = name + '[' + value + ']';
+              notification({
+                text: "Invalid syntax. It must be 'name[:type]'.",
+                type: 'error'
+              });
+              return false;
             }
 
+            element.remove();
+
+            if (name == "undefined") {
+              name = elements[0]
+            } else {
+              name = name + '[' + elements[0] + ']';
+            }
+
+            if (elements.length == 1) {
               title.after('<input name="' + name + ':auto" id="' + name + '"></input><br>');
               title.after('<label for="' + name + '">' + value + ' <span class="actions"><button class="delete"><i class="fa fa-minus"></i></button></span></label>');
+            } else {
+              var fieldset = "<fieldset id=\"{{ $value.Name }}\" data-type=\"{{ $value.Type }}\">\r\n<h3>{{ $value.Title }}\r\n<span class=\"actions\">\r\n<button class=\"add\"><i class=\"fa fa-plus\"><\/i><\/button>\r\n<button class=\"delete\"><i class=\"fa fa-minus\"><\/i><\/button>\r\n<\/span>\r\n<\/h3>\r\n<\/fieldset>";
+
+              if (elements[1] == "array") {
+                fieldset = fieldset.replace("{{ $value.Type }}", "array");
+              } else {
+                fieldset = fieldset.replace("{{ $value.Type }}", "object");
+              }
+
+              fieldset = fieldset.replace("{{ $value.Title }}", elements[0]);
+              fieldset = fieldset.replace("{{ $value.Name }}", name);
+              title.after(fieldset);
+            }
 
             return false;
           }
@@ -211,13 +261,5 @@ $(document).on('ready pjax:success', function() {
 
       return false;
     });
-
-    $('body').on('keypress', 'input', function(event) {
-      if (event.keyCode == 13) {
-        event.preventDefault();
-        $('input[value="Save"]').focus().click();
-        return false;
-      }
-    });
   }
 });

assets/src/js/notifications.js

@@ -68,4 +68,15 @@ notification = function(options) {
 
   options = $.extend({}, defaults, options);
   noty(options);
+
+  if (!Cookies.get('stickynoties') && !options.timeout) {
+    Cookies.set('stickynoties', 'true', {
+      expires: 365
+    });
+
+    notification({
+      text: "Some notifications are sticky. If it doesn't go away, click to dismiss it.",
+      type: 'information'
+    });
+  }
 }

assets/src/sass/_animations.scss

@@ -1,60 +0,0 @@
-#loading {
-  position: fixed;
-  height: calc(100% - 3em);
-  width: 100%;
-  top: 3em;
-  background-color: rgba(0, 0, 0, 0.6);
-  z-index: 99999999;
-  display: none;
-}
-
-.double-bounce {
-  width: 5em;
-  height: 5em;
-  margin: 0 auto;
-  position: relative;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.double-bounce .child {
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  background-color: #fff;
-  opacity: .6;
-  position: absolute;
-  top: 0;
-  left: 0;
-  -webkit-animation: doubleBounce 2s infinite ease-in-out;
-  animation: doubleBounce 2s infinite ease-in-out;
-}
-
-.double-bounce .double-bounce2 {
-  -webkit-animation-delay: -1.0s;
-  animation-delay: -1.0s;
-}
-
-@-webkit-keyframes doubleBounce {
-  0%,
-  100% {
-    -webkit-transform: scale(0);
-    transform: scale(0);
-  }
-  50% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-  }
-}
-
-@keyframes doubleBounce {
-  0%,
-  100% {
-    -webkit-transform: scale(0);
-    transform: scale(0);
-  }
-  50% {
-    -webkit-transform: scale(1);
-    transform: scale(1);
-  }
-}

assets/src/sass/_editor.scss

@@ -97,6 +97,10 @@
   border-top: 1px solid rgba(0,0,0,.1);
 }
 
+.frontmatter-only fieldset:first-child {
+  border-bottom: 1px solid rgba(0,0,0,.1);
+}
+
 .frontmatter-only h3 {
   font-size: 1.5em;
 }

assets/src/sass/_forms.scss

@@ -24,13 +24,17 @@ form label {
   margin : .1em 0 0;
 }
 
-form fieldset {
+fieldset {
   border    : 0;
   margin    : 1em 0 0;
   padding   : 1em 0 0;
   border-top: 1px solid rgba(255, 255, 255, 0.25);
 }
 
+fieldset:first-child {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
+}
+
 input[type="file"] {
   display: none;
 }

assets/src/sass/_notifications.scss

@@ -1,7 +1,7 @@
 #noty_topRight_layout_container {
   font-family    : sans-serif;
-  top            : 3.5em !important;
+  top            : 4em !important;
-  right          : .5em !important;
+  right          : 1em !important;
   position       : fixed !important;
   width          : 310px;
   height         : auto;
@@ -32,11 +32,21 @@
   position   : relative;
 }
 
+.noty_text {
+  display    : block;
+  box-sizing : border-box;
+  margin-left: 3em;
+  top        : 1em;
+}
+
 .noty_icon {
+  position                 : absolute;
+  left                     : 0;
+  top                      : 0;
+  box-sizing               : border-box;
+  height                   : 100%;
   padding                  : 1em;
-  margin-left              : -1em;
+  background-color         : rgba(0,0,0,.1);
-  margin-right             : .9em;
-  background-color         : rgba(0,0,0,0.1);
   border-top-left-radius   : .3em;
   border-bottom-left-radius: .3em;
   text-align               : center;

assets/src/sass/main.scss

@@ -1,7 +1,6 @@
 @import "navigation";
 @import "scrollbar";
 @import "notifications";
-@import "animations";
 @import 'editor';
 @import 'forms';
 @import "browse";

frontmatter/frontmatter.go

@@ -106,10 +106,10 @@ func handleArrays(content interface{}, parent *frontmatter, name string) *frontm
 	c.Type = "array"
 	c.Title = name
 
-	if parent.Type == "object" && parent.Name == mainName {
+	if parent.Name == mainName {
 		c.Name = name
 	} else {
-		c.Name = parent.Name + "[" + c.Name + "]"
+		c.Name = parent.Name + "[" + name + "]"
 	}
 
 	c.Content = rawToPretty(content, c)

package.json

@@ -22,6 +22,7 @@
     "font-awesome": "^4.4.0",
     "jquery": "^2.1.4",
     "jquery-serializejson": "^2.5.0",
+    "js-cookie": "^2.0.3",
     "normalize.css": "^3.0.3",
     "noty": "^2.3.6",
     "perfect-scrollbar": "^0.6.4",

templates/base_full.tmpl

@@ -29,13 +29,6 @@
   <div id="content">
     {{ template "content" . }}
   </div>
-
-  <div id="loading">
-    <div class="double-bounce">
-      <div class="child double-bounce1"></div>
-      <div class="child double-bounce2"></div>
-    </div>
-  </div>
 </body>
 
 </html>

templates/frontmatter.tmpl

@@ -1,9 +1,9 @@
 {{ define "frontmatter" }} {{ range $key, $value := . }} {{ if or (eq $value.Type "object") (eq $value.Type "array") }}
-<fieldset id="{{ $value.Name }}" data-name="{{ $value.Name }}" data-type="{{ $value.Type }}">
+<fieldset id="{{ $value.Name }}" data-type="{{ $value.Type }}">
   <h3>{{ SplitCapitalize $value.Title }}
     <span class="actions">
-      <button class="delete"><i class="fa fa-minus"></i></button>
       <button class="add"><i class="fa fa-plus"></i></button>
+      <button class="delete"><i class="fa fa-minus"></i></button>
     </span>
   </h3>
   {{ template "frontmatter" $value.Content }}