diff --git a/resources/js/components/page-comment-reference.ts b/resources/js/components/page-comment-reference.ts index 72e3dbe48..edf24354b 100644 --- a/resources/js/components/page-comment-reference.ts +++ b/resources/js/components/page-comment-reference.ts @@ -3,7 +3,7 @@ import {findTargetNodeAndOffset, hashElement} from "../services/dom"; import {el} from "../wysiwyg/utils/dom"; import commentIcon from "@icons/comment.svg"; import closeIcon from "@icons/close.svg"; -import {scrollAndHighlightElement} from "../services/util"; +import {debounce, scrollAndHighlightElement} from "../services/util"; /** * Track the close function for the current open marker so it can be closed @@ -29,7 +29,7 @@ export class PageCommentReference extends Component { // Show within page display area if seen const pageContentArea = document.querySelector('.page-content'); - if (pageContentArea instanceof HTMLElement) { + if (pageContentArea instanceof HTMLElement && this.link.checkVisibility()) { this.updateMarker(pageContentArea); } @@ -43,6 +43,21 @@ export class PageCommentReference extends Component { this.hideMarker(); } }); + + // Handle comments tab changes to hide/show markers & indicators + window.addEventListener('tabs-change', event => { + const sectionId = (event as {detail: {showing: string}}).detail.showing; + if (!sectionId.startsWith('comment-tab-panel') || !(pageContentArea instanceof HTMLElement)) { + return; + } + + const panel = document.getElementById(sectionId); + if (panel?.contains(this.link)) { + this.updateMarker(pageContentArea); + } else { + this.hideMarker(); + } + }); } protected showForEditor() { @@ -111,9 +126,10 @@ export class PageCommentReference extends Component { scrollAndHighlightElement(refEl); }); - window.addEventListener('resize', () => { + const debouncedReposition = debounce(() => { this.positionMarker(refEl, refRange); - }); + }, 50, false).bind(this); + window.addEventListener('resize', debouncedReposition); } protected positionMarker(targetEl: HTMLElement, range: string) { @@ -145,12 +161,13 @@ export class PageCommentReference extends Component { this.markerWrap.style.height = `${targetBounds.height}px`; } - protected hideMarker() { + public hideMarker() { // Hide marker and close existing marker windows if (openMarkerClose) { openMarkerClose(); } this.markerWrap?.remove(); + this.markerWrap = null; } protected showCommentAtMarker(marker: HTMLElement): void { diff --git a/resources/js/components/page-comment.ts b/resources/js/components/page-comment.ts index 12485b807..18b9ab73b 100644 --- a/resources/js/components/page-comment.ts +++ b/resources/js/components/page-comment.ts @@ -1,6 +1,7 @@ import {Component} from './component'; import {getLoading, htmlToDom} from '../services/dom.ts'; import {buildForInput} from '../wysiwyg-tinymce/config'; +import {PageCommentReference} from "./page-comment-reference"; export class PageComment extends Component { @@ -142,7 +143,13 @@ export class PageComment extends Component { const response = await window.$http.put(`/comment/${this.commentId}/${action}`); window.$events.success(this.archiveText); this.$emit(action, {new_thread_dom: htmlToDom(response.data as string)}); - this.container.closest('.comment-branch')?.remove(); + + const branch = this.container.closest('.comment-branch') as HTMLElement; + const references = window.$components.allWithinElement(branch, 'page-comment-reference'); + for (const reference of references) { + reference.hideMarker(); + } + branch.remove(); } protected showLoading(): HTMLElement { diff --git a/resources/js/services/components.ts b/resources/js/services/components.ts index c19939e92..0e13cd0a0 100644 --- a/resources/js/services/components.ts +++ b/resources/js/services/components.ts @@ -139,8 +139,8 @@ export class ComponentStore { /** * Get all the components of the given name. */ - public get(name: string): Component[] { - return this.components[name] || []; + public get(name: string): T[] { + return (this.components[name] || []) as T[]; } /** @@ -150,4 +150,9 @@ export class ComponentStore { const elComponents = this.elementComponentMap.get(element) || {}; return elComponents[name] || null; } + + public allWithinElement(element: HTMLElement, name: string): T[] { + const components = this.get(name); + return components.filter(c => element.contains(c.$el)); + } }