diff --git a/README.md b/README.md index 563a130..7456ca4 100644 --- a/README.md +++ b/README.md @@ -60,6 +60,7 @@ app.mount('#app') - [X] headerColor - [X] backgroundColor - [X] isClosingConfirmationEnabled +- [X] isVerticalSwipesEnabled - [ ] BackButton - [ ] isVisible - [X] BackButton.onClick @@ -80,11 +81,13 @@ app.mount('#app') - [X] CloudStorage.removeItems - [X] CloudStorage.getKeys - [ ] BiometricManager -- [ ] isVersionAtLeast +- [X] isVersionAtLeast - [X] setHeaderColor(color) - [X] setBackgroundColor(color) - [X] enableClosingConfirmation() - [X] disableClosingConfirmation() +- [X] enableVerticalSwipes() +- [X] disableVerticalSwipes() - [X] onEvent(eventType, eventHandler) - [X] offEvent(eventType, eventHandler) - [ ] sendData(data) diff --git a/lib/actions/backButton/index.ts b/lib/actions/backButton/index.ts index bb8aaec..e45f490 100644 --- a/lib/actions/backButton/index.ts +++ b/lib/actions/backButton/index.ts @@ -1,2 +1,7 @@ export { offClick, onClick } from './events' export { hide, show } from './visible' +import { isVersionAtLeast } from '../isVersionAtLeast' + +export function isBackButtonSupported(): boolean { + return isVersionAtLeast('6.1') +} diff --git a/lib/actions/closingConfirmation.ts b/lib/actions/closingConfirmation.ts index 817c957..0aef99f 100644 --- a/lib/actions/closingConfirmation.ts +++ b/lib/actions/closingConfirmation.ts @@ -1,5 +1,10 @@ import { updateState } from '../state' import { webApp } from '../webApp' +import { isVersionAtLeast } from './isVersionAtLeast' + +export function isClosingConfirmationSupported(): boolean { + return isVersionAtLeast('6.2') +} export function enableClosingConfirmation() { webApp.enableClosingConfirmation() diff --git a/lib/actions/cloudStorage/index.ts b/lib/actions/cloudStorage/index.ts index 367dfd2..295bd85 100644 --- a/lib/actions/cloudStorage/index.ts +++ b/lib/actions/cloudStorage/index.ts @@ -4,3 +4,8 @@ export { getKeys } from './getKeys' export { removeItem } from './removeItem' export { removeItems } from './removeItems' export { setItem } from './setItem' +import { isVersionAtLeast } from '../isVersionAtLeast' + +export function isHapticFeedbackSupported(): boolean { + return isVersionAtLeast('6.9') +} diff --git a/lib/actions/hapticFeedback/index.ts b/lib/actions/hapticFeedback/index.ts index a20e543..7955074 100644 --- a/lib/actions/hapticFeedback/index.ts +++ b/lib/actions/hapticFeedback/index.ts @@ -1,3 +1,8 @@ export { impactOccurred } from './impactOccurred' export { notificationOccurred } from './notificationOccurred' export { selectionChanged } from './selectionChanged' +import { isVersionAtLeast } from '../isVersionAtLeast' + +export function isHapticFeedbackSupported(): boolean { + return isVersionAtLeast('6.1') +} diff --git a/lib/actions/index.ts b/lib/actions/index.ts index e4dfbb9..eeb1a5a 100644 --- a/lib/actions/index.ts +++ b/lib/actions/index.ts @@ -3,10 +3,16 @@ import * as CloudStorage from './cloudStorage' import * as HapticFeedback from './hapticFeedback' export { close } from './close' -export { disableClosingConfirmation, enableClosingConfirmation } from './closingConfirmation' +export { + disableClosingConfirmation, + enableClosingConfirmation, + isClosingConfirmationSupported +} from './closingConfirmation' export { offEvent, onEvent } from './events' export { autoExpand, expand, stopAutoExpand } from './expand' +export { isVersionAtLeast } from './isVersionAtLeast' export { ready } from './ready' -export { setBackgroundColor } from './setBackgroundColor' -export { setHeaderColor } from './setHeaderColor' +export { isBackgroundColorSupported, setBackgroundColor } from './setBackgroundColor' +export { isHeaderColorSupported, setHeaderColor } from './setHeaderColor' +export { disableVerticalSwipes, enableVerticalSwipes, isVerticalSwipesSupported } from './verticalSwipes' export { BackButton, CloudStorage, HapticFeedback } diff --git a/lib/actions/isVersionAtLeast.ts b/lib/actions/isVersionAtLeast.ts new file mode 100644 index 0000000..b940d22 --- /dev/null +++ b/lib/actions/isVersionAtLeast.ts @@ -0,0 +1,5 @@ +import { webApp } from '../webApp' + +export function isVersionAtLeast(version: string): boolean { + return webApp.isVersionAtLeast(version) +} diff --git a/lib/actions/setBackgroundColor.ts b/lib/actions/setBackgroundColor.ts index a585fd5..78e22ff 100644 --- a/lib/actions/setBackgroundColor.ts +++ b/lib/actions/setBackgroundColor.ts @@ -1,5 +1,10 @@ import { updateState } from '../state' import { webApp } from '../webApp' +import { isVersionAtLeast } from './isVersionAtLeast' + +export function isBackgroundColorSupported(): boolean { + return isVersionAtLeast('6.1') +} export function setBackgroundColor(color: string) { webApp.setBackgroundColor(color) diff --git a/lib/actions/setHeaderColor.ts b/lib/actions/setHeaderColor.ts index 1f5142c..0a8c525 100644 --- a/lib/actions/setHeaderColor.ts +++ b/lib/actions/setHeaderColor.ts @@ -1,5 +1,10 @@ import { updateState } from '../state' import { webApp } from '../webApp' +import { isVersionAtLeast } from './isVersionAtLeast' + +export function isHeaderColorSupported(): boolean { + return isVersionAtLeast('6.1') +} export function setHeaderColor(color: string) { webApp.setHeaderColor(color) diff --git a/lib/actions/verticalSwipes.ts b/lib/actions/verticalSwipes.ts new file mode 100644 index 0000000..e56c8ff --- /dev/null +++ b/lib/actions/verticalSwipes.ts @@ -0,0 +1,17 @@ +import { updateState } from '../state' +import { webApp } from '../webApp' +import { isVersionAtLeast } from './isVersionAtLeast' + +export function isVerticalSwipesSupported(): boolean { + return isVersionAtLeast('7.7') +} + +export function enableVerticalSwipes() { + webApp.enableVerticalSwipes() + updateState() +} + +export function disableVerticalSwipes() { + webApp.disableVerticalSwipes() + updateState() +} diff --git a/lib/helpers/fixTma.ts b/lib/helpers/fixTma.ts index ee92f9e..dca0e39 100644 --- a/lib/helpers/fixTma.ts +++ b/lib/helpers/fixTma.ts @@ -1,3 +1,5 @@ +import { enableVerticalSwipes, isVerticalSwipesSupported } from '../actions/verticalSwipes' + const options = { passive: false } let ts: any let scrollableEl: HTMLElement | null @@ -27,22 +29,28 @@ function onScroll() { } export function fixTma(el: HTMLElement | null) { - scrollableEl = el + if (isVerticalSwipesSupported()) { + enableVerticalSwipes() + } else { + scrollableEl = el - // @ts-ignore - window.overflowPadding = 100 - // @ts-ignore - document.body.style.height = window.innerHeight + window.overflowPadding + 'px' - // @ts-ignore - window.scrollTo(0, window.overflowPadding) + // @ts-ignore + window.overflowPadding = 100 + // @ts-ignore + document.body.style.height = window.innerHeight + window.overflowPadding + 'px' + // @ts-ignore + window.scrollTo(0, window.overflowPadding) - window.addEventListener('scroll', onScroll) - document.documentElement.addEventListener('touchstart', onTouchStart, options) - document.documentElement.addEventListener('touchmove', onTouchMove, options) + window.addEventListener('scroll', onScroll) + document.documentElement.addEventListener('touchstart', onTouchStart, options) + document.documentElement.addEventListener('touchmove', onTouchMove, options) + } } export function unfixTma() { - window.removeEventListener('scroll', onScroll) - document.documentElement.removeEventListener('touchstart', onTouchStart) - document.documentElement.removeEventListener('touchmove', onTouchMove) + if (!isVerticalSwipesSupported()) { + window.removeEventListener('scroll', onScroll) + document.documentElement.removeEventListener('touchstart', onTouchStart) + document.documentElement.removeEventListener('touchmove', onTouchMove) + } } diff --git a/lib/state.ts b/lib/state.ts index f576c9a..a801a38 100644 --- a/lib/state.ts +++ b/lib/state.ts @@ -15,7 +15,8 @@ export const state = reactive({ viewportStableHeight: 0, headerColor: '', backgroundColor: '', - isClosingConfirmationEnabled: false + isClosingConfirmationEnabled: false, + isVerticalSwipesEnabled: false }) export function updateState() { @@ -29,4 +30,5 @@ export function updateState() { state.headerColor = webApp.headerColor state.backgroundColor = webApp.backgroundColor state.isClosingConfirmationEnabled = webApp.isClosingConfirmationEnabled + state.isVerticalSwipesEnabled = webApp.isVerticalSwipesEnabled } diff --git a/lib/types.ts b/lib/types.ts index 0db4ac4..09e57bd 100644 --- a/lib/types.ts +++ b/lib/types.ts @@ -11,6 +11,7 @@ export type State = { headerColor: string backgroundColor: string isClosingConfirmationEnabled: boolean + isVerticalSwipesEnabled: boolean } export type Options = { diff --git a/package.json b/package.json index ef5fa35..738c1cb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@kolirt/vue-telegram-mini-app", - "version": "0.0.7", + "version": "0.0.8", "type": "module", "description": "Vue 3 telegram mini app package", "author": "kolirt",