diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..8806480 Binary files /dev/null and b/.DS_Store differ diff --git a/assets/app.js b/assets/app.js index cd5ab3c..fde98e3 100644 --- a/assets/app.js +++ b/assets/app.js @@ -9,7 +9,7 @@ const getTemplates = () => { }) .then(function(templates) { populateTemplates(templates); - getTemplateHtml(templates[0].id); + getTemplateHtml(templates[0].id, templates[0].colors); }); }; @@ -20,14 +20,15 @@ const populateTemplates = templates => { button.setAttribute("class", "themebtn"); button.setAttribute('id', template.id); button.addEventListener("click", () => { - getTemplateHtml(template.id); + getTemplateHtml(template.id, template.colors); }); button.textContent = template.name + ' (by ' + template.author + ')'; templatesContainer.appendChild(button); }); }; -const getTemplateHtml = template => { +const getTemplateHtml = (template, colors = []) => { + var i, option_html; document.getElementById('iframe').src = "about:blank"; fetch('template/'+template+'.html') .then(function(response) { @@ -36,6 +37,20 @@ const getTemplateHtml = template => { .then(function(html) { html = parseContent(html); document.getElementById('iframe').contentWindow.document.write(html); + 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 = ""; + document.getElementById("object_selection").innerHTML += option_html; + applyColor(elements, color.default); + } }); }; @@ -79,6 +94,28 @@ const loadPlaceholder = () => { }); }; +const changeColor = (el) => { + 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); +}; + +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; + } +}; + getTemplates(); loadPlaceholder(); diff --git a/assets/css.css b/assets/css.css index 1a97272..d82abf0 100644 --- a/assets/css.css +++ b/assets/css.css @@ -37,4 +37,8 @@ input[type=text] { background-color: #E9E9E9; height: 100vh; width: 85vw; +} + +.hidden { + display: none; } \ No newline at end of file diff --git a/index.html b/index.html index 808fb07..b9ce939 100644 --- a/index.html +++ b/index.html @@ -20,11 +20,15 @@
Sorry for the inconvenience but rep_URL is performing some maintenance at the moment. We’ll be back online shortly!
+— rep_DEVNAME
+