From 7a59b44b1544a8fc9e477de503a2d2c1acef60c0 Mon Sep 17 00:00:00 2001 From: "Oleg Koval (revenkroz)" Date: Sat, 23 Nov 2024 19:57:51 +0300 Subject: [PATCH] Up to Bot API 8.0 --- README.md | 20 +- index.html | 652 ++++++++++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 602 insertions(+), 70 deletions(-) diff --git a/README.md b/README.md index 5f5dfe42..20b6220b 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ -# Telegram Web Apps for Bots Example +# Telegram Web Apps for Bots / Mini App Example Example HTML-file that contains a plain-JS interaction with Telegram Web Apps API. -Live demo: [Attach Bot](https://t.me/asmico_attach_bot). +See live demo (with jQuery): [Attach Bot](https://t.me/asmico_attach_bot). ## Links * Official docs: https://core.telegram.org/bots/webapps @@ -10,12 +10,12 @@ Live demo: [Attach Bot](https://t.me/asmico_attach_bot). ## Quick setup -#### 0. Host the Web App in GitHub Pages +#### 0. Optional: Host the Web App in GitHub Pages The Web App must be hosted somewhere. Hosting it on a GitHub repository is a quick, free way to do it: 1. Create a repository (or fork this one) -2. On the repository: Settings > Pages: +2. On the repository: Settings –> Pages: - Source: Deploy from a branch - Branch: master, / (root), Save 3. Wait a few minutes for the web to be deployed. It will be available at: `https://{github-username}.github.io/{repository-name}/{location-inside-repository}`. In this case: `https://revenkroz.github.io/telegram-web-app-bot-example/index.html` @@ -23,10 +23,12 @@ The Web App must be hosted somewhere. Hosting it on a GitHub repository is a qui #### 1. Show the user a button to open a Web App. There are two ways: 1. Show the user a special menu button (near the message input field): - 1. Go to [Bot Father](https://t.me/BotFather) - 2. Select your bot - 3. `Bot Settings` — `Menu Button` — `Specify..`/`Edit menu button URL` - 4. Send a URL to your Web App (in this case, `https://revenkroz.github.io/telegram-web-app-bot-example/index.html`) + 1. Go to [Bot Father](https://t.me/BotFather) + 2. Select your bot + 3. To set button in Bio: `Bot Settings` — `Configure Mini App` + 4. Send a URL to your Web App (in this case, `https://revenkroz.github.io/telegram-web-app-bot-example/index.html`) + 5. To set corner button in Bot: `Bot Settings` — `Menu Button` — `Specify..`/`Edit menu button URL` + 6. Send a URL to your Web App (in this case, `https://revenkroz.github.io/telegram-web-app-bot-example/index.html`) 2. The second way is to send a button with the data that contains field `web_app` with a URL to a Web App: ```json @@ -47,4 +49,4 @@ To connect a Web App to the Telegram client, place the script `telegram-web-app. Once the script is connected, a `window.Telegram.WebApp` object will become available. -#### 3. Do the thing. +#### 3. Do the thing! diff --git a/index.html b/index.html index 05c959a9..743f6067 100644 --- a/index.html +++ b/index.html @@ -366,12 +366,18 @@
+ + + + + +
custom...
+
Bottom Bar: + +
@@ -421,6 +435,30 @@
  • telegram.org (opens in Opera)
  • Return back (Android only)
    • + + + + +

    Test permissions:

    @@ -438,6 +476,16 @@
    +

    Sensors:

    +
    + +
    +

    Test alerts:

      @@ -501,10 +549,23 @@
    +

    Location:

    +
    + +
    +
    Data passed to webview. - Checking hash... + Checking hash..., + checking signature...
    @@ -514,8 +575,15 @@ Version: , platform:
    +
    + +
    +
    +
    +
    +
    @@ -531,23 +599,34 @@ initData : Telegram.WebApp.initData || '', initDataUnsafe: Telegram.WebApp.initDataUnsafe || {}, MainButton: Telegram.WebApp.MainButton, + SecondaryButton: Telegram.WebApp.SecondaryButton, BackButton: Telegram.WebApp.BackButton, SettingsButton: Telegram.WebApp.SettingsButton, - init(options) { - document.body.style.visibility = '' - Telegram.WebApp.ready() + init: function(options) { + document.body.style.visibility = ''; + Telegram.WebApp.ready(); + Telegram.WebApp.MainButton.setParams({ - text : 'CLOSE WEBVIEW', + text: 'Close Webview', + has_shine_effect: true, is_visible: true - }).onClick(DemoApp.close) + }).onClick(DemoApp.close); + + Telegram.WebApp.SecondaryButton.setParams({ + text: 'Do Something', + is_visible: true + }).onClick(DemoApp.moveSecondaryButton); + Telegram.WebApp.BackButton.onClick(function() { - DemoApp.showAlert('Back button pressed') - }) + DemoApp.showAlert('Back button pressed'); + }); + Telegram.WebApp.SettingsButton.onClick(function() { - DemoApp.showAlert('Settings opened!') - }) + DemoApp.showAlert('Settings opened!'); + }); }, + expand() { Telegram.WebApp.expand(); }, @@ -555,41 +634,297 @@ Telegram.WebApp.close(); }, toggleMainButton(el) { - const mainButton = Telegram.WebApp.MainButton; + const mainButton = Telegram.WebApp.MainButton if (mainButton.isVisible) { - mainButton.hide(); - el.innerHTML = 'Show Main Button'; + mainButton.hide() + el.innerHTML = 'Show Main Button' } else { - mainButton.show(); - el.innerHTML = 'Hide Main Button'; + mainButton.show() + el.innerHTML = 'Hide Main Button' + } + }, + toggleSecondaryButton(el) { + if (DemoApp.SecondaryButton.isVisible) { + DemoApp.SecondaryButton.hide() + el.innerHTML = 'Show Secondary Button' + } else { + DemoApp.SecondaryButton.show(); + el.innerHTML = 'Hide Secondary Button' + } + }, + toggleButtonsProgress(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(el) { + const 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' } }, toggleBackButton(el) { if (DemoApp.BackButton.isVisible) { - DemoApp.BackButton.hide(); - el.innerHTML = 'Show Back Button'; + DemoApp.BackButton.hide() + el.innerHTML = 'Show Back Button' } else { - DemoApp.BackButton.show(); - el.innerHTML = 'Hide Back Button'; + DemoApp.BackButton.show() + el.innerHTML = 'Hide Back Button' } }, toggleSettingsButton(el) { if (DemoApp.SettingsButton.isVisible) { - DemoApp.SettingsButton.hide(); - el.innerHTML = 'Show Settings Button'; + DemoApp.SettingsButton.hide() + el.innerHTML = 'Show Settings Button' } else { - DemoApp.SettingsButton.show(); - el.innerHTML = 'Hide Settings Button'; + DemoApp.SettingsButton.show() + el.innerHTML = 'Hide Settings Button' } }, toggleSwipeBehavior(el) { if (Telegram.WebApp.isVerticalSwipesEnabled) { - Telegram.WebApp.disableVerticalSwipes(); - el.innerHTML = 'Enable Vertical Swypes'; + Telegram.WebApp.disableVerticalSwipes() + el.innerHTML = 'Enable Vertical Swypes' + } else { + Telegram.WebApp.enableVerticalSwipes() + el.innerHTML = 'Disable Vertical Swypes' + } + }, + toggleOrientationLock(el) { + if (Telegram.WebApp.isOrientationLocked) { + Telegram.WebApp.unlockOrientation() + el.innerHTML = 'Lock Orientation' + } else { + Telegram.WebApp.lockOrientation() + el.innerHTML = 'Unlock Orientation' + } + }, + fullscreenInit() { + Telegram.WebApp.onEvent('fullscreenChanged', function() { + DemoApp.updateFullscreenButton() + }) + Telegram.WebApp.onEvent('fullscreenFailed', function(params) { + DemoApp.showAlert('fullscreenFailed: ' + params.error) + }) + DemoApp.updateFullscreenButton() + }, + toggleFullscreen(el) { + if (Telegram.WebApp.isFullscreen) { + Telegram.WebApp.exitFullscreen() + } else { + Telegram.WebApp.requestFullscreen() + } + }, + updateFullscreenButton() { + const fullscreenBtn = document.getElementById('fullscreen_btn') + if (Telegram.WebApp.isFullscreen) { + fullscreenBtn.innerHTML = 'Exit Fullscreen' + } else { + fullscreenBtn.innerHTML = 'Request Fullscreen' + } + }, + + // accelerometer + accelerometerInit() { + Telegram.WebApp.onEvent('accelerometerStarted', function() { + const span = document.getElementById('accelerometer_btn').nextElementSibling; + span.textContent = ''; + span.className = ''; + DemoApp.updateAccelerometerLink(); + }) + + Telegram.WebApp.onEvent('accelerometerStopped', function() { + const span = document.getElementById('accelerometer_btn').nextElementSibling; + span.textContent = ''; + span.className = ''; + DemoApp.updateAccelerometerLink(); + }) + + Telegram.WebApp.onEvent('accelerometerChanged', function() { + const span = document.getElementById('accelerometer_btn').nextElementSibling; + span.textContent = '(x: ' + this.Accelerometer.x + '; y: ' + this.Accelerometer.y + '; z: ' + this.Accelerometer.z + ')'; + span.className = 'ok'; + }) + + Telegram.WebApp.onEvent('accelerometerFailed', function(params) { + const span = document.getElementById('accelerometer_btn').nextElementSibling; + span.textContent = '(ERR: ' + params.error + ')'; + span.className = 'err'; + }) + + DemoApp.updateAccelerometerLink() + }, + toggleAccelerometer: function(el) { + if (Telegram.WebApp.Accelerometer.isStarted) { + Telegram.WebApp.Accelerometer.stop(); + } else { + Telegram.WebApp.Accelerometer.start({ refresh_rate: 100 }); + } + }, + updateAccelerometerLink() { + var accelerometerBtn = document.getElementById('accelerometer_btn'); + if (Telegram.WebApp.Accelerometer.isStarted) { + accelerometerBtn.innerHTML = 'Stop Accelerometer'; + } else { + accelerometerBtn.innerHTML = 'Start Accelerometer'; + } + }, + + // device orientation + deviceOrientationInit() { + Telegram.WebApp.onEvent('deviceOrientationStarted', function() { + var span = document.getElementById('device_orientation_btn').nextElementSibling; + span.textContent = ''; + span.className = ''; + DemoApp.updateDeviceOrientationLink(); + }) + + Telegram.WebApp.onEvent('deviceOrientationStopped', function() { + var span = document.getElementById('device_orientation_btn').nextElementSibling; + span.textContent = ''; + span.className = ''; + DemoApp.updateDeviceOrientationLink(); + }) + + Telegram.WebApp.onEvent('deviceOrientationChanged', function() { + var span = document.getElementById('device_orientation_btn').nextElementSibling; + span.textContent = '(alpha: ' + this.DeviceOrientation.alpha + + '; beta: ' + this.DeviceOrientation.beta + + '; gamma: ' + this.DeviceOrientation.gamma + + '; absolute: ' + (this.DeviceOrientation.absolute ? 'true' : 'false') + ')'; + span.className = 'ok'; + }) + + Telegram.WebApp.onEvent('deviceOrientationFailed', function(params) { + var span = document.getElementById('device_orientation_btn').nextElementSibling; + span.textContent = '(ERR: ' + params.error + ')'; + span.className = 'err'; + }) + + DemoApp.updateDeviceOrientationLink() + }, + toggleDeviceOrientation(el, need_absolute) { + if (Telegram.WebApp.DeviceOrientation.isStarted) { + Telegram.WebApp.DeviceOrientation.stop(); + } else { + Telegram.WebApp.DeviceOrientation.start({ refresh_rate: 100, need_absolute: need_absolute }); + } + }, + updateDeviceOrientationLink() { + var deviceOrientationBtn = document.getElementById('device_orientation_btn'); + var absItem = document.getElementById('device_orientation_abs_item'); + + if (Telegram.WebApp.DeviceOrientation.isStarted) { + deviceOrientationBtn.innerHTML = 'Stop DeviceOrientation'; + absItem.style.display = 'none'; + } else { + deviceOrientationBtn.innerHTML = 'Start DeviceOrientation(need_absolute=false)'; + absItem.style.display = 'block'; + } + }, + + // gyroscope + gyroscopeInit() { + Telegram.WebApp.onEvent('gyroscopeStarted', function() { + var span = document.getElementById('gyroscope_btn').nextElementSibling; + span.textContent = ''; + span.className = ''; + DemoApp.updateGyroscopeLink(); + }) + + Telegram.WebApp.onEvent('gyroscopeStopped', function() { + var span = document.getElementById('gyroscope_btn').nextElementSibling; + span.textContent = ''; + span.className = ''; + DemoApp.updateGyroscopeLink(); + }) + + Telegram.WebApp.onEvent('gyroscopeChanged', function() { + var span = document.getElementById('gyroscope_btn').nextElementSibling; + span.textContent = '(x: ' + this.Gyroscope.x + '; y: ' + this.Gyroscope.y + '; z: ' + this.Gyroscope.z + ')'; + span.className = 'ok'; + }) + + Telegram.WebApp.onEvent('gyroscopeFailed', function(params) { + var span = document.getElementById('gyroscope_btn').nextElementSibling; + span.textContent = '(ERR: ' + params.error + ')'; + span.className = 'err'; + }) + + DemoApp.updateGyroscopeLink() + }, + toggleGyroscope(el) { + if (Telegram.WebApp.Gyroscope.isStarted) { + Telegram.WebApp.Gyroscope.stop(); + } else { + Telegram.WebApp.Gyroscope.start({ refresh_rate: 100 }); + } + }, + updateGyroscopeLink() { + var gyroscopeBtn = document.getElementById('gyroscope_btn'); + if (Telegram.WebApp.Gyroscope.isStarted) { + gyroscopeBtn.innerHTML = 'Stop Gyroscope'; } else { - Telegram.WebApp.enableVerticalSwipes(); - el.innerHTML = 'Disable Vertical Swypes'; + gyroscopeBtn.innerHTML = 'Start Gyroscope'; + } + }, + + // location + locationInit(el) { + const locationManager = Telegram.WebApp.LocationManager; + + if (!DemoApp.locationInited) { + DemoApp.locationInited = true; + Telegram.WebApp.onEvent('locationManagerUpdated', function() { + document.getElementById('loc_inited').textContent = locationManager.isInited ? 'true' : 'false'; + document.getElementById('loc_available').textContent = locationManager.isLocationAvailable ? 'true' : 'false'; + document.getElementById('loc_access_requested').textContent = locationManager.isAccessRequested ? 'true' : 'false'; + document.getElementById('loc_access_granted').textContent = locationManager.isAccessGranted ? 'true' : 'false'; + document.getElementById('loc_settings').style.display = (locationManager.isLocationAvailable && locationManager.isAccessRequested && !locationManager.isAccessGranted) ? 'block' : 'none'; + }); + } + locationManager.init(); + }, + locationGet(el) { + const locationManager = Telegram.WebApp.LocationManager; + if (!locationManager.isInited) { + return DemoApp.showAlert('Location not inited yet!'); + } + + locationManager.getLocation(function(location_data) { + const span = el.nextElementSibling; + if (location_data) { + span.textContent = '(' + JSON.stringify(location_data) + ')'; + span.className = 'ok'; + } else { + span.textContent = '(Request declined)'; + span.className = 'err'; + } + }) + }, + locationOpenSettings(el) { + const locationManager = Telegram.WebApp.LocationManager; + if (!locationManager.isInited) { + return DemoApp.showAlert('Location not inited yet!'); + } + + if (!locationManager.isLocationAvailable || !locationManager.isAccessRequested || locationManager.isAccessGranted) { + return false; } + + locationManager.openSettings(); }, // version to string Example: '6.9' @@ -1086,6 +1421,94 @@ }); }, + // home screen + homeScreenInit() { + Telegram.WebApp.onEvent('homeScreenAdded', function(params) { + const span = document.getElementById('add_to_home_btn').nextElementSibling; + span.textContent = '(added!)'; + span.className = 'ok'; + }) + }, + addToHomeScreen(el) { + Telegram.WebApp.addToHomeScreen() + }, + checkHomeScreenStatus(el) { + Telegram.WebApp.checkHomeScreenStatus(function(status) { + const span = el.nextElementSibling; + span.textContent = '(status: ' + status + ')'; + span.className = 'ok'; + }) + }, + + // emoji status + emojiStatusInit: function() { + Telegram.WebApp.onEvent('emojiStatusFailed', function(params) { + DemoApp.showAlert('emojiStatusFailed: ' + params.error); + }) + }, + setEmojiStatus: function(el, custom_emoji_id, duration) { + Telegram.WebApp.setEmojiStatus(custom_emoji_id, duration ? {duration: duration} : {}, function(result) { + const span = el.nextElementSibling; + if (result) { + span.textContent = '(status set!)'; + span.className = 'ok'; + } else { + span.textContent = '(status NOT set)'; + span.className = 'err'; + } + }); + }, + requestEmojiStatusAccess: function(el) { + Telegram.WebApp.requestEmojiStatusAccess(function(allowed) { + const span = el.nextElementSibling; + if (allowed) { + span.textContent = '(Access granted)'; + span.className = 'ok'; + } else { + span.textContent = '(User declined this request)'; + span.className = 'err'; + } + }) + }, + + // activity + 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() { + const curActivityElement = document.getElementById('cur_activity'); + const prevActivityElement = document.getElementById('prev_activity'); + + if (Telegram.WebApp.isActive) { + const nowDuration = new Date() - DemoApp.activityStartTime; + curActivityElement.innerHTML = 'Mini App is active for ' + Math.round(nowDuration / 1000) + ' sec'; + DemoApp.activityTo = setTimeout(DemoApp.activityUpdate, 100); + } else { + curActivityElement.innerHTML = 'Mini App is inactive'; + } + + if (DemoApp.activityPrevDuration !== false) { + const prevDuration = DemoApp.activityPrevDuration; + prevActivityElement.innerHTML = ',
    previously was active for ' + Math.round(prevDuration / 1000) + ' sec'; + } + }, + + // Other apiRequest(method, data, onCallback) { // DISABLE BACKEND FOR FRONTEND DEMO @@ -1111,7 +1534,19 @@ }).catch(function (error) { onCallback && onCallback({error: 'Server error'}); }); - } + }, + downloadFile: function(el, url, file_name) { + Telegram.WebApp.downloadFile({url: url, file_name: file_name}, function(result) { + const span = el.nextElementSibling; + if (result) { + span.textContent = '(downloading...)'; + span.className = 'ok'; + } else { + span.textContent = '(declined)'; + span.className = 'err'; + } + }); + }, } const DemoAppMenu = { @@ -1247,57 +1682,152 @@ Telegram.WebApp.onEvent('viewportChanged', setViewportData); setViewportData(); - let prevBgColorVal = document.getElementById('bg_color_sel').value; - const bgColorInput = document.getElementById('bg_color_input'); - const headerColorSel = document.getElementById('header_color_sel'); - - bgColorInput.value = Telegram.WebApp.backgroundColor; - document.body.setAttribute('style', '--bg-color:' + Telegram.WebApp.backgroundColor); - headerColorSel.value = 'secondary_bg_color'; - headerColorSel.addEventListener('change', function (e) { - const colorKey = e.target.value; - document.getElementById('top_sect').classList.toggle('second', colorKey === 'secondary_bg_color'); - Telegram.WebApp.setHeaderColor(colorKey); - document.body.setAttribute('style', '--bg-color:' + Telegram.WebApp.backgroundColor); - }); - bgColorInput.addEventListener('change', function (e) { - const color = e.target.value; + // bg color picker + const bgColorSel = document.getElementById('bg_color_sel') + const bgColorInput = document.getElementById('bg_color_input') + let prevBgColorValue = bgColorSel.value + bgColorInput.value = Telegram.WebApp.backgroundColor + document.body.style.setProperty('--bg-color', Telegram.WebApp.backgroundColor) + + bgColorInput.addEventListener('change', function(e) { + const color = e.target.value; document.getElementById('bg_color_val').textContent = color; - headerColorSel.value = 'custom'; - prevBgColorVal = document.getElementById('bg_color_sel').value; + bgColorSel.value = 'custom'; + prevBgColorValue = bgColorSel.value; Telegram.WebApp.setBackgroundColor(color); - document.body.setAttribute('style', '--bg-color:' + Telegram.WebApp.backgroundColor); - }); - headerColorSel.addEventListener('change', function (e) { - const colorKey = e.target.value; - if (colorKey === 'custom') { - headerColorSel.value = prevBgColorVal; - bgColorInput.focus(); + document.body.style.setProperty('--bg-color', Telegram.WebApp.backgroundColor); + }) + + bgColorSel.addEventListener('change', function(e) { + const color = e.target.value; + if (color === 'custom') { + bgColorSel.value = prevBgColorValue; + const input = bgColorInput; + input.focus(); + input.click(); } else { document.getElementById('bg_color_val').textContent = 'custom...'; - Telegram.WebApp.setBackgroundColor(colorKey); - document.body.setAttribute('style', '--bg-color:' + Telegram.WebApp.backgroundColor); + Telegram.WebApp.setBackgroundColor(color); + document.body.style.setProperty('--bg-color', Telegram.WebApp.backgroundColor); bgColorInput.value = Telegram.WebApp.backgroundColor; - prevBgColorVal = headerColorSel.value; + prevBgColorValue = bgColorSel.value; + } + }) + + // header color picker + const headerColorSel = document.getElementById('header_color_sel') + const headerColorInput = document.getElementById('header_color_input') + let prevHeaderColorValue = headerColorSel.value + headerColorInput.value = Telegram.WebApp.headerColor + document.body.style.setProperty('--header-color', Telegram.WebApp.headerColor) + + headerColorSel.value = 'secondary_bg_color' + + headerColorInput.addEventListener('change', function(e) { + const color = e.target.value; + document.getElementById('header_color_val').textContent = color; + headerColorSel.value = 'custom'; + prevHeaderColorValue = headerColorSel.value; + Telegram.WebApp.setHeaderColor(color); + document.body.style.setProperty('--header-color', Telegram.WebApp.headerColor); + }) + + headerColorSel.addEventListener('change', function(e) { + const color = e.target.value; + if (color === 'custom') { + headerColorSel.value = prevHeaderColorValue; + const input = headerColorInput; + input.focus(); + input.click(); + } else { + document.getElementById('header_color_val').textContent = 'custom...'; + Telegram.WebApp.setHeaderColor(color); + document.getElementById('top_sect').classList.toggle('second', color === 'secondary_bg_color'); + document.body.style.setProperty('--header-color', Telegram.WebApp.headerColor); + headerColorInput.value = Telegram.WebApp.headerColor; + prevHeaderColorValue = headerColorSel.value; + } + }) + + // bottom bar color picker + const bbarColorSel = document.getElementById('bbar_color_sel') + const bbarColorInput = document.getElementById('bbar_color_input') + let prevBbarColorValue = bbarColorSel.value; + bbarColorInput.value = Telegram.WebApp.bottomBarColor; + document.body.style.setProperty('--bottom-bar-color', Telegram.WebApp.bottomBarColor); + + bbarColorInput.addEventListener('change', function(e) { + const color = e.target.value; + document.getElementById('bbar_color_val').textContent = color; + bbarColorSel.value = 'custom'; + prevBbarColorValue = bbarColorSel.value; + Telegram.WebApp.setBottomBarColor(color); + document.body.style.setProperty('--bottom-bar-color', Telegram.WebApp.bottomBarColor); + }) + + bbarColorSel.addEventListener('change', function(e) { + const color = e.target.value; + if (color === 'custom') { + bbarColorSel.value = prevBbarColorValue; + const input = bbarColorInput; + input.focus(); + input.click(); + } else { + document.getElementById('bbar_color_val').textContent = 'custom...'; + Telegram.WebApp.setBottomBarColor(color); + document.body.style.setProperty('--bottom-bar-color', Telegram.WebApp.bottomBarColor); + bbarColorInput.value = Telegram.WebApp.bottomBarColor; + prevBbarColorValue = bbarColorSel.value; } - }); + }) + // theme Telegram.WebApp.onEvent('themeChanged', function () { - bgColorInput.value = Telegram.WebApp.backgroundColor; - document.body.setAttribute('style', '--bg-color:' + Telegram.WebApp.backgroundColor); - }); + bgColorInput.value = Telegram.WebApp.backgroundColor + document.body.setAttribute('style', '--bg-color:' + Telegram.WebApp.backgroundColor) + }) + + const orientBtn = document.getElementById('orient_btn') + if (Telegram.WebApp.isOrientationLocked) { + orientBtn.innerHTML = 'Unlock Orientation' + } else { + orientBtn.innerHTML = 'Lock Orientation' + } + // permissions try { DemoApp.testClipboard(document.getElementById('clipboard_test')); } catch(e) {} - try { DemoApp.loadCloudKeys(); } catch(e) {} - try { DemoApp.biometricInit(); } catch(e) {} + try { + DemoApp.fullscreenInit(); + } catch(e) {} + try { + DemoApp.accelerometerInit(); + } catch(e) {} + try { + DemoApp.deviceOrientationInit(); + } catch(e) {} + try { + DemoApp.gyroscopeInit(); + } catch(e) {} + try { + DemoApp.locationInit(); + } catch(e) {} + try { + DemoApp.homeScreenInit(); + } catch(e) {} + try { + DemoApp.emojiStatusInit(); + } catch(e) {} + try { + DemoApp.activityInit(); + } catch(e) {}