mirror of
https://github.com/freeCodeCamp/devdocs
synced 2024-11-16 19:48:10 +01:00
Sanity-check decaffeinate app.views.Search
This commit is contained in:
Simon Legner
parent
cf412bd81f
commit
bbadf5f228
1 changed files with 218 additions and 257 deletions
|
|
@ -1,261 +1,222 @@
|
|||
// TODO: This file was created by bulk-decaffeinate.
|
||||
// Sanity-check the conversion and remove this comment.
|
||||
/*
|
||||
* decaffeinate suggestions:
|
||||
* DS102: Remove unnecessary code created because of implicit returns
|
||||
* DS103: Rewrite code to no longer use __guard__, or convert again using --optional-chaining
|
||||
* DS206: Consider reworking classes to avoid initClass
|
||||
* DS207: Consider shorter variations of null checks
|
||||
* Full docs: https://github.com/decaffeinate/decaffeinate/blob/main/docs/suggestions.md
|
||||
*/
|
||||
(function () {
|
||||
let SEARCH_PARAM = undefined;
|
||||
let HASH_RGX = undefined;
|
||||
app.views.Search = class Search extends app.View {
|
||||
static initClass() {
|
||||
SEARCH_PARAM = app.config.search_param;
|
||||
app.views.Search = class Search extends app.View {
|
||||
static SEARCH_PARAM = app.config.search_param;
|
||||
|
||||
this.el = "._search";
|
||||
this.activeClass = "_search-active";
|
||||
static el = "._search";
|
||||
static activeClass = "_search-active";
|
||||
|
||||
this.elements = {
|
||||
input: "._search-input",
|
||||
resetLink: "._search-clear",
|
||||
};
|
||||
|
||||
this.events = {
|
||||
input: "onInput",
|
||||
click: "onClick",
|
||||
submit: "onSubmit",
|
||||
};
|
||||
|
||||
this.shortcuts = {
|
||||
typing: "focus",
|
||||
altG: "google",
|
||||
altS: "stackoverflow",
|
||||
altD: "duckduckgo",
|
||||
};
|
||||
|
||||
this.routes = { after: "afterRoute" };
|
||||
|
||||
HASH_RGX = new RegExp(`^#${SEARCH_PARAM}=(.*)`);
|
||||
}
|
||||
|
||||
init() {
|
||||
this.addSubview((this.scope = new app.views.SearchScope(this.el)));
|
||||
|
||||
this.searcher = new app.Searcher();
|
||||
this.searcher
|
||||
.on("results", (results) => this.onResults(results))
|
||||
.on("end", () => this.onEnd());
|
||||
|
||||
this.scope.on("change", () => this.onScopeChange());
|
||||
|
||||
app.on("ready", () => this.onReady());
|
||||
$.on(window, "hashchange", () => this.searchUrl());
|
||||
$.on(window, "focus", (event) => this.onWindowFocus(event));
|
||||
}
|
||||
|
||||
focus() {
|
||||
if (document.activeElement === this.input) {
|
||||
return;
|
||||
}
|
||||
if (app.settings.get("noAutofocus")) {
|
||||
return;
|
||||
}
|
||||
this.input.focus();
|
||||
}
|
||||
|
||||
autoFocus() {
|
||||
if (app.isMobile() || $.isAndroid() || $.isIOS()) {
|
||||
return;
|
||||
}
|
||||
if (
|
||||
(document.activeElement != null
|
||||
? document.activeElement.tagName
|
||||
: undefined) === "INPUT"
|
||||
) {
|
||||
return;
|
||||
}
|
||||
if (app.settings.get("noAutofocus")) {
|
||||
return;
|
||||
}
|
||||
this.input.focus();
|
||||
}
|
||||
|
||||
onWindowFocus(event) {
|
||||
if (event.target === window) {
|
||||
return this.autoFocus();
|
||||
}
|
||||
}
|
||||
|
||||
getScopeDoc() {
|
||||
if (this.scope.isActive()) {
|
||||
return this.scope.getScope();
|
||||
}
|
||||
}
|
||||
|
||||
reset(force) {
|
||||
if (force || !this.input.value) {
|
||||
this.scope.reset();
|
||||
}
|
||||
this.el.reset();
|
||||
this.onInput();
|
||||
this.autoFocus();
|
||||
}
|
||||
|
||||
onReady() {
|
||||
this.value = "";
|
||||
this.delay(this.onInput);
|
||||
}
|
||||
|
||||
onInput() {
|
||||
if (
|
||||
this.value == null || // ignore events pre-"ready"
|
||||
this.value === this.input.value
|
||||
) {
|
||||
return;
|
||||
}
|
||||
this.value = this.input.value;
|
||||
|
||||
if (this.value.length) {
|
||||
this.search();
|
||||
} else {
|
||||
this.clear();
|
||||
}
|
||||
}
|
||||
|
||||
search(url) {
|
||||
if (url == null) {
|
||||
url = false;
|
||||
}
|
||||
this.addClass(this.constructor.activeClass);
|
||||
this.trigger("searching");
|
||||
|
||||
this.hasResults = null;
|
||||
this.flags = { urlSearch: url, initialResults: true };
|
||||
this.searcher.find(
|
||||
this.scope.getScope().entries.all(),
|
||||
"text",
|
||||
this.value,
|
||||
);
|
||||
}
|
||||
|
||||
searchUrl() {
|
||||
let value;
|
||||
if (location.pathname === "/") {
|
||||
this.scope.searchUrl();
|
||||
} else if (!app.router.isIndex()) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!(value = this.extractHashValue())) {
|
||||
return;
|
||||
}
|
||||
this.input.value = this.value = value;
|
||||
this.input.setSelectionRange(value.length, value.length);
|
||||
this.search(true);
|
||||
return true;
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.removeClass(this.constructor.activeClass);
|
||||
this.trigger("clear");
|
||||
}
|
||||
|
||||
externalSearch(url) {
|
||||
let value;
|
||||
if ((value = this.value)) {
|
||||
if (this.scope.name()) {
|
||||
value = `${this.scope.name()} ${value}`;
|
||||
}
|
||||
$.popup(`${url}${encodeURIComponent(value)}`);
|
||||
this.reset();
|
||||
}
|
||||
}
|
||||
|
||||
google() {
|
||||
this.externalSearch("https://www.google.com/search?q=");
|
||||
}
|
||||
|
||||
stackoverflow() {
|
||||
this.externalSearch("https://stackoverflow.com/search?q=");
|
||||
}
|
||||
|
||||
duckduckgo() {
|
||||
this.externalSearch("https://duckduckgo.com/?t=devdocs&q=");
|
||||
}
|
||||
|
||||
onResults(results) {
|
||||
if (results.length) {
|
||||
this.hasResults = true;
|
||||
}
|
||||
this.trigger("results", results, this.flags);
|
||||
this.flags.initialResults = false;
|
||||
}
|
||||
|
||||
onEnd() {
|
||||
if (!this.hasResults) {
|
||||
this.trigger("noresults");
|
||||
}
|
||||
}
|
||||
|
||||
onClick(event) {
|
||||
if (event.target === this.resetLink) {
|
||||
$.stopEvent(event);
|
||||
this.reset();
|
||||
}
|
||||
}
|
||||
|
||||
onSubmit(event) {
|
||||
$.stopEvent(event);
|
||||
}
|
||||
|
||||
onScopeChange() {
|
||||
this.value = "";
|
||||
this.onInput();
|
||||
}
|
||||
|
||||
afterRoute(name, context) {
|
||||
if (
|
||||
(app.shortcuts.eventInProgress != null
|
||||
? app.shortcuts.eventInProgress.name
|
||||
: undefined) === "escape"
|
||||
) {
|
||||
return;
|
||||
}
|
||||
if (!context.init && app.router.isIndex()) {
|
||||
this.reset(true);
|
||||
}
|
||||
if (context.hash) {
|
||||
this.delay(this.searchUrl);
|
||||
}
|
||||
$.requestAnimationFrame(() => this.autoFocus());
|
||||
}
|
||||
|
||||
extractHashValue() {
|
||||
let value;
|
||||
if ((value = this.getHashValue()) != null) {
|
||||
app.router.replaceHash();
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
getHashValue() {
|
||||
try {
|
||||
return __guard__(
|
||||
HASH_RGX.exec($.urlDecode(location.hash)),
|
||||
(x) => x[1],
|
||||
);
|
||||
} catch (error) {}
|
||||
}
|
||||
static elements = {
|
||||
input: "._search-input",
|
||||
resetLink: "._search-clear",
|
||||
};
|
||||
app.views.Search.initClass();
|
||||
return app.views.Search;
|
||||
})();
|
||||
|
||||
function __guard__(value, transform) {
|
||||
return typeof value !== "undefined" && value !== null
|
||||
? transform(value)
|
||||
: undefined;
|
||||
}
|
||||
static events = {
|
||||
input: "onInput",
|
||||
click: "onClick",
|
||||
submit: "onSubmit",
|
||||
};
|
||||
|
||||
static shortcuts = {
|
||||
typing: "focus",
|
||||
altG: "google",
|
||||
altS: "stackoverflow",
|
||||
altD: "duckduckgo",
|
||||
};
|
||||
|
||||
static routes = { after: "afterRoute" };
|
||||
|
||||
static HASH_RGX = new RegExp(`^#${Search.SEARCH_PARAM}=(.*)`);
|
||||
|
||||
init() {
|
||||
this.addSubview((this.scope = new app.views.SearchScope(this.el)));
|
||||
|
||||
this.searcher = new app.Searcher();
|
||||
this.searcher
|
||||
.on("results", (results) => this.onResults(results))
|
||||
.on("end", () => this.onEnd());
|
||||
|
||||
this.scope.on("change", () => this.onScopeChange());
|
||||
|
||||
app.on("ready", () => this.onReady());
|
||||
$.on(window, "hashchange", () => this.searchUrl());
|
||||
$.on(window, "focus", (event) => this.onWindowFocus(event));
|
||||
}
|
||||
|
||||
focus() {
|
||||
if (document.activeElement === this.input) {
|
||||
return;
|
||||
}
|
||||
if (app.settings.get("noAutofocus")) {
|
||||
return;
|
||||
}
|
||||
this.input.focus();
|
||||
}
|
||||
|
||||
autoFocus() {
|
||||
if (app.isMobile() || $.isAndroid() || $.isIOS()) {
|
||||
return;
|
||||
}
|
||||
if (document.activeElement?.tagName === "INPUT") {
|
||||
return;
|
||||
}
|
||||
if (app.settings.get("noAutofocus")) {
|
||||
return;
|
||||
}
|
||||
this.input.focus();
|
||||
}
|
||||
|
||||
onWindowFocus(event) {
|
||||
if (event.target === window) {
|
||||
return this.autoFocus();
|
||||
}
|
||||
}
|
||||
|
||||
getScopeDoc() {
|
||||
if (this.scope.isActive()) {
|
||||
return this.scope.getScope();
|
||||
}
|
||||
}
|
||||
|
||||
reset(force) {
|
||||
if (force || !this.input.value) {
|
||||
this.scope.reset();
|
||||
}
|
||||
this.el.reset();
|
||||
this.onInput();
|
||||
this.autoFocus();
|
||||
}
|
||||
|
||||
onReady() {
|
||||
this.value = "";
|
||||
this.delay(this.onInput);
|
||||
}
|
||||
|
||||
onInput() {
|
||||
if (
|
||||
this.value == null || // ignore events pre-"ready"
|
||||
this.value === this.input.value
|
||||
) {
|
||||
return;
|
||||
}
|
||||
this.value = this.input.value;
|
||||
|
||||
if (this.value.length) {
|
||||
this.search();
|
||||
} else {
|
||||
this.clear();
|
||||
}
|
||||
}
|
||||
|
||||
search(url) {
|
||||
if (url == null) {
|
||||
url = false;
|
||||
}
|
||||
this.addClass(this.constructor.activeClass);
|
||||
this.trigger("searching");
|
||||
|
||||
this.hasResults = null;
|
||||
this.flags = { urlSearch: url, initialResults: true };
|
||||
this.searcher.find(this.scope.getScope().entries.all(), "text", this.value);
|
||||
}
|
||||
|
||||
searchUrl() {
|
||||
let value;
|
||||
if (location.pathname === "/") {
|
||||
this.scope.searchUrl();
|
||||
} else if (!app.router.isIndex()) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!(value = this.extractHashValue())) {
|
||||
return;
|
||||
}
|
||||
this.input.value = this.value = value;
|
||||
this.input.setSelectionRange(value.length, value.length);
|
||||
this.search(true);
|
||||
return true;
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.removeClass(this.constructor.activeClass);
|
||||
this.trigger("clear");
|
||||
}
|
||||
|
||||
externalSearch(url) {
|
||||
let value;
|
||||
if ((value = this.value)) {
|
||||
if (this.scope.name()) {
|
||||
value = `${this.scope.name()} ${value}`;
|
||||
}
|
||||
$.popup(`${url}${encodeURIComponent(value)}`);
|
||||
this.reset();
|
||||
}
|
||||
}
|
||||
|
||||
google() {
|
||||
this.externalSearch("https://www.google.com/search?q=");
|
||||
}
|
||||
|
||||
stackoverflow() {
|
||||
this.externalSearch("https://stackoverflow.com/search?q=");
|
||||
}
|
||||
|
||||
duckduckgo() {
|
||||
this.externalSearch("https://duckduckgo.com/?t=devdocs&q=");
|
||||
}
|
||||
|
||||
onResults(results) {
|
||||
if (results.length) {
|
||||
this.hasResults = true;
|
||||
}
|
||||
this.trigger("results", results, this.flags);
|
||||
this.flags.initialResults = false;
|
||||
}
|
||||
|
||||
onEnd() {
|
||||
if (!this.hasResults) {
|
||||
this.trigger("noresults");
|
||||
}
|
||||
}
|
||||
|
||||
onClick(event) {
|
||||
if (event.target === this.resetLink) {
|
||||
$.stopEvent(event);
|
||||
this.reset();
|
||||
}
|
||||
}
|
||||
|
||||
onSubmit(event) {
|
||||
$.stopEvent(event);
|
||||
}
|
||||
|
||||
onScopeChange() {
|
||||
this.value = "";
|
||||
this.onInput();
|
||||
}
|
||||
|
||||
afterRoute(name, context) {
|
||||
if (app.shortcuts.eventInProgress?.name === "escape") {
|
||||
return;
|
||||
}
|
||||
if (!context.init && app.router.isIndex()) {
|
||||
this.reset(true);
|
||||
}
|
||||
if (context.hash) {
|
||||
this.delay(this.searchUrl);
|
||||
}
|
||||
$.requestAnimationFrame(() => this.autoFocus());
|
||||
}
|
||||
|
||||
extractHashValue() {
|
||||
let value = this.getHashValue();
|
||||
if (value != null) {
|
||||
app.router.replaceHash();
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
getHashValue() {
|
||||
try {
|
||||
return Search.HASH_RGX.exec($.urlDecode(location.hash))?.[1];
|
||||
} catch (error) {}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue