From 8f4781a85b1c907fd161fb25f978f06e71b93aad Mon Sep 17 00:00:00 2001
From: Michele Azzolari <michele@azzolari.it>
Date: Tue, 9 Oct 2018 12:19:10 +0200
Subject: [PATCH] Fix issues #4 #7

---
 assets/app.js | 70 ++++++++++++++++++++++++++++++++++++---------------
 index.html    |  8 +++---
 2 files changed, 54 insertions(+), 24 deletions(-)

diff --git a/assets/app.js b/assets/app.js
index 5e90e89..44c1fd3 100644
--- a/assets/app.js
+++ b/assets/app.js
@@ -1,29 +1,59 @@
 console.log("app.js loaded");
 
+const placeHolders = [];
+
 var getTemplateHtml = template => {
-	document.getElementById('iframe').src = "about:blank";
-	fetch('template/'+template+'.html')
-	.then(function(response) {
-		return response.text()
-	})
-	.then(function(html) {
-		document.getElementById('iframe').contentWindow.document.write(html);
-		console.log(document.getElementById('iframe').contentWindow.document)
-	});
-}
+    document.getElementById('iframe').src = "about:blank";
+    fetch('template/'+template+'.html')
+    .then(function(response) {
+        return response.text()
+    })
+    .then(function(html) {
+        html = parseContent(html);
+        document.getElementById('iframe').contentWindow.document.write(html);
+        console.log(document.getElementById('iframe').contentWindow.document)
+    });
+};
 
 var valueChange = value => {
-	var iframehtml = document.getElementById('iframe').contentWindow.document.getElementById(value);
-	val = document.getElementById(value).value;
-	iframehtml.innerHTML = val
-}
+    var iframehtml = document.getElementById('iframe').contentWindow.document.getElementById(value);
+    var val = document.getElementById(value).value;
+    iframehtml.innerHTML = val
+};
 
 var downloadPage = () => {
-	var pageContents = new XMLSerializer().serializeToString(document.getElementById('iframe').contentWindow.document)
-	pageContents = pageContents.replace("rep_DEVNAME", document.getElementById("devname").value)
-	pageContents = pageContents.replace("rep_SNAME", document.getElementById("sitename").value)
-	pageContents = pageContents.replace("rep_SURL", document.getElementById("url").value)
+    var pageContents = new XMLSerializer().serializeToString(document.getElementById('iframe').contentWindow.document);
+    pageContents = parseContent(pageContents);
+    download(pageContents, "index.html", "text/html")
+};
+
+var parseContent = pageContents => {
+    placeHolders.forEach(ph => {
+        const val = document.getElementById(ph.id).value;
+        if(val) {
+            const re = new RegExp(ph.text, 'g');
+            pageContents = pageContents.replace(re, val);
+        }
+    });
+    return pageContents
+};
+
+var loadPlaceholder = () => {
+    const inputs = document.querySelectorAll('#inputs [type=text]');
+    inputs.forEach(input => {
+        const ph = {}
+        const attrs = input.attributes;
+        for(let i = attrs.length - 1; i >= 0; i--) {
+            if(attrs[i].name === 'id') {
+                ph['id'] = attrs[i].value;
+            } else if( attrs[i].name === 'data-placeholder') {
+                ph['text'] = attrs[i].value;
+            }
+        }
+        placeHolders.push(ph);
+    });
+};
+
+loadPlaceholder();
 
-	download(pageContents, "index.html", "text/html")
-}
 getTemplateHtml("original");
\ No newline at end of file
diff --git a/index.html b/index.html
index 750cdc0..2e090ca 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,7 @@
             <!-- Buttons for changing theme -->
             <div id="themebtns">
                 <h1>I'm not done my website!</h1>
-                <h2>Theme</h2>
+                <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>
@@ -30,11 +30,11 @@
             <div id="inputs">
                 <h2>Values</h2>
                 <label for="sitename">Site name</label> 
-                <input type="text" id="sitename" onchange = "valueChange('sitename');" onkeypress = "this.onchange();" onpaste = "this.onchange();" oninput = "this.onchange();">
+                <input type="text" id="sitename" data-placeholder="rep_SNAME" onchange = "valueChange('sitename');" onkeypress = "this.onchange();" onpaste = "this.onchange();" oninput = "this.onchange();">
                 <label for="url">Site URL</label> 
-                <input type="text" id="url" onchange = "valueChange('url');" onkeypress = "this.onchange();" onpaste = "this.onchange();" oninput = "this.onchange();">
+                <input type="text" id="url" data-placeholder="rep_SURL" onchange = "valueChange('url');" onkeypress = "this.onchange();" onpaste = "this.onchange();" oninput = "this.onchange();">
                 <label for="devname">Developer name</label> 
-                <input type="text" id="devname" onchange = "valueChange('devname');" onkeypress = "this.onchange();" onpaste = "this.onchange();" oninput = "this.onchange();">
+                <input type="text" id="devname" data-placeholder="rep_DEVNAME" onchange = "valueChange('devname');" onkeypress = "this.onchange();" onpaste = "this.onchange();" oninput = "this.onchange();">
             </div>
             <!-- Captcha and download button -->
             <div id="submit">