Skip to content
This repository has been archived by the owner on Oct 18, 2024. It is now read-only.

Commit

Permalink
Merge pull request #678 from SuperViz/fix/comment-input-behavior
Browse files Browse the repository at this point in the history
fix: comment input behavior
  • Loading branch information
carlossantos74 authored May 21, 2024
2 parents 93b6b71 + cd535ac commit a9bdcb8
Show file tree
Hide file tree
Showing 5 changed files with 71 additions and 60 deletions.
4 changes: 3 additions & 1 deletion src/components/comments/canvas-pin-adapter/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -61,10 +61,12 @@ export class CanvasPin implements PinAdapter {
* @returns {void}
* */
public destroy(): void {
this.isActive = false;
this.removeListeners();
this.removeAnnotationsPins();
this.pins = new Map();
this.divWrapper.remove();
this.divWrapper = null;
this.onPinFixedObserver.destroy();
this.onPinFixedObserver = null;
this.canvas.style.cursor = 'default';
Expand Down Expand Up @@ -255,7 +257,7 @@ export class CanvasPin implements PinAdapter {
this.renderTemporaryPin();
}

requestAnimationFrame(this.animate);
this.animateFrame = requestAnimationFrame(this.animate);
};

/**
Expand Down
24 changes: 15 additions & 9 deletions src/web-components/comments/components/comment-input.ts
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,10 @@ export class CommentsCommentInput extends WebComponentsBaseElement {
return this.shadowRoot!.querySelector('.comments__input__textarea') as HTMLTextAreaElement;
}

private get mentionButton() {
return this.shadowRoot!.querySelector('.mention-button') as HTMLButtonElement;
}

private get sendBtn() {
return this.shadowRoot!.querySelector('.comments__input__send-button') as HTMLButtonElement;
}
Expand Down Expand Up @@ -145,7 +149,7 @@ export class CommentsCommentInput extends WebComponentsBaseElement {

updated(changedProperties: Map<string, any>) {
if (changedProperties.has('mode') && this.mode === CommentMode.EDITABLE) {
this.focusInput()
this.focusInput();
this.updateHeight();
this.sendBtn.disabled = false;
this.btnActive = true;
Expand Down Expand Up @@ -199,13 +203,13 @@ export class CommentsCommentInput extends WebComponentsBaseElement {
if (this.commentInput?.value.length === 0) this.btnActive = false;
else this.btnActive = true;

if (e.data === null) return;

this.autoCompleteHandler.setInput(e);
const caretIndex = this.autoCompleteHandler.getSelectionStart();
const keyData = this.autoCompleteHandler.getLastKeyBeforeCaret(caretIndex);
const keyIndex = keyData?.keyIndex ?? -1;

if (caretIndex === -1) return;

let searchText = this.autoCompleteHandler.searchMention(caretIndex, keyIndex);
let position = this.autoCompleteHandler.getSelectionPosition();

Expand Down Expand Up @@ -350,6 +354,9 @@ export class CommentsCommentInput extends WebComponentsBaseElement {
private onTextareaLoseFocus = (e) => {
const target = e.explicitOriginalTarget?.parentNode?.host;

const mentionBtn = this.mentionButton;
if (mentionBtn === e.explicitOriginalTarget || mentionBtn === e.relatedTarget) return;

// explicitOriginalTarget is for Firefox
// relatedTarget is for Chrome
if (
Expand Down Expand Up @@ -459,12 +466,11 @@ export class CommentsCommentInput extends WebComponentsBaseElement {
></superviz-comments-mention-list>
<div class="sv-hr"></div>
<div class="comments__input__options">
<button class="icon-button icon-button--medium icon-button--clickable">
<superviz-icon
name="mention"
@click=${this.addAtSymbolInCaretPosition}
size="sm"
></superviz-icon>
<button
@click=${this.addAtSymbolInCaretPosition}
class="mention-button icon-button icon-button--medium icon-button--clickable"
>
<superviz-icon name="mention" size="sm"></superviz-icon>
</button>
<div class="comment-input-options">
${this.commentInputOptions()} ${this.commentInputEditableOptions()}
Expand Down
35 changes: 17 additions & 18 deletions src/web-components/comments/components/mention-list.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ export class CommentsMentionList extends WebComponentsBaseElement {
}

static styles = styles;
declare participants: ParticipantByGroupApi[]

declare participants: ParticipantByGroupApi[];

static properties = {
participants: { type: Object },
Expand All @@ -27,39 +27,39 @@ export class CommentsMentionList extends WebComponentsBaseElement {
protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
if (_changedProperties.has('participants') && this.participants.length > 0) {
this.showMentionList();
return
return;
}

this.hideMentionList();
}

showMentionList = () => {
const mentionList = this.shadowRoot?.getElementById('mention-list');
mentionList?.style.setProperty('display', 'block');
mentionList?.style.setProperty('display', 'block');
mentionList?.style.setProperty('margin-top', '1px');
mentionList.addEventListener('wheel', this.stopHandleZoom);
}
};

hideMentionList = () => {
const mentionList = this.shadowRoot?.getElementById('mention-list');
mentionList.removeEventListener('wheel', this.stopHandleZoom);
mentionList?.style.setProperty('display', 'none');
}
mentionList?.style.setProperty('display', 'none');
};

private selectParticipant = (participant) => {
this.emitEvent('participant-selected', participant, {
bubbles: false,
composed: false,
})
});

this.hideMentionList()
}
this.hideMentionList();
};

private stopHandleZoom = (event) => {
const menu = this.shadowRoot?.getElementById('mention-list');
menu.scrollTop += event.deltaY;
event.preventDefault();
}
};

private getAvatar(participant: ParticipantByGroupApi) {
if (participant.avatar) {
Expand All @@ -74,19 +74,18 @@ export class CommentsMentionList extends WebComponentsBaseElement {
protected render() {
const mentionItem = (participant) => html`
<div class="mention-item" @click=${() => this.selectParticipant(participant)}>
${this.getAvatar(participant)}
${this.getAvatar(participant)}
<div class="avatar-type">${participant.name}</div>
</div>
`
`;

return html`
<div id="mention-list">
${repeat(
this.participants,
(participant: ParticipantByGroupApi) => participant.id,
(participant) => html`
${mentionItem(participant)}
`)}
this.participants,
(participant: ParticipantByGroupApi) => participant.id,
(participant) => html` ${mentionItem(participant)} `,
)}
</div>
`;
}
Expand Down
4 changes: 2 additions & 2 deletions src/web-components/comments/css/mention-list.style.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { css } from 'lit';

export const mentionListStyle = css`
#mention-list {
position: absolute;
position: fixed;
z-index: 1;
max-height: 200px;
overflow-y: auto;
Expand All @@ -12,7 +12,7 @@ export const mentionListStyle = css`
width: 216px;
text-align: -webkit-center;
border-radius: 2px;
box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.30);
box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.3);
padding-top: 4px;
padding-bottom: 4px;
/* Stiling scroll WebKit (Firefox) */
Expand Down
64 changes: 34 additions & 30 deletions src/web-components/comments/utils/mention-handler.ts
Original file line number Diff line number Diff line change
@@ -1,66 +1,70 @@
import { ParticipantByGroupApi } from '../../../common/types/participant.types';


const MENTION_ACTION = {
SHOW: 'show',
HIDE: 'hide'
}
HIDE: 'hide',
};

const DEFAULT_HIDE_MENTION_LIST = {
action: MENTION_ACTION.HIDE,
mentions: [],
findDigitParticipant: false,
}
};

type hideMentionList = {
action: string;
mentions: ParticipantByGroupApi[];
findDigitParticipant: boolean
findDigitParticipant: boolean;
};

const matchParticipant = (name: string, position, participantList: ParticipantByGroupApi[]): hideMentionList => {
let mentionList = []
const matchParticipant = (
name: string,
position,
participantList: ParticipantByGroupApi[],
): hideMentionList => {
let mentionList = [];

mentionList = participantList?.filter((participant: ParticipantByGroupApi) => participant?.email)
mentionList = participantList?.filter((participant: ParticipantByGroupApi) => participant?.email);
if (name.length > 0) {
mentionList = mentionList
.filter((participant: ParticipantByGroupApi) => participant?.name
.toLowerCase()
.search(name.toLowerCase()) !== -1
);
if (name === mentionList[0]?.name?.toLowerCase()) {
const mentions = prepareMentionList(mentionList, position);
return {
action: MENTION_ACTION.HIDE,
mentions,
findDigitParticipant: true
}
}
mentionList = mentionList.filter(
(participant: ParticipantByGroupApi) =>
participant?.name.toLowerCase().search(name.toLowerCase()) !== -1,
);

if (name === mentionList[0]?.name?.toLowerCase()) {
const mentions = prepareMentionList(mentionList, position);
return {
action: MENTION_ACTION.HIDE,
mentions,
findDigitParticipant: true,
};
}
}

if (!(mentionList?.length > 0)) {
return DEFAULT_HIDE_MENTION_LIST
return DEFAULT_HIDE_MENTION_LIST;
}

const mentions = prepareMentionList(mentionList, position);

return {
action: MENTION_ACTION.SHOW,
mentions,
findDigitParticipant: false
}
}
findDigitParticipant: false,
};
};

const prepareMentionList = (users: ParticipantByGroupApi[], position): ParticipantByGroupApi[] => {
return users.map((user: ParticipantByGroupApi) => ({
id: user.id,
name: user.name,
avatar: user.avatar,
email: user.email,
position
}))
}
position,
}));
};

export default {
matchParticipant: (name, position, participantList: ParticipantByGroupApi[]) => matchParticipant(name, position, participantList),
}
matchParticipant: (name, position, participantList: ParticipantByGroupApi[]) =>
matchParticipant(name, position, participantList),
};

0 comments on commit a9bdcb8

Please sign in to comment.