DEV: Remove JQuery from `lib/keyboard-shortcuts.js` (#18056)

This commit is contained in:
David Taylor 2022-08-24 10:22:51 +01:00 committed by GitHub
parent b175513765
commit 52f9370bd6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 67 additions and 61 deletions

View File

@ -313,7 +313,10 @@ export default {
this.sendToSelectedPost("replyToPost"); this.sendToSelectedPost("replyToPost");
// lazy but should work for now // lazy but should work for now
discourseLater(() => $(".d-editor .quote").click(), 500); discourseLater(
() => document.querySelector(".d-editor .quote")?.click(),
500
);
return false; return false;
}, },
@ -346,9 +349,9 @@ export default {
}, },
goToFirstSuggestedTopic() { goToFirstSuggestedTopic() {
const $el = $(".suggested-topics a.raw-topic-link:first"); const el = document.querySelector(".suggested-topics a.raw-topic-link");
if ($el.length) { if (el) {
$el.click(); el.click();
} else { } else {
const controller = this.container.lookup("controller:topic"); const controller = this.container.lookup("controller:topic");
// Only the last page contains list of suggested topics. // Only the last page contains list of suggested topics.
@ -378,7 +381,7 @@ export default {
}, },
_jumpTo(direction) { _jumpTo(direction) {
if ($(".container.posts").length) { if (document.querySelector(".container.posts")) {
this.container.lookup("controller:topic").send(direction); this.container.lookup("controller:topic").send(direction);
} }
}, },
@ -420,7 +423,7 @@ export default {
printTopic(event) { printTopic(event) {
run(() => { run(() => {
if ($(".container.posts").length) { if (document.querySelector(".container.posts")) {
event.preventDefault(); // We need to stop printing the current page in Firefox event.preventDefault(); // We need to stop printing the current page in Firefox
this.container.lookup("controller:topic").print(); this.container.lookup("controller:topic").print();
} }
@ -435,9 +438,9 @@ export default {
event.preventDefault(); event.preventDefault();
// If the page has a create-topic button, use it for context sensitive attributes like category // If the page has a create-topic button, use it for context sensitive attributes like category
let $createTopicButton = $("#create-topic"); const createTopicButton = document.querySelector("#create-topic");
if ($createTopicButton.length) { if (createTopicButton) {
$createTopicButton.click(); createTopicButton.click();
return; return;
} }
@ -635,48 +638,47 @@ export default {
this._lastMoveTime && now - this._lastMoveTime < 1.5 * animationDuration; this._lastMoveTime && now - this._lastMoveTime < 1.5 * animationDuration;
this._lastMoveTime = now; this._lastMoveTime = now;
const $articles = this._findArticles(); let articles = this._findArticles();
if ($articles === undefined) { if (articles === undefined) {
return; return;
} }
articles = Array.from(articles);
let $selected = $articles.filter(".selected"); let selected = articles.find((element) =>
if ($selected.length === 0) { element.classList.contains("selected")
$selected = $articles.filter("[data-islastviewedtopic=true]"); );
if (!selected) {
selected = articles.find(
(element) => element.dataset.islastviewedtopic === "true"
);
} }
// Discard selection if it is not in viewport, so users can combine // Discard selection if it is not in viewport, so users can combine
// keyboard shortcuts with mouse scrolling. // keyboard shortcuts with mouse scrolling.
if ($selected.length !== 0 && !fast) { if (selected && !fast) {
const offset = headerOffset(); const rect = selected.getBoundingClientRect();
const beginScreen = $(window).scrollTop() - offset; if (rect.bottom < headerOffset() || rect.top > window.innerHeight) {
const endScreen = beginScreen + window.innerHeight + offset; selected = null;
const beginArticle = $selected.offset().top;
const endArticle = $selected.offset().top + $selected.height();
if (beginScreen > endArticle || beginArticle > endScreen) {
$selected = null;
} }
} }
// If still nothing is selected, select the first post that is // If still nothing is selected, select the first post that is
// visible and cancel move operation. // visible and cancel move operation.
if (!$selected || $selected.length === 0) { if (!selected) {
const offset = headerOffset(); const offset = headerOffset();
$selected = $articles selected = articles.find((article) =>
.toArray() direction > 0
.find((article) => ? article.getBoundingClientRect().top >= offset
direction > 0 : article.getBoundingClientRect().bottom >= offset
? article.getBoundingClientRect().top >= offset );
: article.getBoundingClientRect().bottom >= offset if (!selected) {
); selected = articles[articles.length - 1];
if (!$selected) {
$selected = $articles[$articles.length - 1];
} }
direction = 0; direction = 0;
} }
const index = $articles.index($selected); const index = articles.indexOf(selected);
let article = $articles.eq(index)[0]; let article = selected;
// Try doing a page scroll in the context of current post. // Try doing a page scroll in the context of current post.
if (!fast && direction !== 0 && article) { if (!fast && direction !== 0 && article) {
@ -709,25 +711,27 @@ export default {
} }
// Try scrolling to post above or below. // Try scrolling to post above or below.
if ($selected.length !== 0) { if (!selected) {
if (direction === -1 && index === 0) { if (direction === -1 && index === 0) {
return; return;
} }
if (direction === 1 && index === $articles.length - 1) { if (direction === 1 && index === articles.length - 1) {
return; return;
} }
} }
article = $articles.eq(index + direction)[0]; article = articles[index + direction];
if (!article) { if (!article) {
return; return;
} }
$articles.removeClass("selected"); for (const a of articles) {
a.classList.remove("selected");
}
article.classList.add("selected"); article.classList.add("selected");
this.appEvents.trigger("keyboard:move-selection", { this.appEvents.trigger("keyboard:move-selection", {
articles: $articles.get(), articles,
selectedArticle: article, selectedArticle: article,
}); });
@ -783,41 +787,43 @@ export default {
categoriesTopicsList() { categoriesTopicsList() {
switch (this.siteSettings.desktop_category_page_style) { switch (this.siteSettings.desktop_category_page_style) {
case "categories_with_featured_topics": case "categories_with_featured_topics":
return $(".latest .featured-topic"); return document.querySelectorAll(".latest .featured-topic");
case "categories_and_latest_topics": case "categories_and_latest_topics":
case "categories_and_latest_topics_created_date": case "categories_and_latest_topics_created_date":
return $(".latest-topic-list .latest-topic-list-item"); return document.querySelectorAll(
".latest-topic-list .latest-topic-list-item"
);
case "categories_and_top_topics": case "categories_and_top_topics":
return $(".top-topic-list .latest-topic-list-item"); return document.querySelectorAll(
".top-topic-list .latest-topic-list-item"
);
default: default:
return $(); return [];
} }
}, },
_findArticles() { _findArticles() {
const $topicList = $(".topic-list"); let categoriesTopicsList;
const $postsWrapper = $(".posts-wrapper"); if (document.querySelector(".posts-wrapper")) {
const $categoriesTopicsList = this.categoriesTopicsList(); return document.querySelectorAll(
const $searchResults = $(".search-results"); ".posts-wrapper .topic-post, .topic-list tbody tr"
);
if ($postsWrapper.length > 0) { } else if (document.querySelector(".topic-list")) {
return $(".posts-wrapper .topic-post, .topic-list tbody tr"); return document.querySelectorAll(".topic-list .topic-list-item");
} else if ($topicList.length > 0) { } else if ((categoriesTopicsList = this.categoriesTopicsList())) {
return $topicList.find(".topic-list-item"); return categoriesTopicsList;
} else if ($categoriesTopicsList.length > 0) { } else if (document.querySelector(".search-results")) {
return $categoriesTopicsList; return document.querySelectorAll(".search-results .fps-result");
} else if ($searchResults.length > 0) {
return $searchResults.find(".fps-result");
} }
}, },
_changeSection(direction) { _changeSection(direction) {
const $sections = $(".nav.nav-pills li"), const sections = Array.from(document.querySelectorAll(".nav.nav-pills li"));
active = $(".nav.nav-pills li.active"), const active = document.querySelector(".nav.nav-pills li.active");
index = $sections.index(active) + direction; const index = sections.indexOf(active) + direction;
if (index >= 0 && index < $sections.length) { if (index >= 0 && index < sections.length) {
$sections.eq(index).find("a").click(); sections[index].querySelector("a")?.click();
} }
}, },