mirror of
https://github.com/gmemstr/notdonemywebsite.git
synced 2024-09-19 13:41:10 +01:00
Proposal for #11: having templates' buttons dynamically loaded
This commit is contained in:
parent
ef27881a7d
commit
f263331209
|
@ -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 => {
|
||||
var iframehtml = document.getElementById('iframe').contentWindow.document.getElementById(value);
|
||||
var val = document.getElementById(value).value;
|
||||
const valueChange = value => {
|
||||
const iframehtml = document.getElementById('iframe').contentWindow.document.getElementById(value);
|
||||
const val = document.getElementById(value).value;
|
||||
iframehtml.innerHTML = val
|
||||
};
|
||||
|
||||
var downloadPage = () => {
|
||||
var pageContents = new XMLSerializer().serializeToString(document.getElementById('iframe').contentWindow.document);
|
||||
const downloadPage = () => {
|
||||
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();
|
||||
|
|
|
@ -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">
|
||||
|
|
17
templates.json
Normal file
17
templates.json
Normal file
|
@ -0,0 +1,17 @@
|
|||
[
|
||||
{
|
||||
"id": "original",
|
||||
"name": "Original",
|
||||
"author": "gmemstr"
|
||||
},
|
||||
{
|
||||
"id": "material",
|
||||
"name": "Material",
|
||||
"author": "gmemstr"
|
||||
},
|
||||
{
|
||||
"id": "fork",
|
||||
"name": "Fork",
|
||||
"author": "gmemstr"
|
||||
}
|
||||
]
|
Loading…
Reference in a new issue