Merge pull request #20 from OvidiuToma/hotfix/add_color

Hotfix/Allow colour styling

assets/app.js

@@ -9,7 +9,7 @@ const getTemplates = () => {
         })
         .then(function(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('id', template.id);
        button.addEventListener("click", () => {
-           getTemplateHtml(template.id);
+           getTemplateHtml(template.id, template.colors);
        });
        button.textContent = template.name + ' (by ' + template.author + ')';
        templatesContainer.appendChild(button);
     });
 };
 
-const getTemplateHtml = template => {
+const getTemplateHtml = (template, colors = []) => {
+    var i, option_html;
     document.getElementById('iframe').src = "about:blank";
     fetch('template/'+template+'.html')
     .then(function(response) {
@@ -36,6 +37,20 @@ const getTemplateHtml = template => {
     .then(function(html) {
         html = parseContent(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();
 
 loadPlaceholder();

assets/css.css

@@ -38,3 +38,7 @@ input[type=text] {
 	height: 100vh;
 	width: 85vw;
 }
+
+.hidden {
+	display: none;
+}

index.html

@@ -20,11 +20,15 @@
                 <h2>Template</h2>
             </div>
             <!-- Colour inputs -->
-            <!-- <div id="themeclrs">
+            <div id="themeclrs">
                 <h2>Colours</h2>
-                <input type="color" class="themeclr" id="primary">
-                <input type="color" class="themeclr" id="secondary">
-            </div> -->
+                <select id="object_selection" style="width: 100%;" onchange="changeSelectedColor(this)">
+                    <option>Choose an object</option>
+                </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">
                 <h2>Values</h2>
                 <label for="sitename">Site name</label> 

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 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&rsquo;ll be back online shortly!</p>
+          <p>&mdash; <span id="devname">rep_DEVNAME </span></p>
+      </div>
+    </div>
+  </body>
+</html>

templates.json

@@ -14,6 +14,23 @@
     "name": "Fork",
     "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",
     "name": "Typewriter",