add button working

assets/public/css/styles.css

@@ -99,10 +99,10 @@ button, input {
 button, select {
  text-transform: none
 }
-button, html [type="button"], [type="reset"], [type="submit"] {
+button, .button, html [type="button"], [type="reset"], [type="submit"] {
- -webkit-appearance: button;
+ /* -webkit-appearance: button; */
  text-decoration: none;
- color: #fff;
+ color: #fff !important;
  background-color: #26a69a;
  text-align: center;
  letter-spacing: .5px;
@@ -121,11 +121,11 @@ button, html [type="button"], [type="reset"], [type="submit"] {
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
 }
-button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
+button::-moz-focus-inner,.button::-moz-focus-inner, . [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0
 }
-button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
+button:-moz-focusring, .button:-moz-focusring,, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText
 }
 fieldset {
@@ -380,21 +380,21 @@ header form input {
  outline: 0;
  background-color: transparent;
 }
-::-webkit-input-placeholder {
+header form::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: rgba(255, 255, 255, .5);
 }
-:-moz-placeholder {
+header form:-moz-placeholder {
  opacity: 1;
  /* Mozilla Firefox 4 to 18 */
  color: rgba(255, 255, 255, .5);
 }
-::-moz-placeholder {
+header form::-moz-placeholder {
  opacity: 1;
  /* Mozilla Firefox 19+ */
  color: rgba(255, 255, 255, .5);
 }
-:-ms-input-placeholder {
+header form:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: rgba(255, 255, 255, .5);
 }
@@ -507,19 +507,12 @@ header form input {
  position: relative;
 }
 #listing .item .checkbox {
-
  position: absolute;
-
  top: 0;
-
  right: 0;
-
  border-radius: 50%;
-
  background: #000;
-
  border: 0;
-
  -webkit-appearance: initial;
 }
 .item:hover {
@@ -662,10 +655,20 @@ i.spin {
  transition: 0.2s ease-in-out all;
 }
 #editor #submit span i {
-
  vertical-align: sub;
-
  font-size: 1.3rem;
-
  margin-right: .2em;
 }
+#editor .group.temp {
+ background-color: #f5f5f5;
+}
+#editor .group.temp label {
+ font-weight: lighter;
+ font-size: .8em;
+ margin-bottom: 1em;
+ color: #7d7d7d;
+}
+
+#editor .group.temp  input {
+    color: #212121;
+}

assets/public/js/application.js

@@ -379,6 +379,11 @@ document.addEventListener("DOMContentLoaded", function (event) {
  });
 
  document.getElementById("open").addEventListener("click", openEvent);
+ document.addEventListener('keydown', (event) => {
+     if (event.keyCode == 27) {
+         backEvent(event);
+     }
+ });
  if (document.getElementById("back")) {
   document.getElementById("back").addEventListener("click", backEvent)
  };
@@ -517,9 +522,9 @@ const tempID = "_fm_internal_temporary_id"
 var addFrontMatterItem = function(event) {
     event.preventDefault();
 
-    let newItem = document.getElementById(tempID)
+    let temp = document.getElementById(tempID)
-    if (newItem) {
+    if (temp) {
-        newItem.remove();
+        temp.remove();
     }
 
     let block = this.parentNode;
@@ -536,110 +541,102 @@ var addFrontMatterItem = function(event) {
 
         block.querySelector('.group').insertAdjacentHTML('beforeend', `<div id="${fieldID}-${count}" data-type="array-item">
             <input name="${fieldID}" id="${fieldID}" type="text" data-parent-type="array"></input>
-            <div class="action delete"  data-delete="none">
+            <div class="action delete"  data-delete="${fieldID}-${count}">
                 <i class="material-icons">close</i>
             </div>
         </div>`);
+
+        document.getElementById(`${fieldID}-${count}`).querySelector('input').focus();
+        document.querySelector(`div[data-delete="${fieldID}-${count}"]`).addEventListener('click', deleteFrontMatterItem);
     }
 
+    if (type == "object" || type == "parent") {
+        let template = `<div class="group temp" id="${tempID}">
+        <div class="block" id="${tempID}">
+            <label>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".</label>
+            <input name="${tempID}" type="text" placeholder="Write the field name and press enter.."></input>
+        </div></div>`;
 
-
+        if (type == "parent") {
-
+            document.querySelector('div.button.add').insertAdjacentHTML('beforebegin', template);
-    /*
+        } else {
-
+            block.querySelector('.delete').insertAdjacentHTML('afterend', template);
-
-    // Main add button, after all blocks
-    if (block.is('div') && block.hasClass("frontmatter")) {
-      block = $('.blocks');
-      blockType = "object";
         }
 
-    // If the Block is an object
+        let temp = document.getElementById(tempID);
-    if (blockType == "object") {
+        let input = temp.querySelector('input');
-      block.append('<div class="block" id="' + defaultID + '"></div>');
+        input.focus();
-
+        input.addEventListener('keydown', (event) => {
-      newItem = $("#" + defaultID);
+            if (event.keyCode == 27) {
-      newItem.html('<input id="name-' + defaultID + '" placeholder="Write the field name and press enter..."></input>');
-      field = $("#name-" + defaultID);
-
-      // Show a notification with some information for newbies
-      if (!document.cookie.replace(/(?:(?:^|.*;\s*)placeholdertip\s*\=\s*([^;]*).*$)|^.*$/, "$1")) {
-        var date = new Date();
-        date.setDate(date.getDate() + 365);
-        document.cookie = 'placeholdertip=true; expires=' + date.toUTCString + '; path=/';
-
-        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'
-        });
-      }
-
-      $(field).keypress(function(event) {
-        // When you press enter within the new name field:
-        if (event.which == 13) {
                 event.preventDefault();
-          // This var should have a value of the type "name[:array, :object]"
+                temp.remove();
-          value = field.val();
-
-          if (value == "") {
-            newItem.remove();
-            return false;
             }
 
-          elements = value.split(":")
+            if (event.keyCode == 13) {
+                event.preventDefault();
 
-          if (elements.length > 2) {
+                let value = input.value;
-            notification({
+                if (value === '') {
-              text: "Invalid syntax. It must be 'name[:type]'.",
+                    temp.remove();
-              type: 'error'
+                    return true;
-            });
-            return false;
                 }
 
-          if (elements.length == 2 && elements[1] != "array" && elements[1] != "object") {
+                let name = value.substring(0, value.lastIndexOf(':'));
-            notification({
+                let newtype = value.substring(value.lastIndexOf(':') + 1, value.length);
-              text: "Only arrays and objects are allowed.",
+                if (newtype !== "" && newtype !== "array" && newtype !== "object") {
-              type: 'error'
+                    name = value;
-            });
-            return false;
                 }
 
-          field.remove();
+                name = name.replace(' ', '_');
 
-          if (typeof blockID === "undefined") {
+                let bid = name;
-            blockID = elements[0];
+                if (id != '') {
+                    bid = id + "." + bid;
+                }
+
+                temp.remove();
+
+                switch (newtype) {
+                    case "array":
+                    case "object":
+                        let template = `<fieldset id="${bid}" data-type="${newtype}">
+                          <h3>${name}</h3>
+                          <div class="action add">
+                              <i class="material-icons">add</i>
+                          </div>
+                          <div class="action delete" data-delete="${bid}">
+                              <i class="material-icons">close</i>
+                          </div>
+                         <div class="group">
+                         </div>
+                        </fieldset>`;
+
+                        if (type == "parent") {
+                            document.querySelector('div.button.add').insertAdjacentHTML('beforebegin', template);
                         } else {
-            blockID = blockID + '[' + elements[0] + ']';
+                            block.insertAdjacentHTML('beforeend', template);
                         }
 
-          if (elements.length == 1) {
+                        document.querySelector(`div[data-delete="${bid}"]`).addEventListener('click', deleteFrontMatterItem);
-            newItem.attr('id', 'block-' + blockID);
+                        document.getElementById(bid).querySelector('.action.add').addEventListener('click', addFrontMatterItem);
-            newItem.append('<input name="' + blockID + ':auto" id="' + blockID + '"></input><br>');
+                        break;
-            newItem.prepend('<label for="' + blockID + '">' + value + '</label> <span class="actions"><button class="delete">&#8722;</button></span>');
+                    default:
-          } else {
+                        block.querySelector('.group').insertAdjacentHTML('beforeend', `<div class="block" id="block-${bid}" data-content="${bid}">
-            type = "";
+                          <label for="${bid}">${name}</label>
+                          <input name="${bid}" id="${bid}" type="text" data-parent-type="object"></input>
+                          <div class="action delete" data-delete="block-${bid}">
+                              <i class="material-icons">close</i>
+                          </div>
+                        </div>`);
 
-            if (elements[1] == "array") {
+                        document.getElementById(bid).focus();
-              type = "array";
+                        document.querySelector(`div[data-delete="block-${bid}"]`).addEventListener('click', deleteFrontMatterItem);
-            } else {
-              type = "object"
                 }
-
-            template = "<fieldset id=\"${blockID}\" data-type=\"${type}\"> <h3>${elements[0]}</h3> <span class=\"actions\"> <button class=\"add\">&#43;</button> <button class=\"delete\">&#8722;</button> </span> </fieldset>"
-            template = template.replace("${blockID}", blockID);
-            template = template.replace("${elements[0]}", elements[0]);
-            template = template.replace("${type}", type);
-            newItem.after(template);
-            newItem.remove();
-          }
-
-          return false;
             }
         });
     }
 
-    return false;
+
-    */
 
     return false;
 }

assets/templates/base.tmpl

@@ -32,10 +32,10 @@
 
     <div>
         {{ if .IsDir}}
-        <form>
+        <!-- <form>
             <i class="material-icons">search</i>
             <input type="text" placeholder="Search or command">
-        </form>
+        </form> -->
         <div class="action" id="view">
             <i class="material-icons">view_headline</i>
         </div>

assets/templates/editor.tmpl

@@ -4,7 +4,7 @@
         {{ if or (eq .Class "frontmatter-only") (eq .Class "complete") }}
         <div class="frontmatter" data-type="parent">
             {{ template "blocks" .FrontMatter }}
-            <button class="add">Add field</button>
+            <div class="button add">Add field</div>
         </div>
         {{ end }}