implement isVersionAtLeast, isVerticalSwipesEnabled, enableVerticalSw…

…ipes, disableVerticalSwipes; update fixTma, unfixTma

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)

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')
+}

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()

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')
+}

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')
+}

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 }

lib/actions/isVersionAtLeast.ts

@@ -0,0 +1,5 @@
+import { webApp } from '../webApp'
+
+export function isVersionAtLeast(version: string): boolean {
+  return webApp.isVersionAtLeast(version)
+}

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)

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)

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()
+}

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)
+  }
 }

lib/state.ts

@@ -15,7 +15,8 @@ export const state = reactive<State>({
   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
 }

lib/types.ts

@@ -11,6 +11,7 @@ export type State = {
   headerColor: string
   backgroundColor: string
   isClosingConfirmationEnabled: boolean
+  isVerticalSwipesEnabled: boolean
 }
 
 export type Options = {

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",