From 346b88ae4379eae209672918bcf470c0c2620698 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Fri, 4 Oct 2024 14:36:20 +0100 Subject: [PATCH] JS: Converted a few extra services to TS --- resources/js/code/index.mjs | 2 +- resources/js/components/dropzone.js | 2 +- resources/js/components/page-editor.js | 4 +- resources/js/components/pointer.js | 2 +- resources/js/markdown/codemirror.js | 2 +- resources/js/markdown/display.js | 2 +- .../services/{clipboard.js => clipboard.ts} | 41 +++++-------------- resources/js/services/dates.js | 23 ----------- resources/js/services/dates.ts | 14 +++++++ resources/js/services/{store.js => store.ts} | 0 resources/js/services/{vdom.js => vdom.ts} | 16 +++----- .../js/wysiwyg-tinymce/drop-paste-handling.js | 2 +- 12 files changed, 39 insertions(+), 71 deletions(-) rename resources/js/services/{clipboard.js => clipboard.ts} (54%) delete mode 100644 resources/js/services/dates.js create mode 100644 resources/js/services/dates.ts rename resources/js/services/{store.js => store.ts} (100%) rename resources/js/services/{vdom.js => vdom.ts} (54%) diff --git a/resources/js/code/index.mjs b/resources/js/code/index.mjs index d2ea12a4c..a2850c06b 100644 --- a/resources/js/code/index.mjs +++ b/resources/js/code/index.mjs @@ -1,6 +1,6 @@ import {EditorView, keymap} from '@codemirror/view'; -import {copyTextToClipboard} from '../services/clipboard'; +import {copyTextToClipboard} from '../services/clipboard.ts'; import {viewerExtensions, editorExtensions} from './setups'; import {createView} from './views'; import {SimpleEditorInterface} from './simple-editor-interface'; diff --git a/resources/js/components/dropzone.js b/resources/js/components/dropzone.js index 93e93a251..920fe875f 100644 --- a/resources/js/components/dropzone.js +++ b/resources/js/components/dropzone.js @@ -1,5 +1,5 @@ import {Component} from './component'; -import {Clipboard} from '../services/clipboard'; +import {Clipboard} from '../services/clipboard.ts'; import { elem, getLoading, onSelect, removeLoading, } from '../services/dom'; diff --git a/resources/js/components/page-editor.js b/resources/js/components/page-editor.js index ecfc3546f..216067552 100644 --- a/resources/js/components/page-editor.js +++ b/resources/js/components/page-editor.js @@ -1,7 +1,7 @@ -import * as Dates from '../services/dates'; import {onSelect} from '../services/dom'; import {debounce} from '../services/util'; import {Component} from './component'; +import {utcTimeStampToLocalTime} from '../services/dates.ts'; export class PageEditor extends Component { @@ -129,7 +129,7 @@ export class PageEditor extends Component { this.deleteDraftWrap.toggleAttribute('hidden', false); } - this.draftNotifyChange(`${resp.data.message} ${Dates.utcTimeStampToLocalTime(resp.data.timestamp)}`); + this.draftNotifyChange(`${resp.data.message} ${utcTimeStampToLocalTime(resp.data.timestamp)}`); this.autoSave.last = Date.now(); if (resp.data.warning && !this.shownWarningsCache.has(resp.data.warning)) { window.$events.emit('warning', resp.data.warning); diff --git a/resources/js/components/pointer.js b/resources/js/components/pointer.js index b16a50de6..607576cb9 100644 --- a/resources/js/components/pointer.js +++ b/resources/js/components/pointer.js @@ -1,6 +1,6 @@ import * as DOM from '../services/dom'; import {Component} from './component'; -import {copyTextToClipboard} from '../services/clipboard'; +import {copyTextToClipboard} from '../services/clipboard.ts'; export class Pointer extends Component { diff --git a/resources/js/markdown/codemirror.js b/resources/js/markdown/codemirror.js index 2ea944865..a6332cbb8 100644 --- a/resources/js/markdown/codemirror.js +++ b/resources/js/markdown/codemirror.js @@ -1,6 +1,6 @@ import {provideKeyBindings} from './shortcuts'; import {debounce} from '../services/util'; -import {Clipboard} from '../services/clipboard'; +import {Clipboard} from '../services/clipboard.ts'; /** * Initiate the codemirror instance for the markdown editor. diff --git a/resources/js/markdown/display.js b/resources/js/markdown/display.js index 487df1cab..60be26b5f 100644 --- a/resources/js/markdown/display.js +++ b/resources/js/markdown/display.js @@ -1,4 +1,4 @@ -import {patchDomFromHtmlString} from '../services/vdom'; +import {patchDomFromHtmlString} from '../services/vdom.ts'; export class Display { diff --git a/resources/js/services/clipboard.js b/resources/js/services/clipboard.ts similarity index 54% rename from resources/js/services/clipboard.js rename to resources/js/services/clipboard.ts index 5f73c3020..9b8efa6c5 100644 --- a/resources/js/services/clipboard.js +++ b/resources/js/services/clipboard.ts @@ -1,62 +1,43 @@ export class Clipboard { - /** - * Constructor - * @param {DataTransfer} clipboardData - */ - constructor(clipboardData) { + protected data: DataTransfer; + + constructor(clipboardData: DataTransfer) { this.data = clipboardData; } /** * Check if the clipboard has any items. */ - hasItems() { + hasItems(): boolean { return Boolean(this.data) && Boolean(this.data.types) && this.data.types.length > 0; } /** * Check if the given event has tabular-looking data in the clipboard. - * @return {boolean} */ - containsTabularData() { + containsTabularData(): boolean { const rtfData = this.data.getData('text/rtf'); - return rtfData && rtfData.includes('\\trowd'); + return !!rtfData && rtfData.includes('\\trowd'); } /** * Get the images that are in the clipboard data. - * @return {Array} */ - getImages() { - const {types} = this.data; - const images = []; - - for (const type of types) { - if (type.includes('image')) { - const item = this.data.getData(type); - images.push(item.getAsFile()); - } - } - - const imageFiles = this.getFiles().filter(f => f.type.includes('image')); - images.push(...imageFiles); - - return images; + getImages(): File[] { + return this.getFiles().filter(f => f.type.includes('image')); } /** * Get the files included in the clipboard data. - * @return {File[]} */ - getFiles() { + getFiles(): File[] { const {files} = this.data; return [...files]; } - } -export async function copyTextToClipboard(text) { +export async function copyTextToClipboard(text: string) { if (window.isSecureContext && navigator.clipboard) { await navigator.clipboard.writeText(text); return; @@ -64,7 +45,7 @@ export async function copyTextToClipboard(text) { // Backup option where we can't use the navigator.clipboard API const tempInput = document.createElement('textarea'); - tempInput.style = 'position: absolute; left: -1000px; top: -1000px;'; + tempInput.setAttribute('style', 'position: absolute; left: -1000px; top: -1000px;'); tempInput.value = text; document.body.appendChild(tempInput); tempInput.select(); diff --git a/resources/js/services/dates.js b/resources/js/services/dates.js deleted file mode 100644 index 2e6b34aee..000000000 --- a/resources/js/services/dates.js +++ /dev/null @@ -1,23 +0,0 @@ -export function getCurrentDay() { - const date = new Date(); - const month = date.getMonth() + 1; - const day = date.getDate(); - - return `${date.getFullYear()}-${(month > 9 ? '' : '0') + month}-${(day > 9 ? '' : '0') + day}`; -} - -export function utcTimeStampToLocalTime(timestamp) { - const date = new Date(timestamp * 1000); - const hours = date.getHours(); - const mins = date.getMinutes(); - return `${(hours > 9 ? '' : '0') + hours}:${(mins > 9 ? '' : '0') + mins}`; -} - -export function formatDateTime(date) { - const month = date.getMonth() + 1; - const day = date.getDate(); - const hours = date.getHours(); - const mins = date.getMinutes(); - - return `${date.getFullYear()}-${(month > 9 ? '' : '0') + month}-${(day > 9 ? '' : '0') + day} ${(hours > 9 ? '' : '0') + hours}:${(mins > 9 ? '' : '0') + mins}`; -} diff --git a/resources/js/services/dates.ts b/resources/js/services/dates.ts new file mode 100644 index 000000000..a6118c247 --- /dev/null +++ b/resources/js/services/dates.ts @@ -0,0 +1,14 @@ +export function getCurrentDay(): string { + const date = new Date(); + const month = date.getMonth() + 1; + const day = date.getDate(); + + return `${date.getFullYear()}-${(month > 9 ? '' : '0') + month}-${(day > 9 ? '' : '0') + day}`; +} + +export function utcTimeStampToLocalTime(timestamp: number): string { + const date = new Date(timestamp * 1000); + const hours = date.getHours(); + const mins = date.getMinutes(); + return `${(hours > 9 ? '' : '0') + hours}:${(mins > 9 ? '' : '0') + mins}`; +} diff --git a/resources/js/services/store.js b/resources/js/services/store.ts similarity index 100% rename from resources/js/services/store.js rename to resources/js/services/store.ts diff --git a/resources/js/services/vdom.js b/resources/js/services/vdom.ts similarity index 54% rename from resources/js/services/vdom.js rename to resources/js/services/vdom.ts index 2095cd2ca..c32f328f5 100644 --- a/resources/js/services/vdom.js +++ b/resources/js/services/vdom.ts @@ -3,13 +3,13 @@ import { attributesModule, toVNode, } from 'snabbdom'; +import {VNode} from "snabbdom/build/vnode"; -let patcher; +type vDomPatcher = (oldVnode: VNode | Element | DocumentFragment, vnode: VNode) => VNode; -/** - * @returns {Function} - */ -function getPatcher() { +let patcher: vDomPatcher; + +function getPatcher(): vDomPatcher { if (patcher) return patcher; patcher = init([ @@ -19,11 +19,7 @@ function getPatcher() { return patcher; } -/** - * @param {Element} domTarget - * @param {String} html - */ -export function patchDomFromHtmlString(domTarget, html) { +export function patchDomFromHtmlString(domTarget: Element, html: string): void { const contentDom = document.createElement('div'); contentDom.innerHTML = html; getPatcher()(toVNode(domTarget), toVNode(contentDom)); diff --git a/resources/js/wysiwyg-tinymce/drop-paste-handling.js b/resources/js/wysiwyg-tinymce/drop-paste-handling.js index 172ad970f..3557f9dbd 100644 --- a/resources/js/wysiwyg-tinymce/drop-paste-handling.js +++ b/resources/js/wysiwyg-tinymce/drop-paste-handling.js @@ -1,4 +1,4 @@ -import {Clipboard} from '../services/clipboard'; +import {Clipboard} from '../services/clipboard.ts'; let wrap; let draggedContentEditable;