Comments: Added archive endpoints, messages, Js actions and tests

[bookstack] / resources / js / components / page-comment.ts

diff --git a/resources/js/components/page-comment.ts b/resources/js/components/page-comment.ts
index 24964bf5cba20697085b535e83921427057be77a..d2cbd21d1db89810fbd95255b8efd78b6ee3f9fa 100644 (file)
--- a/resources/js/components/page-comment.ts
+++ b/resources/js/components/page-comment.ts
@@ -1,28 +1,14 @@
 import {Component} from './component';
 import {Component} from './component';

-import {findTargetNodeAndOffset, getLoading, hashElement, htmlToDom} from '../services/dom.ts';
+import {getLoading, htmlToDom} from '../services/dom.ts';

 import {buildForInput} from '../wysiwyg-tinymce/config';
 import {buildForInput} from '../wysiwyg-tinymce/config';

-import {el} from "../wysiwyg/utils/dom";
-
-import commentIcon from "@icons/comment.svg"
-import closeIcon from "@icons/close.svg"
-import {PageDisplay} from "./page-display";
-
-/**
- * Track the close function for the current open marker so it can be closed
- * when another is opened so we only show one marker comment thread at one time.
- */
-let openMarkerClose: Function|null = null;

 
 export class PageComment extends Component {
 
     protected commentId: string;
     protected commentLocalId: string;
 
 export class PageComment extends Component {
 
     protected commentId: string;
     protected commentLocalId: string;

-    protected commentContentRef: string;

     protected deletedText: string;
     protected updatedText: string;
     protected deletedText: string;
     protected updatedText: string;

-    protected viewCommentText: string;
-    protected jumpToThreadText: string;
-    protected closeText: string;
+    protected archiveText: string;

 
     protected wysiwygEditor: any = null;
     protected wysiwygLanguage: string;
 
     protected wysiwygEditor: any = null;
     protected wysiwygLanguage: string;


@@ -35,19 +21,16 @@ export class PageComment extends Component {
     protected editButton: HTMLElement;
     protected deleteButton: HTMLElement;
     protected replyButton: HTMLElement;
     protected editButton: HTMLElement;
     protected deleteButton: HTMLElement;
     protected replyButton: HTMLElement;

+    protected archiveButton: HTMLElement;

     protected input: HTMLInputElement;
     protected input: HTMLInputElement;

-    protected contentRefLink: HTMLLinkElement|null;

 
     setup() {
         // Options
         this.commentId = this.$opts.commentId;
         this.commentLocalId = this.$opts.commentLocalId;
 
     setup() {
         // Options
         this.commentId = this.$opts.commentId;
         this.commentLocalId = this.$opts.commentLocalId;

-        this.commentContentRef = this.$opts.commentContentRef;

         this.deletedText = this.$opts.deletedText;
         this.deletedText = this.$opts.deletedText;

-        this.updatedText = this.$opts.updatedText;
-        this.viewCommentText = this.$opts.viewCommentText;
-        this.jumpToThreadText = this.$opts.jumpToThreadText;
-        this.closeText = this.$opts.closeText;
+        this.deletedText = this.$opts.deletedText;
+        this.archiveText = this.$opts.archiveText;

 
         // Editor reference and text options
         this.wysiwygLanguage = this.$opts.wysiwygLanguage;
 
         // Editor reference and text options
         this.wysiwygLanguage = this.$opts.wysiwygLanguage;


@@ -61,11 +44,10 @@ export class PageComment extends Component {
         this.editButton = this.$refs.editButton;
         this.deleteButton = this.$refs.deleteButton;
         this.replyButton = this.$refs.replyButton;
         this.editButton = this.$refs.editButton;
         this.deleteButton = this.$refs.deleteButton;
         this.replyButton = this.$refs.replyButton;

+        this.archiveButton = this.$refs.archiveButton;

         this.input = this.$refs.input as HTMLInputElement;
         this.input = this.$refs.input as HTMLInputElement;

-        this.contentRefLink = (this.$refs.contentRef || null) as HTMLLinkElement|null;

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

-        this.positionForReference();

     }
 
     protected setupListeners(): void {
     }
 
     protected setupListeners(): void {


@@ -85,6 +67,10 @@ export class PageComment extends Component {
         if (this.deleteButton) {
             this.deleteButton.addEventListener('click', this.delete.bind(this));
         }
         if (this.deleteButton) {
             this.deleteButton.addEventListener('click', this.delete.bind(this));
         }

+
+        if (this.archiveButton) {
+            this.archiveButton.addEventListener('click', this.archive.bind(this));
+        }

     }
 
     protected toggleEditMode(show: boolean) : void {
     }
 
     protected toggleEditMode(show: boolean) : void {


@@ -148,135 +134,19 @@ export class PageComment extends Component {
         window.$events.success(this.deletedText);
     }
 
         window.$events.success(this.deletedText);
     }
 

+    protected async archive(): Promise<void> {
+        this.showLoading();
+        const isArchived = this.archiveButton.dataset.isArchived === 'true';
+
+        await window.$http.put(`/comment/${this.commentId}/${isArchived ? 'unarchive' : 'archive'}`);
+        this.$emit('archive');
+        window.$events.success(this.archiveText);
+    }
+

     protected showLoading(): HTMLElement {
         const loading = getLoading();
         loading.classList.add('px-l');
         this.container.append(loading);
         return loading;
     }
     protected showLoading(): HTMLElement {
         const loading = getLoading();
         loading.classList.add('px-l');
         this.container.append(loading);
         return loading;
     }

-
-    protected positionForReference() {
-        if (!this.commentContentRef || !this.contentRefLink) {
-            return;
-        }
-
-        const [refId, refHash, refRange] = this.commentContentRef.split(':');
-        const refEl = document.getElementById(refId);
-        if (!refEl) {
-            this.contentRefLink.classList.add('outdated', 'missing');
-            return;
-        }
-
-        const actualHash = hashElement(refEl);
-        if (actualHash !== refHash) {
-            this.contentRefLink.classList.add('outdated');
-        }
-
-        const refElBounds = refEl.getBoundingClientRect();
-        let bounds = refElBounds;
-        const [rangeStart, rangeEnd] = refRange.split('-');
-        if (rangeStart && rangeEnd) {
-            const range = new Range();
-            const relStart = findTargetNodeAndOffset(refEl, Number(rangeStart));
-            const relEnd = findTargetNodeAndOffset(refEl, Number(rangeEnd));
-            if (relStart && relEnd) {
-                range.setStart(relStart.node, relStart.offset);
-                range.setEnd(relEnd.node, relEnd.offset);
-                bounds = range.getBoundingClientRect();
-            }
-        }
-
-        const relLeft = bounds.left - refElBounds.left;
-        const relTop = bounds.top - refElBounds.top;
-
-        const marker = el('button', {
-            type: 'button',
-            class: 'content-comment-marker',
-            title: this.viewCommentText,
-        });
-        marker.innerHTML = <string>commentIcon;
-        marker.addEventListener('click', event => {
-            this.showCommentAtMarker(marker);
-        });
-
-        const markerWrap = el('div', {
-            class: 'content-comment-highlight',
-            style: `left: ${relLeft}px; top: ${relTop}px; width: ${bounds.width}px; height: ${bounds.height}px;`
-        }, [marker]);
-
-        refEl.style.position = 'relative';
-        refEl.append(markerWrap);
-
-        this.contentRefLink.href = `#${refEl.id}`;
-        this.contentRefLink.addEventListener('click', (event: MouseEvent) => {
-            const pageDisplayComponent = window.$components.get('page-display')[0] as PageDisplay;
-            event.preventDefault();
-            pageDisplayComponent.goToText(refId);
-        });
-    }
-
-    protected showCommentAtMarker(marker: HTMLElement): void {
-        // Hide marker and close existing marker windows
-        if (openMarkerClose) {
-            openMarkerClose();
-        }
-        marker.hidden = true;
-
-        // Build comment window
-        const readClone = (this.container.closest('.comment-branch') as HTMLElement).cloneNode(true) as HTMLElement;
-        const toRemove = readClone.querySelectorAll('.actions, form');
-        for (const el of toRemove) {
-            el.remove();
-        }
-
-        const close = el('button', {type: 'button', title: this.closeText});
-        close.innerHTML = (closeIcon as string);
-        const jump = el('button', {type: 'button', 'data-action': 'jump'}, [this.jumpToThreadText]);
-
-        const commentWindow = el('div', {
-            class: 'content-comment-window'
-        }, [
-            el('div', {
-                class: 'content-comment-window-actions',
-            }, [jump, close]),
-            el('div', {
-                class: 'content-comment-window-content comment-container-compact comment-container-super-compact',
-            }, [readClone]),
-        ]);
-
-        marker.parentElement?.append(commentWindow);
-
-        // Handle interaction within window
-        const closeAction = () => {
-            commentWindow.remove();
-            marker.hidden = false;
-            window.removeEventListener('click', windowCloseAction);
-            openMarkerClose = null;
-        };
-
-        const windowCloseAction = (event: MouseEvent) => {
-            if (!(marker.parentElement as HTMLElement).contains(event.target as HTMLElement)) {
-                closeAction();
-            }
-        };
-        window.addEventListener('click', windowCloseAction);
-
-        openMarkerClose = closeAction;
-        close.addEventListener('click', closeAction.bind(this));
-        jump.addEventListener('click', () => {
-            closeAction();
-            this.container.scrollIntoView({behavior: 'smooth'});
-            const highlightTarget = this.container.querySelector('.header') as HTMLElement;
-            highlightTarget.classList.add('anim-highlight');
-            highlightTarget.addEventListener('animationend', () => highlightTarget.classList.remove('anim-highlight'))
-        });
-
-        // Position window within bounds
-        const commentWindowBounds = commentWindow.getBoundingClientRect();
-        const contentBounds = document.querySelector('.page-content')?.getBoundingClientRect();
-        if (contentBounds && commentWindowBounds.right > contentBounds.right) {
-            const diff = commentWindowBounds.right - contentBounds.right;
-            commentWindow.style.left = `-${diff}px`;
-        }
-    }

 }
 }