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

adds implementation

Browse source
This commit is contained in:
Ovidiu Alexandru Toma 2018-10-10 18:13:38 +03:00
parent 18a4b4f428
commit c7b784b126
3 changed files with 61 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
assets/app.js
View file

@ -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)

5
index.html
View file

@ -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
View 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&rsquo;ll be back online shortly!</p>
<p>&mdash; rep_DEVNAME</p>
</div>
</div>
</body>
</html>