Browse Source

Fix clicking links hidden by spoiler

Spoiler revealing in media viewer
Close media viewer when going by link
master
Eduard Kuzmenko 2 years ago
parent
commit
8f6165164f
  1. 2
      src/components/appMediaViewer.ts
  2. 35
      src/components/chat/bubbles.ts
  3. 6
      src/components/chat/chat.ts
  4. 34
      src/lib/appManagers/appImManager.ts
  5. 3
      src/lib/richTextProcessor/wrapRichText.ts

2
src/components/appMediaViewer.ts

@ -68,7 +68,7 @@ export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delet
this.content.main.prepend(stub); */ this.content.main.prepend(stub); */
this.content.caption = document.createElement('div'); this.content.caption = document.createElement('div');
this.content.caption.classList.add(MEDIA_VIEWER_CLASSNAME + '-caption'/* , 'media-viewer-stub' */); this.content.caption.classList.add(MEDIA_VIEWER_CLASSNAME + '-caption', 'message'/* , 'media-viewer-stub' */);
let captionTimeout: number; let captionTimeout: number;
const setCaptionTimeout = () => { const setCaptionTimeout = () => {

35
src/components/chat/bubbles.ts

@ -1490,41 +1490,6 @@ export default class ChatBubbles {
return; return;
} }
const spoiler: HTMLElement = findUpClassName(target, 'spoiler');
if(spoiler) {
const messageDiv = findUpClassName(spoiler, 'message');
const className = 'is-spoiler-visible';
const isVisible = messageDiv.classList.contains(className);
if(!isVisible) {
cancelEvent(e);
}
const duration = 400 / 2;
const showDuration = 5000;
const useRafs = !isVisible ? 2 : 0;
if(useRafs) {
messageDiv.classList.add('will-change');
}
const spoilerTimeout = messageDiv.dataset.spoilerTimeout;
if(spoilerTimeout !== null) {
clearTimeout(+spoilerTimeout);
delete messageDiv.dataset.spoilerTimeout;
}
SetTransition(messageDiv, className, true, duration, () => {
messageDiv.dataset.spoilerTimeout = '' + window.setTimeout(() => {
SetTransition(messageDiv, className, false, duration, () => {
messageDiv.classList.remove('will-change');
delete messageDiv.dataset.spoilerTimeout;
});
}, showDuration);
}, useRafs);
return;
}
const reactionElement = findUpTag(target, 'REACTION-ELEMENT') as ReactionElement; const reactionElement = findUpTag(target, 'REACTION-ELEMENT') as ReactionElement;
if(reactionElement) { if(reactionElement) {
cancelEvent(e); cancelEvent(e);

6
src/components/chat/chat.ts

@ -7,6 +7,7 @@
import type { ChatRights } from "../../lib/appManagers/appChatsManager"; import type { ChatRights } from "../../lib/appManagers/appChatsManager";
import type { AppImManager } from "../../lib/appManagers/appImManager"; import type { AppImManager } from "../../lib/appManagers/appImManager";
import type { MessagesStorageKey } from "../../lib/appManagers/appMessagesManager"; import type { MessagesStorageKey } from "../../lib/appManagers/appMessagesManager";
import type AppMediaViewerBase from "../appMediaViewerBase";
import EventListenerBase from "../../helpers/eventListenerBase"; import EventListenerBase from "../../helpers/eventListenerBase";
import { logger, LogTypes } from "../../lib/logger"; import { logger, LogTypes } from "../../lib/logger";
import rootScope from "../../lib/rootScope"; import rootScope from "../../lib/rootScope";
@ -438,6 +439,11 @@ export default class Chat extends EventListenerBase<{
this.inited = true; this.inited = true;
} }
const appMediaViewer = (window as any).appMediaViewer as AppMediaViewerBase<any, any, any>;
if(appMediaViewer) {
appMediaViewer.close();
}
const samePeer = this.peerId === peerId; const samePeer = this.peerId === peerId;
if(!samePeer) { if(!samePeer) {
this.appImManager.dispatchEvent('peer_changing', this); this.appImManager.dispatchEvent('peer_changing', this);

34
src/lib/appManagers/appImManager.ts

@ -88,6 +88,7 @@ import getFilesFromEvent from '../../helpers/files/getFilesFromEvent';
import apiManagerProxy from '../mtproto/mtprotoworker'; import apiManagerProxy from '../mtproto/mtprotoworker';
import appRuntimeManager from './appRuntimeManager'; import appRuntimeManager from './appRuntimeManager';
import paymentsWrapCurrencyAmount from '../../helpers/paymentsWrapCurrencyAmount'; import paymentsWrapCurrencyAmount from '../../helpers/paymentsWrapCurrencyAmount';
import findUpClassName from '../../helpers/dom/findUpClassName';
export const CHAT_ANIMATION_GROUP = 'chat'; export const CHAT_ANIMATION_GROUP = 'chat';
@ -359,6 +360,39 @@ export class AppImManager extends EventListenerBase<{
}); });
}); });
(window as any).onSpoilerClick = (e: MouseEvent) => {
const spoiler = findUpClassName(e.target, 'spoiler');
const parentElement = findUpClassName(spoiler, 'message') || spoiler.parentElement;
const className = 'is-spoiler-visible';
const isVisible = parentElement.classList.contains(className);
if(!isVisible) {
cancelEvent(e);
}
const duration = 400 / 2;
const showDuration = 5000;
const useRafs = !isVisible ? 2 : 0;
if(useRafs) {
parentElement.classList.add('will-change');
}
const spoilerTimeout = parentElement.dataset.spoilerTimeout;
if(spoilerTimeout !== null) {
clearTimeout(+spoilerTimeout);
delete parentElement.dataset.spoilerTimeout;
}
SetTransition(parentElement, className, true, duration, () => {
parentElement.dataset.spoilerTimeout = '' + window.setTimeout(() => {
SetTransition(parentElement, className, false, duration, () => {
parentElement.classList.remove('will-change');
delete parentElement.dataset.spoilerTimeout;
});
}, showDuration);
}, useRafs);
};
apiManagerProxy.addEventListener('notificationBuild', (options) => { apiManagerProxy.addEventListener('notificationBuild', (options) => {
if(this.chat.peerId === options.message.peerId && !idleController.isIdle) { if(this.chat.peerId === options.message.peerId && !idleController.isIdle) {
return; return;

3
src/lib/richTextProcessor/wrapRichText.ts

@ -18,6 +18,7 @@ import parseEntities from "./parseEntities";
import setBlankToAnchor from "./setBlankToAnchor"; import setBlankToAnchor from "./setBlankToAnchor";
import wrapUrl from "./wrapUrl"; import wrapUrl from "./wrapUrl";
import EMOJI_VERSIONS_SUPPORTED from "../../environment/emojiVersionsSupport"; import EMOJI_VERSIONS_SUPPORTED from "../../environment/emojiVersionsSupport";
import { CLICK_EVENT_NAME } from "../../helpers/dom/clickEvent";
/** /**
* * Expecting correctly sorted nested entities (RichTextProcessor.sortEntities) * * Expecting correctly sorted nested entities (RichTextProcessor.sortEntities)
@ -400,6 +401,8 @@ export default function wrapRichText(text: string, options: Partial<{
usedText = true; usedText = true;
container.append(element); container.append(element);
fragment.append(container); fragment.append(container);
container[`on${CLICK_EVENT_NAME}`] = (window as any).onSpoilerClick;
} }
break; break;

Loading…
Cancel
Save