From a5bec50ba7d559ac1fd449f3961d9fb771033115 Mon Sep 17 00:00:00 2001 From: Liam Date: Mon, 11 Nov 2024 10:22:54 -0500 Subject: [PATCH] Convert tagsinput to TypeScript --- assets/js/__tests__/tagsinput.spec.ts | 188 +++++++++++++++++++++++ assets/js/{tagsinput.js => tagsinput.ts} | 64 ++++---- assets/test/vitest-setup.ts | 2 + assets/types/booru-object.d.ts | 8 + assets/types/tags.ts | 20 +++ 5 files changed, 253 insertions(+), 29 deletions(-) create mode 100644 assets/js/__tests__/tagsinput.spec.ts rename assets/js/{tagsinput.js => tagsinput.ts} (63%) create mode 100644 assets/types/tags.ts diff --git a/assets/js/__tests__/tagsinput.spec.ts b/assets/js/__tests__/tagsinput.spec.ts new file mode 100644 index 00000000..e32b2dfc --- /dev/null +++ b/assets/js/__tests__/tagsinput.spec.ts @@ -0,0 +1,188 @@ +import { $, $$, hideEl } from '../utils/dom'; +import { assertNotNull } from '../utils/assert'; +import { TermSuggestion } from '../utils/suggestions'; +import { setupTagsInput, addTag, reloadTagsInput } from '../tagsinput'; + +const formData = `
+
+ +
+ +
+
+ + + +
`; + +describe('Fancy tags input', () => { + let form: HTMLFormElement; + let tagBlock: HTMLDivElement; + let plainInput: HTMLTextAreaElement; + let fancyInput: HTMLDivElement; + let fancyText: HTMLInputElement; + let fancyShowButton: HTMLButtonElement; + let plainShowButton: HTMLButtonElement; + + beforeEach(() => { + window.booru.fancyTagUpload = true; + window.booru.fancyTagEdit = true; + document.body.innerHTML = formData; + + form = assertNotNull($('.tags-form')); + tagBlock = assertNotNull($('.js-tag-block')); + plainInput = assertNotNull($('.js-taginput-plain')); + fancyInput = assertNotNull($('.js-taginput-fancy')); + fancyText = assertNotNull($('.js-taginput-input')); + fancyShowButton = assertNotNull($('.js-taginput-show')); + plainShowButton = assertNotNull($('.js-taginput-hide')); + + // prevent these from submitting the form + fancyShowButton.addEventListener('click', e => e.preventDefault()); + plainShowButton.addEventListener('click', e => e.preventDefault()); + }); + + for (let i = 0; i < 4; i++) { + const type = (i & 2) === 0 ? 'upload' : 'edit'; + const name = (i & 2) === 0 ? 'fancyTagUpload' : 'fancyTagEdit'; + const value = (i & 1) === 0; + + // eslint-disable-next-line no-loop-func + it(`should imply ${name}:${value} <-> ${type}:${value} on setup`, () => { + window.booru.fancyTagEdit = false; + window.booru.fancyTagUpload = false; + window.booru[name] = value; + + plainInput.value = 'a, b'; + tagBlock.classList.remove('fancy-tag-edit', 'fancy-tag-upload'); + tagBlock.classList.add(`fancy-tag-${type}`); + expect($$('span.tag', fancyInput)).toHaveLength(0); + + setupTagsInput(tagBlock); + expect($$('span.tag', fancyInput)).toHaveLength(value ? 2 : 0); + }); + } + + it('should move tags from the plain to the fancy editor when the fancy editor is shown', () => { + expect($$('span.tag', fancyInput)).toHaveLength(0); + + setupTagsInput(tagBlock); + plainInput.value = 'a, b'; + fancyShowButton.click(); + expect($$('span.tag', fancyInput)).toHaveLength(2); + }); + + it('should move tags from the plain to the fancy editor on reload event', () => { + expect($$('span.tag', fancyInput)).toHaveLength(0); + + setupTagsInput(tagBlock); + plainInput.value = 'a, b'; + reloadTagsInput(plainInput); + expect($$('span.tag', fancyInput)).toHaveLength(2); + }); + + it('should respond to addtag events', () => { + setupTagsInput(tagBlock); + addTag(plainInput, 'a'); + expect($$('span.tag', fancyInput)).toHaveLength(1); + }); + + it('should not respond to addtag events if the container is hidden', () => { + setupTagsInput(tagBlock); + hideEl(fancyInput); + addTag(plainInput, 'a'); + expect($$('span.tag', fancyInput)).toHaveLength(0); + }); + + it('should respond to autocomplete events', () => { + setupTagsInput(tagBlock); + fancyText.dispatchEvent(new CustomEvent('autocomplete', { detail: { value: 'a', label: 'a' } })); + expect($$('span.tag', fancyInput)).toHaveLength(1); + }); + + it('should allow removing previously added tags by clicking them', () => { + setupTagsInput(tagBlock); + addTag(plainInput, 'a'); + assertNotNull($('span.tag a', fancyInput)).click(); + expect($$('span.tag', fancyInput)).toHaveLength(0); + }); + + it('should allow removing previously added tags by adding one with a minus sign prepended', () => { + setupTagsInput(tagBlock); + addTag(plainInput, 'a'); + expect($$('span.tag', fancyInput)).toHaveLength(1); + addTag(plainInput, '-a'); + expect($$('span.tag', fancyInput)).toHaveLength(0); + }); + + it('should disallow adding empty tags', () => { + setupTagsInput(tagBlock); + addTag(plainInput, ''); + expect($$('span.tag', fancyInput)).toHaveLength(0); + }); + + it('should disallow adding existing tags', () => { + setupTagsInput(tagBlock); + addTag(plainInput, 'a'); + addTag(plainInput, 'a'); + expect($$('span.tag', fancyInput)).toHaveLength(1); + }); + + it('should submit the form on ctrl+enter', () => { + setupTagsInput(tagBlock); + + const ev = new KeyboardEvent('keydown', { keyCode: 13, ctrlKey: true, bubbles: true }); + + return new Promise(resolve => { + form.addEventListener('submit', e => { + e.preventDefault(); + resolve(); + }); + + fancyText.dispatchEvent(ev); + expect(ev.defaultPrevented).toBe(true); + }); + }); + + it('does nothing when backspacing on empty input and there are no tags', () => { + setupTagsInput(tagBlock); + + const ev = new KeyboardEvent('keydown', { keyCode: 8, bubbles: true }); + fancyText.dispatchEvent(ev); + + expect($$('span.tag', fancyInput)).toHaveLength(0); + }); + + it('erases the last added tag when backspacing on empty input', () => { + setupTagsInput(tagBlock); + addTag(plainInput, 'a'); + addTag(plainInput, 'b'); + + const ev = new KeyboardEvent('keydown', { keyCode: 8, bubbles: true }); + fancyText.dispatchEvent(ev); + + expect($$('span.tag', fancyInput)).toHaveLength(1); + }); + + it('adds new tag when comma is pressed', () => { + setupTagsInput(tagBlock); + + const ev = new KeyboardEvent('keydown', { keyCode: 188, bubbles: true }); + fancyText.value = 'a'; + fancyText.dispatchEvent(ev); + + expect($$('span.tag', fancyInput)).toHaveLength(1); + expect(fancyText.value).toBe(''); + }); + + it('adds new tag when enter is pressed', () => { + setupTagsInput(tagBlock); + + const ev = new KeyboardEvent('keydown', { keyCode: 13, bubbles: true }); + fancyText.value = 'a'; + fancyText.dispatchEvent(ev); + + expect($$('span.tag', fancyInput)).toHaveLength(1); + expect(fancyText.value).toBe(''); + }); +}); diff --git a/assets/js/tagsinput.js b/assets/js/tagsinput.ts similarity index 63% rename from assets/js/tagsinput.js rename to assets/js/tagsinput.ts index bc05b3d7..377db60d 100644 --- a/assets/js/tagsinput.js +++ b/assets/js/tagsinput.ts @@ -2,14 +2,20 @@ * Fancy tag editor. */ +import { assertNotNull, assertType } from './utils/assert'; import { $, $$, clearEl, removeEl, showEl, hideEl, escapeCss, escapeHtml } from './utils/dom'; +import { TermSuggestion } from './utils/suggestions'; -function setupTagsInput(tagBlock) { - const [textarea, container] = $$('.js-taginput', tagBlock); - const setup = $('.js-tag-block ~ button', tagBlock.parentNode); - const inputField = $('input', container); +export function setupTagsInput(tagBlock: HTMLDivElement) { + const form = assertNotNull(tagBlock.closest('form')); + const textarea = assertNotNull($('.js-taginput-plain', tagBlock)); + const container = assertNotNull($('.js-taginput-fancy')); + const parentField = assertNotNull(tagBlock.parentElement); + const setup = assertNotNull($('.js-tag-block ~ button', parentField)); + const inputField = assertNotNull($('input', container)); + const submitButton = assertNotNull($('[type="submit"]', form)); - let tags = []; + let tags: string[] = []; // Load in the current tag set from the textarea setup.addEventListener('click', importTags); @@ -27,7 +33,7 @@ function setupTagsInput(tagBlock) { inputField.addEventListener('keydown', handleKeyEvent); // Respond to autocomplete form clicks - inputField.addEventListener('autocomplete', handleAutocomplete); + inputField.addEventListener('autocomplete', handleAutocomplete as EventListener); // Respond to Ctrl+Enter shortcut tagBlock.addEventListener('keydown', handleCtrlEnter); @@ -35,19 +41,19 @@ function setupTagsInput(tagBlock) { // TODO: Cleanup this bug fix // Switch to fancy tagging if user settings want it if (fancyEditorRequested(tagBlock)) { - showEl($$('.js-taginput-fancy')); - showEl($$('.js-taginput-hide')); - hideEl($$('.js-taginput-plain')); - hideEl($$('.js-taginput-show')); + showEl($$('.js-taginput-fancy')); + showEl($$('.js-taginput-hide')); + hideEl($$('.js-taginput-plain')); + hideEl($$('.js-taginput-show')); importTags(); } - function handleAutocomplete(event) { + function handleAutocomplete(event: CustomEvent) { insertTag(event.detail.value); inputField.focus(); } - function handleAddTag(event) { + function handleAddTag(event: AddtagEvent) { // Ignore if not in tag edit mode if (container.classList.contains('hidden')) return; @@ -55,14 +61,16 @@ function setupTagsInput(tagBlock) { event.stopPropagation(); } - function handleTagClear(event) { - if (event.target.dataset.tagName) { + function handleTagClear(event: Event) { + const target = assertType(event.target, HTMLElement); + + if (target.dataset.tagName) { event.preventDefault(); - removeTag(event.target.dataset.tagName, event.target.parentNode); + removeTag(target.dataset.tagName, assertNotNull(target.parentElement)); } } - function handleKeyEvent(event) { + function handleKeyEvent(event: KeyboardEvent) { const { keyCode, ctrlKey, shiftKey } = event; // allow form submission with ctrl+enter if no text was typed @@ -73,7 +81,7 @@ function setupTagsInput(tagBlock) { // backspace on a blank input field if (keyCode === 8 && inputField.value === '') { event.preventDefault(); - const erased = $('.tag:last-of-type', container); + const erased = $('.tag:last-of-type', container); if (erased) removeTag(tags[tags.length - 1], erased); } @@ -86,14 +94,14 @@ function setupTagsInput(tagBlock) { } } - function handleCtrlEnter(event) { + function handleCtrlEnter(event: KeyboardEvent) { const { keyCode, ctrlKey } = event; if (keyCode !== 13 || !ctrlKey) return; - $('[type="submit"]', tagBlock.closest('form')).click(); + submitButton.click(); } - function insertTag(name) { + function insertTag(name: string) { name = name.trim(); // eslint-disable-line no-param-reassign // Add if not degenerate or already present @@ -102,9 +110,9 @@ function setupTagsInput(tagBlock) { // Remove instead if the tag name starts with a minus if (name[0] === '-') { name = name.slice(1); // eslint-disable-line no-param-reassign - const tagLink = $(`[data-tag-name="${escapeCss(name)}"]`, container); + const tagLink = assertNotNull($(`[data-tag-name="${escapeCss(name)}"]`, container)); - return removeTag(name, tagLink.parentNode); + return removeTag(name, assertNotNull(tagLink.parentElement)); } tags.push(name); @@ -116,7 +124,7 @@ function setupTagsInput(tagBlock) { inputField.value = ''; } - function removeTag(name, element) { + function removeTag(name: string, element: HTMLElement) { removeEl(element); // Remove the tag from the list @@ -134,7 +142,7 @@ function setupTagsInput(tagBlock) { } } -function fancyEditorRequested(tagBlock) { +function fancyEditorRequested(tagBlock: HTMLDivElement) { // Check whether the user made the fancy editor the default for each type of tag block. return ( (window.booru.fancyTagUpload && tagBlock.classList.contains('fancy-tag-upload')) || @@ -142,19 +150,17 @@ function fancyEditorRequested(tagBlock) { ); } -function setupTagListener() { +export function setupTagListener() { document.addEventListener('addtag', event => { if (event.target.value) event.target.value += ', '; event.target.value += event.detail.name; }); } -function addTag(textarea, name) { +export function addTag(textarea: HTMLInputElement | HTMLTextAreaElement, name: string) { textarea.dispatchEvent(new CustomEvent('addtag', { detail: { name }, bubbles: true })); } -function reloadTagsInput(textarea) { +export function reloadTagsInput(textarea: HTMLInputElement | HTMLTextAreaElement) { textarea.dispatchEvent(new CustomEvent('reload')); } - -export { setupTagsInput, setupTagListener, addTag, reloadTagsInput }; diff --git a/assets/test/vitest-setup.ts b/assets/test/vitest-setup.ts index 7c0d2d62..ac349f86 100644 --- a/assets/test/vitest-setup.ts +++ b/assets/test/vitest-setup.ts @@ -7,6 +7,8 @@ import { fireEvent } from '@testing-library/dom'; window.booru = { timeAgo: () => {}, csrfToken: 'mockCsrfToken', + fancyTagEdit: true, + fancyTagUpload: true, hiddenTag: '/mock-tagblocked.svg', hiddenTagList: [], hideStaffTools: 'true', diff --git a/assets/types/booru-object.d.ts b/assets/types/booru-object.d.ts index 4154385c..8b04cced 100644 --- a/assets/types/booru-object.d.ts +++ b/assets/types/booru-object.d.ts @@ -73,6 +73,14 @@ interface BooruObject { * List of image IDs in the current gallery. */ galleryImages?: number[]; + /** + * Fancy tag setting for uploading images. + */ + fancyTagUpload: boolean; + /** + * Fancy tag setting for editing images. + */ + fancyTagEdit: boolean; } declare global { diff --git a/assets/types/tags.ts b/assets/types/tags.ts new file mode 100644 index 00000000..b132dbf0 --- /dev/null +++ b/assets/types/tags.ts @@ -0,0 +1,20 @@ +export {}; + +declare global { + interface Addtag { + name: string; + } + + interface AddtagEvent extends CustomEvent { + target: HTMLInputElement | HTMLTextAreaElement; + } + + interface ReloadEvent extends CustomEvent { + target: HTMLInputElement | HTMLTextAreaElement; + } + + interface GlobalEventHandlersEventMap { + addtag: AddtagEvent; + reload: ReloadEvent; + } +}