From 076b63fbae946205ac6ab5a4df90454424140b89 Mon Sep 17 00:00:00 2001 From: Nathan Date: Sat, 30 May 2026 20:26:42 -0400 Subject: [PATCH] Remove jQuery dependency from frontend Replaces all jQuery usage with vanilla JS and CSS animations to reduce page load time: - Remove jQuery and jQuery UI CDN imports from PageConfiguration - Add anim.js with vanilla fadeIn, fadeOut, fadeTo, slideDown, slideUp helpers matching original jQuery durations and easing - Replace slideDown/slideUp/fadeIn/fadeOut/fadeTo with anim.js equivalents - Replace $.param with vanilla serializeQueryData helper - Replace .ready and .on('load') with DOMContentLoaded/load events - Replace jQuery DOM queries with native querySelector/getElementById/offsetWidth - Replace jQuery scroll animations with native window.scrollTo({behavior: 'smooth'}) --- pointercrate-core-pages/src/lib.rs | 3 +- pointercrate-core-pages/static/js/misc.js | 159 +++++++++--------- .../static/js/modules/anim.js | 83 +++++++++ .../static/js/modules/form.js | 31 ++-- .../static/js/modules/localization.js | 2 +- pointercrate-core-pages/static/js/nav.js | 2 +- pointercrate-core-pages/static/js/ui.js | 129 +++++++------- .../static/js/account/records.js | 6 +- .../static/js/demonlist.js | 2 +- .../static/js/modules/statsviewer.js | 3 +- .../static/js/statsviewer/individual.js | 2 +- .../static/js/statsviewer/nation.js | 2 +- pointercrate-user-pages/src/account/mod.rs | 2 +- .../static/js/account/profile.js | 4 +- pointercrate-user-pages/static/js/login.js | 2 +- pointercrate-user-pages/static/js/register.js | 2 +- 16 files changed, 266 insertions(+), 168 deletions(-) create mode 100644 pointercrate-core-pages/static/js/modules/anim.js diff --git a/pointercrate-core-pages/src/lib.rs b/pointercrate-core-pages/src/lib.rs index dcee0d8c9..c87c44819 100644 --- a/pointercrate-core-pages/src/lib.rs +++ b/pointercrate-core-pages/src/lib.rs @@ -38,8 +38,7 @@ impl PageConfiguration { .meta("og:type", "website") .meta("referrer", "strict-origin-when-cross-origin") .meta("viewport", "initial-scale=1, maximum-scale=1") - .script("https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js") - .script("https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js") + .script("/static/core/js/modules/anim.js") .script("/static/core/js/ui.js") .script("/static/core/js/nav.js") .script("/static/core/js/misc.js") diff --git a/pointercrate-core-pages/static/js/misc.js b/pointercrate-core-pages/static/js/misc.js index 6fa6bf145..6012ec7c2 100644 --- a/pointercrate-core-pages/static/js/misc.js +++ b/pointercrate-core-pages/static/js/misc.js @@ -1,47 +1,48 @@ function forceRatio(element, wRatio, hRatio) { - var target = $(element); - var width = target.width(); + var width = element.offsetWidth; var calculatedHeight = (width * hRatio) / wRatio; - if (Math.abs(target.height() - calculatedHeight) > 20) { - target.height((target.width() * hRatio) / wRatio); + if (Math.abs(element.offsetHeight - calculatedHeight) > 20) { + element.style.height = ((element.offsetWidth * hRatio) / wRatio) + "px"; } } -$(window).on("load resize", function () { +function initMisc() { // back to top things - var scrollers = $(".js-scroll"); - var scrollTarget = $("html, body"); + var scrollers = document.querySelectorAll(".js-scroll"); - scrollers.each((i, elem) => { - var src = $(elem); + scrollers.forEach(function (elem) { + if (elem.dataset.miscBound) return; + elem.dataset.miscBound = "true"; - src.click(() => { - var dest = src.data("destination"); - var destination = $("#" + dest); + elem.addEventListener("click", function () { + var dest = elem.dataset.destination; + var destination = dest ? document.getElementById(dest) : null; - if (src.data("reveal")) destination.fadeIn(1000); + if (elem.dataset.reveal && destination) fadeIn(destination, 1000); - if (dest !== undefined) - scrollTarget.animate({ scrollTop: destination.offset().top - 60 }, 400); - else scrollTarget.animate({ scrollTop: 0 }, 400); + if (destination) { + var destinationTop = destination.getBoundingClientRect().top + window.scrollY; + window.scrollTo({ top: destinationTop - 60, behavior: "smooth" }); + } else { + window.scrollTo({ top: 0, behavior: "smooth" }); + } }); }); - // sometimes animating scrolltop causes things to get stuck. This fixes it. - - $(window).bind("mousewheel touchmove touchstart", function () { - $("html, body").stop(); - }); - // Closable panels - for (let x of document.querySelectorAll(".plus.cross")) { - let parent = x.parentNode; + for (var x of document.querySelectorAll(".plus.cross")) { + if (x.dataset.closableBound) continue; + x.dataset.closableBound = "true"; + + var parent = x.parentNode; while (parent !== null && parent.classList !== null) { if (parent.classList.contains("closable")) { - x.addEventListener("click", () => $(parent).fadeOut(1000)); + x.addEventListener("click", function () { + fadeOut(parent, 1000); + }); break; } parent = parent.parentNode; @@ -49,14 +50,12 @@ $(window).on("load resize", function () { } // Animation stuff when scrolling - var toAnimate = $(".js-scroll-anim"); - var wnd = $(window); - - wnd.on("scroll resize", checkAnimations); - toAnimate.each((i, elem) => { - var obj = $(elem); + var toAnimate = document.querySelectorAll(".js-scroll-anim"); - if (obj.data("js-shown") !== undefined) return; + window.addEventListener("scroll", checkAnimations); + window.addEventListener("resize", checkAnimations); + toAnimate.forEach(function (elem) { + if (elem.dataset.jsShown !== undefined) return; var observer = new MutationObserver(checkAnimations); var conf = { @@ -68,55 +67,60 @@ $(window).on("load resize", function () { }; observer.observe(elem.parentElement, conf); - obj.data("js-shown", true); + elem.dataset.jsShown = "true"; }); checkAnimations(); function checkAnimations() { - var viewportBottom = wnd.scrollTop() + wnd.innerHeight(); + var viewportBottom = window.scrollY + window.innerHeight; - toAnimate.each((i, elem) => { - var obj = $(elem); - var objBottom = obj.offset().top; + toAnimate.forEach(function (elem) { + var objBottom = elem.offsetTop; - if (objBottom <= viewportBottom && !obj.data("js-shown")) { - switch (obj.data("anim")) { + if (objBottom <= viewportBottom && elem.dataset.jsShown !== "true") { + switch (elem.dataset.anim) { default: case "fade": - obj.stop().fadeTo(500, 1); + stopAnimation(elem); + fadeTo(elem, 500, 1); break; } - obj.data("js-shown", true); - } else if (objBottom > viewportBottom && obj.data("js-shown")) { - switch (obj.data("anim")) { + elem.dataset.jsShown = "true"; + } else if (objBottom > viewportBottom && elem.dataset.jsShown === "true") { + switch (elem.dataset.anim) { default: case "fade": - obj.stop().fadeTo(500, 0); + stopAnimation(elem); + fadeTo(elem, 500, 0); break; } - obj.data("js-shown", false); + elem.dataset.jsShown = "false"; } }); } - $(".js-collapse").each(function (i, elem) { - var collapse = $(elem); - var content = collapse.find(".js-collapse-content"); - var arrow = collapse.find(".arrow"); - - arrow.parent().click(function () { - if (!collapse.hasClass("js-sliding")) { - collapse.addClass("js-sliding"); - if (collapse.hasClass("active")) { - content.slideUp(250, () => { - collapse.removeClass("active"); - collapse.removeClass("js-sliding"); + document.querySelectorAll(".js-collapse").forEach(function (elem) { + if (elem.dataset.collapseBound) return; + elem.dataset.collapseBound = "true"; + + var content = elem.querySelector(".js-collapse-content"); + var arrow = elem.querySelector(".arrow"); + + if (!arrow || !arrow.parentElement) return; + + arrow.parentElement.addEventListener("click", function () { + if (!elem.classList.contains("js-sliding")) { + elem.classList.add("js-sliding"); + if (elem.classList.contains("active")) { + slideUp(content, 250, function () { + elem.classList.remove("active"); + elem.classList.remove("js-sliding"); }); } else { - content.slideDown(250, () => { - collapse.addClass("active"); - collapse.removeClass("js-sliding"); + slideDown(content, 250, function () { + elem.classList.add("active"); + elem.classList.remove("js-sliding"); }); } } @@ -125,28 +129,29 @@ $(window).on("load resize", function () { // ratio things - $(".ratio-16-9").each(function () { - forceRatio(this, 16, 9); - if (this.tagName == "IFRAME") this.onload = () => forceRatio(this, 16, 9); + document.querySelectorAll(".ratio-16-9").forEach(function (elem) { + forceRatio(elem, 16, 9); + if (elem.tagName === "IFRAME") elem.onload = function () { forceRatio(elem, 16, 9); }; }); - $(".ratio-4-3").each(function () { - forceRatio(this, 4, 3); - if (this.tagName == "IFRAME") this.onload = () => forceRatio(this, 4, 3); + document.querySelectorAll(".ratio-4-3").forEach(function (elem) { + forceRatio(elem, 4, 3); + if (elem.tagName === "IFRAME") elem.onload = function () { forceRatio(elem, 4, 3); }; }); - $(".js-delay-css").each((i, elem) => { - var elem = $(elem); - var attr = elem.data("property"); - var value = elem.data("property-value"); + document.querySelectorAll(".js-delay-css").forEach(function (elem) { + var attr = elem.dataset.property; + var value = elem.dataset.propertyValue; - if (elem.css(attr) != value) elem.css(attr, value); + if (getComputedStyle(elem).getPropertyValue(attr) != value) elem.style.setProperty(attr, value); }); - $(".js-delay-attr").each((i, elem) => { - var elem = $(elem); - var attr = elem.data("attr"); - var value = elem.data("attr-value"); + document.querySelectorAll(".js-delay-attr").forEach(function (elem) { + var attr = elem.dataset.attr; + var value = elem.dataset.attrValue; - if (elem.attr(attr) != value) elem.attr(attr, value); + if (elem.getAttribute(attr) != value) elem.setAttribute(attr, value); }); -}); +} + +window.addEventListener("load", initMisc); +window.addEventListener("resize", initMisc); diff --git a/pointercrate-core-pages/static/js/modules/anim.js b/pointercrate-core-pages/static/js/modules/anim.js new file mode 100644 index 000000000..de050ad17 --- /dev/null +++ b/pointercrate-core-pages/static/js/modules/anim.js @@ -0,0 +1,83 @@ +// quick replacements for jquery fade/slide animations + +function fadeIn(element, duration, callback) { + if (!element) return; + var computed = getComputedStyle(element); + if (computed.display === "none") { + element.style.opacity = "0"; + element.style.display = "block"; + } + element.offsetHeight; + element.style.transition = "opacity " + duration + "ms ease"; + element.style.opacity = "1"; + if (callback) setTimeout(callback, duration); +} + +function fadeOut(element, duration, callback) { + if (!element) return; + var computed = getComputedStyle(element); + if (computed.display === "none") { + if (callback) callback(); + return; + } + element.style.transition = "opacity " + duration + "ms ease"; + element.style.opacity = "0"; + setTimeout(function () { + element.style.display = "none"; + if (callback) callback(); + }, duration); +} + +function fadeTo(element, duration, opacity, callback) { + if (!element) return; + var computed = getComputedStyle(element); + if (computed.display === "none" && opacity > 0) { + element.style.opacity = "0"; + element.style.display = "block"; + } + element.offsetHeight; + element.style.transition = "opacity " + duration + "ms ease"; + element.style.opacity = opacity.toString(); + if (callback) setTimeout(callback, duration); +} + +function slideDown(element, duration, callback) { + if (!element) return; + var computed = getComputedStyle(element); + if (computed.display === "none") { + element.style.maxHeight = "0"; + element.style.overflow = "hidden"; + element.style.display = "block"; + } + var targetHeight = element.scrollHeight + "px"; + element.offsetHeight; + element.style.transition = "max-height " + duration + "ms cubic-bezier(0.45, 0.05, 0.55, 0.95)"; + element.style.maxHeight = targetHeight; + if (callback) setTimeout(callback, duration); +} + +function slideUp(element, duration, callback) { + if (!element) return; + var computed = getComputedStyle(element); + if (computed.display === "none") { + if (callback) callback(); + return; + } + element.style.transition = "max-height " + duration + "ms cubic-bezier(0.45, 0.05, 0.55, 0.95)"; + element.style.maxHeight = "0"; + element.style.overflow = "hidden"; + setTimeout(function () { + element.style.display = "none"; + if (callback) callback(); + }, duration); +} + +function stopAnimation(element) { + if (!element) return; + var style = getComputedStyle(element); + var opacity = style.opacity; + var maxHeight = style.maxHeight; + element.style.transition = ""; + element.style.opacity = opacity; + element.style.maxHeight = maxHeight; +} diff --git a/pointercrate-core-pages/static/js/modules/form.js b/pointercrate-core-pages/static/js/modules/form.js index 3504e7d3e..7a4c3f63b 100644 --- a/pointercrate-core-pages/static/js/modules/form.js +++ b/pointercrate-core-pages/static/js/modules/form.js @@ -25,7 +25,7 @@ export class Dropdown { this.input = this.html.getElementsByTagName("input")[0]; if (this.input.dataset.default === undefined && !this.input.placeholder) this.input.placeholder = tr("core", "ui", "dropdown-placeholder"); - this.menu = $(this.html.getElementsByClassName("menu")[0]); // we need jquery for the animations + this.menu = this.html.getElementsByClassName("menu")[0]; this.ul = this.html.getElementsByTagName("ul")[0]; this.listeners = []; @@ -58,12 +58,12 @@ export class Dropdown { this.input.addEventListener("focus", () => { this.onFocus(); - this.menu.fadeTo(300, 0.95); + fadeTo(this.menu, 300, 0.95); }); this.input.addEventListener("focusout", () => { this.onUnfocus(); - this.menu.fadeOut(300); + fadeOut(this.menu, 300); }); } @@ -343,7 +343,7 @@ export class Dialog { open() { if (this.reject !== undefined) throw new Error("Dialog is already open"); - $(this.dialog.parentNode).fadeIn(300); + fadeIn(this.dialog.parentNode, 300); return new Promise((resolve, reject) => { this.reject = reject; @@ -357,7 +357,7 @@ export class Dialog { * Note that no callbacks are actually called, since its impossible for this method to know whether or not the close happened because of successful reasons or not (or what data should be passed along in the success case). */ close() { - $(this.dialog.parentNode).fadeOut(300); + fadeOut(this.dialog.parentNode, 300); this.reject = undefined; this.resolve = undefined; @@ -459,7 +459,7 @@ export class Paginator extends Output { this.retrievalEndpoint = this.endpoint; // The link for the request that was made to display the current data (required for refreshing) - this.currentLink = this.endpoint + "?" + $.param(queryData); + this.currentLink = this.endpoint + "?" + serializeQueryData(queryData); // The query data for the first request. Pagination may only update the 'before' and 'after' parameter, // meaning everything else will always stay the same. // Storing this means we won't have to parse the query data of the links from the 'Links' header, and allows @@ -589,7 +589,7 @@ export class Paginator extends Output { else this.queryData[key] = value; } - this.currentLink = this.endpoint + "?" + $.param(this.queryData); + this.currentLink = this.endpoint + "?" + serializeQueryData(this.queryData); this.refresh(); } @@ -601,7 +601,7 @@ export class Paginator extends Output { */ setQueryData(queryData) { this.queryData = queryData; - this.currentLink = this.endpoint + "?" + $.param(queryData); + this.currentLink = this.endpoint + "?" + serializeQueryData(queryData); this.refresh(); } @@ -664,6 +664,13 @@ export function findParentWithClass(element, clz) { } } +export function serializeQueryData(data) { + return Object.entries(data) + .filter(([_, v]) => v !== undefined) + .map(([k, v]) => encodeURIComponent(k) + "=" + encodeURIComponent(v)) + .join("&"); +} + export class Viewer extends Output { constructor(elementId, paginator) { super(elementId); @@ -678,14 +685,14 @@ export class Viewer extends Output { this.setError(null); this.setSuccess(null); - $(this._content).fadeIn(100); - $(this._welcome).fadeOut(100); + fadeIn(this._content, 100); + fadeOut(this._welcome, 100); }); } hideContent() { - $(this._welcome).fadeIn(100); - $(this._content).fadeOut(100); + fadeIn(this._welcome, 100); + fadeOut(this._content, 100); } } diff --git a/pointercrate-core-pages/static/js/modules/localization.js b/pointercrate-core-pages/static/js/modules/localization.js index 6172caf5a..fc2d0a7ac 100644 --- a/pointercrate-core-pages/static/js/modules/localization.js +++ b/pointercrate-core-pages/static/js/modules/localization.js @@ -77,7 +77,7 @@ export function trp(category, resource, text_id, args) { return window.fluentBundle.formatPattern(pattern, args); } -$(window).on("load", function () { +window.addEventListener("load", function () { let languageSelectorGroup = document.getElementById("language-selector"); if (languageSelectorGroup) { diff --git a/pointercrate-core-pages/static/js/nav.js b/pointercrate-core-pages/static/js/nav.js index 395b5635b..38090a172 100644 --- a/pointercrate-core-pages/static/js/nav.js +++ b/pointercrate-core-pages/static/js/nav.js @@ -10,7 +10,7 @@ class NavigationBar { } } -$(document).ready(function () { +document.addEventListener("DOMContentLoaded", function () { for (let navbar of document.querySelectorAll("header nav.collapse")) new NavigationBar(navbar); }); diff --git a/pointercrate-core-pages/static/js/ui.js b/pointercrate-core-pages/static/js/ui.js index aeb9a9e6a..cbb5f5ccc 100644 --- a/pointercrate-core-pages/static/js/ui.js +++ b/pointercrate-core-pages/static/js/ui.js @@ -6,22 +6,16 @@ class DropDown { show(complete) { this.shown = true; - this.dropdown.stop().slideDown({ - duration: 200, - easing: "easeInOutQuad", - complete: complete, - }); + stopAnimation(this.dropdown); + slideDown(this.dropdown, 200, complete); - DropDown.currentlyShown = this.dropdown[0].id; + DropDown.currentlyShown = this.dropdown.id; } hide(complete) { this.shown = false; - this.dropdown.stop().slideUp({ - duration: 200, - easing: "easeInOutQuad", - complete: complete, - }); + stopAnimation(this.dropdown); + slideUp(this.dropdown, 200, complete); DropDown.currentlyShown = undefined; } @@ -30,9 +24,9 @@ class DropDown { var toShow = DropDown.getDropDown(id); if (DropDown.currentlyShown !== undefined) { - DropDown.hideDropDown(DropDown.currentlyShown, () => - toShow.show(complete) - ); + DropDown.hideDropDown(DropDown.currentlyShown, function () { + toShow.show(complete); + }); } else { toShow.show(complete); } @@ -59,17 +53,17 @@ DropDown.allDropDowns = {}; class Search { constructor(search) { - this.search = $(search); - this.input = $(search.getElementsByTagName("input")[0]); - this.searchDepth = this.search.data("search-depth"); + this.search = search; + this.input = search.getElementsByTagName("input")[0]; + this.searchDepth = search.dataset.searchDepth; if (typeof this.searchDepth === "undefined") { - this.container = this.search.parent(); + this.container = this.search.parentElement; } else { var src = this.search; for (var i = 0; i < this.searchDepth; ++i) { - src = src.parent(); + src = src.parentElement; } this.container = src; @@ -77,70 +71,80 @@ class Search { this.registerHandlers(); - if (this.input.val()) { - this.updateResults(this.input.val().toLowerCase()); + if (this.input.value) { + this.updateResults(this.input.value.toLowerCase()); } } updateResults(searchString) { var queries = searchString.split(";"); - this.container.find("ul").each((i, l) => $(l).hide()); + for (var ul of this.container.getElementsByTagName("ul")) { + ul.style.display = "none"; + } - this.container.find("li").each((index, element) => { - element = $(element); - var content = element.text().toLowerCase(); - if (queries.some((q) => content.includes(q))) { - element.show(); + for (var li of this.container.getElementsByTagName("li")) { + var content = li.innerText.toLowerCase(); + if (queries.some(function (q) { return content.includes(q); })) { + li.style.display = ""; } else { - element.hide(); + li.style.display = "none"; } - }); + } - this.container.find("ul").each((i, l) => $(l).show()); + for (var ul of this.container.getElementsByTagName("ul")) { + ul.style.display = ""; + } } registerHandlers() { - this.input.on("keydown change input paste", () => { - this.updateResults(this.input.val().toLowerCase()); - }); - - this.search.click((event) => { - if ($(event.target).is(this.search)) { - let xOff = event.pageX - this.search.offset().left; - - if (xOff > this.input.width()) { - this.input.val(""); - this.input[0].dispatchEvent(new Event("change")); + var update = function () { + this.updateResults(this.input.value.toLowerCase()); + }.bind(this); + + this.input.addEventListener("keydown", update); + this.input.addEventListener("change", update); + this.input.addEventListener("input", update); + this.input.addEventListener("paste", update); + + this.search.addEventListener("click", function (event) { + if (event.target === this.search) { + var xOff = event.pageX - this.search.getBoundingClientRect().left; + + if (xOff > this.input.offsetWidth) { + this.input.value = ""; + this.input.dispatchEvent(new Event("change")); } } - }); + }.bind(this)); } } Search.allSearchBars = []; -$(document).ready(function () { +document.addEventListener("DOMContentLoaded", function () { // register dropdowns - $(".dropdown").each((i, elem) => { - DropDown.allDropDowns[elem.id] = new DropDown($(elem)); - }); + for (var elem of document.querySelectorAll(".dropdown")) { + DropDown.allDropDowns[elem.id] = new DropDown(elem); + } // register search elements - $(".js-search").each((index, element) => { + for (var element of document.querySelectorAll(".js-search")) { Search.allSearchBars.push(new Search(element)); - }); + } // close all dropdowns if clicked outside of dropdown - $(document).click(() => { - if (!$(event.target).parents("#lists").length) { + document.addEventListener("click", function (event) { + if (!event.target.closest("#lists")) { if (DropDown.currentlyShown) { // don't try to hide undefined DropDown.hideDropDown(DropDown.currentlyShown); // remove active class to remove highlight - $(".js-toggle.active").removeClass("active"); + for (var elem of document.querySelectorAll(".js-toggle.active")) { + elem.classList.remove("active"); + } } } }); @@ -149,26 +153,25 @@ $(document).ready(function () { var toggleGroups = {}; - $(".js-toggle").each((i, elem) => { - var obj = $(elem); - var group = obj.data("toggle-group"); + for (var elem of document.querySelectorAll(".js-toggle")) { + var group = elem.dataset.toggleGroup; if (group !== undefined) { if (toggleGroups[group] === undefined) { - toggleGroups[group] = [obj]; + toggleGroups[group] = [elem]; } else { - toggleGroups[group].push(obj); + toggleGroups[group].push(elem); } } - obj.click(() => { - if (obj.hasClass("active")) { - obj.removeClass("active"); + elem.addEventListener("click", function () { + if (this.classList.contains("active")) { + this.classList.remove("active"); } else { - for (var other of toggleGroups[group]) other.removeClass("active"); + for (var other of toggleGroups[group]) other.classList.remove("active"); - obj.addClass("active"); + this.classList.add("active"); } - }); - }); + }.bind(elem)); + } }); diff --git a/pointercrate-demonlist-pages/static/js/account/records.js b/pointercrate-demonlist-pages/static/js/account/records.js index 4bb8aca8f..041a45ca6 100644 --- a/pointercrate-demonlist-pages/static/js/account/records.js +++ b/pointercrate-demonlist-pages/static/js/account/records.js @@ -239,7 +239,7 @@ class RecordManager extends Paginator { this._notes.appendChild(createNoteHtml(note)); } - $(this._notes.parentElement).show(300); // TODO: maybe via CSS transform? + fadeIn(this._notes.parentElement, 300); } ); } @@ -350,7 +350,7 @@ function setupAddNote() { let newNote = createNoteHtml(noteResponse.data.data); recordManager._notes.appendChild(newNote); - $(adder).hide(100); + fadeOut(adder, 100); textArea.value = ""; }) .catch(displayError(output)); @@ -359,7 +359,7 @@ function setupAddNote() { document .getElementById("add-record-note-open") .addEventListener("click", () => { - $(adder).show(300); + fadeIn(adder, 300); }); } diff --git a/pointercrate-demonlist-pages/static/js/demonlist.js b/pointercrate-demonlist-pages/static/js/demonlist.js index dd79254ab..cdc292494 100644 --- a/pointercrate-demonlist-pages/static/js/demonlist.js +++ b/pointercrate-demonlist-pages/static/js/demonlist.js @@ -5,7 +5,7 @@ import { import { get } from "/static/core/js/modules/form.js"; import { tr, trp } from "/static/core/js/modules/localization.js"; -$(window).on("load", function () { +window.addEventListener("load", function () { if (window.demon_id) { initializePositionChart(); initializeHistoryTable(); diff --git a/pointercrate-demonlist-pages/static/js/modules/statsviewer.js b/pointercrate-demonlist-pages/static/js/modules/statsviewer.js index b080d05c0..d0fa8c748 100644 --- a/pointercrate-demonlist-pages/static/js/modules/statsviewer.js +++ b/pointercrate-demonlist-pages/static/js/modules/statsviewer.js @@ -8,6 +8,7 @@ import { FilteredPaginator, findParentWithClass, get, + serializeQueryData, Viewer, } from "/static/core/js/modules/form.js"; import { tr, trp } from "/static/core/js/modules/localization.js"; @@ -29,7 +30,7 @@ export class StatsViewer extends FilteredPaginator { this.endpoint = statsviewerdata.rankingEndpoint; // different from pagination endpoint here! this.retrievalEndpoint = statsviewerdata.retrievalEndpoint; - this.currentLink = this.endpoint + "?" + $.param(this.queryData); + this.currentLink = this.endpoint + "?" + serializeQueryData(this.queryData); this.html = html; this.output = new Viewer( diff --git a/pointercrate-demonlist-pages/static/js/statsviewer/individual.js b/pointercrate-demonlist-pages/static/js/statsviewer/individual.js index 51a5da4e5..d3c0587ff 100644 --- a/pointercrate-demonlist-pages/static/js/statsviewer/individual.js +++ b/pointercrate-demonlist-pages/static/js/statsviewer/individual.js @@ -159,7 +159,7 @@ class IndividualStatsViewer extends StatsViewer { } } -$(window).on("load", function () { +window.addEventListener("load", function () { window.map = new InteractiveWorldMap(); map.showSubdivisions(); diff --git a/pointercrate-demonlist-pages/static/js/statsviewer/nation.js b/pointercrate-demonlist-pages/static/js/statsviewer/nation.js index b1e190bf8..8f74f1cab 100644 --- a/pointercrate-demonlist-pages/static/js/statsviewer/nation.js +++ b/pointercrate-demonlist-pages/static/js/statsviewer/nation.js @@ -304,7 +304,7 @@ class NationStatsViewer extends StatsViewer { } } -$(window).on("load", function () { +window.addEventListener("load", function () { let map = new InteractiveWorldMap(); window.statsViewer = new NationStatsViewer( diff --git a/pointercrate-user-pages/src/account/mod.rs b/pointercrate-user-pages/src/account/mod.rs index ba5854215..4e94ec7a8 100644 --- a/pointercrate-user-pages/src/account/mod.rs +++ b/pointercrate-user-pages/src/account/mod.rs @@ -152,7 +152,7 @@ if (!initialized{0}) {{ {} {} -$(document).ready(function () {{ +document.addEventListener("DOMContentLoaded", function () {{ let accountTabber = new TabbedPane( document.getElementById("account-tabber"), "account-tab-selection" diff --git a/pointercrate-user-pages/static/js/account/profile.js b/pointercrate-user-pages/static/js/account/profile.js index 7fa7ecd11..960869231 100644 --- a/pointercrate-user-pages/static/js/account/profile.js +++ b/pointercrate-user-pages/static/js/account/profile.js @@ -150,8 +150,8 @@ function setupEditAccount() { var deleteAccountForm = new Form( deleteAccountDialog.getElementsByTagName("form")[0] ); - document.getElementById("delete-account").addEventListener("click", () => { - $(deleteAccountDialog.parentElement).show(); + document.getElementById("delete-account").addEventListener("click", function () { + fadeIn(deleteAccountDialog.parentElement, 300); }); deleteAccountForm.onSubmit(() => { diff --git a/pointercrate-user-pages/static/js/login.js b/pointercrate-user-pages/static/js/login.js index 5da841c2b..1c73ead84 100644 --- a/pointercrate-user-pages/static/js/login.js +++ b/pointercrate-user-pages/static/js/login.js @@ -67,6 +67,6 @@ function googleOauthCallback(response) { window.googleOauthCallback = googleOauthCallback; -$(window).on("load", function () { +window.addEventListener("load", function () { initializeLoginForm(); }); diff --git a/pointercrate-user-pages/static/js/register.js b/pointercrate-user-pages/static/js/register.js index 7c6e2c1c3..15e15c276 100644 --- a/pointercrate-user-pages/static/js/register.js +++ b/pointercrate-user-pages/static/js/register.js @@ -80,6 +80,6 @@ function googleOauthRegisterCallback(response) { window.googleOauthRegisterCallback = googleOauthRegisterCallback; -$(document).ready(function () { +document.addEventListener("DOMContentLoaded", function () { intializeRegisterForm(); });