JS: Converted a few extra services to TS

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';

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';

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);

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 {
 

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.

resources/js/markdown/display.js

@@ -1,4 +1,4 @@
-import {patchDomFromHtmlString} from '../services/vdom';
+import {patchDomFromHtmlString} from '../services/vdom.ts';
 
 export class Display {
 

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<File>}
      */
-    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();

resources/js/services/dates.js

@@ -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}`;
-}

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}`;
+}

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));

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;