From c7b784b1266ff3beb16c4ea938ecbed96a5f6546 Mon Sep 17 00:00:00 2001
From: Ovidiu Alexandru Toma <inoxovi@gmail.com>
Date: Wed, 10 Oct 2018 18:13:38 +0300
Subject: [PATCH] adds implementation

---
 assets/app.js            | 40 +++++++++++++++++++++++++++-------------
 index.html               |  5 +++--
 template/color_test.html | 31 +++++++++++++++++++++++++++++++
 3 files changed, 61 insertions(+), 15 deletions(-)
 create mode 100644 template/color_test.html

diff --git a/assets/app.js b/assets/app.js
index e616068..7a597df 100644
--- a/assets/app.js
+++ b/assets/app.js
@@ -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)
diff --git a/index.html b/index.html
index a29fedd..f15a489 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/template/color_test.html b/template/color_test.html
new file mode 100644
index 0000000..27b3918
--- /dev/null
+++ b/template/color_test.html
@@ -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>
\ No newline at end of file