Extracted insertElementBefore to domUtils.js

This commit is contained in:
Risto Lahtela 2021-01-31 11:14:52 +02:00
parent bf835c3b2e
commit cacdc4641d
3 changed files with 20 additions and 11 deletions

View File

@ -0,0 +1,5 @@
function insertElementBefore(elementSelector, createElementFunction) {
const placeBefore = document.querySelector(elementSelector);
const element = createElementFunction();
placeBefore.insertAdjacentElement('beforebegin', element);
}

View File

@ -272,6 +272,7 @@ function runQuery() {
} }
function renderResultPath(json) { function renderResultPath(json) {
const gotResults = Boolean(json.data);
let pathHtml = ``; let pathHtml = ``;
for (let i = 0; i < json.path.length; i++) { for (let i = 0; i < json.path.length; i++) {
const step = json.path[i]; const step = json.path[i];
@ -282,12 +283,13 @@ function renderResultPath(json) {
pathHtml += `<i class="fa fa-fw fa-filter"></i> ${step.kind} matched ${step.size} players</p>` pathHtml += `<i class="fa fa-fw fa-filter"></i> ${step.kind} matched ${step.size} players</p>`
} }
const placeBefore = document.querySelector('.tab .row .card'); insertElementBefore('.tab .row .card', () => {
const element = document.createElement('div'); const element = document.createElement('div');
element.id = "result-path" element.id = "result-path"
element.classList.add("alert", "alert-warning", "shadow"); element.classList.add("alert", gotResults ? "alert-success" : "alert-warning", "shadow");
element.innerHTML = pathHtml element.innerHTML = pathHtml;
placeBefore.insertAdjacentElement('beforebegin', element); return element;
});
window.scrollTo(0, 0); // Scroll to top window.scrollTo(0, 0); // Scroll to top
} }

View File

@ -311,6 +311,7 @@
<script src="./js/sb-admin-2.js"></script> <script src="./js/sb-admin-2.js"></script>
<script src="./js/xmlhttprequests.js"></script> <script src="./js/xmlhttprequests.js"></script>
<script src="./js/color-selector.js"></script> <script src="./js/color-selector.js"></script>
<script src="./js/domUtils.js"></script>
<!-- Page level plugins --> <!-- Page level plugins -->
<script src="vendor/datatables/jquery.dataTables.min.js"></script> <script src="vendor/datatables/jquery.dataTables.min.js"></script>
@ -328,14 +329,15 @@
const filters = []; const filters = [];
if (location.search.includes("error=")) { if (location.search.includes("error=")) {
const placeBefore = document.querySelector('.tab .row .card div'); insertElementBefore('.tab .row .card div', () => {
const element = document.createElement('alert'); const element = document.createElement('alert');
element.classList.add("alert", "alert-danger", "alert-dismissable", "show"); element.classList.add("alert", "alert-danger", "alert-dismissable", "show");
element.innerHTML = `<span id="error-text"></span> element.innerHTML = `<span id="error-text"></span>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button>` </button>`
placeBefore.insertAdjacentElement('beforebegin', element); return element;
});
document.getElementById('error-text').innerText = new URLSearchParams(location.search).get("error"); document.getElementById('error-text').innerText = new URLSearchParams(location.search).get("error");
} }