Fix initialization in SPA frameworks, fix comment URLs

adanski · Feb 1, 2023 · abce286 · abce286
1 parent a3c2fc6
commit abce286
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 18 deletions.
diff --git a/src/comments-element.ts b/src/comments-element.ts
@@ -48,7 +48,7 @@ export class CommentsElement extends HTMLElement implements WebComponent {
 
     connectedCallback(): void {
         if (!Object.keys(this.#options).length) {
-            throw new Error('ax-comments options not set, element could not be initialized.');
+            return;
         }
         this.#initServices();
         this.#initElement();
@@ -66,12 +66,14 @@ export class CommentsElement extends HTMLElement implements WebComponent {
     }
 
     set options(options: CommentsOptions) {
+        if (!options) return;
         if (Object.keys(this.#options).length) {
             console.warn(`<ax-comments> Options already set, component can not be reinitialized.`);
             return;
         }
         Object.assign(this.#options, getDefaultOptions(), options);
         Object.freeze(this.#options);
+        this.connectedCallback();
     }
 
     /**
@@ -305,7 +307,7 @@ export class CommentsElement extends HTMLElement implements WebComponent {
         // Hide control row and close button
         const mainControlRow: HTMLElement = mainCommentingField.querySelector('.control-row')!;
         hideElement(mainControlRow);
-        hideElement(mainCommentingField.querySelector<HTMLElement>('.close')!);
+        hideElement(mainCommentingField.querySelector<HTMLElement>('.close'));
 
         // Navigation bar
         this.container.append(NavigationElement.create({

diff --git a/src/html-util.ts b/src/html-util.ts
@@ -8,8 +8,8 @@ export function getHostContainer(child: HTMLElement): HTMLElement {
     return container;
 }
 
-export function showElement(element: HTMLElement): void {
-    if (getElementStyle(element, 'display') === 'none') {
+export function showElement(element: HTMLElement | null): void {
+    if (element && getElementStyle(element, 'display') === 'none') {
         showElementUnconditionally(element);
     }
 }
@@ -18,8 +18,8 @@ function showElementUnconditionally(element: HTMLElement): void {
     element.style.display = PREVIOUS_DISPLAY_VALUE.get(element) || 'block';
 }
 
-export function hideElement(element: HTMLElement): void {
-    if (getElementStyle(element, 'display') !== 'none') {
+export function hideElement(element: HTMLElement | null): void {
+    if (element && getElementStyle(element, 'display') !== 'none') {
         hideElementUnconditionally(element);
     }
 }
@@ -29,8 +29,10 @@ function hideElementUnconditionally(element: HTMLElement): void {
     element.style.display = 'none';
 }
 
-export function toggleElementVisibility(element: HTMLElement): void {
-    if (getElementStyle(element, 'display') !== 'none') {
+export function toggleElementVisibility(element: HTMLElement | null): void {
+    if (!element) {
+        return;
+    } else if (getElementStyle(element, 'display') !== 'none') {
         hideElementUnconditionally(element);
     } else {
         showElementUnconditionally(element);
@@ -44,11 +46,11 @@ export function getElementStyle(element: HTMLElement, prop: StringProps<CSSStyle
 type StringProps<T> = ({ [P in keyof T]: T[P] extends string ? P : never })[keyof T];
 
 // Inspired by jQuery
-export function isElementVisible(element: HTMLElement): boolean {
-    return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
+export function isElementVisible(element: HTMLElement | null): boolean {
+    return !!element && !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
 }
 
-export function isElementHidden(element: HTMLElement): boolean {
+export function isElementHidden(element: HTMLElement | null): boolean {
     return !isElementVisible(element);
 }
 

diff --git a/src/subcomponent/comment-container-element.ts b/src/subcomponent/comment-container-element.ts
@@ -77,7 +77,7 @@ export class CommentContainerElement extends HTMLElement implements WebComponent
 
         // Time
         const commentLink: HTMLAnchorElement = document.createElement('a');
-        commentLink.href = `#comment-${this.commentModel.id}`;
+        commentLink.href = `${document.location.href}#comment-${this.commentModel.id}`;
         commentLink.textContent = this.#options.timeFormatter(this.commentModel.createdAt);
         const time: HTMLTimeElement = document.createElement('time');
         time.setAttribute('title', this.commentModel.createdAt.toLocaleString());
@@ -112,7 +112,7 @@ export class CommentContainerElement extends HTMLElement implements WebComponent
                 replyTo.setAttribute('data-user-id', parent.creatorUserId);
                 const parentLink: HTMLAnchorElement = document.createElement('a');
                 parentLink.textContent = parent.creatorDisplayName || parent.creatorUserId;
-                parentLink.href = `#comment-${parent.id}`;
+                parentLink.href = `${document.location.href}#comment-${parent.id}`;
 
                 // reply icon
                 const replyIcon: HTMLElement = document.createElement('i');

diff --git a/src/subcomponent/commenting-field-element.ts b/src/subcomponent/commenting-field-element.ts
@@ -181,8 +181,8 @@ export class CommentingFieldElement extends HTMLElement implements WebComponent
         const mainTextarea: HTMLElement = e.currentTarget as HTMLElement;
         findSiblingsBySelector(mainTextarea, '.control-row')
             .forEach(showElement)
-        showElement(mainTextarea.parentElement!.querySelector('.close')!);
-        hideElement(mainTextarea.parentElement!.querySelector('.upload.inline-button')!);
+        showElement(mainTextarea.parentElement!.querySelector('.close'));
+        hideElement(mainTextarea.parentElement!.querySelector('.upload.inline-button'));
         mainTextarea.focus();
     };
 
@@ -207,7 +207,7 @@ export class CommentingFieldElement extends HTMLElement implements WebComponent
 
         hideElement(mainControlRow);
         hideElement(closeButton);
-        showElement(mainTextarea.parentElement!.querySelector('.upload.inline-button')!);
+        showElement(mainTextarea.parentElement!.querySelector('.upload.inline-button'));
         mainTextarea.blur();
         this.onClosed();
     };

diff --git a/src/subcomponent/navigation-element.ts b/src/subcomponent/navigation-element.ts
@@ -128,14 +128,14 @@ export class NavigationElement extends HTMLElement implements WebComponent {
     #showMenuDropdown: (e: UIEvent) => void = e => {
         if (!this.#dropdownShown) {
             e.stopPropagation();
-            showElement(this.querySelector<HTMLElement>('menu.dropdown')!);
+            showElement(this.querySelector<HTMLElement>('menu.dropdown'));
             this.#dropdownShown = true;
         }
     };
 
     #hideMenuDropdown: (e: UIEvent) => void = e => {
         if (this.#dropdownShown) {
-            hideElement(this.querySelector<HTMLElement>('menu.dropdown')!);
+            hideElement(this.querySelector<HTMLElement>('menu.dropdown'));
             this.#dropdownShown = false;
         }
     };