Merge pull request #12 from macno/macno/template-loader

Proposal for #11: having templates' buttons dynamically loaded

assets/app.js

@@ -2,7 +2,32 @@ console.log("app.js loaded");
 
 const placeHolders = [];
 
-var getTemplateHtml = template => {
+const getTemplates = () => {
+    fetch('templates.json')
+        .then(function(response) {
+            return response.json()
+        })
+        .then(function(templates) {
+            populateTemplates(templates);
+            getTemplateHtml(templates[0].id);
+        });
+};
+
+const populateTemplates = templates => {
+    const templatesContainer = document.getElementById('themebtns');
+    templates.forEach(template => {
+       const button = document.createElement('button');
+       button.setAttribute("class", "themebtn");
+       button.setAttribute('id', template.id);
+       button.addEventListener("click", () => {
+           getTemplateHtml(template.id);
+       });
+       button.textContent = template.name + ' (by ' + template.author + ')';
+       templatesContainer.appendChild(button);
+    });
+};
+
+const getTemplateHtml = template => {
     document.getElementById('iframe').src = "about:blank";
     fetch('template/'+template+'.html')
     .then(function(response) {
@@ -11,23 +36,22 @@ var getTemplateHtml = template => {
     .then(function(html) {
         html = parseContent(html);
         document.getElementById('iframe').contentWindow.document.write(html);
-        console.log(document.getElementById('iframe').contentWindow.document)
     });
 };
 
-var valueChange = value => {
+const valueChange = value => {
-    var iframehtml = document.getElementById('iframe').contentWindow.document.getElementById(value);
+    const iframehtml = document.getElementById('iframe').contentWindow.document.getElementById(value);
-    var val = document.getElementById(value).value;
+    const val = document.getElementById(value).value;
     iframehtml.innerHTML = val
 };
 
-var downloadPage = () => {
+const downloadPage = () => {
-    var pageContents = new XMLSerializer().serializeToString(document.getElementById('iframe').contentWindow.document);
+    let pageContents = new XMLSerializer().serializeToString(document.getElementById('iframe').contentWindow.document);
     pageContents = parseContent(pageContents);
     download(pageContents, "index.html", "text/html")
 };
 
-var parseContent = pageContents => {
+const parseContent = pageContents => {
     placeHolders.forEach(ph => {
         const val = document.getElementById(ph.id).value;
         if(val) {
@@ -38,7 +62,7 @@ var parseContent = pageContents => {
     return pageContents
 };
 
-var loadPlaceholder = () => {
+const loadPlaceholder = () => {
     const inputs = document.querySelectorAll('#inputs [type=text]');
     inputs.forEach(input => {
         const ph = {}
@@ -54,6 +78,6 @@ var loadPlaceholder = () => {
     });
 };
 
-loadPlaceholder();
+getTemplates();
 
-getTemplateHtml("original");
+loadPlaceholder();

index.html

@@ -17,9 +17,6 @@
             <div id="themebtns">
                 <h1>I'm not done my website!</h1>
                 <h2>Template</h2>
-                <button class="themebtn" id="original" onclick="getTemplateHtml('original')">Original</button>
-                <button class="themebtn" id="fork" onclick="getTemplateHtml('fork')">Fork</button>
-                <button class="themebtn" id="material" onclick="getTemplateHtml('material')">Material</button>
             </div>
             <!-- Colour inputs -->
             <!-- <div id="themeclrs">

templates.json

@@ -0,0 +1,17 @@
+[
+  {
+    "id": "original",
+    "name": "Original",
+    "author": "gmemstr"
+  },
+  {
+    "id": "material",
+    "name": "Material",
+    "author": "gmemstr"
+  },
+  {
+    "id": "fork",
+    "name": "Fork",
+    "author": "gmemstr"
+  }
+]