2022-06-03 15:49:36 +02:00
var DemoApp = {
initData : Telegram . WebApp . initData || '' ,
initDataUnsafe : Telegram . WebApp . initDataUnsafe || { } ,
MainButton : Telegram . WebApp . MainButton ,
2024-08-23 19:07:48 +02:00
SecondaryButton : Telegram . WebApp . SecondaryButton ,
2023-09-14 15:30:39 +02:00
BackButton : Telegram . WebApp . BackButton ,
2023-10-02 17:03:05 +02:00
SettingsButton : Telegram . WebApp . SettingsButton ,
2022-06-03 15:49:36 +02:00
init : function ( options ) {
$ ( 'body' ) . css ( 'visibility' , '' ) ;
Telegram . WebApp . ready ( ) ;
Telegram . WebApp . MainButton . setParams ( {
2024-08-23 19:07:48 +02:00
text : 'Close Webview' ,
2024-09-02 11:47:49 +02:00
has _shine _effect : true ,
2022-06-03 15:49:36 +02:00
is _visible : true
} ) . onClick ( DemoApp . close ) ;
2024-08-23 19:07:48 +02:00
Telegram . WebApp . SecondaryButton . setParams ( {
text : 'Do Something' ,
is _visible : true
} ) . onClick ( DemoApp . moveSecondaryButton ) ;
2023-09-14 15:30:39 +02:00
Telegram . WebApp . BackButton . onClick ( function ( ) {
DemoApp . showAlert ( 'Back button pressed' ) ;
} ) ;
2023-10-02 17:03:05 +02:00
Telegram . WebApp . SettingsButton . onClick ( function ( ) {
2023-09-07 14:08:48 +02:00
DemoApp . showAlert ( 'Settings opened!' ) ;
} ) ;
2022-06-03 15:49:36 +02:00
} ,
expand : function ( ) {
Telegram . WebApp . expand ( ) ;
} ,
close : function ( ) {
Telegram . WebApp . close ( ) ;
} ,
sendMessage : function ( msg _id , with _webview ) {
if ( ! DemoApp . initDataUnsafe . query _id ) {
alert ( 'WebViewQueryId not defined' ) ;
return ;
}
$ ( 'button' ) . prop ( 'disabled' , true ) ;
$ ( '#btn_status' ) . text ( 'Sending...' ) . removeClass ( 'ok err' ) . show ( ) ;
DemoApp . apiRequest ( 'sendMessage' , {
msg _id : msg _id || '' ,
with _webview : ! DemoApp . initDataUnsafe . receiver && with _webview ? 1 : 0
} , function ( result ) {
$ ( 'button' ) . prop ( 'disabled' , false ) ;
if ( result . response ) {
if ( result . response . ok ) {
2023-10-30 20:40:25 +01:00
$ ( '#btn_status' ) . text ( 'Message sent successfully!' ) . addClass ( 'ok' ) . show ( ) ;
2022-06-03 15:49:36 +02:00
} else {
$ ( '#btn_status' ) . text ( result . response . description ) . addClass ( 'err' ) . show ( ) ;
alert ( result . response . description ) ;
}
} else if ( result . error ) {
$ ( '#btn_status' ) . text ( result . error ) . addClass ( 'err' ) . show ( ) ;
alert ( result . error ) ;
} else {
$ ( '#btn_status' ) . text ( 'Unknown error' ) . addClass ( 'err' ) . show ( ) ;
alert ( 'Unknown error' ) ;
}
} ) ;
} ,
changeMenuButton : function ( close ) {
$ ( 'button' ) . prop ( 'disabled' , true ) ;
$ ( '#btn_status' ) . text ( 'Changing button...' ) . removeClass ( 'ok err' ) . show ( ) ;
DemoApp . apiRequest ( 'changeMenuButton' , { } , function ( result ) {
$ ( 'button' ) . prop ( 'disabled' , false ) ;
if ( result . response ) {
if ( result . response . ok ) {
2023-10-30 20:40:25 +01:00
$ ( '#btn_status' ) . text ( 'Button changed!' ) . addClass ( 'ok' ) . show ( ) ;
2022-06-03 15:49:36 +02:00
Telegram . WebApp . close ( ) ;
} else {
$ ( '#btn_status' ) . text ( result . response . description ) . addClass ( 'err' ) . show ( ) ;
alert ( result . response . description ) ;
}
} else if ( result . error ) {
$ ( '#btn_status' ) . text ( result . error ) . addClass ( 'err' ) . show ( ) ;
alert ( result . error ) ;
} else {
$ ( '#btn_status' ) . text ( 'Unknown error' ) . addClass ( 'err' ) . show ( ) ;
alert ( 'Unknown error' ) ;
}
} ) ;
if ( close ) {
setTimeout ( function ( ) {
Telegram . WebApp . close ( ) ;
} , 50 ) ;
}
} ,
checkInitData : function ( ) {
if ( DemoApp . initDataUnsafe . query _id &&
DemoApp . initData &&
$ ( '#webview_data_status' ) . hasClass ( 'status_need' ) ) {
$ ( '#webview_data_status' ) . removeClass ( 'status_need' ) ;
DemoApp . apiRequest ( 'checkInitData' , { } , function ( result ) {
if ( result . ok ) {
2023-10-30 20:40:25 +01:00
$ ( '#webview_data_status' ) . text ( 'Hash is correct (async)' ) . addClass ( 'ok' ) ;
2022-06-03 15:49:36 +02:00
} else {
2023-10-30 20:40:25 +01:00
$ ( '#webview_data_status' ) . text ( result . error + ' (async)' ) . addClass ( 'err' ) ;
2022-06-03 15:49:36 +02:00
}
} ) ;
}
} ,
sendText : function ( spam ) {
var text = $ ( '#text_field' ) . val ( ) ;
if ( ! text . length ) {
return $ ( '#text_field' ) . focus ( ) ;
}
if ( byteLength ( text ) > 4096 ) {
return alert ( 'Text is too long' ) ;
}
var repeat = spam ? 10 : 1 ;
for ( var i = 0 ; i < repeat ; i ++ ) {
Telegram . WebApp . sendData ( text ) ;
}
} ,
sendTime : function ( spam ) {
var repeat = spam ? 10 : 1 ;
for ( var i = 0 ; i < repeat ; i ++ ) {
Telegram . WebApp . sendData ( new Date ( ) . toString ( ) ) ;
}
} ,
2023-03-02 19:33:48 +01:00
switchInlineQuery : function ( query , choose _chat ) {
var choose _chat _types = false ;
if ( choose _chat ) {
var choose _chat _types = [ ] ;
var types = [ 'users' , 'bots' , 'groups' , 'channels' ] ;
for ( var i = 0 ; i < types . length ; i ++ ) {
if ( $ ( '#select-' + types [ i ] ) . prop ( 'checked' ) ) {
choose _chat _types . push ( types [ i ] ) ;
}
}
if ( ! choose _chat _types . length ) {
return DemoApp . showAlert ( 'Select chat types!' ) ;
}
}
Telegram . WebApp . switchInlineQuery ( query , choose _chat _types ) ;
} ,
2022-06-03 15:49:36 +02:00
requestLocation : function ( el ) {
if ( navigator . geolocation ) {
navigator . geolocation . getCurrentPosition ( function ( position ) {
2023-10-30 20:40:25 +01:00
$ ( el ) . next ( 'span' ) . text ( '(' + position . coords . latitude + ', ' + position . coords . longitude + ')' ) . attr ( 'class' , 'ok' ) ;
2022-06-03 15:49:36 +02:00
} ) ;
} else {
2023-10-30 20:40:25 +01:00
$ ( el ) . next ( 'span' ) . text ( 'Geolocation is not supported in this browser.' ) . attr ( 'class' , 'err' ) ;
2022-06-03 15:49:36 +02:00
}
return false ;
} ,
requestVideo : function ( el ) {
if ( navigator . mediaDevices ) {
navigator . mediaDevices . getUserMedia ( { audio : false , video : true } ) . then ( function ( stream ) {
2023-10-30 20:40:25 +01:00
$ ( el ) . next ( 'span' ) . text ( '(Access granted)' ) . attr ( 'class' , 'ok' ) ;
2022-06-03 15:49:36 +02:00
} ) ;
} else {
2023-10-30 20:40:25 +01:00
$ ( el ) . next ( 'span' ) . text ( 'Media devices is not supported in this browser.' ) . attr ( 'class' , 'err' ) ;
2022-06-03 15:49:36 +02:00
}
return false ;
} ,
requestAudio : function ( el ) {
if ( navigator . mediaDevices ) {
navigator . mediaDevices . getUserMedia ( { audio : true , video : false } ) . then ( function ( stream ) {
2023-10-30 20:40:25 +01:00
$ ( el ) . next ( 'span' ) . text ( '(Access granted)' ) . attr ( 'class' , 'ok' ) ;
2022-06-03 15:49:36 +02:00
} ) ;
} else {
2023-10-30 20:40:25 +01:00
$ ( el ) . next ( 'span' ) . text ( 'Media devices is not supported in this browser.' ) . attr ( 'class' , 'err' ) ;
2022-06-03 15:49:36 +02:00
}
return false ;
} ,
2022-11-23 17:27:46 +01:00
requestAudioVideo : function ( el ) {
if ( navigator . mediaDevices ) {
navigator . mediaDevices . getUserMedia ( { audio : true , video : true } ) . then ( function ( stream ) {
2023-10-30 20:40:25 +01:00
$ ( el ) . next ( 'span' ) . text ( '(Access granted)' ) . attr ( 'class' , 'ok' ) ;
2022-11-23 17:27:46 +01:00
} ) ;
} else {
2023-10-30 20:40:25 +01:00
$ ( el ) . next ( 'span' ) . text ( 'Media devices is not supported in this browser.' ) . attr ( 'class' , 'err' ) ;
2022-11-23 17:27:46 +01:00
}
return false ;
} ,
testClipboard : function ( el ) {
2022-12-13 15:46:38 +01:00
Telegram . WebApp . readTextFromClipboard ( function ( clipText ) {
if ( clipText === null ) {
2023-10-30 20:40:25 +01:00
$ ( el ) . next ( 'span' ) . text ( 'Clipboard text unavailable.' ) . attr ( 'class' , 'err' ) ;
2022-12-13 15:46:38 +01:00
} else {
2022-11-23 17:27:46 +01:00
$ ( el ) . next ( 'span' ) . text ( '(Read from clipboard: «' + clipText + '»)' ) . attr ( 'class' , 'ok' ) ;
2022-12-13 15:46:38 +01:00
}
} ) ;
2022-11-23 17:27:46 +01:00
return false ;
} ,
2023-08-25 14:44:38 +02:00
requestWriteAccess : function ( el ) {
Telegram . WebApp . requestWriteAccess ( function ( allowed ) {
if ( allowed ) {
$ ( el ) . next ( 'span' ) . text ( '(Access granted)' ) . attr ( 'class' , 'ok' ) ;
} else {
2023-10-30 20:40:25 +01:00
$ ( el ) . next ( 'span' ) . text ( '(User declined this request)' ) . attr ( 'class' , 'err' ) ;
2023-08-25 14:44:38 +02:00
}
} ) ;
} ,
requestPhoneNumber : function ( el ) {
2023-10-05 16:50:03 +02:00
Telegram . WebApp . requestContact ( function ( sent , event ) {
2023-08-25 14:44:38 +02:00
if ( sent ) {
2023-10-05 16:50:03 +02:00
$ ( el ) . next ( 'span' ) . text ( '(Phone number sent to the bot' + ( event && event . responseUnsafe && event . responseUnsafe . contact && event . responseUnsafe . contact . phone _number ? ': +' + event . responseUnsafe . contact . phone _number : '' ) + ')' ) . attr ( 'class' , 'ok' ) ;
2023-08-25 14:44:38 +02:00
} else {
2023-10-30 20:40:25 +01:00
$ ( el ) . next ( 'span' ) . text ( '(User declined this request)' ) . attr ( 'class' , 'err' ) ;
2023-08-25 14:44:38 +02:00
}
} ) ;
} ,
requestServerTime : function ( el ) {
Telegram . WebApp . invokeCustomMethod ( 'getCurrentTime' , { } , function ( err , time ) {
if ( err ) {
2023-10-30 20:40:25 +01:00
$ ( el ) . next ( 'span' ) . text ( '(' + err + ')' ) . attr ( 'class' , 'err' ) ;
2023-08-25 14:44:38 +02:00
} else {
$ ( el ) . next ( 'span' ) . text ( '(' + ( new Date ( time * 1000 ) ) . toString ( ) + ')' ) . attr ( 'class' , 'ok' ) ;
}
} ) ;
} ,
2023-08-26 14:03:09 +02:00
cloudStorageKeys : { } ,
cloudStorageItems : { } ,
editCloudRow : function ( el , event ) {
event . preventDefault ( ) ;
var values = DemoApp . cloudStorageItems ;
var key = $ ( el ) . parents ( 'tr' ) . attr ( 'data-key' ) ;
el . form . reset ( ) ;
el . form . key . value = key ;
el . form . value . value = values [ key ] ;
} ,
deleteCloudRow : function ( el , event ) {
event . preventDefault ( ) ;
var key = $ ( el ) . parents ( 'tr' ) . attr ( 'data-key' ) ;
Telegram . WebApp . CloudStorage . removeItem ( key , function ( err , deleted ) {
if ( err ) {
DemoApp . showAlert ( 'Error: ' + err ) ;
} else {
if ( deleted ) {
var index = DemoApp . cloudStorageKeys . indexOf ( key ) ;
if ( index >= 0 ) {
DemoApp . cloudStorageKeys . splice ( index , 1 ) ;
}
delete DemoApp . cloudStorageItems [ key ] ;
}
el . form . reset ( ) ;
DemoApp . updateCloudRows ( ) ;
}
} ) ;
} ,
saveCloudForm : function ( form , event ) {
event . preventDefault ( ) ;
var key = form . key . value ;
var value = form . value . value ;
Telegram . WebApp . CloudStorage . setItem ( key , value , function ( err , saved ) {
if ( err ) {
DemoApp . showAlert ( 'Error: ' + err ) ;
} else {
if ( saved ) {
if ( typeof DemoApp . cloudStorageItems [ key ] === 'undefined' ) {
DemoApp . cloudStorageKeys . push ( key ) ;
}
DemoApp . cloudStorageItems [ key ] = value ;
}
form . reset ( ) ;
DemoApp . updateCloudRows ( ) ;
}
} ) ;
} ,
updateCloudRows : function ( ) {
var html = '' ;
var keys = DemoApp . cloudStorageKeys ;
var values = DemoApp . cloudStorageItems ;
for ( var i = 0 ; i < keys . length ; i ++ ) {
var key = keys [ i ] ;
html += '<tr data-key="' + cleanHTML ( key ) + '"><td>' + cleanHTML ( key ) + '</td><td>' + cleanHTML ( values [ key ] ) + '</td><td><button onclick="DemoApp.editCloudRow(this, event);">Edit</button><button onclick="DemoApp.deleteCloudRow(this, event);">Delete</button></td></tr>' ;
}
$ ( '#cloud_rows' ) . html ( html ) ;
} ,
loadCloudKeys : function ( el ) {
Telegram . WebApp . CloudStorage . getKeys ( function ( err , keys ) {
if ( err ) {
DemoApp . showAlert ( 'Error: ' + err ) ;
} else {
if ( keys . length > 0 ) {
Telegram . WebApp . CloudStorage . getItems ( keys , function ( err , values ) {
if ( err ) {
DemoApp . showAlert ( 'Error: ' + err ) ;
} else {
DemoApp . cloudStorageKeys = keys ;
DemoApp . cloudStorageItems = { } ;
for ( var i = 0 ; i < keys . length ; i ++ ) {
var key = keys [ i ] ;
DemoApp . cloudStorageItems [ key ] = values [ key ] ;
}
DemoApp . updateCloudRows ( ) ;
}
} ) ;
}
}
} ) ;
} ,
2024-03-08 12:49:56 +01:00
biometricInit : function ( el ) {
var biometricManager = Telegram . WebApp . BiometricManager ;
if ( ! DemoApp . biometricInited ) {
DemoApp . biometricInited = true ;
Telegram . WebApp . onEvent ( 'biometricManagerUpdated' , function ( ) {
$ ( '#bm_inited' ) . text ( biometricManager . isInited ? 'true' : 'false' ) ;
$ ( '#bm_available' ) . text ( biometricManager . isBiometricAvailable ? 'true' : 'false' ) ;
$ ( '#bm_type' ) . text ( biometricManager . biometricType || '' ) ;
$ ( '#bm_access_requested' ) . text ( biometricManager . isAccessRequested ? 'true' : 'false' ) ;
$ ( '#bm_access_granted' ) . text ( biometricManager . isAccessGranted ? 'true' : 'false' ) ;
$ ( '#bm_token_saved' ) . text ( biometricManager . isBiometricTokenSaved ? 'true' : 'false' ) ;
2024-03-14 12:40:41 +01:00
$ ( '#bm_device_id' ) . text ( biometricManager . deviceId || '' ) ;
2024-03-26 00:48:05 +01:00
$ ( '#bm_settings' ) . toggle ( biometricManager . isBiometricAvailable && biometricManager . isAccessRequested && ! biometricManager . isAccessGranted ) ;
2024-03-08 12:49:56 +01:00
} ) ;
}
biometricManager . init ( ) ;
} ,
biometricRequestAccess : function ( el ) {
var biometricManager = Telegram . WebApp . BiometricManager ;
if ( ! biometricManager . isInited ) {
return DemoApp . showAlert ( 'Biometric not inited yet!' ) ;
}
2024-03-14 01:48:37 +01:00
biometricManager . requestAccess ( { reason : 'The bot uses biometrics for testing purposes.' } , function ( access _granted ) {
2024-03-08 12:49:56 +01:00
if ( access _granted ) {
$ ( el ) . next ( 'span' ) . text ( '(Access granted)' ) . attr ( 'class' , 'ok' ) ;
} else {
$ ( el ) . next ( 'span' ) . text ( '(Request declined)' ) . attr ( 'class' , 'err' ) ;
}
} ) ;
} ,
biometricRequestAuth : function ( el ) {
var biometricManager = Telegram . WebApp . BiometricManager ;
if ( ! biometricManager . isInited ) {
return DemoApp . showAlert ( 'Biometric not inited yet!' ) ;
}
2024-03-11 11:56:43 +01:00
$ ( el ) . next ( 'span' ) . text ( '' ) . attr ( 'class' , '' ) ;
2024-03-14 01:48:37 +01:00
biometricManager . authenticate ( { reason : 'The bot requests biometrics for testing purposes.' } , function ( success , token ) {
2024-03-08 12:49:56 +01:00
if ( success ) {
$ ( el ) . next ( 'span' ) . text ( '(Success, token: ' + token + ')' ) . attr ( 'class' , 'ok' ) ;
} else {
$ ( el ) . next ( 'span' ) . text ( '(Auth failed)' ) . attr ( 'class' , 'err' ) ;
}
} ) ;
} ,
2024-03-14 01:48:37 +01:00
biometricOpenSettings : function ( el ) {
var biometricManager = Telegram . WebApp . BiometricManager ;
if ( ! biometricManager . isInited ) {
return DemoApp . showAlert ( 'Biometric not inited yet!' ) ;
}
2024-03-26 00:48:05 +01:00
if ( ! biometricManager . isBiometricAvailable ||
2024-03-14 01:48:37 +01:00
! biometricManager . isAccessRequested ||
biometricManager . isAccessGranted ) {
return false ;
}
biometricManager . openSettings ( ) ;
} ,
2024-03-08 12:49:56 +01:00
biometricSetToken : function ( el ) {
var biometricManager = Telegram . WebApp . BiometricManager ;
if ( ! biometricManager . isInited ) {
return DemoApp . showAlert ( 'Biometric not inited yet!' ) ;
}
var token = parseInt ( Math . random ( ) . toString ( ) . substr ( 2 ) ) . toString ( 16 ) ;
biometricManager . updateBiometricToken ( token , function ( updated ) {
if ( updated ) {
2024-03-11 11:56:43 +01:00
$ ( '#bm_token_saved' ) . text ( biometricManager . isBiometricTokenSaved ? 'true' : 'false' ) ;
2024-03-13 22:02:27 +01:00
$ ( el ) . nextAll ( 'span' ) . text ( '(Updated: ' + token + ')' ) . attr ( 'class' , 'ok' ) ;
2024-03-08 12:49:56 +01:00
} else {
$ ( el ) . next ( 'span' ) . text ( '(Failed)' ) . attr ( 'class' , 'err' ) ;
}
} ) ;
} ,
biometricRemoveToken : function ( el ) {
var biometricManager = Telegram . WebApp . BiometricManager ;
if ( ! biometricManager . isInited ) {
return DemoApp . showAlert ( 'Biometric not inited yet!' ) ;
}
biometricManager . updateBiometricToken ( '' , function ( updated ) {
if ( updated ) {
2024-03-11 11:56:43 +01:00
$ ( '#bm_token_saved' ) . text ( biometricManager . isBiometricTokenSaved ? 'true' : 'false' ) ;
2024-03-08 12:49:56 +01:00
$ ( el ) . next ( 'span' ) . text ( '(Removed)' ) . attr ( 'class' , 'ok' ) ;
} else {
$ ( el ) . next ( 'span' ) . text ( '(Failed)' ) . attr ( 'class' , 'err' ) ;
}
} ) ;
} ,
2024-11-07 01:32:21 +01:00
locationInit : function ( el ) {
var locationManager = Telegram . WebApp . LocationManager ;
if ( ! DemoApp . locationInited ) {
DemoApp . locationInited = true ;
Telegram . WebApp . onEvent ( 'locationManagerUpdated' , function ( ) {
$ ( '#loc_inited' ) . text ( locationManager . isInited ? 'true' : 'false' ) ;
$ ( '#loc_available' ) . text ( locationManager . isLocationAvailable ? 'true' : 'false' ) ;
$ ( '#loc_access_requested' ) . text ( locationManager . isAccessRequested ? 'true' : 'false' ) ;
$ ( '#loc_access_granted' ) . text ( locationManager . isAccessGranted ? 'true' : 'false' ) ;
$ ( '#loc_settings' ) . toggle ( locationManager . isLocationAvailable && locationManager . isAccessRequested && ! locationManager . isAccessGranted ) ;
} ) ;
}
locationManager . init ( ) ;
} ,
locationGet : function ( el ) {
var locationManager = Telegram . WebApp . LocationManager ;
if ( ! locationManager . isInited ) {
return DemoApp . showAlert ( 'Location not inited yet!' ) ;
}
locationManager . getLocation ( function ( location _data ) {
if ( location _data ) {
$ ( el ) . next ( 'span' ) . text ( '(' + JSON . stringify ( location _data ) + ')' ) . attr ( 'class' , 'ok' ) ;
} else {
$ ( el ) . next ( 'span' ) . text ( '(Request declined)' ) . attr ( 'class' , 'err' ) ;
}
} ) ;
} ,
locationOpenSettings : function ( el ) {
var locationManager = Telegram . WebApp . LocationManager ;
if ( ! locationManager . isInited ) {
return DemoApp . showAlert ( 'Location not inited yet!' ) ;
}
if ( ! locationManager . isBiometricAvailable ||
! locationManager . isAccessRequested ||
locationManager . isAccessGranted ) {
return false ;
}
locationManager . openSettings ( ) ;
} ,
2022-06-03 15:49:36 +02:00
toggleMainButton : function ( el ) {
if ( DemoApp . MainButton . isVisible ) {
DemoApp . MainButton . hide ( ) ;
el . innerHTML = 'Show Main Button' ;
} else {
DemoApp . MainButton . show ( ) ;
el . innerHTML = 'Hide Main Button' ;
}
} ,
2024-08-23 19:07:48 +02:00
toggleSecondaryButton : function ( el ) {
if ( DemoApp . SecondaryButton . isVisible ) {
DemoApp . SecondaryButton . hide ( ) ;
el . innerHTML = 'Show Secondary Button' ;
} else {
DemoApp . SecondaryButton . show ( ) ;
el . innerHTML = 'Hide Secondary Button' ;
}
} ,
toggleButtonsProgress : function ( el ) {
if ( DemoApp . MainButton . isProgressVisible ) {
DemoApp . MainButton . hideProgress ( ) ;
DemoApp . SecondaryButton . hideProgress ( ) ;
el . innerHTML = 'Show Progress' ;
} else {
DemoApp . MainButton . showProgress ( ) ;
DemoApp . SecondaryButton . showProgress ( ) ;
el . innerHTML = 'Hide Progress' ;
}
} ,
moveSecondaryButton : function ( el ) {
var sButton = DemoApp . SecondaryButton ;
if ( sButton . position == 'left' ) {
sButton . position = 'top' ;
} else if ( sButton . position == 'top' ) {
sButton . position = 'right' ;
} else if ( sButton . position == 'right' ) {
sButton . position = 'bottom' ;
} else if ( sButton . position == 'bottom' ) {
sButton . position = 'left' ;
}
} ,
2023-09-14 15:30:39 +02:00
toggleBackButton : function ( el ) {
if ( DemoApp . BackButton . isVisible ) {
DemoApp . BackButton . hide ( ) ;
el . innerHTML = 'Show Back Button' ;
} else {
DemoApp . BackButton . show ( ) ;
el . innerHTML = 'Hide Back Button' ;
}
} ,
2023-10-02 17:03:05 +02:00
toggleSettingsButton : function ( el ) {
if ( DemoApp . SettingsButton . isVisible ) {
DemoApp . SettingsButton . hide ( ) ;
el . innerHTML = 'Show Settings Button' ;
} else {
DemoApp . SettingsButton . show ( ) ;
el . innerHTML = 'Hide Settings Button' ;
}
} ,
2024-07-04 17:47:43 +02:00
toggleSwipeBehavior : function ( el ) {
if ( Telegram . WebApp . isVerticalSwipesEnabled ) {
Telegram . WebApp . disableVerticalSwipes ( ) ;
el . innerHTML = 'Enable Vertical Swypes' ;
} else {
Telegram . WebApp . enableVerticalSwipes ( ) ;
el . innerHTML = 'Disable Vertical Swypes' ;
}
} ,
2024-11-05 01:32:09 +01:00
fullscreenInit : function ( ) {
Telegram . WebApp . onEvent ( 'fullscreenChanged' , function ( ) {
DemoApp . updateFullscreenButton ( ) ;
} ) ;
Telegram . WebApp . onEvent ( 'fullscreenFailed' , function ( params ) {
DemoApp . showAlert ( 'fullscreenFailed: ' + params . error ) ;
} ) ;
DemoApp . updateFullscreenButton ( ) ;
} ,
toggleFullscreen : function ( el ) {
if ( Telegram . WebApp . isFullscreen ) {
Telegram . WebApp . exitFullscreen ( ) ;
} else {
Telegram . WebApp . requestFullscreen ( ) ;
}
} ,
updateFullscreenButton : function ( ) {
if ( Telegram . WebApp . isFullscreen ) {
$ ( '#fullscreen_btn' ) . html ( 'Exit Fullscreen' ) ;
} else {
$ ( '#fullscreen_btn' ) . html ( 'Request Fullscreen' ) ;
}
} ,
accelerometerInit : function ( ) {
Telegram . WebApp . onEvent ( 'accelerometerStarted' , function ( ) {
$ ( '#accelerometer_btn' ) . next ( 'span' ) . text ( '' ) . attr ( 'class' , '' ) ;
DemoApp . updateAccelerometerLink ( ) ;
} ) ;
Telegram . WebApp . onEvent ( 'accelerometerStopped' , function ( ) {
$ ( '#accelerometer_btn' ) . next ( 'span' ) . text ( '' ) . attr ( 'class' , '' ) ;
DemoApp . updateAccelerometerLink ( ) ;
} ) ;
Telegram . WebApp . onEvent ( 'accelerometerChanged' , function ( params ) {
$ ( '#accelerometer_btn' ) . next ( 'span' ) . text ( '(x: ' + params . x + '; y: ' + params . y + '; z: ' + params . z + ')' ) . attr ( 'class' , 'ok' ) ;
} ) ;
Telegram . WebApp . onEvent ( 'accelerometerFailed' , function ( params ) {
$ ( '#accelerometer_btn' ) . next ( 'span' ) . text ( '(ERR: ' + params . error + ')' ) . attr ( 'class' , 'err' ) ;
} ) ;
DemoApp . updateAccelerometerLink ( ) ;
} ,
toggleAccelerometer : function ( el ) {
if ( Telegram . WebApp . Accelerometer . isStarted ) {
Telegram . WebApp . Accelerometer . stop ( ) ;
} else {
Telegram . WebApp . Accelerometer . start ( 100 ) ;
}
} ,
updateAccelerometerLink : function ( ) {
if ( Telegram . WebApp . Accelerometer . isStarted ) {
$ ( '#accelerometer_btn' ) . html ( 'Stop Accelerometer' ) ;
} else {
$ ( '#accelerometer_btn' ) . html ( 'Start Accelerometer' ) ;
}
} ,
deviceOrientationInit : function ( ) {
Telegram . WebApp . onEvent ( 'deviceOrientationStarted' , function ( ) {
$ ( '#device_orientation_btn' ) . next ( 'span' ) . text ( '' ) . attr ( 'class' , '' ) ;
DemoApp . updateDeviceOrientationLink ( ) ;
} ) ;
Telegram . WebApp . onEvent ( 'deviceOrientationStopped' , function ( ) {
$ ( '#device_orientation_btn' ) . next ( 'span' ) . text ( '' ) . attr ( 'class' , '' ) ;
DemoApp . updateDeviceOrientationLink ( ) ;
} ) ;
Telegram . WebApp . onEvent ( 'deviceOrientationChanged' , function ( ) {
$ ( '#device_orientation_btn' ) . next ( 'span' ) . text ( '(alpha: ' + params . alpha + '; beta: ' + params . beta + '; gamma: ' + params . gamma + ')' ) . attr ( 'class' , 'ok' ) ;
} ) ;
Telegram . WebApp . onEvent ( 'deviceOrientationFailed' , function ( params ) {
$ ( '#device_orientation_btn' ) . next ( 'span' ) . text ( '(ERR: ' + params . error + ')' ) . attr ( 'class' , 'err' ) ;
} ) ;
DemoApp . updateDeviceOrientationLink ( ) ;
} ,
toggleDeviceOrientation : function ( el ) {
if ( Telegram . WebApp . DeviceOrientation . isStarted ) {
Telegram . WebApp . DeviceOrientation . stop ( ) ;
} else {
Telegram . WebApp . DeviceOrientation . start ( 100 ) ;
}
} ,
updateDeviceOrientationLink : function ( ) {
if ( Telegram . WebApp . DeviceOrientation . isStarted ) {
$ ( '#device_orientation_btn' ) . html ( 'Stop DeviceOrientation' ) ;
} else {
$ ( '#device_orientation_btn' ) . html ( 'Start DeviceOrientation' ) ;
}
} ,
gyroscopeInit : function ( ) {
Telegram . WebApp . onEvent ( 'gyroscopeStarted' , function ( ) {
$ ( '#gyroscope_btn' ) . next ( 'span' ) . text ( '' ) . attr ( 'class' , '' ) ;
DemoApp . updateGyroscopeLink ( ) ;
} ) ;
Telegram . WebApp . onEvent ( 'gyroscopeStopped' , function ( ) {
$ ( '#gyroscope_btn' ) . next ( 'span' ) . text ( '' ) . attr ( 'class' , '' ) ;
DemoApp . updateGyroscopeLink ( ) ;
} ) ;
Telegram . WebApp . onEvent ( 'gyroscopeChanged' , function ( params ) {
$ ( '#gyroscope_btn' ) . next ( 'span' ) . text ( '(x: ' + params . x + '; y: ' + params . y + '; z: ' + params . z + ')' ) . attr ( 'class' , 'ok' ) ;
} ) ;
Telegram . WebApp . onEvent ( 'gyroscopeFailed' , function ( params ) {
$ ( '#gyroscope_btn' ) . next ( 'span' ) . text ( '(ERR: ' + params . error + ')' ) . attr ( 'class' , 'err' ) ;
} ) ;
DemoApp . updateGyroscopeLink ( ) ;
} ,
toggleGyroscope : function ( el ) {
if ( Telegram . WebApp . Gyroscope . isStarted ) {
Telegram . WebApp . Gyroscope . stop ( ) ;
} else {
Telegram . WebApp . Gyroscope . start ( 100 ) ;
}
} ,
updateGyroscopeLink : function ( ) {
if ( Telegram . WebApp . Gyroscope . isStarted ) {
$ ( '#gyroscope_btn' ) . html ( 'Stop Gyroscope' ) ;
} else {
$ ( '#gyroscope_btn' ) . html ( 'Start Gyroscope' ) ;
}
} ,
homeScreenInit : function ( ) {
2024-11-07 01:32:21 +01:00
Telegram . WebApp . onEvent ( 'homeScreenAdded' , function ( params ) {
$ ( '#add_to_home_btn' ) . next ( 'span' ) . text ( '(added!)' ) . attr ( 'class' , 'ok' ) ;
2024-11-05 01:32:09 +01:00
} ) ;
} ,
addToHomeScreen : function ( el ) {
2024-11-07 01:32:21 +01:00
Telegram . WebApp . addToHomeScreen ( ) ;
2024-11-05 01:32:09 +01:00
} ,
checkHomeScreenStatus : function ( el ) {
2024-11-07 01:32:21 +01:00
Telegram . WebApp . checkHomeScreenStatus ( function ( status ) {
$ ( el ) . next ( 'span' ) . text ( '(status: ' + status + ')' ) . attr ( 'class' , 'ok' ) ;
2024-11-05 01:32:09 +01:00
} ) ;
} ,
emojiStatusInit : function ( ) {
Telegram . WebApp . onEvent ( 'userEmojiStatusFailed' , function ( params ) {
DemoApp . showAlert ( 'userEmojiStatusFailed: ' + params . error ) ;
} ) ;
} ,
setEmojiStatus : function ( el , custom _emoji _id , expiration _date ) {
Telegram . WebApp . setUserEmojiStatus ( custom _emoji _id , expiration _date ? { expiration _date : expiration _date } : { } , function ( result ) {
if ( result ) {
$ ( el ) . next ( 'span' ) . text ( '(status set!)' ) . attr ( 'class' , 'ok' ) ;
} else {
$ ( el ) . next ( 'span' ) . text ( '(status NOT set)' ) . attr ( 'class' , 'err' ) ;
}
} ) ;
} ,
2024-11-07 01:32:21 +01:00
downloadFile : function ( el , url , file _name ) {
Telegram . WebApp . downloadFile ( { url : url , file _name : file _name } , function ( result ) {
if ( result ) {
$ ( el ) . next ( 'span' ) . text ( '(downloading...)' ) . attr ( 'class' , 'ok' ) ;
} else {
$ ( el ) . next ( 'span' ) . text ( '(declined)' ) . attr ( 'class' , 'err' ) ;
}
} ) ;
} ,
activityStartTime : new Date ( ) ,
activityPrevDuration : false ,
activityTo : null ,
activityInit : function ( ) {
Telegram . WebApp . onEvent ( 'activated' , function ( params ) {
DemoApp . activityStartTime = new Date ( ) ;
DemoApp . activityUpdate ( ) ;
} ) ;
Telegram . WebApp . onEvent ( 'deactivated' , function ( params ) {
DemoApp . activityPrevDuration = new Date ( ) - DemoApp . activityStartTime ;
DemoApp . activityStartTime = false ;
clearTimeout ( DemoApp . activityTo ) ;
DemoApp . activityUpdate ( ) ;
} ) ;
DemoApp . activityUpdate ( ) ;
} ,
activityUpdate : function ( ) {
if ( Telegram . WebApp . isActive ) {
var nowDuration = new Date ( ) - DemoApp . activityStartTime ;
$ ( '#cur_activity' ) . html ( 'Mini App is active for <b>' + Math . round ( nowDuration / 1000 ) + '</b> sec' ) ;
DemoApp . activityTo = setTimeout ( DemoApp . activityUpdate , 100 ) ;
} else {
$ ( '#cur_activity' ) . html ( 'Mini App is <b>inactive</b>' ) ;
}
if ( DemoApp . activityPrevDuration !== false ) {
var prevDuration = DemoApp . activityPrevDuration ;
$ ( '#prev_activity' ) . html ( ', <br>previously was active for <b>' + Math . round ( prevDuration / 1000 ) + '</b> sec' ) ;
}
} ,
2022-07-01 18:14:00 +02:00
showAlert : function ( message ) {
Telegram . WebApp . showAlert ( message ) ;
} ,
showConfirm : function ( message ) {
Telegram . WebApp . showConfirm ( message ) ;
} ,
showPopup : function ( ) {
Telegram . WebApp . showPopup ( {
title : 'Popup title' ,
message : 'Popup message' ,
buttons : [
{ id : 'delete' , type : 'destructive' , text : 'Delete all' } ,
{ id : 'faq' , type : 'default' , text : 'Open FAQ' } ,
{ type : 'cancel' } ,
]
} , function ( button _id ) {
if ( button _id == 'delete' ) {
DemoApp . showAlert ( "'Delete all' selected" ) ;
} else if ( button _id == 'faq' ) {
Telegram . WebApp . openLink ( 'https://telegram.org/faq' ) ;
}
} ) ;
} ,
2022-12-14 14:55:38 +01:00
showScanQrPopup : function ( links _only ) {
2022-12-13 15:46:38 +01:00
Telegram . WebApp . showScanQrPopup ( {
2022-12-14 14:55:38 +01:00
text : links _only ? 'with any link' : 'for test purposes'
2022-12-13 15:46:38 +01:00
} , function ( text ) {
2022-12-14 14:55:38 +01:00
if ( links _only ) {
2022-12-15 20:37:50 +01:00
var lower _text = text . toString ( ) . toLowerCase ( ) ;
2022-12-14 14:55:38 +01:00
if ( lower _text . substr ( 0 , 7 ) == 'http://' ||
lower _text . substr ( 0 , 8 ) == 'https://' ) {
setTimeout ( function ( ) {
Telegram . WebApp . openLink ( text ) ;
} , 50 ) ;
return true ;
}
} else {
2022-12-13 15:46:38 +01:00
DemoApp . showAlert ( text ) ;
2022-12-14 14:55:38 +01:00
return true ;
2022-12-13 15:46:38 +01:00
}
} ) ;
} ,
2022-06-03 15:49:36 +02:00
apiRequest : function ( method , data , onCallback ) {
var authData = DemoApp . initData || '' ;
2023-09-01 21:39:40 +02:00
$ . ajax ( DemoApp . apiUrl , {
2022-06-03 15:49:36 +02:00
type : 'POST' ,
data : $ . extend ( data , { _auth : authData , method : method } ) ,
dataType : 'json' ,
xhrFields : {
withCredentials : true
} ,
success : function ( result ) {
onCallback && onCallback ( result ) ;
} ,
error : function ( xhr ) {
onCallback && onCallback ( { error : 'Server error' } ) ;
}
} ) ;
}
} ;
var DemoAppMenu = {
init : function ( ) {
DemoApp . init ( ) ;
$ ( 'body' ) . addClass ( 'gray' ) ;
Telegram . WebApp . setHeaderColor ( 'secondary_bg_color' ) ;
}
} ;
var DemoAppInitData = {
init : function ( ) {
DemoApp . init ( ) ;
// $('body').addClass('gray');
// Telegram.WebApp.setHeaderColor('secondary_bg_color');
Telegram . WebApp . onEvent ( 'themeChanged' , function ( ) {
2023-10-30 20:40:25 +01:00
$ ( '#theme_data' ) . text ( JSON . stringify ( Telegram . WebApp . themeParams , null , 2 ) ) ;
2022-06-03 15:49:36 +02:00
} ) ;
2023-10-30 20:40:25 +01:00
$ ( '#webview_data' ) . text ( JSON . stringify ( DemoApp . initDataUnsafe , null , 2 ) ) ;
$ ( '#theme_data' ) . text ( JSON . stringify ( Telegram . WebApp . themeParams , null , 2 ) ) ;
2022-06-03 15:49:36 +02:00
DemoApp . checkInitData ( ) ;
}
} ;
var DemoAppViewport = {
init : function ( ) {
DemoApp . init ( ) ;
// $('body').addClass('gray');
// Telegram.WebApp.setHeaderColor('secondary_bg_color');
Telegram . WebApp . onEvent ( 'viewportChanged' , DemoAppViewport . setData ) ;
DemoAppViewport . setData ( ) ;
} ,
setData : function ( ) {
$ ( '.viewport-border' ) . attr ( 'text' , window . innerWidth + ' x ' + round ( Telegram . WebApp . viewportHeight , 2 ) ) ;
2024-11-07 01:32:21 +01:00
$ ( '.viewport-stable-border' ) . attr ( 'text' , window . innerWidth + ' x ' + round ( Telegram . WebApp . viewportStableHeight , 2 ) + ' | is_expanded: ' + ( Telegram . WebApp . isExpanded ? 'true' : 'false' ) ) ;
2022-06-03 15:49:36 +02:00
}
} ;
2023-08-26 14:03:09 +02:00
function cleanHTML ( value ) {
return value . replace ( /&/g , '&' ) . replace ( /</g , '<' ) . replace ( />/g , '>' ) . replace ( /"/g , '"' ) . replace ( /\n/g , '<br/>' ) ;
}
2022-06-03 15:49:36 +02:00
function byteLength ( str ) {
if ( window . Blob ) {
try { return new Blob ( [ str ] ) . size ; } catch ( e ) { }
}
var s = str . length ;
for ( var i = str . length - 1 ; i >= 0 ; i -- ) {
var code = str . charCodeAt ( i ) ;
if ( code > 0x7f && code <= 0x7ff ) s ++ ;
else if ( code > 0x7ff && code <= 0xffff ) s += 2 ;
if ( code >= 0xDC00 && code <= 0xDFFF ) i -- ;
}
return s ;
}
function round ( val , d ) {
var k = Math . pow ( 10 , d || 0 ) ;
return Math . round ( val * k ) / k ;
}
2023-09-14 15:30:39 +02:00
( function ( $ ) {
$ . fn . cssProp = function ( prop , val ) {
if ( typeof val !== 'undefined' ) {
return this . each ( function ( ) {
if ( this . style && this . style . setProperty ) {
this . style . setProperty ( prop , val ) ;
}
} ) ;
}
return this . first ( ) . map ( function ( ) {
if ( this . style && this . style . getPropertyValue ) {
return this . style . getPropertyValue ( prop ) ;
} else {
return '' ;
}
} ) . get ( 0 ) || '' ;
} ;
} ) ( jQuery ) ;