Comments & Pointer: Converted components to typescript

Made changes for dom and translation services for easier usage
considering types.
trans_choice updated to allow default count replacement data as per
Laravel's default behaviour.

diff --git a/resources/js/components/page-comments.js b/resources/js/components/page-comments.ts
similarity index 68%
rename from resources/js/components/page-comments.js
rename to resources/js/components/page-comments.ts
index 8f023836b090876360c120df95e3c1f0a137bf18..a19d2c7d4b128d4deeae63cd36bffaa2e6c89c40 100644 (file)
--- a/resources/js/components/page-comments.js
+++ b/resources/js/components/page-comments.ts
@@ -2,8 +2,38 @@ import {Component} from './component';
 import {getLoading, htmlToDom} from '../services/dom.ts';
 import {buildForInput} from '../wysiwyg-tinymce/config';
 
 import {getLoading, htmlToDom} from '../services/dom.ts';
 import {buildForInput} from '../wysiwyg-tinymce/config';
 

+export interface CommentReplyEvent extends Event {
+    detail: {
+        id: string; // ID of comment being replied to
+        element: HTMLElement; // Container for comment replied to
+    }
+}
+

 export class PageComments extends Component {
 
 export class PageComments extends Component {
 

+    private elem: HTMLElement;
+    private pageId: number;
+    private container: HTMLElement;
+    private commentCountBar: HTMLElement;
+    private commentsTitle: HTMLElement;
+    private addButtonContainer: HTMLElement;
+    private replyToRow: HTMLElement;
+    private formContainer: HTMLElement;
+    private form: HTMLFormElement;
+    private formInput: HTMLInputElement;
+    private formReplyLink: HTMLAnchorElement;
+    private addCommentButton: HTMLElement;
+    private hideFormButton: HTMLElement;
+    private removeReplyToButton: HTMLElement;
+    private wysiwygLanguage: string;
+    private wysiwygTextDirection: string;
+    private wysiwygEditor: any = null;
+    private createdText: string;
+    private countText: string;
+    private parentId: number | null = null;
+    private contentReference: string = '';
+    private formReplyText: string = '';
+

     setup() {
         this.elem = this.$el;
         this.pageId = Number(this.$opts.pageId);
     setup() {
         this.elem = this.$el;
         this.pageId = Number(this.$opts.pageId);


@@ -15,9 +45,9 @@ export class PageComments extends Component {
         this.addButtonContainer = this.$refs.addButtonContainer;
         this.replyToRow = this.$refs.replyToRow;
         this.formContainer = this.$refs.formContainer;
         this.addButtonContainer = this.$refs.addButtonContainer;
         this.replyToRow = this.$refs.replyToRow;
         this.formContainer = this.$refs.formContainer;

-        this.form = this.$refs.form;
-        this.formInput = this.$refs.formInput;
-        this.formReplyLink = this.$refs.formReplyLink;
+        this.form = this.$refs.form as HTMLFormElement;
+        this.formInput = this.$refs.formInput as HTMLInputElement;
+        this.formReplyLink = this.$refs.formReplyLink as HTMLAnchorElement;

         this.addCommentButton = this.$refs.addCommentButton;
         this.hideFormButton = this.$refs.hideFormButton;
         this.removeReplyToButton = this.$refs.removeReplyToButton;
         this.addCommentButton = this.$refs.addCommentButton;
         this.hideFormButton = this.$refs.hideFormButton;
         this.removeReplyToButton = this.$refs.removeReplyToButton;


@@ -25,26 +55,23 @@ export class PageComments extends Component {
         // WYSIWYG options
         this.wysiwygLanguage = this.$opts.wysiwygLanguage;
         this.wysiwygTextDirection = this.$opts.wysiwygTextDirection;
         // WYSIWYG options
         this.wysiwygLanguage = this.$opts.wysiwygLanguage;
         this.wysiwygTextDirection = this.$opts.wysiwygTextDirection;

-        this.wysiwygEditor = null;

 
         // Translations
         this.createdText = this.$opts.createdText;
         this.countText = this.$opts.countText;
 
 
         // Translations
         this.createdText = this.$opts.createdText;
         this.countText = this.$opts.countText;
 

-        // Internal State
-        this.parentId = null;

         this.formReplyText = this.formReplyLink?.textContent || '';
 
         this.setupListeners();
     }
 
         this.formReplyText = this.formReplyLink?.textContent || '';
 
         this.setupListeners();
     }
 

-    setupListeners() {
+    protected setupListeners(): void {

         this.elem.addEventListener('page-comment-delete', () => {
             setTimeout(() => this.updateCount(), 1);
             this.hideForm();
         });
 
         this.elem.addEventListener('page-comment-delete', () => {
             setTimeout(() => this.updateCount(), 1);
             this.hideForm();
         });
 

-        this.elem.addEventListener('page-comment-reply', event => {
+        this.elem.addEventListener('page-comment-reply', (event: CommentReplyEvent) => {

             this.setReply(event.detail.id, event.detail.element);
         });
 
             this.setReply(event.detail.id, event.detail.element);
         });
 


@@ -56,7 +83,7 @@ export class PageComments extends Component {
         }
     }
 
         }
     }
 

-    saveComment(event) {
+    protected saveComment(event): void {

         event.preventDefault();
         event.stopPropagation();
 
         event.preventDefault();
         event.stopPropagation();
 


@@ -68,10 +95,11 @@ export class PageComments extends Component {
         const reqData = {
             html: this.wysiwygEditor.getContent(),
             parent_id: this.parentId || null,
         const reqData = {
             html: this.wysiwygEditor.getContent(),
             parent_id: this.parentId || null,

+            content_reference: this.contentReference || '',

         };
 
         window.$http.post(`/comment/${this.pageId}`, reqData).then(resp => {
         };
 
         window.$http.post(`/comment/${this.pageId}`, reqData).then(resp => {

-            const newElem = htmlToDom(resp.data);
+            const newElem = htmlToDom(resp.data as string);

 
             if (reqData.parent_id) {
                 this.formContainer.after(newElem);
 
             if (reqData.parent_id) {
                 this.formContainer.after(newElem);


@@ -91,20 +119,21 @@ export class PageComments extends Component {
         loading.remove();
     }
 
         loading.remove();
     }
 

-    updateCount() {
+    protected updateCount(): void {

         const count = this.getCommentCount();
         const count = this.getCommentCount();

-        this.commentsTitle.textContent = window.$trans.choice(this.countText, count, {count});
+        this.commentsTitle.textContent = window.$trans.choice(this.countText, count);

     }
 
     }
 

-    resetForm() {
+    protected resetForm(): void {

         this.removeEditor();
         this.formInput.value = '';
         this.parentId = null;
         this.removeEditor();
         this.formInput.value = '';
         this.parentId = null;

+        this.contentReference = '';

         this.replyToRow.toggleAttribute('hidden', true);
         this.container.append(this.formContainer);
     }
 
         this.replyToRow.toggleAttribute('hidden', true);
         this.container.append(this.formContainer);
     }
 

-    showForm() {
+    protected showForm(): void {

         this.removeEditor();
         this.formContainer.toggleAttribute('hidden', false);
         this.addButtonContainer.toggleAttribute('hidden', true);
         this.removeEditor();
         this.formContainer.toggleAttribute('hidden', false);
         this.addButtonContainer.toggleAttribute('hidden', true);


@@ -112,7 +141,7 @@ export class PageComments extends Component {
         this.loadEditor();
     }
 
         this.loadEditor();
     }
 

-    hideForm() {
+    protected hideForm(): void {

         this.resetForm();
         this.formContainer.toggleAttribute('hidden', true);
         if (this.getCommentCount() > 0) {
         this.resetForm();
         this.formContainer.toggleAttribute('hidden', true);
         if (this.getCommentCount() > 0) {


@@ -123,7 +152,7 @@ export class PageComments extends Component {
         this.addButtonContainer.toggleAttribute('hidden', false);
     }
 
         this.addButtonContainer.toggleAttribute('hidden', false);
     }
 

-    loadEditor() {
+    protected loadEditor(): void {

         if (this.wysiwygEditor) {
             this.wysiwygEditor.focus();
             return;
         if (this.wysiwygEditor) {
             this.wysiwygEditor.focus();
             return;


@@ -134,42 +163,49 @@ export class PageComments extends Component {
             containerElement: this.formInput,
             darkMode: document.documentElement.classList.contains('dark-mode'),
             textDirection: this.wysiwygTextDirection,
             containerElement: this.formInput,
             darkMode: document.documentElement.classList.contains('dark-mode'),
             textDirection: this.wysiwygTextDirection,

+            drawioUrl: '',
+            pageId: 0,

             translations: {},
             translations: {},

-            translationMap: window.editor_translations,
+            translationMap: (window as Record<string, Object>).editor_translations,

         });
 
         });
 

-        window.tinymce.init(config).then(editors => {
+        (window as {tinymce: {init: (Object) => Promise<any>}}).tinymce.init(config).then(editors => {

             this.wysiwygEditor = editors[0];
             setTimeout(() => this.wysiwygEditor.focus(), 50);
         });
     }
 
             this.wysiwygEditor = editors[0];
             setTimeout(() => this.wysiwygEditor.focus(), 50);
         });
     }
 

-    removeEditor() {
+    protected removeEditor(): void {

         if (this.wysiwygEditor) {
             this.wysiwygEditor.remove();
             this.wysiwygEditor = null;
         }
     }
 
         if (this.wysiwygEditor) {
             this.wysiwygEditor.remove();
             this.wysiwygEditor = null;
         }
     }
 

-    getCommentCount() {
+    protected getCommentCount(): number {

         return this.container.querySelectorAll('[component="page-comment"]').length;
     }
 
         return this.container.querySelectorAll('[component="page-comment"]').length;
     }
 

-    setReply(commentLocalId, commentElement) {
+    protected setReply(commentLocalId, commentElement): void {

         const targetFormLocation = commentElement.closest('.comment-branch').querySelector('.comment-branch-children');
         targetFormLocation.append(this.formContainer);
         this.showForm();
         this.parentId = commentLocalId;
         this.replyToRow.toggleAttribute('hidden', false);
         const targetFormLocation = commentElement.closest('.comment-branch').querySelector('.comment-branch-children');
         targetFormLocation.append(this.formContainer);
         this.showForm();
         this.parentId = commentLocalId;
         this.replyToRow.toggleAttribute('hidden', false);

-        this.formReplyLink.textContent = this.formReplyText.replace('1234', this.parentId);
+        this.formReplyLink.textContent = this.formReplyText.replace('1234', String(this.parentId));

         this.formReplyLink.href = `#comment${this.parentId}`;
     }
 
         this.formReplyLink.href = `#comment${this.parentId}`;
     }
 

-    removeReplyTo() {
+    protected removeReplyTo(): void {

         this.parentId = null;
         this.replyToRow.toggleAttribute('hidden', true);
         this.container.append(this.formContainer);
         this.showForm();
     }
 
         this.parentId = null;
         this.replyToRow.toggleAttribute('hidden', true);
         this.container.append(this.formContainer);
         this.showForm();
     }
 

+    public startNewComment(contentReference: string): void {
+        this.removeReplyTo();
+        this.contentReference = contentReference;
+    }
+

 }
 }

diff --git a/resources/js/components/pointer.js b/resources/js/components/pointer.ts
similarity index 79%
rename from resources/js/components/pointer.js
rename to resources/js/components/pointer.ts
index 997df329a846382d66daf0fc3ac78d65b841e00d..c3883b7b55411109484e9b689ff794f69449f02f 100644 (file)
--- a/resources/js/components/pointer.js
+++ b/resources/js/components/pointer.ts
@@ -1,18 +1,33 @@
 import * as DOM from '../services/dom.ts';
 import {Component} from './component';
 import {copyTextToClipboard} from '../services/clipboard.ts';
 import * as DOM from '../services/dom.ts';
 import {Component} from './component';
 import {copyTextToClipboard} from '../services/clipboard.ts';

-import {el} from "../wysiwyg/utils/dom";

 import {cyrb53} from "../services/util";
 import {normalizeNodeTextOffsetToParent} from "../services/dom.ts";
 import {cyrb53} from "../services/util";
 import {normalizeNodeTextOffsetToParent} from "../services/dom.ts";

+import {PageComments} from "./page-comments";

 
 export class Pointer extends Component {
 
 
 export class Pointer extends Component {
 

+    protected showing: boolean = false;
+    protected isMakingSelection: boolean = false;
+    protected targetElement: HTMLElement|null = null;
+    protected targetSelectionRange: Range|null = null;
+
+    protected pointer: HTMLElement;
+    protected linkInput: HTMLInputElement;
+    protected linkButton: HTMLElement;
+    protected includeInput: HTMLInputElement;
+    protected includeButton: HTMLElement;
+    protected sectionModeButton: HTMLElement;
+    protected commentButton: HTMLElement;
+    protected modeToggles: HTMLElement[];
+    protected modeSections: HTMLElement[];
+    protected pageId: string;
+

     setup() {
     setup() {

-        this.container = this.$el;

         this.pointer = this.$refs.pointer;
         this.pointer = this.$refs.pointer;

-        this.linkInput = this.$refs.linkInput;
+        this.linkInput = this.$refs.linkInput as HTMLInputElement;

         this.linkButton = this.$refs.linkButton;
         this.linkButton = this.$refs.linkButton;

-        this.includeInput = this.$refs.includeInput;
+        this.includeInput = this.$refs.includeInput as HTMLInputElement;

         this.includeButton = this.$refs.includeButton;
         this.sectionModeButton = this.$refs.sectionModeButton;
         this.commentButton = this.$refs.commentButton;
         this.includeButton = this.$refs.includeButton;
         this.sectionModeButton = this.$refs.sectionModeButton;
         this.commentButton = this.$refs.commentButton;


@@ -20,12 +35,6 @@ export class Pointer extends Component {
         this.modeSections = this.$manyRefs.modeSection;
         this.pageId = this.$opts.pageId;
 
         this.modeSections = this.$manyRefs.modeSection;
         this.pageId = this.$opts.pageId;
 

-        // Instance variables
-        this.showing = false;
-        this.isMakingSelection = false;
-        this.targetElement = null;
-        this.targetSelectionRange = null;
-

         this.setupListeners();
     }
 
         this.setupListeners();
     }
 


@@ -36,7 +45,7 @@ export class Pointer extends Component {
 
         // Select all contents on input click
         DOM.onSelect([this.includeInput, this.linkInput], event => {
 
         // Select all contents on input click
         DOM.onSelect([this.includeInput, this.linkInput], event => {

-            event.target.select();
+            (event.target as HTMLInputElement).select();

             event.stopPropagation();
         });
 
             event.stopPropagation();
         });
 


@@ -58,9 +67,10 @@ export class Pointer extends Component {
         const pageContent = document.querySelector('.page-content');
         DOM.onEvents(pageContent, ['mouseup', 'keyup'], event => {
             event.stopPropagation();
         const pageContent = document.querySelector('.page-content');
         DOM.onEvents(pageContent, ['mouseup', 'keyup'], event => {
             event.stopPropagation();

-            const targetEl = event.target.closest('[id^="bkmrk"]');
+            const targetEl = (event.target as HTMLElement).closest('[id^="bkmrk"]');

             if (targetEl && window.getSelection().toString().length > 0) {
             if (targetEl && window.getSelection().toString().length > 0) {

-                this.showPointerAtTarget(targetEl, event.pageX, false);
+                const xPos = (event instanceof MouseEvent) ? event.pageX : 0;
+                this.showPointerAtTarget(targetEl, xPos, false);

             }
         });
 
             }
         });
 


@@ -69,12 +79,14 @@ export class Pointer extends Component {
 
         // Toggle between pointer modes
         DOM.onSelect(this.modeToggles, event => {
 
         // Toggle between pointer modes
         DOM.onSelect(this.modeToggles, event => {

+            const targetToggle = (event.target as HTMLElement);

             for (const section of this.modeSections) {
             for (const section of this.modeSections) {

-                const show = !section.contains(event.target);
+                const show = !section.contains(targetToggle);

                 section.toggleAttribute('hidden', !show);
             }
 
                 section.toggleAttribute('hidden', !show);
             }
 

-            this.modeToggles.find(b => b !== event.target).focus();
+            const otherToggle = this.modeToggles.find(b => b !== targetToggle);
+            otherToggle && otherToggle.focus();

         });
 
         if (this.commentButton) {
         });
 
         if (this.commentButton) {


@@ -83,7 +95,7 @@ export class Pointer extends Component {
     }
 
     hidePointer() {
     }
 
     hidePointer() {

-        this.pointer.style.display = null;
+        this.pointer.style.removeProperty('display');

         this.showing = false;
         this.targetElement = null;
         this.targetSelectionRange = null;
         this.showing = false;
         this.targetElement = null;
         this.targetSelectionRange = null;


@@ -97,7 +109,7 @@ export class Pointer extends Component {
      */
     showPointerAtTarget(element, xPosition, keyboardMode) {
         this.targetElement = element;
      */
     showPointerAtTarget(element, xPosition, keyboardMode) {
         this.targetElement = element;

-        this.targetSelectionRange = window.getSelection()?.getRangeAt(0);
+        this.targetSelectionRange = window.getSelection()?.getRangeAt(0) || null;

         this.updateDomForTarget(element);
 
         this.pointer.style.display = 'block';
         this.updateDomForTarget(element);
 
         this.pointer.style.display = 'block';


@@ -120,7 +132,7 @@ export class Pointer extends Component {
 
         const scrollListener = () => {
             this.hidePointer();
 
         const scrollListener = () => {
             this.hidePointer();

-            window.removeEventListener('scroll', scrollListener, {passive: true});
+            window.removeEventListener('scroll', scrollListener);

         };
 
         element.parentElement.insertBefore(this.pointer, element);
         };
 
         element.parentElement.insertBefore(this.pointer, element);


@@ -142,7 +154,7 @@ export class Pointer extends Component {
 
         // Update anchor if present
         const editAnchor = this.pointer.querySelector('#pointer-edit');
 
         // Update anchor if present
         const editAnchor = this.pointer.querySelector('#pointer-edit');

-        if (editAnchor && element) {
+        if (editAnchor instanceof HTMLAnchorElement && element) {

             const {editHref} = editAnchor.dataset;
             const elementId = element.id;
 
             const {editHref} = editAnchor.dataset;
             const elementId = element.id;
 


@@ -193,7 +205,8 @@ export class Pointer extends Component {
         }
 
         const reference = `${refId}:${hash}:${range}`;
         }
 
         const reference = `${refId}:${hash}:${range}`;

-        console.log(reference);
+        const pageComments = window.$components.first('page-comments') as PageComments;
+        pageComments.startNewComment(reference);

     }
 
 }
     }
 
 }

diff --git a/resources/js/services/dom.ts b/resources/js/services/dom.ts
index 779b4854773ba2bc1b47be2bca6bec658c2a05e1..537af816a907ad6e7a98ed4c1643fdc91ce40f8f 100644 (file)
--- a/resources/js/services/dom.ts
+++ b/resources/js/services/dom.ts
@@ -44,9 +44,11 @@ export function forEach(selector: string, callback: (el: Element) => any) {
 /**
  * Helper to listen to multiple DOM events
  */
 /**
  * Helper to listen to multiple DOM events
  */

-export function onEvents(listenerElement: Element, events: string[], callback: (e: Event) => any): void {
-    for (const eventName of events) {
-        listenerElement.addEventListener(eventName, callback);
+export function onEvents(listenerElement: Element|null, events: string[], callback: (e: Event) => any): void {
+    if (listenerElement) {
+        for (const eventName of events) {
+            listenerElement.addEventListener(eventName, callback);
+        }

     }
 }
 
     }
 }
 

diff --git a/resources/js/services/translations.ts b/resources/js/services/translations.ts
index b37dbdfb07438501a26feca177b1f5d78b6ba3e9..821c34f18f753364264003d8ddcc0e26395884a5 100644 (file)
--- a/resources/js/services/translations.ts
+++ b/resources/js/services/translations.ts
@@ -10,6 +10,7 @@ export class Translator {
      * to use. Similar format at Laravel's 'trans_choice' helper.
      */
     choice(translation: string, count: number, replacements: Record<string, string> = {}): string {
      * to use. Similar format at Laravel's 'trans_choice' helper.
      */
     choice(translation: string, count: number, replacements: Record<string, string> = {}): string {

+        replacements = Object.assign({}, replacements, {count: String(count)});

         const splitText = translation.split('|');
         const exactCountRegex = /^{([0-9]+)}/;
         const rangeRegex = /^\[([0-9]+),([0-9*]+)]/;
         const splitText = translation.split('|');
         const exactCountRegex = /^{([0-9]+)}/;
         const rangeRegex = /^\[([0-9]+),([0-9*]+)]/;