ax-comments - npm Package Compare versions

Comparing version 2.1.1 to 2.1.2

dist/comments-element.js

@@ -37,2 +37,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     #currentSortKey;
+    #connected = false;
     #dataFetched = false;
@@ -49,10 +50,9 @@ constructor() {
     connectedCallback() {
-        if (!Object.keys(this.#options).length) {
-            throw new Error('ax-comments options not set, element could not be initialized.');
+        this.#connected = true;
+        if (Object.keys(this.#options).length) {
+            this.#init();
         }
-        this.#initServices();
-        this.#initElement();
-        this.#initEmitterListeners();
     }
     disconnectedCallback() {
+        this.#connected = false;
         this.#commentViewModel.unsubscribeAll();
@@ -66,2 +66,4 @@ this.#unsubscribeEvents();
     set options(options) {
+        if (!options)
+            return;
         if (Object.keys(this.#options).length) {
@@ -73,2 +75,4 @@ console.warn(`<ax-comments> Options already set, component can not be reinitialized.`);
         Object.freeze(this.#options);
+        if (this.#connected)
+            this.#init();
     }
@@ -86,2 +90,7 @@ /**
     }
+    #init() {
+        this.#initServices();
+        this.#initElement();
+        this.#initEmitterListeners();
+    }
     #initServices() {
@@ -88,0 +97,0 @@ OptionsProvider.set(this.container, this.#options);

dist/html-util.d.ts

 export declare function getHostContainer(child: HTMLElement): HTMLElement;
-export declare function showElement(element: HTMLElement): void;
-export declare function hideElement(element: HTMLElement): void;
-export declare function toggleElementVisibility(element: HTMLElement): void;
+export declare function showElement(element: HTMLElement | null): void;
+export declare function hideElement(element: HTMLElement | null): void;
+export declare function toggleElementVisibility(element: HTMLElement | null): void;
 export declare function getElementStyle(element: HTMLElement, prop: StringProps<CSSStyleDeclaration>): string;
@@ -9,4 +9,4 @@ type StringProps<T> = ({
 })[keyof T];
-export declare function isElementVisible(element: HTMLElement): boolean;
-export declare function isElementHidden(element: HTMLElement): boolean;
+export declare function isElementVisible(element: HTMLElement | null): boolean;
+export declare function isElementHidden(element: HTMLElement | null): boolean;
 export declare function findSiblingsBySelector<E extends HTMLElement = HTMLElement>(element: Element, selectors?: string): QueryableElementArray<E>;
@@ -13,0 +13,0 @@ export declare function findParentsBySelector<E extends HTMLElement = HTMLElement>(element: HTMLElement, selectors?: string): QueryableElementArray<E>;

dist/html-util.js

@@ -10,3 +10,3 @@ const PREVIOUS_DISPLAY_VALUE = new WeakMap();
 export function showElement(element) {
-    if (getElementStyle(element, 'display') === 'none') {
+    if (element && getElementStyle(element, 'display') === 'none') {
         showElementUnconditionally(element);
@@ -19,3 +19,3 @@ }
 export function hideElement(element) {
-    if (getElementStyle(element, 'display') !== 'none') {
+    if (element && getElementStyle(element, 'display') !== 'none') {
         hideElementUnconditionally(element);
@@ -29,3 +29,6 @@ }
 export function toggleElementVisibility(element) {
-    if (getElementStyle(element, 'display') !== 'none') {
+    if (!element) {
+        return;
+    }
+    else if (getElementStyle(element, 'display') !== 'none') {
         hideElementUnconditionally(element);
@@ -42,3 +45,3 @@ }
 export function isElementVisible(element) {
-    return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
+    return !!element && !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
 }
@@ -45,0 +48,0 @@ export function isElementHidden(element) {

dist/subcomponent/comment-container-element.js

@@ -65,3 +65,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
         const commentLink = 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);
@@ -96,3 +96,3 @@ const time = document.createElement('time');
                 parentLink.textContent = parent.creatorDisplayName || parent.creatorUserId;
-                parentLink.href = `#comment-${parent.id}`;
+                parentLink.href = `${document.location.href}#comment-${parent.id}`;
                 // reply icon
@@ -280,3 +280,3 @@ const replyIcon = document.createElement('i');
     #isAllowedToDelete(commentModel) {
-        if (!commentModel.createdByCurrentUser || !this.#options.enableDeleting) {
+        if (!this.#options.enableDeleting || !commentModel.createdByCurrentUser && !this.#options.currentUserIsAdmin) {
             return false;
@@ -283,0 +283,0 @@ }

dist/subcomponent/commenting-field-element.js

@@ -165,3 +165,5 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
         // Clear attachments
-        this.querySelector('.attachments').innerHTML = '';
+        const attachments = this.querySelector('.attachments');
+        if (attachments)
+            attachments.innerHTML = '';
         // Toggle save button
@@ -168,0 +170,0 @@ this.#toggleSaveButton();

package.json

 {
   "name": "ax-comments",
   "title": "ax-comments",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "author": {
@@ -6,0 +6,0 @@ "name": "Adrian Z."

src/comments-element.ts

@@ -36,2 +36,3 @@ import {WebComponent} from './web-component.js';
     #currentSortKey!: SortKey;
+    #connected: boolean = false;
     #dataFetched: boolean = false;
@@ -51,11 +52,10 @@
     connectedCallback(): void {
-        if (!Object.keys(this.#options).length) {
-            throw new Error('ax-comments options not set, element could not be initialized.');
+        this.#connected = true;
+        if (Object.keys(this.#options).length) {
+            this.#init();
         }
-        this.#initServices();
-        this.#initElement();
-        this.#initEmitterListeners();
     }
 
     disconnectedCallback(): void {
+        this.#connected = false;
         this.#commentViewModel.unsubscribeAll();
@@ -71,2 +71,3 @@ this.#unsubscribeEvents();
     set options(options: CommentsOptions) {
+        if (!options) return;
         if (Object.keys(this.#options).length) {
@@ -78,2 +79,3 @@ console.warn(`<ax-comments> Options already set, component can not be reinitialized.`);
         Object.freeze(this.#options);
+        if (this.#connected) this.#init();
     }
@@ -93,2 +95,8 @@
 
+    #init(): void {
+        this.#initServices();
+        this.#initElement();
+        this.#initEmitterListeners();
+    }
+
     #initServices(): void {
@@ -313,3 +321,3 @@ OptionsProvider.set(this.container, this.#options);
         hideElement(mainControlRow);
-        hideElement(mainCommentingField.querySelector<HTMLElement>('.close')!);
+        hideElement(mainCommentingField.querySelector<HTMLElement>('.close'));
 
@@ -316,0 +324,0 @@ // Navigation bar

src/html-util.ts

@@ -11,4 +11,4 @@ const PREVIOUS_DISPLAY_VALUE: WeakMap<HTMLElement, string> = new WeakMap();
 
-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);
@@ -22,4 +22,4 @@ }
 
-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);
@@ -34,4 +34,6 @@ }
 
-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);
@@ -50,7 +52,7 @@ } else {
 // 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);
@@ -57,0 +59,0 @@ }

src/subcomponent/comment-container-element.ts

@@ -80,3 +80,3 @@ import {ProfilePictureFactory} from './profile-picture-factory.js';
         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);
@@ -116,3 +116,3 @@ const time: HTMLTimeElement = document.createElement('time');
                 parentLink.textContent = parent.creatorDisplayName || parent.creatorUserId;
-                parentLink.href = `#comment-${parent.id}`;
+                parentLink.href = `${document.location.href}#comment-${parent.id}`;
 
@@ -334,3 +334,3 @@ // reply icon
     #isAllowedToDelete(commentModel: CommentModelEnriched): boolean {
-        if (!commentModel.createdByCurrentUser || !this.#options.enableDeleting) {
+        if (!this.#options.enableDeleting || !commentModel.createdByCurrentUser && !this.#options.currentUserIsAdmin) {
             return false;
@@ -337,0 +337,0 @@ } else {

src/subcomponent/commenting-field-element.ts

@@ -184,4 +184,4 @@ import {ProfilePictureFactory} from './profile-picture-factory.js';
             .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();
@@ -201,3 +201,4 @@ };
         // Clear attachments
-        this.querySelector('.attachments')!.innerHTML = '';
+        const attachments: HTMLElement | null = this.querySelector('.attachments');
+        if (attachments) attachments.innerHTML = '';
 
@@ -212,3 +213,3 @@ // Toggle save button
         hideElement(closeButton);
-        showElement(mainTextarea.parentElement!.querySelector('.upload.inline-button')!);
+        showElement(mainTextarea.parentElement!.querySelector('.upload.inline-button'));
         mainTextarea.blur();
@@ -215,0 +216,0 @@ this.onClosed();

src/subcomponent/navigation-element.ts

@@ -131,3 +131,3 @@ import {CommentsOptions, SortKey} from '../api.js';
             e.stopPropagation();
-            showElement(this.querySelector<HTMLElement>('menu.dropdown')!);
+            showElement(this.querySelector<HTMLElement>('menu.dropdown'));
             this.#dropdownShown = true;
@@ -139,3 +139,3 @@ }
         if (this.#dropdownShown) {
-            hideElement(this.querySelector<HTMLElement>('menu.dropdown')!);
+            hideElement(this.querySelector<HTMLElement>('menu.dropdown'));
             this.#dropdownShown = false;
@@ -142,0 +142,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

859320

increased by0.23%

Lines of code

13181

increased by0.27%

No dependency changes