XCS
XCS
(function () {
var eventHandlers = {};
function urlSafeDecode(urlencoded) {
try {
urlencoded = urlencoded.replace(/\+/g, '%20');
return decodeURIComponent(urlencoded);
} catch (e) {
return urlencoded;
}
}
function urlParseHashParams(locationHash) {
locationHash = locationHash.replace(/^#/, '');
var params = {};
if (!locationHash.length) {
return params;
}
if (locationHash.indexOf('=') < 0 && locationHash.indexOf('?') < 0) {
params._path = urlSafeDecode(locationHash);
return params;
}
var qIndex = locationHash.indexOf('?');
if (qIndex >= 0) {
var pathParam = locationHash.substr(0, qIndex);
params._path = urlSafeDecode(pathParam);
locationHash = locationHash.substr(qIndex + 1);
}
var query_params = urlParseQueryString(locationHash);
for (var k in query_params) {
params[k] = query_params[k];
}
return params;
}
function urlParseQueryString(queryString) {
var params = {};
if (!queryString.length) {
return params;
}
var queryStringParams = queryString.split('&');
var i, param, paramName, paramValue;
for (i = 0; i < queryStringParams.length; i++) {
param = queryStringParams[i].split('=');
paramName = urlSafeDecode(param[0]);
paramValue = param[1] == null ? null : urlSafeDecode(param[1]);
params[paramName] = paramValue;
}
return params;
}
// Telegram apps will implement this logic to add service params (e.g.
tgShareScoreUrl) to game URL
function urlAppendHashParams(url, addHash) {
// url looks like 'https://game.com/path?query=1#hash'
// addHash looks like 'tgShareScoreUrl=' +
encodeURIComponent('tgb://share_game_score?hash=very_long_hash123')
function openProtoUrl(url) {
if (!url.match(/^(web\+)?tgb?:\/\/./)) {
return false;
}
var useIframe = navigator.userAgent.match(/iOS|iPhone OS|iPhone|iPod|iPad/i) ?
true : false;
if (useIframe) {
var iframeContEl = document.getElementById('tgme_frame_cont') ||
document.body;
var iframeEl = document.createElement('iframe');
iframeContEl.appendChild(iframeEl);
var pageHidden = false;
var enableHidden = function () {
pageHidden = true;
};
window.addEventListener('pagehide', enableHidden, false);
window.addEventListener('blur', enableHidden, false);
if (iframeEl !== null) {
iframeEl.src = url;
}
setTimeout(function() {
if (!pageHidden) {
window.location = url;
}
window.removeEventListener('pagehide', enableHidden, false);
window.removeEventListener('blur', enableHidden, false);
}, 2000);
}
else {
window.location = url;
}
return true;
}
if (!window.Telegram) {
window.Telegram = {};
}
window.Telegram.WebView = {
initParams: initParams,
isIframe: isIframe,
onEvent: onEvent,
offEvent: offEvent,
postEvent: postEvent,
receiveEvent: receiveEvent,
callEventCallbacks: callEventCallbacks
};
window.Telegram.Utils = {
urlSafeDecode: urlSafeDecode,
urlParseQueryString: urlParseQueryString,
urlParseHashParams: urlParseHashParams,
urlAppendHashParams: urlAppendHashParams,
sessionStorageSet: sessionStorageSet,
sessionStorageGet: sessionStorageGet
};
// WebApp
(function () {
var Utils = window.Telegram.Utils;
var WebView = window.Telegram.WebView;
var initParams = WebView.initParams;
var isIframe = WebView.isIframe;
function onWindowResize(e) {
if (lastWindowHeight != window.innerHeight) {
lastWindowHeight = window.innerHeight;
receiveWebViewEvent('viewportChanged', {
isStateStable: true
});
}
}
function linkHandler(e) {
if (e.metaKey || e.ctrlKey) return;
var el = e.target;
while (el.tagName != 'A' && el.parentNode) {
el = el.parentNode;
}
if (el.tagName == 'A' &&
el.target != '_blank' &&
(el.protocol == 'http:' || el.protocol == 'https:') &&
el.hostname == 't.me') {
WebApp.openTgLink(el.href);
e.preventDefault();
}
}
function strTrim(str) {
return str.toString().replace(/^\s+|\s+$/g, '');
}
function receiveWebViewEvent(eventType) {
var args = Array.prototype.slice.call(arguments);
eventType = args.shift();
WebView.callEventCallbacks('webview:' + eventType, function(callback) {
callback.apply(WebApp, args);
});
}
function setThemeParams(theme_params) {
// temp iOS fix
if (theme_params.bg_color == '#1c1c1d' &&
theme_params.bg_color == theme_params.secondary_bg_color) {
theme_params.secondary_bg_color = '#2c2c2e';
}
var color;
for (var key in theme_params) {
if (color = parseColorToHex(theme_params[key])) {
themeParams[key] = color;
if (key == 'bg_color') {
colorScheme = isColorDark(color) ? 'dark' : 'light'
setCssProperty('color-scheme', colorScheme);
}
key = 'theme-' + key.split('_').join('-');
setCssProperty(key, color);
}
}
Utils.sessionStorageSet('themeParams', themeParams);
}
function parseColorToHex(color) {
color += '';
var match;
if (match = /^\s*#([0-9a-f]{6})\s*$/i.exec(color)) {
return '#' + match[1].toLowerCase();
}
else if (match = /^\s*#([0-9a-f])([0-9a-f])([0-9a-f])\s*$/i.exec(color)) {
return ('#' + match[1] + match[1] + match[2] + match[2] + match[3] +
match[3]).toLowerCase();
}
else if (match = /^\s*rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+\.{0,1}\d*))?\)\
s*$/.exec(color)) {
var r = parseInt(match[1]), g = parseInt(match[2]), b = parseInt(match[3]);
r = (r < 16 ? '0' : '') + r.toString(16);
g = (g < 16 ? '0' : '') + g.toString(16);
b = (b < 16 ? '0' : '') + b.toString(16);
return '#' + r + g + b;
}
return false;
}
function isColorDark(rgb) {
rgb = rgb.replace(/[\s#]/g, '');
if (rgb.length == 3) {
rgb = rgb[0] + rgb[0] + rgb[1] + rgb[1] + rgb[2] + rgb[2];
}
var r = parseInt(rgb.substr(0, 2), 16);
var g = parseInt(rgb.substr(2, 2), 16);
var b = parseInt(rgb.substr(4, 2), 16);
var hsp = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b));
return hsp < 120;
}
function versionAtLeast(ver) {
return versionCompare(webAppVersion, ver) >= 0;
}
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;
}
WebView.onEvent('back_button_pressed', onBackButtonPressed);
function onBackButtonPressed() {
receiveWebViewEvent('backButtonClicked');
}
function buttonParams() {
return {is_visible: isVisible};
}
function buttonState(btn_params) {
if (typeof btn_params === 'undefined') {
btn_params = buttonParams();
}
return JSON.stringify(btn_params);
}
function buttonCheckVersion() {
if (!versionAtLeast('6.1')) {
console.warn('[Telegram.WebApp] BackButton is not supported in version ' +
webAppVersion);
return false;
}
return true;
}
function updateButton() {
var btn_params = buttonParams();
var btn_state = buttonState(btn_params);
if (curButtonState === btn_state) {
return;
}
curButtonState = btn_state;
WebView.postEvent('web_app_setup_back_button', false, btn_params);
}
function setParams(params) {
if (!buttonCheckVersion()) {
return backButton;
}
if (typeof params.is_visible !== 'undefined') {
isVisible = !!params.is_visible;
}
updateButton();
return backButton;
}
backButton.onClick = function(callback) {
if (buttonCheckVersion()) {
onWebViewEvent('backButtonClicked', callback);
}
return backButton;
};
backButton.offClick = function(callback) {
if (buttonCheckVersion()) {
offWebViewEvent('backButtonClicked', callback);
}
return backButton;
};
backButton.show = function() {
return setParams({is_visible: true});
};
backButton.hide = function() {
return setParams({is_visible: false});
};
return backButton;
})();
var mainButtonHeight = 0;
var MainButton = (function() {
var isVisible = false;
var isActive = true;
var isProgressVisible = false;
var buttonText = 'CONTINUE';
var buttonColor = false;
var buttonTextColor = false;
WebView.onEvent('main_button_pressed', onMainButtonPressed);
function onMainButtonPressed() {
if (isActive) {
receiveWebViewEvent('mainButtonClicked');
}
}
function buttonParams() {
var color = mainButton.color;
var text_color = mainButton.textColor;
return isVisible ? {
is_visible: true,
is_active: isActive,
is_progress_visible: isProgressVisible,
text: buttonText,
color: color,
text_color: text_color
} : {is_visible: false};
}
function buttonState(btn_params) {
if (typeof btn_params === 'undefined') {
btn_params = buttonParams();
}
return JSON.stringify(btn_params);
}
function updateButton() {
var btn_params = buttonParams();
var btn_state = buttonState(btn_params);
if (curButtonState === btn_state) {
return;
}
curButtonState = btn_state;
WebView.postEvent('web_app_setup_main_button', false, btn_params);
if (initParams.tgWebAppDebug) {
updateDebugButton(btn_params);
}
}
function updateDebugButton(btn_params) {
if (btn_params.is_visible) {
debugBtn.style.display = 'block';
mainButtonHeight = 48;
function setParams(params) {
if (typeof params.text !== 'undefined') {
var text = strTrim(params.text);
if (!text.length) {
console.error('[Telegram.WebApp] Main button text is required',
params.text);
throw Error('WebAppMainButtonParamInvalid');
}
if (text.length > 64) {
console.error('[Telegram.WebApp] Main button text is too long', text);
throw Error('WebAppMainButtonParamInvalid');
}
buttonText = text;
}
if (typeof params.color !== 'undefined') {
if (params.color === false ||
params.color === null) {
buttonColor = false;
} else {
var color = parseColorToHex(params.color);
if (!color) {
console.error('[Telegram.WebApp] Main button color format is invalid',
params.color);
throw Error('WebAppMainButtonParamInvalid');
}
buttonColor = color;
}
}
if (typeof params.text_color !== 'undefined') {
if (params.text_color === false ||
params.text_color === null) {
buttonTextColor = false;
} else {
var text_color = parseColorToHex(params.text_color);
if (!text_color) {
console.error('[Telegram.WebApp] Main button text color format is
invalid', params.text_color);
throw Error('WebAppMainButtonParamInvalid');
}
buttonTextColor = text_color;
}
}
if (typeof params.is_visible !== 'undefined') {
if (params.is_visible &&
!mainButton.text.length) {
console.error('[Telegram.WebApp] Main button text is required');
throw Error('WebAppMainButtonParamInvalid');
}
isVisible = !!params.is_visible;
}
if (typeof params.is_active !== 'undefined') {
isActive = !!params.is_active;
}
updateButton();
return mainButton;
}
mainButton.setText = function(text) {
return mainButton.setParams({text: text});
};
mainButton.onClick = function(callback) {
onWebViewEvent('mainButtonClicked', callback);
return mainButton;
};
mainButton.offClick = function(callback) {
offWebViewEvent('mainButtonClicked', callback);
return mainButton;
};
mainButton.show = function() {
return mainButton.setParams({is_visible: true});
};
mainButton.hide = function() {
return mainButton.setParams({is_visible: false});
};
mainButton.enable = function() {
return mainButton.setParams({is_active: true});
};
mainButton.disable = function() {
return mainButton.setParams({is_active: false});
};
mainButton.showProgress = function(leaveActive) {
isActive = !!leaveActive;
isProgressVisible = true;
updateButton();
return mainButton;
};
mainButton.hideProgress = function() {
if (!mainButton.isActive) {
isActive = true;
}
isProgressVisible = false;
updateButton();
return mainButton;
}
mainButton.setParams = setParams;
return mainButton;
})();
WebView.onEvent('settings_button_pressed', onSettingsButtonPressed);
function onSettingsButtonPressed() {
receiveWebViewEvent('settingsButtonClicked');
}
function buttonParams() {
return {is_visible: isVisible};
}
function buttonState(btn_params) {
if (typeof btn_params === 'undefined') {
btn_params = buttonParams();
}
return JSON.stringify(btn_params);
}
function buttonCheckVersion() {
if (!versionAtLeast('6.10')) {
console.warn('[Telegram.WebApp] SettingsButton is not supported in version
' + webAppVersion);
return false;
}
return true;
}
function updateButton() {
var btn_params = buttonParams();
var btn_state = buttonState(btn_params);
if (curButtonState === btn_state) {
return;
}
curButtonState = btn_state;
WebView.postEvent('web_app_setup_settings_button', false, btn_params);
}
function setParams(params) {
if (!buttonCheckVersion()) {
return settingsButton;
}
if (typeof params.is_visible !== 'undefined') {
isVisible = !!params.is_visible;
}
updateButton();
return settingsButton;
}
settingsButton.onClick = function(callback) {
if (buttonCheckVersion()) {
onWebViewEvent('settingsButtonClicked', callback);
}
return settingsButton;
};
settingsButton.offClick = function(callback) {
if (buttonCheckVersion()) {
offWebViewEvent('settingsButtonClicked', callback);
}
return settingsButton;
};
settingsButton.show = function() {
return setParams({is_visible: true});
};
settingsButton.hide = function() {
return setParams({is_visible: false});
};
return settingsButton;
})();
function triggerFeedback(params) {
if (!versionAtLeast('6.1')) {
console.warn('[Telegram.WebApp] HapticFeedback is not supported in version
' + webAppVersion);
return hapticFeedback;
}
if (params.type == 'impact') {
if (params.impact_style != 'light' &&
params.impact_style != 'medium' &&
params.impact_style != 'heavy' &&
params.impact_style != 'rigid' &&
params.impact_style != 'soft') {
console.error('[Telegram.WebApp] Haptic impact style is invalid',
params.impact_style);
throw Error('WebAppHapticImpactStyleInvalid');
}
} else if (params.type == 'notification') {
if (params.notification_type != 'error' &&
params.notification_type != 'success' &&
params.notification_type != 'warning') {
console.error('[Telegram.WebApp] Haptic notification type is invalid',
params.notification_type);
throw Error('WebAppHapticNotificationTypeInvalid');
}
} else if (params.type == 'selection_change') {
// no params needed
} else {
console.error('[Telegram.WebApp] Haptic feedback type is invalid',
params.type);
throw Error('WebAppHapticFeedbackTypeInvalid');
}
WebView.postEvent('web_app_trigger_haptic_feedback', false, params);
return hapticFeedback;
}
hapticFeedback.impactOccurred = function(style) {
return triggerFeedback({type: 'impact', impact_style: style});
};
hapticFeedback.notificationOccurred = function(type) {
return triggerFeedback({type: 'notification', notification_type: type});
};
hapticFeedback.selectionChanged = function() {
return triggerFeedback({type: 'selection_change'});
};
return hapticFeedback;
})();
WebView.onEvent('biometry_info_received', onBiometryInfoReceived);
WebView.onEvent('biometry_auth_requested', onBiometryAuthRequested);
WebView.onEvent('biometry_token_updated', onBiometryTokenUpdated);
if (initRequestState.callbacks.length > 0) {
for (var i = 0; i < initRequestState.callbacks.length; i++) {
var callback = initRequestState.callbacks[i];
callback();
}
}
if (accessRequestState) {
var state = accessRequestState;
accessRequestState = false;
if (state.callback) {
state.callback(isAccessGranted);
}
}
receiveWebViewEvent('biometricManagerUpdated');
}
function onBiometryAuthRequested(eventType, eventData) {
var isAuthenticated = (eventData.status == 'authorized'),
biometricToken = eventData.token || '';
if (authRequestState) {
var state = authRequestState;
authRequestState = false;
if (state.callback) {
state.callback(isAuthenticated, isAuthenticated ? biometricToken : null);
}
}
receiveWebViewEvent('biometricAuthRequested', isAuthenticated ? {
isAuthenticated: true,
biometricToken: biometricToken
} : {
isAuthenticated: false
});
}
function onBiometryTokenUpdated(eventType, eventData) {
var applied = false;
if (isBiometricAvailable &&
isAccessRequested) {
if (eventData.status == 'updated') {
isBiometricTokenSaved = true;
applied = true;
}
else if (eventData.status == 'removed') {
isBiometricTokenSaved = false;
applied = true;
}
}
if (tokenRequestState) {
var state = tokenRequestState;
tokenRequestState = false;
if (state.callback) {
state.callback(applied);
}
}
receiveWebViewEvent('biometricTokenUpdated', {
isUpdated: applied
});
}
function checkVersion() {
if (!versionAtLeast('7.2')) {
console.warn('[Telegram.WebApp] BiometricManager is not supported in
version ' + webAppVersion);
return false;
}
return true;
}
function checkInit() {
if (!isInited) {
console.error('[Telegram.WebApp] BiometricManager should be inited before
using.');
throw Error('WebAppBiometricManagerNotInited');
}
return true;
}
biometricManager.init = function(callback) {
if (!checkVersion()) {
return biometricManager;
}
if (isInited) {
return biometricManager;
}
if (callback) {
initRequestState.callbacks.push(callback);
}
WebView.postEvent('web_app_biometry_get_info', false);
return biometricManager;
};
biometricManager.requestAccess = function(params, callback) {
if (!checkVersion()) {
return biometricManager;
}
checkInit();
if (!isBiometricAvailable) {
console.error('[Telegram.WebApp] Biometrics is not available on this
device.');
throw Error('WebAppBiometricManagerBiometricsNotAvailable');
}
if (accessRequestState) {
console.error('[Telegram.WebApp] Access is already requested');
throw Error('WebAppBiometricManagerAccessRequested');
}
var popup_params = {};
if (typeof params.reason !== 'undefined') {
var reason = strTrim(params.reason);
if (reason.length > 128) {
console.error('[Telegram.WebApp] Biometric reason is too long', reason);
throw Error('WebAppBiometricRequestAccessParamInvalid');
}
if (reason.length > 0) {
popup_params.reason = reason;
}
}
accessRequestState = {
callback: callback
};
WebView.postEvent('web_app_biometry_request_access', false, popup_params);
return biometricManager;
};
biometricManager.authenticate = function(params, callback) {
if (!checkVersion()) {
return biometricManager;
}
checkInit();
if (!isBiometricAvailable) {
console.error('[Telegram.WebApp] Biometrics is not available on this
device.');
throw Error('WebAppBiometricManagerBiometricsNotAvailable');
}
if (!isAccessGranted) {
console.error('[Telegram.WebApp] Biometric access was not granted by the
user.');
throw Error('WebAppBiometricManagerBiometricAccessNotGranted');
}
if (authRequestState) {
console.error('[Telegram.WebApp] Authentication request is already in
progress.');
throw Error('WebAppBiometricManagerAuthenticationRequested');
}
var popup_params = {};
if (typeof params.reason !== 'undefined') {
var reason = strTrim(params.reason);
if (reason.length > 128) {
console.error('[Telegram.WebApp] Biometric reason is too long', reason);
throw Error('WebAppBiometricRequestAccessParamInvalid');
}
if (reason.length > 0) {
popup_params.reason = reason;
}
}
authRequestState = {
callback: callback
};
WebView.postEvent('web_app_biometry_request_auth', false, popup_params);
return biometricManager;
};
biometricManager.updateBiometricToken = function(token, callback) {
if (!checkVersion()) {
return biometricManager;
}
token = token || '';
if (token.length > 1024) {
console.error('[Telegram.WebApp] Token is too long', token);
throw Error('WebAppBiometricManagerTokenInvalid');
}
checkInit();
if (!isBiometricAvailable) {
console.error('[Telegram.WebApp] Biometrics is not available on this
device.');
throw Error('WebAppBiometricManagerBiometricsNotAvailable');
}
if (!isAccessGranted) {
console.error('[Telegram.WebApp] Biometric access was not granted by the
user.');
throw Error('WebAppBiometricManagerBiometricAccessNotGranted');
}
if (tokenRequestState) {
console.error('[Telegram.WebApp] Token request is already in progress.');
throw Error('WebAppBiometricManagerTokenUpdateRequested');
}
tokenRequestState = {
callback: callback
};
WebView.postEvent('web_app_biometry_update_token', false, {token: token});
return biometricManager;
};
biometricManager.openSettings = function() {
if (!checkVersion()) {
return biometricManager;
}
checkInit();
if (!isBiometricAvailable) {
console.error('[Telegram.WebApp] Biometrics is not available on this
device.');
throw Error('WebAppBiometricManagerBiometricsNotAvailable');
}
if (!isAccessRequested) {
console.error('[Telegram.WebApp] Biometric access was not requested yet.');
throw Error('WebAppBiometricManagerBiometricsAccessNotRequested');
}
if (isAccessGranted) {
console.warn('[Telegram.WebApp] Biometric access was granted by the user,
no need to go to settings.');
return biometricManager;
}
WebView.postEvent('web_app_biometry_open_settings', false);
return biometricManager;
};
return biometricManager;
})();
if (!window.Telegram) {
window.Telegram = {};
}
Object.defineProperty(WebApp, 'initData', {
get: function(){ return webAppInitData; },
enumerable: true
});
Object.defineProperty(WebApp, 'initDataUnsafe', {
get: function(){ return webAppInitDataUnsafe; },
enumerable: true
});
Object.defineProperty(WebApp, 'version', {
get: function(){ return webAppVersion; },
enumerable: true
});
Object.defineProperty(WebApp, 'platform', {
get: function(){ return webAppPlatform; },
enumerable: true
});
Object.defineProperty(WebApp, 'colorScheme', {
get: function(){ return colorScheme; },
enumerable: true
});
Object.defineProperty(WebApp, 'themeParams', {
get: function(){ return themeParams; },
enumerable: true
});
Object.defineProperty(WebApp, 'isExpanded', {
get: function(){ return isExpanded; },
enumerable: true
});
Object.defineProperty(WebApp, 'viewportHeight', {
get: function(){ return (viewportHeight === false ? window.innerHeight :
viewportHeight) - mainButtonHeight; },
enumerable: true
});
Object.defineProperty(WebApp, 'viewportStableHeight', {
get: function(){ return (viewportStableHeight === false ? window.innerHeight :
viewportStableHeight) - mainButtonHeight; },
enumerable: true
});
Object.defineProperty(WebApp, 'isClosingConfirmationEnabled', {
set: function(val){ setClosingConfirmation(val); },
get: function(){ return isClosingConfirmationEnabled; },
enumerable: true
});
Object.defineProperty(WebApp, 'isVerticalSwipesEnabled', {
set: function(val){ toggleVerticalSwipes(val); },
get: function(){ return isVerticalSwipesEnabled; },
enumerable: true
});
Object.defineProperty(WebApp, 'headerColor', {
set: function(val){ setHeaderColor(val); },
get: function(){ return getHeaderColor(); },
enumerable: true
});
Object.defineProperty(WebApp, 'backgroundColor', {
set: function(val){ setBackgroundColor(val); },
get: function(){ return getBackgroundColor(); },
enumerable: true
});
Object.defineProperty(WebApp, 'BackButton', {
value: BackButton,
enumerable: true
});
Object.defineProperty(WebApp, 'MainButton', {
value: MainButton,
enumerable: true
});
Object.defineProperty(WebApp, 'SettingsButton', {
value: SettingsButton,
enumerable: true
});
Object.defineProperty(WebApp, 'HapticFeedback', {
value: HapticFeedback,
enumerable: true
});
Object.defineProperty(WebApp, 'CloudStorage', {
value: CloudStorage,
enumerable: true
});
Object.defineProperty(WebApp, 'BiometricManager', {
value: BiometricManager,
enumerable: true
});
WebApp.setHeaderColor = function(color_key) {
WebApp.headerColor = color_key;
};
WebApp.setBackgroundColor = function(color) {
WebApp.backgroundColor = color;
};
WebApp.enableClosingConfirmation = function() {
WebApp.isClosingConfirmationEnabled = true;
};
WebApp.disableClosingConfirmation = function() {
WebApp.isClosingConfirmationEnabled = false;
};
WebApp.enableVerticalSwipes = function() {
WebApp.isVerticalSwipesEnabled = true;
};
WebApp.disableVerticalSwipes = function() {
WebApp.isVerticalSwipesEnabled = false;
};
WebApp.isVersionAtLeast = function(ver) {
return versionAtLeast(ver);
};
WebApp.onEvent = function(eventType, callback) {
onWebViewEvent(eventType, callback);
};
WebApp.offEvent = function(eventType, callback) {offWebViewEvent(eventType,
callback);
};
WebApp.sendData = function (data) {
if (!data || !data.length) {
console.error('[Telegram.WebApp] Data is required', data);
throw Error('WebAppDataInvalid');
}
if (byteLength(data) > 4096) {
console.error('[Telegram.WebApp] Data is too long', data);
throw Error('WebAppDataInvalid');
}
WebView.postEvent('web_app_data_send', false, {data: data});
};
WebApp.switchInlineQuery = function (query, choose_chat_types) {
if (!versionAtLeast('6.6')) {
console.error('[Telegram.WebApp] Method switchInlineQuery is not supported in
version ' + webAppVersion);
throw Error('WebAppMethodUnsupported');
}
if (!initParams.tgWebAppBotInline) {
console.error('[Telegram.WebApp] Inline mode is disabled for this bot. Read
more about inline mode: https://core.telegram.org/bots/inline');
throw Error('WebAppInlineModeDisabled');
}
query = query || '';
if (query.length > 256) {
console.error('[Telegram.WebApp] Inline query is too long', query);
throw Error('WebAppInlineQueryInvalid');
}
var chat_types = [];
if (choose_chat_types) {
if (!Array.isArray(choose_chat_types)) {
console.error('[Telegram.WebApp] Choose chat types should be an array',
choose_chat_types);
throw Error('WebAppInlineChooseChatTypesInvalid');
}
var good_types = {users: 1, bots: 1, groups: 1, channels: 1};
for (var i = 0; i < choose_chat_types.length; i++) {
var chat_type = choose_chat_types[i];
if (!good_types[chat_type]) {
console.error('[Telegram.WebApp] Choose chat type is invalid',
chat_type);
throw Error('WebAppInlineChooseChatTypeInvalid');
}
if (good_types[chat_type] != 2) {
good_types[chat_type] = 2;
chat_types.push(chat_type);
}
}
}
WebView.postEvent('web_app_switch_inline_query', false, {query: query,
chat_types: chat_types});
};
WebApp.openLink = function (url, options) {
var a = document.createElement('A');
a.href = url;
if (a.protocol != 'http:' &&
a.protocol != 'https:') {
console.error('[Telegram.WebApp] Url protocol is not supported', url);
throw Error('WebAppTgUrlInvalid');
}
var url = a.href;
options = options || {};
if (versionAtLeast('6.1')) {
var req_params = {url: url};
if (versionAtLeast('6.4') && options.try_instant_view) {
req_params.try_instant_view = true;
}
if (versionAtLeast('7.6') && options.try_browser) {
req_params.try_browser = options.try_browser;
}
WebView.postEvent('web_app_open_link', false, req_params);
} else {
window.open(url, '_blank');
}
};
WebApp.openTelegramLink = function (url) {
var a = document.createElement('A');
a.href = url;
if (a.protocol != 'http:' &&
a.protocol != 'https:') {
console.error('[Telegram.WebApp] Url protocol is not supported', url);
throw Error('WebAppTgUrlInvalid');
}
if (a.hostname != 't.me') {
console.error('[Telegram.WebApp] Url host is not supported', url);
throw Error('WebAppTgUrlInvalid');
}
var path_full = a.pathname + a.search;
if (isIframe || versionAtLeast('6.1')) {
WebView.postEvent('web_app_open_tg_link', false, {path_full: path_full});
} else {
location.href = 'https://t.me' + path_full;
}
};
WebApp.openInvoice = function (url, callback) {
var a = document.createElement('A'), match, slug;
a.href = url;
if (a.protocol != 'http:' &&
a.protocol != 'https:' ||
a.hostname != 't.me' ||
!(match = a.pathname.match(/^\/(\$|invoice\/)([A-Za-z0-9\-_=]+)$/)) ||
!(slug = match[2])) {
console.error('[Telegram.WebApp] Invoice url is invalid', url);
throw Error('WebAppInvoiceUrlInvalid');
}
if (!versionAtLeast('6.1')) {
console.error('[Telegram.WebApp] Method openInvoice is not supported in
version ' + webAppVersion);
throw Error('WebAppMethodUnsupported');
}
if (webAppInvoices[slug]) {
console.error('[Telegram.WebApp] Invoice is already opened');
throw Error('WebAppInvoiceOpened');
}
webAppInvoices[slug] = {
url: url,
callback: callback
};
WebView.postEvent('web_app_open_invoice', false, {slug: slug});
};
WebApp.showPopup = function (params, callback) {
if (!versionAtLeast('6.2')) {
console.error('[Telegram.WebApp] Method showPopup is not supported in version
' + webAppVersion);
throw Error('WebAppMethodUnsupported');
}
if (webAppPopupOpened) {
console.error('[Telegram.WebApp] Popup is already opened');
throw Error('WebAppPopupOpened');
}
var title = '';
var message = '';
var buttons = [];
var popup_buttons = {};
var popup_params = {};
if (typeof params.title !== 'undefined') {
title = strTrim(params.title);
if (title.length > 64) {
console.error('[Telegram.WebApp] Popup title is too long', title);
throw Error('WebAppPopupParamInvalid');
}
if (title.length > 0) {
popup_params.title = title;
}
}
if (typeof params.message !== 'undefined') {
message = strTrim(params.message);
}
if (!message.length) {
console.error('[Telegram.WebApp] Popup message is required', params.message);
throw Error('WebAppPopupParamInvalid');
}
if (message.length > 256) {
console.error('[Telegram.WebApp] Popup message is too long', message);
throw Error('WebAppPopupParamInvalid');
}
popup_params.message = message;
if (typeof params.buttons !== 'undefined') {
if (!Array.isArray(params.buttons)) {
console.error('[Telegram.WebApp] Popup buttons should be an array',
params.buttons);
throw Error('WebAppPopupParamInvalid');
}
for (var i = 0; i < params.buttons.length; i++) {
var button = params.buttons[i];
var btn = {};
var id = '';
if (typeof button.id !== 'undefined') {
id = button.id.toString();
if (id.length > 64) {
console.error('[Telegram.WebApp] Popup button id is too long', id);
throw Error('WebAppPopupParamInvalid');
}
}
btn.id = id;
var button_type = button.type;
if (typeof button_type === 'undefined') {
button_type = 'default';
}
btn.type = button_type;
if (button_type == 'ok' ||
button_type == 'close' ||
button_type == 'cancel') {
// no params needed
} else if (button_type == 'default' ||
button_type == 'destructive') {
var text = '';
if (typeof button.text !== 'undefined') {
text = strTrim(button.text);
}
if (!text.length) {
console.error('[Telegram.WebApp] Popup button text is required for type
' + button_type, button.text);
throw Error('WebAppPopupParamInvalid');
}
if (text.length > 64) {
console.error('[Telegram.WebApp] Popup button text is too long', text);
throw Error('WebAppPopupParamInvalid');
}
btn.text = text;
} else {
console.error('[Telegram.WebApp] Popup button type is invalid',
button_type);
throw Error('WebAppPopupParamInvalid');
}
buttons.push(btn);
}
} else {
buttons.push({id: '', type: 'close'});
}
if (buttons.length < 1) {
console.error('[Telegram.WebApp] Popup should have at least one button');
throw Error('WebAppPopupParamInvalid');
}
if (buttons.length > 3) {
console.error('[Telegram.WebApp] Popup should not have more than 3 buttons');
throw Error('WebAppPopupParamInvalid');
}
popup_params.buttons = buttons;
webAppPopupOpened = {
callback: callback
};
WebView.postEvent('web_app_open_popup', false, popup_params);
};
WebApp.showAlert = function (message, callback) {
WebApp.showPopup({
message: message
}, callback ? function(){ callback(); } : null);
};
WebApp.showConfirm = function (message, callback) {
WebApp.showPopup({
message: message,
buttons: [
{type: 'ok', id: 'ok'},
{type: 'cancel'}
]
}, callback ? function (button_id) {
callback(button_id == 'ok');
} : null);
};
WebApp.showScanQrPopup = function (params, callback) {
if (!versionAtLeast('6.4')) {
console.error('[Telegram.WebApp] Method showScanQrPopup is not supported in
version ' + webAppVersion);
throw Error('WebAppMethodUnsupported');
}
if (webAppScanQrPopupOpened) {
console.error('[Telegram.WebApp] Popup is already opened');
throw Error('WebAppScanQrPopupOpened');
}
var text = '';
var popup_params = {};
if (typeof params.text !== 'undefined') {
text = strTrim(params.text);
if (text.length > 64) {
console.error('[Telegram.WebApp] Scan QR popup text is too long', text);
throw Error('WebAppScanQrPopupParamInvalid');
}
if (text.length > 0) {
popup_params.text = text;
}
}
webAppScanQrPopupOpened = {
callback: callback
};
WebView.postEvent('web_app_open_scan_qr_popup', false, popup_params);
};
WebApp.closeScanQrPopup = function () {
if (!versionAtLeast('6.4')) {
console.error('[Telegram.WebApp] Method closeScanQrPopup is not supported in
version ' + webAppVersion);
throw Error('WebAppMethodUnsupported');
}
webAppScanQrPopupOpened = false;
WebView.postEvent('web_app_close_scan_qr_popup', false);
};
WebApp.readTextFromClipboard = function (callback) {
if (!versionAtLeast('6.4')) {
console.error('[Telegram.WebApp] Method readTextFromClipboard is not
supported in version ' + webAppVersion);
throw Error('WebAppMethodUnsupported');
}
var req_id = generateCallbackId(16);
var req_params = {req_id: req_id};
webAppCallbacks[req_id] = {
callback: callback
};
WebView.postEvent('web_app_read_text_from_clipboard', false, req_params);
};
WebApp.requestWriteAccess = function (callback) {
if (!versionAtLeast('6.9')) {
console.error('[Telegram.WebApp] Method requestWriteAccess is not supported
in version ' + webAppVersion);
throw Error('WebAppMethodUnsupported');
}
if (WebAppWriteAccessRequested) {
console.error('[Telegram.WebApp] Write access is already requested');
throw Error('WebAppWriteAccessRequested');
}
WebAppWriteAccessRequested = {
callback: callback
};
WebView.postEvent('web_app_request_write_access');
};
WebApp.requestContact = function (callback) {
if (!versionAtLeast('6.9')) {
console.error('[Telegram.WebApp] Method requestContact is not supported in
version ' + webAppVersion);
throw Error('WebAppMethodUnsupported');
}
if (WebAppContactRequested) {
console.error('[Telegram.WebApp] Contact is already requested');
throw Error('WebAppContactRequested');
}
WebAppContactRequested = {
callback: callback
};
WebView.postEvent('web_app_request_phone');
};
WebApp.invokeCustomMethod = function (method, params, callback) {
invokeCustomMethod(method, params, callback);
};
WebApp.ready = function () {
WebView.postEvent('web_app_ready');
};
WebApp.expand = function () {
WebView.postEvent('web_app_expand');
};
WebApp.close = function (options) {
options = options || {};
var req_params = {};
if (versionAtLeast('7.6') && options.return_back) {
req_params.return_back = true;
}
WebView.postEvent('web_app_close', false, req_params);
};
window.Telegram.WebApp = WebApp;
updateHeaderColor();
updateBackgroundColor();
setViewportHeight();
if (initParams.tgWebAppShowSettings) {
SettingsButton.show();
}
window.addEventListener('resize', onWindowResize);
if (isIframe) {
document.addEventListener('click', linkHandler);
}
WebView.onEvent('theme_changed', onThemeChanged);
WebView.onEvent('viewport_changed', onViewportChanged);
WebView.onEvent('invoice_closed', onInvoiceClosed);
WebView.onEvent('popup_closed', onPopupClosed);
WebView.onEvent('qr_text_received', onQrTextReceived);
WebView.onEvent('scan_qr_popup_closed', onScanQrPopupClosed);
WebView.onEvent('clipboard_text_received', onClipboardTextReceived);
WebView.onEvent('write_access_requested', onWriteAccessRequested);
WebView.onEvent('phone_requested', onPhoneRequested);
WebView.onEvent('custom_method_invoked', onCustomMethodInvoked);
WebView.postEvent('web_app_request_theme');
WebView.postEvent('web_app_request_viewport');
})();