danog/telegram-tt
1
0
Fork 0
mirror of https://github.com/danog/telegram-tt.git synced 2024-11-27 04:45:08 +01:00
Code Issues 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,
}) => {
const {
closeWebApp, sendWebViewData, prolongWebView, toggleBotInAttachMenu,
closeWebApp, sendWebViewData, prolongWebView, toggleBotInAttachMenu, openTelegramLink,
} = getActions();
const [mainButton, setMainButton] = useState<WebAppButton | undefined>();
const lang = useLang();
@ -73,6 +73,11 @@ const WebAppModal: FC<OwnProps & StateProps> = ({
closeWebApp();
}
if (eventType === 'open_tg_link') {
openTelegramLink({ url: event.eventData });
closeWebApp();
}
if (eventType === 'web_app_data_send') {
const { eventData } = event;
closeWebApp();
@ -100,7 +105,7 @@ const WebAppModal: FC<OwnProps & StateProps> = ({
isProgressVisible: eventData.is_progress_visible,
});
}
}, [bot, buttonText, closeWebApp, sendWebViewData]);
}, [bot, buttonText, closeWebApp, openTelegramLink, sendWebViewData]);
const {
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;
};
} | {
eventType: 'web_app_request_viewport';
eventType: 'open_tg_link';
eventData: string;
} | {
eventType: 'web_app_request_theme';
} | {
eventType: 'web_app_ready';
} | {
eventType: 'web_app_expand';
} | {
eventType: 'web_app_close';
eventType: 'web_app_request_viewport' | 'web_app_request_theme' | 'web_app_ready' | 'web_app_expand'
| 'web_app_close' | 'iframe_ready';
};
type WebAppOutboundEvent = {
@ -48,10 +44,33 @@ type WebAppOutboundEvent = {
button_text_color: string;
};
};
} | {
eventType: 'set_custom_style';
eventData: string;
} | {
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) => {
// eslint-disable-next-line no-null/no-null
const ref = useRef<HTMLIFrameElement>(null);
@ -96,6 +115,13 @@ const useWebAppFrame = (isOpen: boolean, isSimpleView: boolean, onEvent: (event:
});
}, [sendEvent]);
const sendCustomStyle = useCallback((style: string) => {
sendEvent({
eventType: 'set_custom_style',
eventData: style,
});
}, [sendEvent]);
const handleMessage = useCallback((event: MessageEvent<string>) => {
if (ignoreEventsRef.current) {
return;
@ -112,6 +138,10 @@ const useWebAppFrame = (isOpen: boolean, isSimpleView: boolean, onEvent: (event:
sendTheme();
}
if (data.eventType === 'iframe_ready') {
sendCustomStyle(SCROLLBAR_STYLE);
}
if (data.eventType === 'web_app_data_send') {
if (!isSimpleView) return; // Allowed only in simple view
ignoreEventsRef.current = true;
@ -120,7 +150,7 @@ const useWebAppFrame = (isOpen: boolean, isSimpleView: boolean, onEvent: (event:
} catch (err) {
// Ignore other messages
}
}, [isSimpleView, onEvent, sendTheme, sendViewport]);
}, [isSimpleView, onEvent, sendCustomStyle, sendTheme, sendViewport]);
useEffect(() => {
if (windowSize) {