Merge pull request #308 from philomena-dev/misc-ts

convert misc scripts to ts
This commit is contained in:
liamwhite 2024-06-23 15:04:17 -04:00 committed by GitHub
commit dd9091e866
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -3,36 +3,43 @@
*/ */
import store from './utils/store'; import store from './utils/store';
import { $, $$ } from './utils/dom'; import { $, $$, hideEl, showEl } from './utils/dom';
import { assertNotNull, assertType } from './utils/assert';
import '../types/ujs';
let touchMoved = false; let touchMoved = false;
function formResult({target, detail}) { function formResult({target, detail}: FetchcompleteEvent) {
const elements: Record<string, string> = {
const elements = {
'#description-form': '.image-description', '#description-form': '.image-description',
'#uploader-form': '.image_uploader' '#uploader-form': '.image_uploader'
}; };
function showResult(resultEl, formEl, response) { function showResult(formEl: HTMLFormElement, resultEl: HTMLElement, response: string) {
resultEl.innerHTML = response; resultEl.innerHTML = response;
resultEl.classList.remove('hidden'); hideEl(formEl);
formEl.classList.add('hidden'); showEl(resultEl);
formEl.querySelector('input[type="submit"],button').disabled = false;
$$<HTMLInputElement | HTMLButtonElement>('input[type="submit"],button', formEl).forEach(button => {
button.disabled = false;
});
} }
for (const element in elements) { for (const [ formSelector, resultSelector ] of Object.entries(elements)) {
if (target.matches(element)) detail.text().then(text => showResult($(elements[element]), target, text)); if (target.matches(formSelector)) {
} const form = assertType(target, HTMLFormElement);
const result = assertNotNull($<HTMLElement>(resultSelector));
detail.text().then(text => showResult(form, result, text));
}
}
} }
function revealSpoiler(event) { function revealSpoiler(event: MouseEvent | TouchEvent) {
const target = assertNotNull(event.target) as HTMLElement;
const { target } = event;
const spoiler = target.closest('.spoiler'); const spoiler = target.closest('.spoiler');
let imgspoiler = target.closest('.spoiler .imgspoiler, .spoiler-revealed .imgspoiler');
const showContainer = target.closest('.image-show-container'); const showContainer = target.closest('.image-show-container');
let imgspoiler = target.closest('.spoiler .imgspoiler, .spoiler-revealed .imgspoiler');
// Prevent reveal if touchend came after touchmove event // Prevent reveal if touchend came after touchmove event
if (touchMoved) { if (touchMoved) {
@ -42,7 +49,8 @@ function revealSpoiler(event) {
if (spoiler) { if (spoiler) {
if (showContainer) { if (showContainer) {
const imageShow = showContainer.querySelector('.image-show'); const imageShow = assertNotNull(showContainer.querySelector('.image-show'));
if (!imageShow.classList.contains('hidden') && imageShow.classList.contains('spoiler-pending')) { if (!imageShow.classList.contains('hidden') && imageShow.classList.contains('spoiler-pending')) {
imageShow.classList.remove('spoiler-pending'); imageShow.classList.remove('spoiler-pending');
return; return;
@ -62,19 +70,22 @@ function revealSpoiler(event) {
if (imgspoiler) { if (imgspoiler) {
imgspoiler.classList.remove('imgspoiler'); imgspoiler.classList.remove('imgspoiler');
imgspoiler.classList.add('imgspoiler-revealed'); imgspoiler.classList.add('imgspoiler-revealed');
if (event.type === 'touchend' && !event.defaultPrevented) { if (event.type === 'touchend' && !event.defaultPrevented) {
event.preventDefault(); event.preventDefault();
} }
} }
} }
function setupEvents() { export function setupEvents() {
const extrameta = $('#extrameta'); const extrameta = $<HTMLElement>('#extrameta');
if (extrameta && store.get('hide_uploader')) {
hideEl(extrameta);
}
if (store.get('hide_uploader') && extrameta) extrameta.classList.add('hidden');
if (store.get('hide_score')) { if (store.get('hide_score')) {
$$('.upvotes,.score,.downvotes').forEach(s => s.classList.add('hidden')); $$<HTMLElement>('.upvotes,.score,.downvotes').forEach(s => hideEl(s));
} }
document.addEventListener('fetchcomplete', formResult); document.addEventListener('fetchcomplete', formResult);
@ -82,5 +93,3 @@ function setupEvents() {
document.addEventListener('touchend', revealSpoiler); document.addEventListener('touchend', revealSpoiler);
document.addEventListener('touchmove', () => touchMoved = true); document.addEventListener('touchmove', () => touchMoved = true);
} }
export { setupEvents };