mirror of
https://github.com/gmemstr/notdonemywebsite.git
synced 2024-09-19 13:41:10 +01:00
Merge pull request #20 from OvidiuToma/hotfix/add_color
Hotfix/Allow colour styling
This commit is contained in:
commit
2da55a5281
|
@ -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 = "<option data-color='" + color.default + "' data-target='" + color.id + "' >" + color.name + "</option>";
|
||||
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();
|
||||
|
|
|
@ -37,4 +37,8 @@ input[type=text] {
|
|||
background-color: #E9E9E9;
|
||||
height: 100vh;
|
||||
width: 85vw;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
12
index.html
12
index.html
|
@ -20,11 +20,15 @@
|
|||
<h2>Template</h2>
|
||||
</div>
|
||||
<!-- Colour inputs -->
|
||||
<!-- <div id="themeclrs">
|
||||
<div id="themeclrs">
|
||||
<h2>Colours</h2>
|
||||
<input type="color" class="themeclr" id="primary">
|
||||
<input type="color" class="themeclr" id="secondary">
|
||||
</div> -->
|
||||
<select id="object_selection" style="width: 100%;" onchange="changeSelectedColor(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 id="inputs">
|
||||
<h2>Values</h2>
|
||||
<label for="sitename">Site name</label>
|
||||
|
|
31
template/color_test.html
Normal file
31
template/color_test.html
Normal file
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>rep_SNAME</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<style>
|
||||
body { text-align: center; padding: 150px; }
|
||||
h1 { font-size: 50px; }
|
||||
body { font: 20px Helvetica, sans-serif; color: #333; }
|
||||
article { display: block; text-align: left; width: 650px; margin: 0 auto; }
|
||||
a { color: #dc8100; text-decoration: none; }
|
||||
a:hover { color: #333; text-decoration: none; }
|
||||
.secondary_color {padding: 10px;}
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body id="primary_color">
|
||||
|
||||
<div id="secondary_color">
|
||||
<h1><span id="sitename">rep_SNAME</span> will be back soon!</h1>
|
||||
<div>
|
||||
<p>Sorry for the inconvenience but <span id="url">rep_URL</span> is performing some maintenance at the moment. We’ll be back online shortly!</p>
|
||||
<p>— <span id="devname">rep_DEVNAME </span></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -14,6 +14,23 @@
|
|||
"name": "Fork",
|
||||
"author": "gmemstr"
|
||||
},
|
||||
{
|
||||
"id": "color_test",
|
||||
"name": "Color Test",
|
||||
"author": "OvidiuToma",
|
||||
"colors": [
|
||||
{
|
||||
"id": "primary_color",
|
||||
"name": "Main bg",
|
||||
"default": "#f5f5dd"
|
||||
},
|
||||
{
|
||||
"id": "secondary_color",
|
||||
"name": "Block bg",
|
||||
"default": "#fec1cb"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "typewriter",
|
||||
"name": "Typewriter",
|
||||
|
|
Loading…
Reference in a new issue