mirror of
https://github.com/gmemstr/notdonemywebsite.git
synced 2024-09-19 21:51:10 +01:00
adds implementation
This commit is contained in:
parent
18a4b4f428
commit
c7b784b126
|
@ -1,6 +1,6 @@
|
||||||
console.log("app.js loaded");
|
console.log("app.js loaded");
|
||||||
|
|
||||||
var getTemplateHtml = template => {
|
var getTemplateHtml = (template, primary_color="#ffffff", secondary_color="#ffffff") => {
|
||||||
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) {
|
||||||
|
@ -9,28 +9,42 @@ var getTemplateHtml = template => {
|
||||||
.then(function(html) {
|
.then(function(html) {
|
||||||
document.getElementById('iframe').contentWindow.document.write(html);
|
document.getElementById('iframe').contentWindow.document.write(html);
|
||||||
// console.log(document.getElementById('iframe').contentWindow.document)
|
// 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 *");
|
secondary_elements = document.getElementById('iframe').contentWindow.document.getElementsByClassName("secondary_color");
|
||||||
var numElements = elements.length;
|
applyColor(secondary_elements, secondary_color);
|
||||||
var i;
|
document.getElementById("primary").value = primary_color
|
||||||
for (i = 0; i < numElements; i++) {
|
document.getElementById("secondary").value = secondary_color
|
||||||
elements[i].addEventListener("click", addColorTrigger);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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 valueChange = value => {
|
||||||
var iframehtml = document.getElementById('iframe').contentWindow.document.getElementById(value);
|
var iframehtml = document.getElementById('iframe').contentWindow.document.getElementById(value);
|
||||||
val = document.getElementById(value).value;
|
val = document.getElementById(value).value;
|
||||||
iframehtml.innerHTML = val
|
iframehtml.innerHTML = val
|
||||||
}
|
}
|
||||||
|
|
||||||
var addColorTrigger = (e) => {
|
|
||||||
console.log("click");
|
|
||||||
console.log(e.currentTarget);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
var downloadPage = () => {
|
var downloadPage = () => {
|
||||||
var pageContents = new XMLSerializer().serializeToString(document.getElementById('iframe').contentWindow.document)
|
var pageContents = new XMLSerializer().serializeToString(document.getElementById('iframe').contentWindow.document)
|
||||||
pageContents = pageContents.replace("rep_DEVNAME", document.getElementById("devname").value)
|
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="original" onclick="getTemplateHtml('original')">Original</button>
|
||||||
<button class="themebtn" id="fork" onclick="getTemplateHtml('fork')">Fork</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="material" onclick="getTemplateHtml('material')">Material</button>
|
||||||
|
<button class="themebtn" id="color_test" onclick="getTemplateHtml('color_test', '#f5f5dd', '#fec1cb')">Color Test</button>
|
||||||
</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">
|
<input type="color" class="themeclr" id="primary" onchange="changeColor(this)">
|
||||||
<input type="color" class="themeclr" id="secondary">
|
<input type="color" class="themeclr" id="secondary" onchange="changeColor(this)">
|
||||||
</div>
|
</div>
|
||||||
<div id="inputs">
|
<div id="inputs">
|
||||||
<h2>Values</h2>
|
<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