ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web Bots: Custom styling for scrollbars, support t.me links event (#1837)

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-04-26 17:09:02 +02:00
parent eca1e05379
commit 9ad22b8dfb
2 changed files with 46 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/main/WebAppModal.tsx
View File

@ -57,7 +57,7 @@ const WebAppModal: FC<OwnProps & StateProps> = ({
theme, theme,
}) => { }) => {
const { const {
closeWebApp, sendWebViewData, prolongWebView, toggleBotInAttachMenu, closeWebApp, sendWebViewData, prolongWebView, toggleBotInAttachMenu, openTelegramLink,
} = getActions(); } = getActions();
const [mainButton, setMainButton] = useState<WebAppButton | undefined>(); const [mainButton, setMainButton] = useState<WebAppButton | undefined>();
const lang = useLang(); const lang = useLang();
@ -73,6 +73,11 @@ const WebAppModal: FC<OwnProps & StateProps> = ({
closeWebApp(); closeWebApp();
} }
if (eventType === 'open_tg_link') {
openTelegramLink({ url: event.eventData });
closeWebApp();
}
if (eventType === 'web_app_data_send') { if (eventType === 'web_app_data_send') {
const { eventData } = event; const { eventData } = event;
closeWebApp(); closeWebApp();
@ -100,7 +105,7 @@ const WebAppModal: FC<OwnProps & StateProps> = ({
isProgressVisible: eventData.is_progress_visible, isProgressVisible: eventData.is_progress_visible,
}); });
} }
}, [bot, buttonText, closeWebApp, sendWebViewData]); }, [bot, buttonText, closeWebApp, openTelegramLink, sendWebViewData]);
const { const {
ref, reloadFrame, sendEvent, sendViewport, sendTheme, ref, reloadFrame, sendEvent, sendViewport, sendTheme,

48
src/components/main/hooks/useWebAppFrame.ts
View File

@ -18,15 +18,11 @@ export type WebAppInboundEvent = {
is_progress_visible: boolean; is_progress_visible: boolean;
}; };
} | { } | {
eventType: 'web_app_request_viewport'; eventType: 'open_tg_link';
eventData: string;
} | { } | {
eventType: 'web_app_request_theme'; eventType: 'web_app_request_viewport' | 'web_app_request_theme' | 'web_app_ready' | 'web_app_expand'
} | { | 'web_app_close' | 'iframe_ready';
eventType: 'web_app_ready';
} | {
eventType: 'web_app_expand';
} | {
eventType: 'web_app_close';
}; };
type WebAppOutboundEvent = { type WebAppOutboundEvent = {
@ -48,10 +44,33 @@ type WebAppOutboundEvent = {
button_text_color: string; button_text_color: string;
}; };
}; };
} | {
eventType: 'set_custom_style';
eventData: string;
} | { } | {
eventType: 'main_button_pressed'; eventType: 'main_button_pressed';
}; };
const SCROLLBAR_STYLE = `* {
scrollbar-width: thin;
scrollbar-color: rgba(90,90,90,0.3) transparent;
}
*::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: transparent;
}
*::-webkit-scrollbar-thumb {
border-radius: 6px;
background-color: rgba(90, 90, 90, 0.3);
}
*::-webkit-scrollbar-corner {
background-color: transparent;
}`;
const useWebAppFrame = (isOpen: boolean, isSimpleView: boolean, onEvent: (event: WebAppInboundEvent) => void) => { const useWebAppFrame = (isOpen: boolean, isSimpleView: boolean, onEvent: (event: WebAppInboundEvent) => void) => {
// eslint-disable-next-line no-null/no-null // eslint-disable-next-line no-null/no-null
const ref = useRef<HTMLIFrameElement>(null); const ref = useRef<HTMLIFrameElement>(null);
@ -96,6 +115,13 @@ const useWebAppFrame = (isOpen: boolean, isSimpleView: boolean, onEvent: (event:
}); });
}, [sendEvent]); }, [sendEvent]);
const sendCustomStyle = useCallback((style: string) => {
sendEvent({
eventType: 'set_custom_style',
eventData: style,
});
}, [sendEvent]);
const handleMessage = useCallback((event: MessageEvent<string>) => { const handleMessage = useCallback((event: MessageEvent<string>) => {
if (ignoreEventsRef.current) { if (ignoreEventsRef.current) {
return; return;
@ -112,6 +138,10 @@ const useWebAppFrame = (isOpen: boolean, isSimpleView: boolean, onEvent: (event:
sendTheme(); sendTheme();
} }
if (data.eventType === 'iframe_ready') {
sendCustomStyle(SCROLLBAR_STYLE);
}
if (data.eventType === 'web_app_data_send') { if (data.eventType === 'web_app_data_send') {
if (!isSimpleView) return; // Allowed only in simple view if (!isSimpleView) return; // Allowed only in simple view
ignoreEventsRef.current = true; ignoreEventsRef.current = true;
@ -120,7 +150,7 @@ const useWebAppFrame = (isOpen: boolean, isSimpleView: boolean, onEvent: (event:
} catch (err) { } catch (err) {
// Ignore other messages // Ignore other messages
} }
}, [isSimpleView, onEvent, sendTheme, sendViewport]); }, [isSimpleView, onEvent, sendCustomStyle, sendTheme, sendViewport]);
useEffect(() => { useEffect(() => {
if (windowSize) { if (windowSize) {