diff --git a/src/index.css b/src/index.css index 9d7ee5eb..c688ebfc 100644 --- a/src/index.css +++ b/src/index.css @@ -10,6 +10,24 @@ -webkit-text-size-adjust: 100%; } +.fixed-container { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: hidden; +} + +.scrollable-content { + height: 100%; + overflow-y: scroll; + transform: translate3d(0, 0, 0); + -webkit-overflow-scrolling: touch; + + padding: 0 16px 0 16px; +} + body { margin: 0; display: flex; diff --git a/src/lib/telegram/preventTelegramSwipeDownClosing.tsx b/src/lib/telegram/preventTelegramSwipeDownClosing.tsx new file mode 100644 index 00000000..0c2ac1a0 --- /dev/null +++ b/src/lib/telegram/preventTelegramSwipeDownClosing.tsx @@ -0,0 +1,77 @@ +// @ts-nocheck +import React, { ReactNode, useEffect } from "react"; + +function throttle(func, limit) { + let inThrottle; + return function () { + // eslint-disable-next-line + const args = arguments; + // eslint-disable-next-line + const context = this; + if (!inThrottle) { + func.apply(context, args); + inThrottle = true; + setTimeout(() => (inThrottle = false), limit); + } + }; +} + +type Props = { + condition: boolean; + children: ReactNode; + withScroll: boolean; +}; + +export const PreventTelegramSwipeDownClosing = (props: Props) => { + const { condition, children, withScroll } = props; + + useEffect(() => { + if (!condition) { + return; + } + const scrollableElement = document.querySelector(".scrollable-content"); + + const onTouchMove = throttle((e) => { + if (withScroll) { + requestAnimationFrame(() => { + e.preventDefault(); + }); + } else { + e.preventDefault(); + } + }, 100); + + scrollableElement.addEventListener("touchmove", onTouchMove, false); + + return () => { + scrollableElement.removeEventListener("touchMove", onTouchMove, false); + }; + // eslint-disable-next-line + }, []); + + if (!condition) { + return children; + } + + return ( +
+
{children}
+
+ ); +}; + +const isMobileIos = /iPad|iPhone|iPod/.test(navigator.userAgent); + +export const PreventTelegramSwipeDownClosingIos = (props: { + children: ReactNode; + withScroll: boolean; +}) => { + return ( + + {props.children} + + ); +}; diff --git a/src/screens/app.tsx b/src/screens/app.tsx index c37aba8e..30526075 100644 --- a/src/screens/app.tsx +++ b/src/screens/app.tsx @@ -12,6 +12,7 @@ import { UserSettingsStoreProvider } from "../store/user-settings-store-context. import { UserSettingsMain } from "./user-settings/user-settings-main.tsx"; import { deckListStore } from "../store/deck-list-store.ts"; import { FullScreenLoader } from "./deck-list/full-screen-loader.tsx"; +import { PreventTelegramSwipeDownClosingIos } from "../lib/telegram/preventTelegramSwipeDownClosing.tsx"; export const App = observer(() => { if (deckListStore.isSharedDeckLoading || deckListStore.isDeckRemoving) { @@ -34,9 +35,11 @@ export const App = observer(() => { )} {screenStore.screen.type === "cardQuickAddForm" && } {screenStore.screen.type === "userSettings" && ( - - - + + + + + )} ); diff --git a/src/screens/deck-review/deck-screen.tsx b/src/screens/deck-review/deck-screen.tsx index 55d21b58..1a540fe7 100644 --- a/src/screens/deck-review/deck-screen.tsx +++ b/src/screens/deck-review/deck-screen.tsx @@ -4,14 +4,23 @@ import { Review } from "./review.tsx"; import { DeckPreview } from "./deck-preview.tsx"; import { useReviewStore } from "../../store/review-store-context.tsx"; import { DeckFinished } from "./deck-finished.tsx"; +import { PreventTelegramSwipeDownClosingIos } from "../../lib/telegram/preventTelegramSwipeDownClosing.tsx"; export const DeckScreen = observer(() => { const reviewStore = useReviewStore(); if (reviewStore.isFinished) { - return ; + return ( + + + + ); } else if (reviewStore.currentCardId) { - return ; + return ( + + + + ); } return ; });