html5 templates

Former-commit-id: 0ceb15fde3

_embed/public/js/editor.js

@@ -1,5 +1,7 @@
 'use strict';
 
+var templates = [];
+
 function textareaAutoGrow() {
     let autogrow = function() {
         this.style.height = '5px';
@@ -26,7 +28,7 @@ function deleteFrontMatterItem(event) {
 
 function addFrontMatterItem(event) {
     event.preventDefault();
-
+    let clone;
     let temp = document.getElementById(tempID)
     if (temp) {
         temp.remove();
@@ -50,47 +52,38 @@ function addFrontMatterItem(event) {
         if (fieldsets.length > 0) {
             let newtype = fieldsets[0].dataset.type,
                 bid = id + "[" + fieldsets.length + "]",
-                name = fieldsets.length,
-                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>`;
-
-            block.insertAdjacentHTML('beforeend', template);
-
-            document.querySelector(`div[data-delete="${bid}"]`).addEventListener('click', deleteFrontMatterItem);
-            document.getElementById(bid).querySelector('.action.add').addEventListener('click', addFrontMatterItem);
+                name = fieldsets.length;
+            
+            clone = document.importNode(templates.base.content, true);
+            clone.querySelector('fieldset').id = bid;
+            clone.querySelector('fieldset').dataset.type = newtype;
+            clone.querySelector('h3').innerHTML = name;
+            clone.querySelector('.delete').dataset.delete = bid;
+            clone.querySelector('.delete').addEventListener('click', deleteFrontMatterItem);
+            clone.querySelector('.add').addEventListener('click', addFrontMatterItem);
+            block.appendChild(clone);
         } else {
-            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="${fieldID}-${count}">
-                    <i class="material-icons">close</i>
-                </div>
-            </div>`);
-
+            clone = document.importNode(templates.arrayItem.content, true);
+            clone.querySelector('[data-type="array-item"]').id = `${fieldID}-${count}`;
+            clone.querySelector('input').name = fieldID;
+            clone.querySelector('input').id = fieldID;
+            clone.querySelector('div.action').dataset.delete = `${fieldID}-${count}`;
+            clone.querySelector('div.action').addEventListener('click', deleteFrontMatterItem);
+            block.querySelector('.group').appendChild(clone)
             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 == "object" || type == "parent") {    
+        clone = document.importNode(templates.temporary.content, true);
+        clone.querySelector('.group').id = tempID;
+        clone.querySelector('.block').id = tempID;
+        clone.querySelector('input').name = tempID;
 
         if (type == "parent") {
-            document.querySelector('div.button.add').insertAdjacentHTML('beforebegin', template);
+            document.querySelector('.frontmatter').insertBefore(clone, document.querySelector('div.button.add'));
         } else {
-            block.querySelector('.delete').insertAdjacentHTML('afterend', template);
+            block.insertBefore(clone, block.querySelector('.group'));
         }
 
         let temp = document.getElementById(tempID),
@@ -128,27 +121,21 @@ function addFrontMatterItem(event) {
 
                 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>`;
+                    case "object":                    
+                        clone = document.importNode(templates.base.content, true);
+                        clone.querySelector('fieldset').id = bid;
+                        clone.querySelector('fieldset').dataset.type = newtype;
+                        clone.querySelector('h3').innerHTML = name;
+                        clone.querySelector('.delete').dataset.delete = bid;
+                        clone.querySelector('.delete').addEventListener('click', deleteFrontMatterItem);
+                        clone.querySelector('.add').addEventListener('click', addFrontMatterItem);
 
                         if (type == "parent") {
-                            document.querySelector('div.button.add').insertAdjacentHTML('beforebegin', template);
+                            document.querySelector('.frontmatter').insertBefore(clone, document.querySelector('div.button.add'));
                         } else {
-                            block.insertAdjacentHTML('beforeend', template);
+                            block.appendChild(clone);
                         }
-
-                        document.querySelector(`div[data-delete="${bid}"]`).addEventListener('click', deleteFrontMatterItem);
-                        document.getElementById(bid).querySelector('.action.add').addEventListener('click', addFrontMatterItem);
+                        
                         break;
                     default:
                         let group = block.querySelector('.group');
@@ -157,17 +144,19 @@ function addFrontMatterItem(event) {
                             block.insertAdjacentHTML('afterbegin', '<div class="group"></div>');
                             group = block.querySelector('.group');
                         }
-
-                        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>`);
-
+                        
+                        clone = document.importNode(templates.objectItem.content, true);
+                        clone.querySelector('.block').id = `block-${bid}`;
+                        clone.querySelector('.block').dataset.content = bid;
+                        clone.querySelector('label').for = bid;
+                        clone.querySelector('label').innerHTML = name;
+                        clone.querySelector('input').name = bid;
+                        clone.querySelector('input').id = bid;
+                        clone.querySelector('.action').dataset.delete = `block-${bid}`;
+                        clone.querySelector('.action').addEventListener('click', deleteFrontMatterItem);
+                
+                        group.appendChild(clone)
                         document.getElementById(bid).focus();
-                        document.querySelector(`div[data-delete="block-${bid}"]`).addEventListener('click', deleteFrontMatterItem);
                 }
             }
         });
@@ -178,6 +167,12 @@ function addFrontMatterItem(event) {
 
 document.addEventListener("DOMContentLoaded", (event) => {
     textareaAutoGrow();
+    
+    templates.array = document.getElementById("array-template");
+    templates.arrayItem = document.getElementById("array-item-template");
+    templates.base = document.getElementById('base-template');
+    templates.objectItem = document.getElementById("object-item-template");
+    templates.temporary = document.getElementById('temporary-template');
 
     let container = document.getElementById('editor'),
         button = document.querySelector('#submit span:first-child'),

_embed/templates/editor.tmpl

@@ -1,34 +1,87 @@
 {{ define "content" }}
 {{ with .Data }}
- <div id="editor" class="container" data-kind="{{ .Class }}">
-  <form method="POST" action="./">
-   {{ if or (eq .Class "frontmatter-only") (eq .Class "complete") }}
-    <div class="frontmatter" data-type="parent">
-     {{ template "blocks" .FrontMatter }}
-     <div class="button add">Add field</div>
-    </div>
-   {{ end }}
-
-   {{ if or (eq .Class "content-only") (eq .Class "complete") }}
-
-    {{ if (eq .Class "complete")}}
-     <h3>Body</h3>
-    {{ end }}
-    <div class="content">
-     <div id="editor-source" data-mode="{{ .Mode }}"></div>
-     <textarea name="content">{{ .Content }}</textarea>
-    </div>
-   {{ end }}
-
-   <div>
-    <button id="submit" type="submit" data-type="{{ .Class }}">
-     <span>
-      <i class="material-icons" title="Save">save</i>
-     </span>
-     <span>save</span>
-    </button>
-   </div>
-  </form>
- </div>
+<div id="editor" class="container" data-kind="{{ .Class }}">
+<form method="POST" action="./">
+{{ if or (eq .Class "frontmatter-only") (eq .Class "complete") }}
+<div class="frontmatter" data-type="parent">
+{{ template "blocks" .FrontMatter }}
+<div class="button add">Add field</div>
+</div>
 {{ end }}
+
+{{ if or (eq .Class "content-only") (eq .Class "complete") }}
+
+{{ if (eq .Class "complete")}}
+<h3>Body</h3>
+{{ end }}
+<div class="content">
+<div id="editor-source" data-mode="{{ .Mode }}"></div>
+<textarea name="content">{{ .Content }}</textarea>
+</div>
+{{ end }}
+
+<div>
+<button id="submit" type="submit" data-type="{{ .Class }}">
+<span>
+<i class="material-icons" title="Save">save</i>
+</span>
+<span>save</span>
+</button>
+</div>
+</form>
+</div>
+{{ end }}
+
+<template id="temporary-template">
+    <div class="group temp" id="">
+    <div class="block" id="">
+        <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="" type="text" placeholder="Write the field name and press enter.."></input>
+    </div></div>
+</template>
+
+<template id="base-template">
+    <fieldset id="" data-type="">
+        <h3></h3>
+        <div class="action add">
+            <i class="material-icons">add</i>
+        </div>
+        <div class="action delete" data-delete="">
+            <i class="material-icons">close</i>
+        </div>
+        <div class="group"></div>
+    </fieldset>
+</template>
+
+<template id="object-item-template">
+    <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>
+</template>
+
+<template id="array-template">
+    <fieldset id="" data-type="">
+        <h3></h3>
+        <div class="action add">
+            <i class="material-icons">add</i>
+        </div>
+        <div class="action delete" data-delete="">
+            <i class="material-icons">close</i>
+        </div>
+        <div class="group"></div>
+    </fieldset>
+</template>
+
+<template id="array-item-template">
+    <div id="" data-type="array-item">
+        <input name="" id="" type="text" data-parent-type="array"></input>
+        <div class="action delete" data-delete="">
+            <i class="material-icons">close</i>
+        </div>
+    </div>
+</template>
 {{ end }}