From de246b060eaf8a115ef5ebb35ebff06059fba6c4 Mon Sep 17 00:00:00 2001 From: StableCrimson Date: Thu, 17 Apr 2025 19:12:18 -0500 Subject: [PATCH] Convert `toast` and `confirm` to TypeScript (#5219) --- CONTRIBUTORS.md | 1 + src/components/confirm/confirm.js | 74 ------------------ src/components/confirm/confirm.ts | 85 +++++++++++++++++++++ src/components/toast/{toast.js => toast.ts} | 16 ++-- 4 files changed, 96 insertions(+), 80 deletions(-) delete mode 100644 src/components/confirm/confirm.js create mode 100644 src/components/confirm/confirm.ts rename src/components/toast/{toast.js => toast.ts} (74%) diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md index 0f89f27475..d53caedaa7 100644 --- a/CONTRIBUTORS.md +++ b/CONTRIBUTORS.md @@ -97,6 +97,7 @@ - [ItsAllAboutTheCode](https://github.com/ItsAllAboutTheCode) - [Jxiced](https://github.com/Jxiced) - [Derek Huber](https://github.com/Derek4aty1) +- [StableCrimson](https://github.com/StableCrimson) ## Emby Contributors diff --git a/src/components/confirm/confirm.js b/src/components/confirm/confirm.js deleted file mode 100644 index ed3562eafe..0000000000 --- a/src/components/confirm/confirm.js +++ /dev/null @@ -1,74 +0,0 @@ -import { appRouter } from '../router/appRouter'; -import browser from '../../scripts/browser'; -import dialog from '../dialog/dialog'; -import globalize from '../../lib/globalize'; - -function useNativeConfirm() { - // webOS seems to block modals - // Tizen 2.x seems to block modals - return !browser.web0s - && !(browser.tizenVersion && (browser.tizenVersion < 3 || browser.tizenVersion >= 8)) - && browser.tv - && window.confirm; -} - -async function nativeConfirm(options) { - if (typeof options === 'string') { - options = { - title: '', - text: options - }; - } - - const text = (options.text || '').replaceAll('
', '\n'); - await appRouter.ready(); - const result = window.confirm(text); - - if (result) { - return Promise.resolve(); - } else { - return Promise.reject(); - } -} - -async function customConfirm(text, title) { - let options; - if (typeof text === 'string') { - options = { - title: title, - text: text - }; - } else { - options = text; - } - - const items = []; - - items.push({ - name: options.cancelText || globalize.translate('ButtonCancel'), - id: 'cancel', - type: 'cancel' - }); - - items.push({ - name: options.confirmText || globalize.translate('ButtonOk'), - id: 'ok', - type: options.primary === 'delete' ? 'delete' : 'submit' - }); - - options.buttons = items; - - await appRouter.ready(); - - return dialog.show(options).then(result => { - if (result === 'ok') { - return Promise.resolve(); - } - - return Promise.reject(); - }); -} - -const confirm = useNativeConfirm() ? nativeConfirm : customConfirm; - -export default confirm; diff --git a/src/components/confirm/confirm.ts b/src/components/confirm/confirm.ts new file mode 100644 index 0000000000..3b40a8f2b4 --- /dev/null +++ b/src/components/confirm/confirm.ts @@ -0,0 +1,85 @@ +import dialog from 'components/dialog/dialog'; +import { appRouter } from 'components/router/appRouter'; +import globalize from 'lib/globalize'; +import browser from 'scripts/browser'; + +interface OptionItem { + id: string, + name: string, + type: 'cancel' | 'delete' | 'submit' +} + +interface ConfirmOptions { + title?: string, + text: string + cancelText?: string, + confirmText?: string, + primary?: string + buttons?: OptionItem[] +} + +function shouldUseNativeConfirm() { + // webOS seems to block modals + // Tizen 2.x seems to block modals + return !browser.web0s + && !(browser.tizenVersion && (browser.tizenVersion < 3 || browser.tizenVersion >= 8)) + && browser.tv + && !!window.confirm; +} + +async function nativeConfirm(options: string | ConfirmOptions) { + if (typeof options === 'string') { + options = { + text: options + } as ConfirmOptions; + } + + const text = (options.text || '').replace(//g, '\n'); + await appRouter.ready(); + const result = window.confirm(text); + + if (result) { + return Promise.resolve(); + } else { + return Promise.reject(new Error('Confirm dialog rejected')); + } +} + +async function customConfirm(options: string | ConfirmOptions, title: string = '') { + if (typeof options === 'string') { + options = { + title, + text: options + }; + } + + const items: OptionItem[] = []; + + items.push({ + name: options.cancelText || globalize.translate('ButtonCancel'), + id: 'cancel', + type: 'cancel' + }); + + items.push({ + name: options.confirmText || globalize.translate('ButtonOk'), + id: 'ok', + type: options.primary === 'delete' ? 'delete' : 'submit' + }); + + options.buttons = items; + + await appRouter.ready(); + + return dialog.show(options).then(result => { + if (result === 'ok') { + return Promise.resolve(); + } + + return Promise.reject(new Error('Confirm dialog rejected')); + }); +} + +const confirm = shouldUseNativeConfirm() ? nativeConfirm : customConfirm; + +export default confirm; diff --git a/src/components/toast/toast.js b/src/components/toast/toast.ts similarity index 74% rename from src/components/toast/toast.js rename to src/components/toast/toast.ts index e29cb16bc6..7f85757faf 100644 --- a/src/components/toast/toast.js +++ b/src/components/toast/toast.ts @@ -1,6 +1,10 @@ import './toast.scss'; -let toastContainer; +interface Toast { + text: string +} + +let toastContainer: HTMLDivElement; function getToastContainer() { if (!toastContainer) { @@ -12,24 +16,24 @@ function getToastContainer() { return toastContainer; } -function remove(elem) { +function remove(elem: HTMLElement) { setTimeout(function () { - elem.parentNode.removeChild(elem); + elem.parentNode?.removeChild(elem); }, 300); } -function animateRemove(elem) { +function animateRemove(elem: HTMLElement) { setTimeout(function () { elem.classList.add('toastHide'); remove(elem); }, 3300); } -export default function (options) { +export default function (options: string | Toast) { if (typeof options === 'string') { options = { text: options - }; + } as Toast; } const elem = document.createElement('div');