97 lines
3.0 KiB
TypeScript
97 lines
3.0 KiB
TypeScript
import {onReady} from "./main.ts";
|
|
import {TesoftBlogArticle} from "../components/blog-article.ts";
|
|
import {TesoftBlogArticleList} from "../components/blog-article-list.ts";
|
|
|
|
class Parameters {
|
|
readonly id: number | null;
|
|
readonly page: number | null;
|
|
readonly tags: string[];
|
|
|
|
constructor(id: number | null, page: number | null, tags: string[]) {
|
|
this.id = id;
|
|
this.page = page;
|
|
this.tags = tags;
|
|
}
|
|
|
|
constructUrl(): URL {
|
|
const url = new URL(window.location.origin + window.location.pathname);
|
|
|
|
if (this.id !== null) {
|
|
url.searchParams.set("id", this.id.toString());
|
|
}
|
|
if (this.page !== null) {
|
|
url.searchParams.set("page", this.page.toString());
|
|
}
|
|
if (this.tags.length > 0) {
|
|
url.searchParams.set("tags", this.tags.join(","));
|
|
}
|
|
|
|
return url;
|
|
}
|
|
|
|
static parse(searchParams: URLSearchParams): Parameters {
|
|
let id: number | null = null;
|
|
if (searchParams.has("id")) {
|
|
id = parseInt(searchParams.get("id")!);
|
|
}
|
|
|
|
let page: number | null = null;
|
|
if (searchParams.has("page")) {
|
|
page = parseInt(searchParams.get("page")!);
|
|
}
|
|
|
|
let tags: string[] = [];
|
|
const tagsStr = searchParams.get("tags");
|
|
if (tagsStr) {
|
|
tags = tagsStr.split(",");
|
|
}
|
|
|
|
return new Parameters(id, page, tags);
|
|
}
|
|
}
|
|
|
|
class BlogSite {
|
|
private readonly blogArticle: TesoftBlogArticle;
|
|
private readonly blogArticleList: TesoftBlogArticleList;
|
|
private parameters: Parameters;
|
|
|
|
constructor(blogArticle: TesoftBlogArticle, blogArticleList: TesoftBlogArticleList, parameters: Parameters) {
|
|
this.blogArticle = blogArticle;
|
|
this.blogArticleList = blogArticleList;
|
|
this.parameters = parameters;
|
|
}
|
|
|
|
load() {
|
|
if (this.parameters.id === null) {
|
|
this.blogArticleList.load(this.parameters.page ?? 1, this.parameters.tags, (page, tags) => {
|
|
this.parameters = new Parameters(
|
|
null,
|
|
page,
|
|
tags,
|
|
);
|
|
window.history.pushState(null, "", this.parameters.constructUrl());
|
|
});
|
|
this.blogArticleList.classList.remove("hidden");
|
|
} else {
|
|
this.blogArticle.load(this.parameters.id, (tag) => {
|
|
return new Parameters(
|
|
null,
|
|
null,
|
|
Array.from(new Set(this.parameters.tags).add(tag)),
|
|
).constructUrl().toString();
|
|
});
|
|
this.blogArticle.classList.remove("hidden");
|
|
}
|
|
}
|
|
}
|
|
|
|
onReady(async () => {
|
|
const blogSite = new BlogSite(
|
|
document.querySelector<TesoftBlogArticle>("tesoft-blog-article")!,
|
|
document.querySelector<TesoftBlogArticleList>("tesoft-blog-article-list")!,
|
|
Parameters.parse(new URLSearchParams(window.location.search)),
|
|
);
|
|
|
|
blogSite.load();
|
|
});
|