convert tags.js to ts

This commit is contained in:
Luna D. 2024-06-10 23:20:44 +02:00
parent 90b4ee8915
commit 13735e7d4e
No known key found for this signature in database
GPG key ID: 4B1C63448394F688
3 changed files with 26 additions and 17 deletions

View file

@ -1,7 +1,7 @@
import { $ } from './utils/dom'; import { $ } from './utils/dom';
import { inputDuplicatorCreator } from './input-duplicator'; import { inputDuplicatorCreator } from './input-duplicator';
export interface SourcesEvent extends CustomEvent<Response> { export interface TagSourceEvent extends CustomEvent<Response> {
target: HTMLElement, target: HTMLElement,
} }
@ -17,7 +17,7 @@ function setupInputs() {
function imageSourcesCreator() { function imageSourcesCreator() {
setupInputs(); setupInputs();
document.addEventListener('fetchcomplete', (({ target, detail }: SourcesEvent) => { document.addEventListener('fetchcomplete', (({ target, detail }: TagSourceEvent) => {
const sourceSauce = $<HTMLElement>('.js-sourcesauce'); const sourceSauce = $<HTMLElement>('.js-sourcesauce');
if (sourceSauce && target && target.matches('#source-form')) { if (sourceSauce && target && target.matches('#source-form')) {

View file

@ -2,23 +2,28 @@
* Tags Dropdown * Tags Dropdown
*/ */
import { showEl, hideEl } from './utils/dom'; import { $$, showEl, hideEl } from './utils/dom';
import { assertNotUndefined } from './utils/assert';
import { TagSourceEvent } from './sources';
function addTag(tagId, list) { type TagDropdownActionFunction = () => void;
type TagDropdownActionList = Record<string, TagDropdownActionFunction>;
function addTag(tagId: number, list: number[]) {
list.push(tagId); list.push(tagId);
} }
function removeTag(tagId, list) { function removeTag(tagId: number, list: number[]) {
list.splice(list.indexOf(tagId), 1); list.splice(list.indexOf(tagId), 1);
} }
function createTagDropdown(tag) { function createTagDropdown(tag: HTMLSpanElement) {
const { userIsSignedIn, userCanEditFilter, watchedTagList, spoileredTagList, hiddenTagList } = window.booru; const { userIsSignedIn, userCanEditFilter, watchedTagList, spoileredTagList, hiddenTagList } = window.booru;
const [ unwatch, watch, unspoiler, spoiler, unhide, hide, signIn, filter ] = [].slice.call(tag.querySelectorAll('.tag__dropdown__link')); const [ unwatch, watch, unspoiler, spoiler, unhide, hide, signIn, filter ] = $$<HTMLElement>('.tag__dropdown__link');
const [ unwatched, watched, spoilered, hidden ] = [].slice.call(tag.querySelectorAll('.tag__state')); const [ unwatched, watched, spoilered, hidden ] = $$<HTMLSpanElement>('.tag__state');
const tagId = parseInt(tag.dataset.tagId, 10); const tagId = parseInt(assertNotUndefined(tag.dataset.tagId), 10);
const actions = { const actions: TagDropdownActionList = {
unwatch() { hideEl(unwatch, watched); showEl(watch, unwatched); removeTag(tagId, watchedTagList); }, unwatch() { hideEl(unwatch, watched); showEl(watch, unwatched); removeTag(tagId, watchedTagList); },
watch() { hideEl(watch, unwatched); showEl(unwatch, watched); addTag(tagId, watchedTagList); }, watch() { hideEl(watch, unwatched); showEl(unwatch, watched); addTag(tagId, watchedTagList); },
@ -51,11 +56,15 @@ function createTagDropdown(tag) {
if (userIsSignedIn && if (userIsSignedIn &&
!userCanEditFilter) showEl(filter); !userCanEditFilter) showEl(filter);
tag.addEventListener('fetchcomplete', event => actions[event.target.dataset.tagAction]()); tag.addEventListener('fetchcomplete', ((event: TagSourceEvent) => {
const act = event.target.dataset.tagAction;
if (act && actions[act]) {
actions[act]()
}
}) as EventListener);
} }
function initTagDropdown() { export function initTagDropdown() {
[].forEach.call(document.querySelectorAll('.tag.dropdown'), createTagDropdown); [].forEach.call($$<HTMLSpanElement>('.tag.dropdown'), createTagDropdown);
} }
export { initTagDropdown };

View file

@ -6,7 +6,7 @@ import { $, $$ } from './utils/dom';
import store from './utils/store'; import store from './utils/store';
import { initTagDropdown } from './tags'; import { initTagDropdown } from './tags';
import { setupTagsInput, reloadTagsInput } from './tagsinput'; import { setupTagsInput, reloadTagsInput } from './tagsinput';
import { SourcesEvent } from './sources'; import { TagSourceEvent } from './sources';
type TagInputActionFunction = (tagInput: HTMLTextAreaElement | null) => void type TagInputActionFunction = (tagInput: HTMLTextAreaElement | null) => void
type TagInputActionList = { type TagInputActionList = {
@ -49,7 +49,7 @@ function setupTags() {
}); });
} }
function updateTagSauce({target, detail}: SourcesEvent) { function updateTagSauce({target, detail}: TagSourceEvent) {
const tagSauce = $<HTMLDivElement>('.js-tagsauce'); const tagSauce = $<HTMLDivElement>('.js-tagsauce');
if (tagSauce && target.matches('#tags-form')) { if (tagSauce && target.matches('#tags-form')) {