mirror of
https://github.com/gmemstr/notdonemywebsite.git
synced 2024-09-19 21:51:10 +01:00
parent
dcf4cdf873
commit
8f4781a85b
|
@ -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");
|
|
@ -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">
|
||||
|
|
Loading…
Reference in a new issue