mirror of
https://github.com/gmemstr/notdonemywebsite.git
synced 2024-09-19 13:41:10 +01:00
adds implementation
This commit is contained in:
parent
18a4b4f428
commit
c7b784b126
|
@ -1,6 +1,6 @@
|
|||
console.log("app.js loaded");
|
||||
|
||||
var getTemplateHtml = template => {
|
||||
var getTemplateHtml = (template, primary_color="#ffffff", secondary_color="#ffffff") => {
|
||||
document.getElementById('iframe').src = "about:blank";
|
||||
fetch('template/'+template+'.html')
|
||||
.then(function(response) {
|
||||
|
@ -9,28 +9,42 @@ var getTemplateHtml = template => {
|
|||
.then(function(html) {
|
||||
document.getElementById('iframe').contentWindow.document.write(html);
|
||||
// console.log(document.getElementById('iframe').contentWindow.document)
|
||||
primary_elements = document.getElementById('iframe').contentWindow.document.getElementsByClassName("primary_color");
|
||||
applyColor(primary_elements, primary_color);
|
||||
|
||||
var elements = document.getElementById('iframe').contentWindow.document.querySelectorAll("body *");
|
||||
var numElements = elements.length;
|
||||
var i;
|
||||
for (i = 0; i < numElements; i++) {
|
||||
elements[i].addEventListener("click", addColorTrigger);
|
||||
}
|
||||
secondary_elements = document.getElementById('iframe').contentWindow.document.getElementsByClassName("secondary_color");
|
||||
applyColor(secondary_elements, secondary_color);
|
||||
document.getElementById("primary").value = primary_color
|
||||
document.getElementById("secondary").value = secondary_color
|
||||
});
|
||||
}
|
||||
|
||||
var changeColor = (el) => {
|
||||
color = el.value
|
||||
iframe_doc = document.getElementById('iframe').contentWindow.document
|
||||
if(el.id == "primary")
|
||||
{
|
||||
divs = iframe_doc.getElementsByClassName("primary_color")
|
||||
}
|
||||
else
|
||||
{
|
||||
divs = iframe_doc.getElementsByClassName("secondary_color")
|
||||
}
|
||||
applyColor(divs, color);
|
||||
}
|
||||
|
||||
var applyColor = (elements, color) => {
|
||||
var i;
|
||||
for (i = 0; i < elements.length; i++) {
|
||||
elements[i].style["background-color"] = color;
|
||||
}
|
||||
}
|
||||
var valueChange = value => {
|
||||
var iframehtml = document.getElementById('iframe').contentWindow.document.getElementById(value);
|
||||
val = document.getElementById(value).value;
|
||||
iframehtml.innerHTML = val
|
||||
}
|
||||
|
||||
var addColorTrigger = (e) => {
|
||||
console.log("click");
|
||||
console.log(e.currentTarget);
|
||||
|
||||
}
|
||||
|
||||
var downloadPage = () => {
|
||||
var pageContents = new XMLSerializer().serializeToString(document.getElementById('iframe').contentWindow.document)
|
||||
pageContents = pageContents.replace("rep_DEVNAME", document.getElementById("devname").value)
|
||||
|
|
|
@ -20,12 +20,13 @@
|
|||
<button class="themebtn" id="original" onclick="getTemplateHtml('original')">Original</button>
|
||||
<button class="themebtn" id="fork" onclick="getTemplateHtml('fork')">Fork</button>
|
||||
<button class="themebtn" id="material" onclick="getTemplateHtml('material')">Material</button>
|
||||
<button class="themebtn" id="color_test" onclick="getTemplateHtml('color_test', '#f5f5dd', '#fec1cb')">Color Test</button>
|
||||
</div>
|
||||
<!-- Colour inputs -->
|
||||
<div id="themeclrs">
|
||||
<h2>Colours</h2>
|
||||
<input type="color" class="themeclr" id="primary">
|
||||
<input type="color" class="themeclr" id="secondary">
|
||||
<input type="color" class="themeclr" id="primary" onchange="changeColor(this)">
|
||||
<input type="color" class="themeclr" id="secondary" onchange="changeColor(this)">
|
||||
</div>
|
||||
<div id="inputs">
|
||||
<h2>Values</h2>
|
||||
|
|
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 class="primary_color">
|
||||
|
||||
<div class="secondary_color">
|
||||
<h1>rep_SNAME will be back soon!</h1>
|
||||
<div>
|
||||
<p>Sorry for the inconvenience but rep_URL is performing some maintenance at the moment. We’ll be back online shortly!</p>
|
||||
<p>— rep_DEVNAME</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in a new issue