Skip to content

Commit c8a2279

Browse files
FuzzyGrimFuzzyGrim
committed
remove jquery
1 parent b6253de commit c8a2279

File tree

6 files changed

+143
-102
lines changed

6 files changed

+143
-102
lines changed

‎src/app/static/js/auto-tab.js

Lines changed: 31 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,42 @@
1-
// get hash from url
2-
$(function () {
1+
document.addEventListener("DOMContentLoaded", function () {
2+
// get hash from url
33
var hash = location.hash.replace(/^#\//, "");
44
if (hash) {
5-
$('#v-pills-tab button[data-bs-target="#' + hash + '"]').tab("show");
5+
var button = document.querySelector(
6+
'#v-pills-tab button[data-bs-target="#' + hash + '"]'
7+
);
8+
var tab = new bootstrap.Tab(button);
9+
tab.show();
610

7-
// highlight media type if hash includes to status
811
var media = hash.split("-")[0];
9-
$("#" + media + "-tab").addClass("highlight");
12+
document.querySelector("#" + media + "-tab").classList.add("highlight");
1013
} else {
11-
$('#v-pills-tab button[data-bs-target="#tv"]').tab("show");
14+
var defaultTabButton = document.querySelector(
15+
'#v-pills-tab button[data-bs-target="#tv"]'
16+
);
17+
var defaultTab = new bootstrap.Tab(defaultTabButton);
18+
defaultTab.show();
1219
}
1320

14-
$("#v-pills-tab button")
15-
.not(".dropdown-toggle")
16-
.on("click", function (event) {
17-
event.preventDefault();
18-
// change hash after click for page-reload
19-
var target = $(this).data("bs-target").replace(/^#/, "");
20-
window.location.hash = "#/" + target;
21+
document
22+
.querySelectorAll("#v-pills-tab button:not(.dropdown-toggle)")
23+
.forEach(function (button) {
24+
button.addEventListener("click", function (event) {
25+
event.preventDefault();
26+
// change hash after click for page-reload
27+
var target = button.dataset.bsTarget.replace(/^#/, "");
28+
window.location.hash = "#/" + target;
2129

22-
// Remove the "highlight" class from all tab link elements
23-
$("#v-pills-tab button").removeClass("highlight");
30+
// Remove the "highlight" class from all tab link elements
31+
document
32+
.querySelectorAll("#v-pills-tab button")
33+
.forEach(function (button) {
34+
button.classList.remove("highlight");
35+
});
2436

25-
// highlight media type if hash includes to status
26-
var media = target.split("-")[0];
27-
$(media + "-tab").addClass("highlight");
37+
// highlight media type if hash includes to status
38+
var media = target.split("-")[0];
39+
document.querySelector("#" + media + "-tab").classList.add("highlight");
40+
});
2841
});
2942
});

‎src/app/static/js/jquery.js

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎src/app/static/js/modal-load.js

Lines changed: 112 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,128 @@
1-
$(document).on("click", ".open-modal-button", function () {
2-
var parts = $(this).data("url").split("_");
3-
var type = parts[0];
4-
var id = parts[1];
1+
var openModalButtons = document.querySelectorAll(".open-modal-button");
52

6-
$.ajax({
7-
type: "GET",
8-
url: "/edit/",
9-
data: { media_type: type, media_id: id },
10-
success: function (data) {
11-
var output = data.title;
12-
if (data.year) {
13-
output += " (" + data.year + ")";
14-
}
3+
openModalButtons.forEach(function (button) {
4+
button.addEventListener("click", function () {
5+
// get the data-url attribute from the clicked element
6+
var urlParts = this.getAttribute("data-url").split("_");
7+
var type = urlParts[0];
8+
var id = urlParts[1];
159

16-
if (data.original_type) {
17-
// capitalize first letter
18-
output += " ["
19-
+ data.original_type.charAt(0).toUpperCase()
20-
+ data.original_type.slice(1)
21-
+ "]";
22-
} else if (data.media_type) {
23-
// capitalize first letter
24-
output += " ["
25-
+ data.media_type.charAt(0).toUpperCase()
26-
+ data.media_type.slice(1)
27-
+ "]";
28-
}
10+
var xhr = new XMLHttpRequest();
11+
var url = "/edit/?media_type=" + type + "&media_id=" + id;
2912

30-
$("#modal-title-" + type + "_" + id).html(output);
31-
$("#modal-body-" + type + "_" + id).html(data.html);
32-
if (data.seasons) {
33-
var select = $("#season-select-" + type + "_" + id);
13+
xhr.onload = function () {
14+
if (xhr.status === 200) {
15+
// parse the JSON response
16+
var data = JSON.parse(xhr.responseText);
17+
var output = data.title;
18+
if (data.year) {
19+
output += " (" + data.year + ")";
20+
}
3421

35-
new bootstrap.Tooltip(
36-
document
37-
.getElementById("season-descriptor-" + type + "_" + id)
38-
.querySelector('[data-bs-toggle="tooltip"]')
39-
);
22+
if (data.original_type) {
23+
// capitalize first letter
24+
output += " ["
25+
+ data.original_type.charAt(0).toUpperCase()
26+
+ data.original_type.slice(1)
27+
+ "]";
28+
} else if (data.media_type) {
29+
// capitalize first letter
30+
output += " ["
31+
+ data.media_type.charAt(0).toUpperCase()
32+
+ data.media_type.slice(1)
33+
+ "]";
34+
}
4035

41-
var score = $("#score-input-" + type + "_" + id);
42-
var status = $("#season-status-" + type + "_" + id);
43-
var progress = $("#progress-input-" + type + "_" + id);
44-
var start = $("#start-input-" + type + "_" + id);
45-
var end = $("#end-input-" + type + "_" + id);
36+
// update the modal title and body with the response data
37+
document.getElementById("modal-title-" + type + "_" + id).innerHTML =
38+
output;
39+
document.getElementById("modal-body-" + type + "_" + id).innerHTML =
40+
data.html;
4641

47-
select.change(function () {
48-
var selectedValue = $(this).val();
42+
if (data.seasons) {
43+
var select = document.getElementById(
44+
"season-select-" + type + "_" + id
45+
);
4946

50-
if (selectedValue == "general") {
51-
score.val(data.score);
52-
status.val(data.status);
53-
progress.val(data.progress);
54-
start.val(data.start_date);
55-
end.val(data.end_date);
56-
} else {
57-
let exists = false;
47+
new bootstrap.Tooltip(
48+
document
49+
.getElementById("season-descriptor-" + type + "_" + id)
50+
.querySelector('[data-bs-toggle="tooltip"]')
51+
);
52+
53+
var score = document.getElementById("score-input-" + type + "_" + id);
54+
var status = document.getElementById(
55+
"season-status-" + type + "_" + id
56+
);
57+
var progress = document.getElementById(
58+
"progress-input-" + type + "_" + id
59+
);
60+
var start = document.getElementById("start-input-" + type + "_" + id);
61+
var end = document.getElementById("end-input-" + type + "_" + id);
5862

59-
// check if season exists in database
60-
for (let i = 0; i < data["media_seasons"].length && !exists; i++) {
61-
let media_season = data["media_seasons"][i];
62-
if (media_season.number == selectedValue) {
63-
score.val(media_season.score);
64-
status.val(media_season.status);
65-
progress.val(media_season.progress);
66-
start.val(media_season.start_date);
67-
end.val(media_season.end_date);
68-
exists = true;
63+
select.addEventListener("change", function () {
64+
var selectedValue = select.value;
65+
66+
if (selectedValue == "general") {
67+
score.value = data.score;
68+
status.value = data.status;
69+
progress.value = data.progress;
70+
start.value = data.start_date;
71+
end.value = data.end_date;
72+
} else {
73+
let exists = false;
74+
75+
// check if season exists in database
76+
for (
77+
let i = 0;
78+
i < data["media_seasons"].length && !exists;
79+
i++
80+
) {
81+
let media_season = data["media_seasons"][i];
82+
if (media_season.number == selectedValue) {
83+
score.value = media_season.score;
84+
status.value = media_season.status;
85+
progress.value = media_season.progress;
86+
start.value = media_season.start_date;
87+
end.value = media_season.end_date;
88+
exists = true;
89+
}
6990
}
70-
}
7191

72-
if (!exists) {
73-
score.val("");
74-
status.val("Completed");
75-
progress.val("");
76-
start.val("");
77-
end.val("");
92+
if (!exists) {
93+
score.value = "";
94+
status.value = "Completed";
95+
progress.value = "";
96+
start.value = "";
97+
end.value = "";
98+
}
7899
}
100+
});
101+
}
102+
103+
if (data.in_db) {
104+
// Add delete button if it doesn't exist
105+
if (
106+
document.querySelectorAll(
107+
"#modal-footer-" + type + "_" + id + " .delete-btn"
108+
).length == 0
109+
) {
110+
var deleteBtn = document.createElement("button");
111+
deleteBtn.className = "btn btn-danger delete-btn";
112+
deleteBtn.type = "submit";
113+
deleteBtn.name = "delete";
114+
deleteBtn.innerHTML = "Delete";
115+
var form = document.querySelector(
116+
"#modal-footer-" + type + "_" + id + " form"
117+
);
118+
form.appendChild(deleteBtn);
79119
}
80-
});
81-
}
82-
if (data.in_db) {
83-
// Add delete button if it doesn't exist
84-
if (
85-
$("#modal-footer-" + type + "_" + id + " .delete-btn").length == 0
86-
) {
87-
var deleteButton = $(
88-
'<button class="btn btn-danger delete-btn" type="submit" name="delete">Delete</button>'
89-
);
90-
$("#modal-footer-" + type + "_" + id + " form").append(deleteButton);
91120
}
121+
} else {
122+
console.error("Request failed. Returned status of " + xhr.status);
92123
}
93-
},
124+
};
125+
xhr.open("GET", url);
126+
xhr.send();
94127
});
95128
});

‎src/app/templates/app/error.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ <h1 class="text-center mb-4">Error {{ status_code }}</h1>
2020
</div>
2121
</main>
2222

23-
<script src="{% static 'js/jquery.js' %}"></script>
2423
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
2524
</body>
2625
</html>

‎src/app/templates/app/home.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,6 @@
9999
</div>
100100
</main>
101101

102-
<script src="{% static 'js/jquery.js' %}"></script>
103102
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
104103
<script src="{% static 'js/modal-load.js' %}"></script>
105104
<script src="{% static 'js/auto-tab.js' %}"></script>

‎src/app/templates/app/search.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,6 @@ <h2 class="alert-heading">No results found!</h2>
7272
{% endif %}
7373
</main>
7474

75-
<script src="{% static 'js/jquery.js' %}"></script>
7675
<script src="{% static 'js/modal-load.js' %}"></script>
7776
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
7877
<script>

0 commit comments

Comments
 (0)