2018-03-05 00:44:17 +00:00
|
|
|
console.log("app.js loaded");
|
|
|
|
|
2018-10-09 11:19:10 +01:00
|
|
|
const placeHolders = [];
|
|
|
|
|
2018-10-10 08:39:29 +01:00
|
|
|
const getTemplates = () => {
|
|
|
|
fetch('templates.json')
|
|
|
|
.then(function(response) {
|
|
|
|
return response.json()
|
|
|
|
})
|
|
|
|
.then(function(templates) {
|
|
|
|
populateTemplates(templates);
|
2018-10-15 11:27:57 +01:00
|
|
|
getTemplateHtml(templates[0].id, templates[0].colors);
|
2018-10-10 08:39:29 +01:00
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
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", () => {
|
2018-10-15 11:27:57 +01:00
|
|
|
getTemplateHtml(template.id, template.colors);
|
2018-10-10 08:39:29 +01:00
|
|
|
});
|
|
|
|
button.textContent = template.name + ' (by ' + template.author + ')';
|
|
|
|
templatesContainer.appendChild(button);
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2018-10-15 11:27:57 +01:00
|
|
|
const getTemplateHtml = (template, colors = []) => {
|
|
|
|
var i, option_html;
|
2018-10-09 11:19:10 +01:00
|
|
|
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);
|
2018-10-15 11:27:57 +01:00
|
|
|
document.getElementById('themeclrs').classList.add("hidden");
|
|
|
|
if(colors.length > 0)
|
|
|
|
{
|
|
|
|
document.getElementById('themeclrs').classList.remove("hidden");
|
|
|
|
document.getElementById("color_selection").value = colors[0].default;
|
|
|
|
}
|
|
|
|
document.getElementById("object_selection").innerHTML = "";
|
|
|
|
for (i = 0; i < colors.length; i++) {
|
|
|
|
color = colors[i]
|
|
|
|
elements = document.getElementById('iframe').contentWindow.document.getElementById(color.id);
|
|
|
|
option_html = "<option data-color='" + color.default + "' data-target='" + color.id + "' >" + color.name + "</option>";
|
|
|
|
document.getElementById("object_selection").innerHTML += option_html;
|
|
|
|
applyColor(elements, color.default);
|
|
|
|
}
|
2018-10-09 11:19:10 +01:00
|
|
|
});
|
|
|
|
};
|
2018-03-05 00:44:17 +00:00
|
|
|
|
2018-10-10 08:39:29 +01:00
|
|
|
const valueChange = value => {
|
|
|
|
const iframehtml = document.getElementById('iframe').contentWindow.document.getElementById(value);
|
2018-10-10 09:22:02 +01:00
|
|
|
if(!iframehtml) return;
|
2018-10-10 08:39:29 +01:00
|
|
|
const val = document.getElementById(value).value;
|
2018-10-09 11:19:10 +01:00
|
|
|
iframehtml.innerHTML = val
|
|
|
|
};
|
2018-03-10 23:30:11 +00:00
|
|
|
|
2018-10-10 08:39:29 +01:00
|
|
|
const downloadPage = () => {
|
|
|
|
let pageContents = new XMLSerializer().serializeToString(document.getElementById('iframe').contentWindow.document);
|
2018-10-09 11:19:10 +01:00
|
|
|
pageContents = parseContent(pageContents);
|
|
|
|
download(pageContents, "index.html", "text/html")
|
|
|
|
};
|
|
|
|
|
2018-10-10 08:39:29 +01:00
|
|
|
const parseContent = pageContents => {
|
2018-10-09 11:19:10 +01:00
|
|
|
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
|
|
|
|
};
|
|
|
|
|
2018-10-10 08:39:29 +01:00
|
|
|
const loadPlaceholder = () => {
|
2018-10-09 11:19:10 +01:00
|
|
|
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);
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2018-10-11 10:25:11 +01:00
|
|
|
const changeColor = (el) => {
|
2018-10-15 11:27:57 +01:00
|
|
|
color = el.value;
|
|
|
|
iframe_doc = document.getElementById('iframe').contentWindow.document;
|
|
|
|
target_option = document.getElementById('object_selection');
|
|
|
|
target_id = target_option.options[target_option.selectedIndex].getAttribute("data-target");
|
|
|
|
div = iframe_doc.getElementById(target_id);
|
|
|
|
applyColor(div, color);
|
2018-10-11 10:25:11 +01:00
|
|
|
};
|
|
|
|
|
2018-10-15 11:27:57 +01:00
|
|
|
const changeSelectedColor = (el) => {
|
|
|
|
target_option = document.getElementById('object_selection');
|
|
|
|
target_color = target_option.options[target_option.selectedIndex].getAttribute("data-color");
|
|
|
|
document.getElementById("color_selection").value = target_color;
|
|
|
|
};
|
|
|
|
|
|
|
|
const applyColor = (element, color) => {
|
|
|
|
if(element != null && element != undefined)
|
|
|
|
{
|
|
|
|
element.style["background-color"] = color;
|
2018-10-11 10:25:11 +01:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2018-10-10 08:39:29 +01:00
|
|
|
getTemplates();
|
2018-03-10 23:30:11 +00:00
|
|
|
|
2018-10-10 08:39:29 +01:00
|
|
|
loadPlaceholder();
|