From 8f6165164f13d26aec56e5c6a35ba5a1b480331a Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Sat, 23 Jul 2022 00:41:11 +0200 Subject: [PATCH] Fix clicking links hidden by spoiler Spoiler revealing in media viewer Close media viewer when going by link --- src/components/appMediaViewer.ts | 2 +- src/components/chat/bubbles.ts | 35 ----------------------- src/components/chat/chat.ts | 6 ++++ src/lib/appManagers/appImManager.ts | 34 ++++++++++++++++++++++ src/lib/richTextProcessor/wrapRichText.ts | 3 ++ 5 files changed, 44 insertions(+), 36 deletions(-) diff --git a/src/components/appMediaViewer.ts b/src/components/appMediaViewer.ts index 9ebd8634..24effb99 100644 --- a/src/components/appMediaViewer.ts +++ b/src/components/appMediaViewer.ts @@ -68,7 +68,7 @@ export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delet this.content.main.prepend(stub); */ 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; const setCaptionTimeout = () => { diff --git a/src/components/chat/bubbles.ts b/src/components/chat/bubbles.ts index ef5b1ed2..db9a0d7c 100644 --- a/src/components/chat/bubbles.ts +++ b/src/components/chat/bubbles.ts @@ -1490,41 +1490,6 @@ export default class ChatBubbles { 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; if(reactionElement) { cancelEvent(e); diff --git a/src/components/chat/chat.ts b/src/components/chat/chat.ts index cc26edff..a8fd0d92 100644 --- a/src/components/chat/chat.ts +++ b/src/components/chat/chat.ts @@ -7,6 +7,7 @@ import type { ChatRights } from "../../lib/appManagers/appChatsManager"; import type { AppImManager } from "../../lib/appManagers/appImManager"; import type { MessagesStorageKey } from "../../lib/appManagers/appMessagesManager"; +import type AppMediaViewerBase from "../appMediaViewerBase"; import EventListenerBase from "../../helpers/eventListenerBase"; import { logger, LogTypes } from "../../lib/logger"; import rootScope from "../../lib/rootScope"; @@ -438,6 +439,11 @@ export default class Chat extends EventListenerBase<{ this.inited = true; } + const appMediaViewer = (window as any).appMediaViewer as AppMediaViewerBase; + if(appMediaViewer) { + appMediaViewer.close(); + } + const samePeer = this.peerId === peerId; if(!samePeer) { this.appImManager.dispatchEvent('peer_changing', this); diff --git a/src/lib/appManagers/appImManager.ts b/src/lib/appManagers/appImManager.ts index 36c40670..f1c59706 100644 --- a/src/lib/appManagers/appImManager.ts +++ b/src/lib/appManagers/appImManager.ts @@ -88,6 +88,7 @@ import getFilesFromEvent from '../../helpers/files/getFilesFromEvent'; import apiManagerProxy from '../mtproto/mtprotoworker'; import appRuntimeManager from './appRuntimeManager'; import paymentsWrapCurrencyAmount from '../../helpers/paymentsWrapCurrencyAmount'; +import findUpClassName from '../../helpers/dom/findUpClassName'; export const CHAT_ANIMATION_GROUP = 'chat'; @@ -358,6 +359,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) => { if(this.chat.peerId === options.message.peerId && !idleController.isIdle) { diff --git a/src/lib/richTextProcessor/wrapRichText.ts b/src/lib/richTextProcessor/wrapRichText.ts index 5ca73111..8ae711de 100644 --- a/src/lib/richTextProcessor/wrapRichText.ts +++ b/src/lib/richTextProcessor/wrapRichText.ts @@ -18,6 +18,7 @@ import parseEntities from "./parseEntities"; import setBlankToAnchor from "./setBlankToAnchor"; import wrapUrl from "./wrapUrl"; import EMOJI_VERSIONS_SUPPORTED from "../../environment/emojiVersionsSupport"; +import { CLICK_EVENT_NAME } from "../../helpers/dom/clickEvent"; /** * * Expecting correctly sorted nested entities (RichTextProcessor.sortEntities) @@ -400,6 +401,8 @@ export default function wrapRichText(text: string, options: Partial<{ usedText = true; container.append(element); fragment.append(container); + + container[`on${CLICK_EVENT_NAME}`] = (window as any).onSpoilerClick; } break;