mirror of
https://github.com/gmemstr/notdonemywebsite.git
synced 2024-09-19 21:51: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) {
|
.then(function(templates) {
|
||||||
populateTemplates(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("class", "themebtn");
|
||||||
button.setAttribute('id', template.id);
|
button.setAttribute('id', template.id);
|
||||||
button.addEventListener("click", () => {
|
button.addEventListener("click", () => {
|
||||||
getTemplateHtml(template.id);
|
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 => {
|
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,6 +37,20 @@ const getTemplateHtml = template => {
|
||||||
.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);
|
||||||
|
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();
|
getTemplates();
|
||||||
|
|
||||||
loadPlaceholder();
|
loadPlaceholder();
|
||||||
|
|
|
@ -38,3 +38,7 @@ input[type=text] {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 85vw;
|
width: 85vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
12
index.html
12
index.html
|
@ -20,11 +20,15 @@
|
||||||
<h2>Template</h2>
|
<h2>Template</h2>
|
||||||
</div>
|
</div>
|
||||||
<!-- Colour inputs -->
|
<!-- Colour inputs -->
|
||||||
<!-- <div id="themeclrs">
|
<div id="themeclrs">
|
||||||
<h2>Colours</h2>
|
<h2>Colours</h2>
|
||||||
<input type="color" class="themeclr" id="primary">
|
<select id="object_selection" style="width: 100%;" onchange="changeSelectedColor(this)">
|
||||||
<input type="color" class="themeclr" id="secondary">
|
<option>Choose an object</option>
|
||||||
</div> -->
|
</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">
|
<div id="inputs">
|
||||||
<h2>Values</h2>
|
<h2>Values</h2>
|
||||||
<label for="sitename">Site name</label>
|
<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",
|
"name": "Fork",
|
||||||
"author": "gmemstr"
|
"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",
|
"id": "typewriter",
|
||||||
"name": "Typewriter",
|
"name": "Typewriter",
|
||||||
|
|
Loading…
Reference in a new issue