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,20 +507,13 @@ header form input {
  position: relative;
 }
 #listing .item .checkbox {
-
+ position: absolute;
-position: absolute;
+ top: 0;
-
+ right: 0;
-top: 0;
+ border-radius: 50%;
-
+ background: #000;
-right: 0;
+ border: 0;
-
+ -webkit-appearance: initial;
-border-radius: 50%;
-
-background: #000;
-
-border: 0;
-
--webkit-appearance: initial;
 }
 .item:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24) !important;
@@ -655,17 +648,27 @@ i.spin {
  display: none;
 }
 #editor fieldset fieldset {
-    margin-left: 1em;
+ margin-left: 1em;
 }
 #editor #submit span {
-    vertical-align: middle;
+ vertical-align: middle;
-    transition: 0.2s ease-in-out all;
+ transition: 0.2s ease-in-out all;
 }
 #editor #submit span i {
-
+ vertical-align: sub;
-vertical-align: sub;
+ font-size: 1.3rem;
-
+ margin-right: .2em;
-font-size: 1.3rem;
+}
-
+#editor .group.temp {
-margin-right: .2em;
+ 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);
+        }
 
-
+        let temp = document.getElementById(tempID);
-    /*
+        let input = temp.querySelector('input');
-
+        input.focus();
-
+        input.addEventListener('keydown', (event) => {
-    // Main add button, after all blocks
+            if (event.keyCode == 27) {
-    if (block.is('div') && block.hasClass("frontmatter")) {
+                event.preventDefault();
-      block = $('.blocks');
+                temp.remove();
-      blockType = "object";
-    }
-
-    // If the Block is an object
-    if (blockType == "object") {
-      block.append('<div class="block" id="' + defaultID + '"></div>');
-
-      newItem = $("#" + defaultID);
-      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]"
-          value = field.val();
-
-          if (value == "") {
-            newItem.remove();
-            return false;
-          }
-
-          elements = value.split(":")
-
-          if (elements.length > 2) {
-            notification({
-              text: "Invalid syntax. It must be 'name[:type]'.",
-              type: 'error'
-            });
-            return false;
-          }
-
-          if (elements.length == 2 && elements[1] != "array" && elements[1] != "object") {
-            notification({
-              text: "Only arrays and objects are allowed.",
-              type: 'error'
-            });
-            return false;
-          }
-
-          field.remove();
-
-          if (typeof blockID === "undefined") {
-            blockID = elements[0];
-          } else {
-            blockID = blockID + '[' + elements[0] + ']';
-          }
-
-          if (elements.length == 1) {
-            newItem.attr('id', 'block-' + blockID);
-            newItem.append('<input name="' + blockID + ':auto" id="' + blockID + '"></input><br>');
-            newItem.prepend('<label for="' + blockID + '">' + value + '</label> <span class="actions"><button class="delete">&#8722;</button></span>');
-          } else {
-            type = "";
-
-            if (elements[1] == "array") {
-              type = "array";
-            } 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>"
+            if (event.keyCode == 13) {
-            template = template.replace("${blockID}", blockID);
+                event.preventDefault();
-            template = template.replace("${elements[0]}", elements[0]);
-            template = template.replace("${type}", type);
-            newItem.after(template);
-            newItem.remove();
-          }
 
-          return false;
+                let value = input.value;
-        }
+                if (value === '') {
-      });
+                    temp.remove();
+                    return true;
+                }
+
+                let name = value.substring(0, value.lastIndexOf(':'));
+                let newtype = value.substring(value.lastIndexOf(':') + 1, value.length);
+                if (newtype !== "" && newtype !== "array" && newtype !== "object") {
+                    name = value;
+                }
+
+                name = name.replace(' ', '_');
+
+                let bid = name;
+                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 {
+                            block.insertAdjacentHTML('beforeend', template);
+                        }
+
+                        document.querySelector(`div[data-delete="${bid}"]`).addEventListener('click', deleteFrontMatterItem);
+                        document.getElementById(bid).querySelector('.action.add').addEventListener('click', addFrontMatterItem);
+                        break;
+                    default:
+                        block.querySelector('.group').insertAdjacentHTML('beforeend', `<div class="block" id="block-${bid}" data-content="${bid}">
+                          <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>`);
+
+                        document.getElementById(bid).focus();
+                        document.querySelector(`div[data-delete="block-${bid}"]`).addEventListener('click', deleteFrontMatterItem);
+                }
+            }
+        });
     }
 
-    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 }}