arch/notdonemywebsite
1
0
Fork 0
mirror of https://github.com/gmemstr/notdonemywebsite.git synced 2024-09-19 13:41:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

feedback fix

Browse source
This commit is contained in:
Ovidiu Alexandru Toma 2018-10-15 13:27:57 +03:00
parent cdf84a6643 046f5dda4f
commit b2449b4134
5 changed files with 68 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
assets/app.js
View file

@ -9,7 +9,7 @@ const getTemplates = () => {
}) })
.then(function(templates) { .then(function(templates) {
populateTemplates(templates); populateTemplates(templates);
getTemplateHtml(templates[0].id, templates[0].primary_color, templates[0].secondary_color); getTemplateHtml(templates[0].id, templates[0].colors);
}); });
}; };
@ -20,14 +20,15 @@ const populateTemplates = templates => {
button.setAttribute("class", "themebtn"); button.setAttribute("class", "themebtn");
button.setAttribute('id', template.id); button.setAttribute('id', template.id);
button.addEventListener("click", () => { button.addEventListener("click", () => {
getTemplateHtml(template.id, template.primary_color, template.secondary_color); getTemplateHtml(template.id, template.colors);
}); });
button.textContent = template.name + ' (by ' + template.author + ')'; button.textContent = template.name + ' (by ' + template.author + ')';
templatesContainer.appendChild(button); templatesContainer.appendChild(button);
}); });
}; };
const getTemplateHtml = (template, primary_color="#ffffff", secondary_color="#ffffff") => { const getTemplateHtml = (template, colors = []) => {
var i, option_html;
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) {
@ -36,13 +37,20 @@ const getTemplateHtml = (template, primary_color="#ffffff", secondary_color="#ff
.then(function(html) { .then(function(html) {
html = parseContent(html); html = parseContent(html);
document.getElementById('iframe').contentWindow.document.write(html); document.getElementById('iframe').contentWindow.document.write(html);
primary_elements = document.getElementById('iframe').contentWindow.document.getElementsByClassName("primary_color"); document.getElementById('themeclrs').classList.add("hidden");
applyColor(primary_elements, primary_color); if(colors.length > 0)
{
secondary_elements = document.getElementById('iframe').contentWindow.document.getElementsByClassName("secondary_color"); document.getElementById('themeclrs').classList.remove("hidden");
applyColor(secondary_elements, secondary_color); document.getElementById("color_selection").value = colors[0].default;
document.getElementById("primary").value = primary_color }
document.getElementById("secondary").value = secondary_color 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);
}
}); });
}; };
@ -87,23 +95,24 @@ const loadPlaceholder = () => {
}; };
const changeColor = (el) => { const changeColor = (el) => {
color = el.value color = el.value;
iframe_doc = document.getElementById('iframe').contentWindow.document iframe_doc = document.getElementById('iframe').contentWindow.document;
if(el.id == "primary") target_option = document.getElementById('object_selection');
{ target_id = target_option.options[target_option.selectedIndex].getAttribute("data-target");
divs = iframe_doc.getElementsByClassName("primary_color") div = iframe_doc.getElementById(target_id);
} applyColor(div, color);
else
{
divs = iframe_doc.getElementsByClassName("secondary_color")
}
applyColor(divs, color);
}; };
const applyColor = (elements, color) => { const changeSelectedColor = (el) => {
var i; target_option = document.getElementById('object_selection');
for (i = 0; i < elements.length; i++) { target_color = target_option.options[target_option.selectedIndex].getAttribute("data-color");
elements[i].style["background-color"] = color; document.getElementById("color_selection").value = target_color;
};
const applyColor = (element, color) => {
if(element != null && element != undefined)
{
element.style["background-color"] = color;
} }
}; };

4
assets/css.css
View file

@ -37,4 +37,8 @@ input[type=text] {
background-color: #E9E9E9; background-color: #E9E9E9;
height: 100vh; height: 100vh;
width: 85vw; width: 85vw;
}
.hidden {
display: none;
} }

13
index.html
View file

@ -10,7 +10,8 @@
<link rel="stylesheet" href="assets/css.css"> <link rel="stylesheet" href="assets/css.css">
</head> </head>
<body> <body bgcolor="#E6E6FA">
<!-- Sidebar --> <!-- Sidebar -->
<nav> <nav>
<!-- Buttons for changing theme --> <!-- Buttons for changing theme -->
@ -21,8 +22,12 @@
<!-- Colour inputs --> <!-- Colour inputs -->
<div id="themeclrs"> <div id="themeclrs">
<h2>Colours</h2> <h2>Colours</h2>
<input type="color" class="themeclr" id="primary" onchange="changeColor(this)"> <select id="object_selection" style="width: 100%;" onchange="changeSelectedColor(this)">
<input type="color" class="themeclr" id="secondary" onchange="changeColor(this)"> <option>Choose an object</option>
</select>
<input type="color" class="themeclr" id="color_selection" onchange="changeColor(this)">
<!-- <input type="color" class="themeclr" id="secondary" onchange="changeColor(this)"> -->
</div> </div>
<div id="inputs"> <div id="inputs">
<h2>Values</h2> <h2>Values</h2>
@ -45,4 +50,4 @@
<script type="text/javascript" src="assets/app.js"></script> <script type="text/javascript" src="assets/app.js"></script>
</body> </body>
</html> </html>

4
template/color_test.html
View file

@ -18,9 +18,9 @@
</head> </head>
<body class="primary_color"> <body id="primary_color">
<div class="secondary_color"> <div id="secondary_color">
<h1><span id="sitename">rep_SNAME</span> will be back soon!</h1> <h1><span id="sitename">rep_SNAME</span> will be back soon!</h1>
<div> <div>
<p>Sorry for the inconvenience but <span id="url">rep_URL</span> is performing some maintenance at the moment. We&rsquo;ll be back online shortly!</p> <p>Sorry for the inconvenience but <span id="url">rep_URL</span> is performing some maintenance at the moment. We&rsquo;ll be back online shortly!</p>

23
templates.json
View file

@ -17,8 +17,23 @@
{ {
"id": "color_test", "id": "color_test",
"name": "Color Test", "name": "Color Test",
"author": "ovidThomas", "author": "OvidiuToma",
"primary_color": "#f5f5dd", "colors": [
"secondary_color": "#fec1cb" {
"id": "primary_color",
"name": "Main bg",
"default": "#f5f5dd"
},
{
"id": "secondary_color",
"name": "Block bg",
"default": "#fec1cb"
}
]
},
{
"id": "typewriter",
"name": "Typewriter",
"author": "macno"
} }
] ]