Merge pull request #8 from macno/macno/issue-4

Fix #4 #7

assets/app.js

@@ -1,5 +1,7 @@
 console.log("app.js loaded");
 
+const placeHolders = [];
+
 var getTemplateHtml = template => {
     document.getElementById('iframe').src = "about:blank";
     fetch('template/'+template+'.html')
@@ -7,23 +9,51 @@ var getTemplateHtml = template => {
         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;
+    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();
+
 getTemplateHtml("original");

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">