mirror of
https://github.com/gmemstr/notdonemywebsite.git
synced 2024-09-19 21:51:10 +01:00
parent
dcf4cdf873
commit
8f4781a85b
|
@ -1,29 +1,59 @@
|
||||||
console.log("app.js loaded");
|
console.log("app.js loaded");
|
||||||
|
|
||||||
|
const placeHolders = [];
|
||||||
|
|
||||||
var getTemplateHtml = template => {
|
var getTemplateHtml = template => {
|
||||||
document.getElementById('iframe').src = "about:blank";
|
document.getElementById('iframe').src = "about:blank";
|
||||||
fetch('template/'+template+'.html')
|
fetch('template/'+template+'.html')
|
||||||
.then(function(response) {
|
.then(function(response) {
|
||||||
return response.text()
|
return response.text()
|
||||||
})
|
})
|
||||||
.then(function(html) {
|
.then(function(html) {
|
||||||
document.getElementById('iframe').contentWindow.document.write(html);
|
html = parseContent(html);
|
||||||
console.log(document.getElementById('iframe').contentWindow.document)
|
document.getElementById('iframe').contentWindow.document.write(html);
|
||||||
});
|
console.log(document.getElementById('iframe').contentWindow.document)
|
||||||
}
|
});
|
||||||
|
};
|
||||||
|
|
||||||
var valueChange = value => {
|
var valueChange = value => {
|
||||||
var iframehtml = document.getElementById('iframe').contentWindow.document.getElementById(value);
|
var iframehtml = document.getElementById('iframe').contentWindow.document.getElementById(value);
|
||||||
val = document.getElementById(value).value;
|
var val = document.getElementById(value).value;
|
||||||
iframehtml.innerHTML = val
|
iframehtml.innerHTML = val
|
||||||
}
|
};
|
||||||
|
|
||||||
var downloadPage = () => {
|
var downloadPage = () => {
|
||||||
var pageContents = new XMLSerializer().serializeToString(document.getElementById('iframe').contentWindow.document)
|
var pageContents = new XMLSerializer().serializeToString(document.getElementById('iframe').contentWindow.document);
|
||||||
pageContents = pageContents.replace("rep_DEVNAME", document.getElementById("devname").value)
|
pageContents = parseContent(pageContents);
|
||||||
pageContents = pageContents.replace("rep_SNAME", document.getElementById("sitename").value)
|
download(pageContents, "index.html", "text/html")
|
||||||
pageContents = pageContents.replace("rep_SURL", document.getElementById("url").value)
|
};
|
||||||
|
|
||||||
|
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");
|
getTemplateHtml("original");
|
|
@ -16,7 +16,7 @@
|
||||||
<!-- Buttons for changing theme -->
|
<!-- Buttons for changing theme -->
|
||||||
<div id="themebtns">
|
<div id="themebtns">
|
||||||
<h1>I'm not done my website!</h1>
|
<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="original" onclick="getTemplateHtml('original')">Original</button>
|
||||||
<button class="themebtn" id="fork" onclick="getTemplateHtml('fork')">Fork</button>
|
<button class="themebtn" id="fork" onclick="getTemplateHtml('fork')">Fork</button>
|
||||||
<button class="themebtn" id="material" onclick="getTemplateHtml('material')">Material</button>
|
<button class="themebtn" id="material" onclick="getTemplateHtml('material')">Material</button>
|
||||||
|
@ -30,11 +30,11 @@
|
||||||
<div id="inputs">
|
<div id="inputs">
|
||||||
<h2>Values</h2>
|
<h2>Values</h2>
|
||||||
<label for="sitename">Site name</label>
|
<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>
|
<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>
|
<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>
|
</div>
|
||||||
<!-- Captcha and download button -->
|
<!-- Captcha and download button -->
|
||||||
<div id="submit">
|
<div id="submit">
|
||||||
|
|
Loading…
Reference in a new issue