JS: Converted a few extra services to TS

diff --git a/resources/js/code/index.mjs b/resources/js/code/index.mjs
index d2ea12a4c93cd6d8593cca9068e8801f9c55248d..a2850c06b23f366375bd59b08aae0317ac93edcb 100644 (file)
--- 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 93e93a251c7a6e1eaedfc3c5bdf38521cbda9a8b..920fe875f22135de5a302dee0a8e44d7207aaf86 100644 (file)
--- 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 ecfc3546f4e2ab7e6cd19d82be258d181e093f19..2160675529bd5eef9a132141af2f7f9ee853dc01 100644 (file)
--- 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 b16a50de643e12300997f87b18eca1e182705dd8..607576cb9f9595a6cb9382c44e6c8a7f6002cba4 100644 (file)
--- 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 2ea944865c12d90768956594364eb8901960eb56..a6332cbb844fddc44d022e9708b0051fca5b41e3 100644 (file)
--- 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 487df1cabcec4d5a9cf9d0c48d5b412d78ff9ee5..60be26b5fb705491ab5a5712977ac90291382421 100644 (file)
--- 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 5f73c3020cf932685c1369cbe40070405079b19e..9b8efa6c5ad1ab1e3d3abb8188f18cd77ea68aaf 100644 (file)
--- 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<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();

diff --git a/resources/js/services/dates.js b/resources/js/services/dates.js
deleted file mode 100644 (file)
index 2e6b34a..0000000
--- 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 (file)
index 0000000..a6118c2
--- /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 2095cd2ca4f3ff73cff6c3fe40808fc53f1b96b7..c32f328f5e73845db8d3562328df9773c76f4e00 100644 (file)
--- 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 172ad970f0de8a5e51f495a012b88bf157107b85..3557f9dbd15b700ed3659ec98e8e70e09dd7fa3b 100644 (file)
--- 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;