mirror of
https://github.com/gmemstr/notdonemywebsite.git
synced 2024-09-19 21:51:10 +01:00
feedback fix
This commit is contained in:
commit
b2449b4134
|
@ -9,7 +9,7 @@ const getTemplates = () => {
|
||||||
})
|
})
|
||||||
.then(function(templates) {
|
.then(function(templates) {
|
||||||
populateTemplates(templates);
|
populateTemplates(templates);
|
||||||
getTemplateHtml(templates[0].id, templates[0].primary_color, templates[0].secondary_color);
|
getTemplateHtml(templates[0].id, templates[0].colors);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -20,14 +20,15 @@ const populateTemplates = templates => {
|
||||||
button.setAttribute("class", "themebtn");
|
button.setAttribute("class", "themebtn");
|
||||||
button.setAttribute('id', template.id);
|
button.setAttribute('id', template.id);
|
||||||
button.addEventListener("click", () => {
|
button.addEventListener("click", () => {
|
||||||
getTemplateHtml(template.id, template.primary_color, template.secondary_color);
|
getTemplateHtml(template.id, template.colors);
|
||||||
});
|
});
|
||||||
button.textContent = template.name + ' (by ' + template.author + ')';
|
button.textContent = template.name + ' (by ' + template.author + ')';
|
||||||
templatesContainer.appendChild(button);
|
templatesContainer.appendChild(button);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const getTemplateHtml = (template, primary_color="#ffffff", secondary_color="#ffffff") => {
|
const getTemplateHtml = (template, colors = []) => {
|
||||||
|
var i, option_html;
|
||||||
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) {
|
||||||
|
@ -36,13 +37,20 @@ const getTemplateHtml = (template, primary_color="#ffffff", secondary_color="#ff
|
||||||
.then(function(html) {
|
.then(function(html) {
|
||||||
html = parseContent(html);
|
html = parseContent(html);
|
||||||
document.getElementById('iframe').contentWindow.document.write(html);
|
document.getElementById('iframe').contentWindow.document.write(html);
|
||||||
primary_elements = document.getElementById('iframe').contentWindow.document.getElementsByClassName("primary_color");
|
document.getElementById('themeclrs').classList.add("hidden");
|
||||||
applyColor(primary_elements, primary_color);
|
if(colors.length > 0)
|
||||||
|
{
|
||||||
secondary_elements = document.getElementById('iframe').contentWindow.document.getElementsByClassName("secondary_color");
|
document.getElementById('themeclrs').classList.remove("hidden");
|
||||||
applyColor(secondary_elements, secondary_color);
|
document.getElementById("color_selection").value = colors[0].default;
|
||||||
document.getElementById("primary").value = primary_color
|
}
|
||||||
document.getElementById("secondary").value = secondary_color
|
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);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -87,23 +95,24 @@ const loadPlaceholder = () => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const changeColor = (el) => {
|
const changeColor = (el) => {
|
||||||
color = el.value
|
color = el.value;
|
||||||
iframe_doc = document.getElementById('iframe').contentWindow.document
|
iframe_doc = document.getElementById('iframe').contentWindow.document;
|
||||||
if(el.id == "primary")
|
target_option = document.getElementById('object_selection');
|
||||||
{
|
target_id = target_option.options[target_option.selectedIndex].getAttribute("data-target");
|
||||||
divs = iframe_doc.getElementsByClassName("primary_color")
|
div = iframe_doc.getElementById(target_id);
|
||||||
}
|
applyColor(div, color);
|
||||||
else
|
|
||||||
{
|
|
||||||
divs = iframe_doc.getElementsByClassName("secondary_color")
|
|
||||||
}
|
|
||||||
applyColor(divs, color);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const applyColor = (elements, color) => {
|
const changeSelectedColor = (el) => {
|
||||||
var i;
|
target_option = document.getElementById('object_selection');
|
||||||
for (i = 0; i < elements.length; i++) {
|
target_color = target_option.options[target_option.selectedIndex].getAttribute("data-color");
|
||||||
elements[i].style["background-color"] = color;
|
document.getElementById("color_selection").value = target_color;
|
||||||
|
};
|
||||||
|
|
||||||
|
const applyColor = (element, color) => {
|
||||||
|
if(element != null && element != undefined)
|
||||||
|
{
|
||||||
|
element.style["background-color"] = color;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -38,3 +38,7 @@ input[type=text] {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 85vw;
|
width: 85vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
11
index.html
11
index.html
|
@ -10,7 +10,8 @@
|
||||||
|
|
||||||
<link rel="stylesheet" href="assets/css.css">
|
<link rel="stylesheet" href="assets/css.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body bgcolor="#E6E6FA">
|
||||||
|
|
||||||
<!-- Sidebar -->
|
<!-- Sidebar -->
|
||||||
<nav>
|
<nav>
|
||||||
<!-- Buttons for changing theme -->
|
<!-- Buttons for changing theme -->
|
||||||
|
@ -21,8 +22,12 @@
|
||||||
<!-- Colour inputs -->
|
<!-- Colour inputs -->
|
||||||
<div id="themeclrs">
|
<div id="themeclrs">
|
||||||
<h2>Colours</h2>
|
<h2>Colours</h2>
|
||||||
<input type="color" class="themeclr" id="primary" onchange="changeColor(this)">
|
<select id="object_selection" style="width: 100%;" onchange="changeSelectedColor(this)">
|
||||||
<input type="color" class="themeclr" id="secondary" onchange="changeColor(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>
|
||||||
<div id="inputs">
|
<div id="inputs">
|
||||||
<h2>Values</h2>
|
<h2>Values</h2>
|
||||||
|
|
|
@ -18,9 +18,9 @@
|
||||||
|
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body class="primary_color">
|
<body id="primary_color">
|
||||||
|
|
||||||
<div class="secondary_color">
|
<div id="secondary_color">
|
||||||
<h1><span id="sitename">rep_SNAME</span> will be back soon!</h1>
|
<h1><span id="sitename">rep_SNAME</span> will be back soon!</h1>
|
||||||
<div>
|
<div>
|
||||||
<p>Sorry for the inconvenience but <span id="url">rep_URL</span> is performing some maintenance at the moment. We’ll be back online shortly!</p>
|
<p>Sorry for the inconvenience but <span id="url">rep_URL</span> is performing some maintenance at the moment. We’ll be back online shortly!</p>
|
||||||
|
|
|
@ -17,8 +17,23 @@
|
||||||
{
|
{
|
||||||
"id": "color_test",
|
"id": "color_test",
|
||||||
"name": "Color Test",
|
"name": "Color Test",
|
||||||
"author": "ovidThomas",
|
"author": "OvidiuToma",
|
||||||
"primary_color": "#f5f5dd",
|
"colors": [
|
||||||
"secondary_color": "#fec1cb"
|
{
|
||||||
|
"id": "primary_color",
|
||||||
|
"name": "Main bg",
|
||||||
|
"default": "#f5f5dd"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "secondary_color",
|
||||||
|
"name": "Block bg",
|
||||||
|
"default": "#fec1cb"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "typewriter",
|
||||||
|
"name": "Typewriter",
|
||||||
|
"author": "macno"
|
||||||
}
|
}
|
||||||
]
|
]
|
Loading…
Reference in a new issue