Skip to content

Commit add238f

Browse files
ssddanbrownssddanbrown
committed
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.
1 parent 8d159f7 commit add238f

File tree

4 files changed

+98
-46
lines changed

4 files changed

+98
-46
lines changed

resources/js/components/page-comments.js renamed to resources/js/components/page-comments.ts

Lines changed: 59 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,38 @@ import {Component} from './component';
22
import {getLoading, htmlToDom} from '../services/dom.ts';
33
import {buildForInput} from '../wysiwyg-tinymce/config';
44

5+
export interface CommentReplyEvent extends Event {
6+
detail: {
7+
id: string; // ID of comment being replied to
8+
element: HTMLElement; // Container for comment replied to
9+
}
10+
}
11+
512
export class PageComments extends Component {
613

14+
private elem: HTMLElement;
15+
private pageId: number;
16+
private container: HTMLElement;
17+
private commentCountBar: HTMLElement;
18+
private commentsTitle: HTMLElement;
19+
private addButtonContainer: HTMLElement;
20+
private replyToRow: HTMLElement;
21+
private formContainer: HTMLElement;
22+
private form: HTMLFormElement;
23+
private formInput: HTMLInputElement;
24+
private formReplyLink: HTMLAnchorElement;
25+
private addCommentButton: HTMLElement;
26+
private hideFormButton: HTMLElement;
27+
private removeReplyToButton: HTMLElement;
28+
private wysiwygLanguage: string;
29+
private wysiwygTextDirection: string;
30+
private wysiwygEditor: any = null;
31+
private createdText: string;
32+
private countText: string;
33+
private parentId: number | null = null;
34+
private contentReference: string = '';
35+
private formReplyText: string = '';
36+
737
setup() {
838
this.elem = this.$el;
939
this.pageId = Number(this.$opts.pageId);
@@ -15,36 +45,33 @@ export class PageComments extends Component {
1545
this.addButtonContainer = this.$refs.addButtonContainer;
1646
this.replyToRow = this.$refs.replyToRow;
1747
this.formContainer = this.$refs.formContainer;
18-
this.form = this.$refs.form;
19-
this.formInput = this.$refs.formInput;
20-
this.formReplyLink = this.$refs.formReplyLink;
48+
this.form = this.$refs.form as HTMLFormElement;
49+
this.formInput = this.$refs.formInput as HTMLInputElement;
50+
this.formReplyLink = this.$refs.formReplyLink as HTMLAnchorElement;
2151
this.addCommentButton = this.$refs.addCommentButton;
2252
this.hideFormButton = this.$refs.hideFormButton;
2353
this.removeReplyToButton = this.$refs.removeReplyToButton;
2454

2555
// WYSIWYG options
2656
this.wysiwygLanguage = this.$opts.wysiwygLanguage;
2757
this.wysiwygTextDirection = this.$opts.wysiwygTextDirection;
28-
this.wysiwygEditor = null;
2958

3059
// Translations
3160
this.createdText = this.$opts.createdText;
3261
this.countText = this.$opts.countText;
3362

34-
// Internal State
35-
this.parentId = null;
3663
this.formReplyText = this.formReplyLink?.textContent || '';
3764

3865
this.setupListeners();
3966
}
4067

41-
setupListeners() {
68+
protected setupListeners(): void {
4269
this.elem.addEventListener('page-comment-delete', () => {
4370
setTimeout(() => this.updateCount(), 1);
4471
this.hideForm();
4572
});
4673

47-
this.elem.addEventListener('page-comment-reply', event => {
74+
this.elem.addEventListener('page-comment-reply', (event: CommentReplyEvent) => {
4875
this.setReply(event.detail.id, event.detail.element);
4976
});
5077

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

59-
saveComment(event) {
86+
protected saveComment(event): void {
6087
event.preventDefault();
6188
event.stopPropagation();
6289

@@ -68,10 +95,11 @@ export class PageComments extends Component {
6895
const reqData = {
6996
html: this.wysiwygEditor.getContent(),
7097
parent_id: this.parentId || null,
98+
content_reference: this.contentReference || '',
7199
};
72100

73101
window.$http.post(`/comment/${this.pageId}`, reqData).then(resp => {
74-
const newElem = htmlToDom(resp.data);
102+
const newElem = htmlToDom(resp.data as string);
75103

76104
if (reqData.parent_id) {
77105
this.formContainer.after(newElem);
@@ -91,28 +119,29 @@ export class PageComments extends Component {
91119
loading.remove();
92120
}
93121

94-
updateCount() {
122+
protected updateCount(): void {
95123
const count = this.getCommentCount();
96-
this.commentsTitle.textContent = window.$trans.choice(this.countText, count, {count});
124+
this.commentsTitle.textContent = window.$trans.choice(this.countText, count);
97125
}
98126

99-
resetForm() {
127+
protected resetForm(): void {
100128
this.removeEditor();
101129
this.formInput.value = '';
102130
this.parentId = null;
131+
this.contentReference = '';
103132
this.replyToRow.toggleAttribute('hidden', true);
104133
this.container.append(this.formContainer);
105134
}
106135

107-
showForm() {
136+
protected showForm(): void {
108137
this.removeEditor();
109138
this.formContainer.toggleAttribute('hidden', false);
110139
this.addButtonContainer.toggleAttribute('hidden', true);
111140
this.formContainer.scrollIntoView({behavior: 'smooth', block: 'nearest'});
112141
this.loadEditor();
113142
}
114143

115-
hideForm() {
144+
protected hideForm(): void {
116145
this.resetForm();
117146
this.formContainer.toggleAttribute('hidden', true);
118147
if (this.getCommentCount() > 0) {
@@ -123,7 +152,7 @@ export class PageComments extends Component {
123152
this.addButtonContainer.toggleAttribute('hidden', false);
124153
}
125154

126-
loadEditor() {
155+
protected loadEditor(): void {
127156
if (this.wysiwygEditor) {
128157
this.wysiwygEditor.focus();
129158
return;
@@ -134,42 +163,49 @@ export class PageComments extends Component {
134163
containerElement: this.formInput,
135164
darkMode: document.documentElement.classList.contains('dark-mode'),
136165
textDirection: this.wysiwygTextDirection,
166+
drawioUrl: '',
167+
pageId: 0,
137168
translations: {},
138-
translationMap: window.editor_translations,
169+
translationMap: (window as Record<string, Object>).editor_translations,
139170
});
140171

141-
window.tinymce.init(config).then(editors => {
172+
(window as {tinymce: {init: (Object) => Promise<any>}}).tinymce.init(config).then(editors => {
142173
this.wysiwygEditor = editors[0];
143174
setTimeout(() => this.wysiwygEditor.focus(), 50);
144175
});
145176
}
146177

147-
removeEditor() {
178+
protected removeEditor(): void {
148179
if (this.wysiwygEditor) {
149180
this.wysiwygEditor.remove();
150181
this.wysiwygEditor = null;
151182
}
152183
}
153184

154-
getCommentCount() {
185+
protected getCommentCount(): number {
155186
return this.container.querySelectorAll('[component="page-comment"]').length;
156187
}
157188

158-
setReply(commentLocalId, commentElement) {
189+
protected setReply(commentLocalId, commentElement): void {
159190
const targetFormLocation = commentElement.closest('.comment-branch').querySelector('.comment-branch-children');
160191
targetFormLocation.append(this.formContainer);
161192
this.showForm();
162193
this.parentId = commentLocalId;
163194
this.replyToRow.toggleAttribute('hidden', false);
164-
this.formReplyLink.textContent = this.formReplyText.replace('1234', this.parentId);
195+
this.formReplyLink.textContent = this.formReplyText.replace('1234', String(this.parentId));
165196
this.formReplyLink.href = `#comment${this.parentId}`;
166197
}
167198

168-
removeReplyTo() {
199+
protected removeReplyTo(): void {
169200
this.parentId = null;
170201
this.replyToRow.toggleAttribute('hidden', true);
171202
this.container.append(this.formContainer);
172203
this.showForm();
173204
}
174205

206+
public startNewComment(contentReference: string): void {
207+
this.removeReplyTo();
208+
this.contentReference = contentReference;
209+
}
210+
175211
}

resources/js/components/pointer.js renamed to resources/js/components/pointer.ts

Lines changed: 33 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,40 @@
11
import * as DOM from '../services/dom.ts';
22
import {Component} from './component';
33
import {copyTextToClipboard} from '../services/clipboard.ts';
4-
import {el} from "../wysiwyg/utils/dom";
54
import {cyrb53} from "../services/util";
65
import {normalizeNodeTextOffsetToParent} from "../services/dom.ts";
6+
import {PageComments} from "./page-comments";
77

88
export class Pointer extends Component {
99

10+
protected showing: boolean = false;
11+
protected isMakingSelection: boolean = false;
12+
protected targetElement: HTMLElement|null = null;
13+
protected targetSelectionRange: Range|null = null;
14+
15+
protected pointer: HTMLElement;
16+
protected linkInput: HTMLInputElement;
17+
protected linkButton: HTMLElement;
18+
protected includeInput: HTMLInputElement;
19+
protected includeButton: HTMLElement;
20+
protected sectionModeButton: HTMLElement;
21+
protected commentButton: HTMLElement;
22+
protected modeToggles: HTMLElement[];
23+
protected modeSections: HTMLElement[];
24+
protected pageId: string;
25+
1026
setup() {
11-
this.container = this.$el;
1227
this.pointer = this.$refs.pointer;
13-
this.linkInput = this.$refs.linkInput;
28+
this.linkInput = this.$refs.linkInput as HTMLInputElement;
1429
this.linkButton = this.$refs.linkButton;
15-
this.includeInput = this.$refs.includeInput;
30+
this.includeInput = this.$refs.includeInput as HTMLInputElement;
1631
this.includeButton = this.$refs.includeButton;
1732
this.sectionModeButton = this.$refs.sectionModeButton;
1833
this.commentButton = this.$refs.commentButton;
1934
this.modeToggles = this.$manyRefs.modeToggle;
2035
this.modeSections = this.$manyRefs.modeSection;
2136
this.pageId = this.$opts.pageId;
2237

23-
// Instance variables
24-
this.showing = false;
25-
this.isMakingSelection = false;
26-
this.targetElement = null;
27-
this.targetSelectionRange = null;
28-
2938
this.setupListeners();
3039
}
3140

@@ -36,7 +45,7 @@ export class Pointer extends Component {
3645

3746
// Select all contents on input click
3847
DOM.onSelect([this.includeInput, this.linkInput], event => {
39-
event.target.select();
48+
(event.target as HTMLInputElement).select();
4049
event.stopPropagation();
4150
});
4251

@@ -58,9 +67,10 @@ export class Pointer extends Component {
5867
const pageContent = document.querySelector('.page-content');
5968
DOM.onEvents(pageContent, ['mouseup', 'keyup'], event => {
6069
event.stopPropagation();
61-
const targetEl = event.target.closest('[id^="bkmrk"]');
70+
const targetEl = (event.target as HTMLElement).closest('[id^="bkmrk"]');
6271
if (targetEl && window.getSelection().toString().length > 0) {
63-
this.showPointerAtTarget(targetEl, event.pageX, false);
72+
const xPos = (event instanceof MouseEvent) ? event.pageX : 0;
73+
this.showPointerAtTarget(targetEl, xPos, false);
6474
}
6575
});
6676

@@ -69,12 +79,14 @@ export class Pointer extends Component {
6979

7080
// Toggle between pointer modes
7181
DOM.onSelect(this.modeToggles, event => {
82+
const targetToggle = (event.target as HTMLElement);
7283
for (const section of this.modeSections) {
73-
const show = !section.contains(event.target);
84+
const show = !section.contains(targetToggle);
7485
section.toggleAttribute('hidden', !show);
7586
}
7687

77-
this.modeToggles.find(b => b !== event.target).focus();
88+
const otherToggle = this.modeToggles.find(b => b !== targetToggle);
89+
otherToggle && otherToggle.focus();
7890
});
7991

8092
if (this.commentButton) {
@@ -83,7 +95,7 @@ export class Pointer extends Component {
8395
}
8496

8597
hidePointer() {
86-
this.pointer.style.display = null;
98+
this.pointer.style.removeProperty('display');
8799
this.showing = false;
88100
this.targetElement = null;
89101
this.targetSelectionRange = null;
@@ -97,7 +109,7 @@ export class Pointer extends Component {
97109
*/
98110
showPointerAtTarget(element, xPosition, keyboardMode) {
99111
this.targetElement = element;
100-
this.targetSelectionRange = window.getSelection()?.getRangeAt(0);
112+
this.targetSelectionRange = window.getSelection()?.getRangeAt(0) || null;
101113
this.updateDomForTarget(element);
102114

103115
this.pointer.style.display = 'block';
@@ -120,7 +132,7 @@ export class Pointer extends Component {
120132

121133
const scrollListener = () => {
122134
this.hidePointer();
123-
window.removeEventListener('scroll', scrollListener, {passive: true});
135+
window.removeEventListener('scroll', scrollListener);
124136
};
125137

126138
element.parentElement.insertBefore(this.pointer, element);
@@ -142,7 +154,7 @@ export class Pointer extends Component {
142154

143155
// Update anchor if present
144156
const editAnchor = this.pointer.querySelector('#pointer-edit');
145-
if (editAnchor && element) {
157+
if (editAnchor instanceof HTMLAnchorElement && element) {
146158
const {editHref} = editAnchor.dataset;
147159
const elementId = element.id;
148160

@@ -193,7 +205,8 @@ export class Pointer extends Component {
193205
}
194206

195207
const reference = `${refId}:${hash}:${range}`;
196-
console.log(reference);
208+
const pageComments = window.$components.first('page-comments') as PageComments;
209+
pageComments.startNewComment(reference);
197210
}
198211

199212
}

‎resources/js/services/dom.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,11 @@ export function forEach(selector: string, callback: (el: Element) => any) {
4444
/**
4545
* Helper to listen to multiple DOM events
4646
*/
47-
export function onEvents(listenerElement: Element, events: string[], callback: (e: Event) => any): void {
48-
for (const eventName of events) {
49-
listenerElement.addEventListener(eventName, callback);
47+
export function onEvents(listenerElement: Element|null, events: string[], callback: (e: Event) => any): void {
48+
if (listenerElement) {
49+
for (const eventName of events) {
50+
listenerElement.addEventListener(eventName, callback);
51+
}
5052
}
5153
}
5254

‎resources/js/services/translations.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export class Translator {
1010
* to use. Similar format at Laravel's 'trans_choice' helper.
1111
*/
1212
choice(translation: string, count: number, replacements: Record<string, string> = {}): string {
13+
replacements = Object.assign({}, replacements, {count: String(count)});
1314
const splitText = translation.split('|');
1415
const exactCountRegex = /^{([0-9]+)}/;
1516
const rangeRegex = /^\[([0-9]+),([0-9*]+)]/;

0 commit comments

Comments
 (0)