2022-04-07 08:19:13 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
|
|
|
|
<meta name="format-detection" content="telephone=no" />
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
|
|
<meta name="MobileOptimized" content="176" />
|
|
|
|
|
<meta name="HandheldFriendly" content="True" />
|
|
|
|
|
<meta name="robots" content="noindex,nofollow" />
|
2022-08-05 16:06:23 +02:00
|
|
|
<script src="https://tg.dev/js/telegram-web-app.js?24"></script>
|
2022-04-07 08:19:13 +02:00
|
|
|
<script>
|
|
|
|
|
function setThemeClass() {
|
2022-04-10 00:07:30 +02:00
|
|
|
document.documentElement.className = Telegram.WebApp.colorScheme;
|
2022-04-07 08:19:13 +02:00
|
|
|
}
|
2022-04-11 03:58:11 +02:00
|
|
|
Telegram.WebApp.onEvent('themeChanged', setThemeClass);
|
2022-04-07 08:19:13 +02:00
|
|
|
setThemeClass();
|
|
|
|
|
|
|
|
|
|
</script>
|
2022-06-03 15:46:09 +02:00
|
|
|
<link href="https://tg.dev/css/bootstrap.min.css?3" rel="stylesheet">
|
|
|
|
|
<link href="https://tg.dev/css/bootstrap-extra.css?2" rel="stylesheet">
|
2022-07-01 18:14:00 +02:00
|
|
|
<link href="/css/webappdemo.css?5" rel="stylesheet">
|
2022-04-07 08:19:13 +02:00
|
|
|
</head>
|
2022-06-03 15:46:09 +02:00
|
|
|
<body class="" style="visibility: hidden;">
|
2022-06-21 18:52:24 +02:00
|
|
|
<section id="top_sect" class="second">
|
2022-06-03 15:46:09 +02:00
|
|
|
<button id="main_btn" onclick="DemoApp.sendMessage('');">Send «Hello, World!»</button>
|
|
|
|
|
<button id="with_webview_btn" onclick="DemoApp.sendMessage('', true);">Send «Hello, World!» with inline webview button</button>
|
|
|
|
|
<button id="data_btn" onclick="DemoApp.sendTime(true);">Send current time to bot (x10)</button>
|
|
|
|
|
<button onclick="DemoApp.expand();">Expand Webview</button>
|
|
|
|
|
<button onclick="DemoApp.toggleMainButton(this);">Hide Main Button</button>
|
2022-05-26 23:00:05 +02:00
|
|
|
<input type="text" placeholder="Input text in regular input..." />
|
2022-05-26 13:09:11 +02:00
|
|
|
<div class="input" contenteditable="true" data-placeholder="Input text in contenteditable field..."></div>
|
2022-06-21 18:52:24 +02:00
|
|
|
<div id="peer_wrap" style="display:none">
|
2022-06-03 15:46:09 +02:00
|
|
|
<img id="peer_photo" class="chat_img" src="">
|
|
|
|
|
<span id="peer_name"></span>
|
|
|
|
|
</div>
|
2022-06-21 18:52:24 +02:00
|
|
|
<div class="sect_row">Header: <select id="header_color_sel">
|
|
|
|
|
<option value="bg_color" selected>bg_color</option>
|
|
|
|
|
<option value="secondary_bg_color">secondary_bg_color</option>
|
|
|
|
|
</select></div>
|
|
|
|
|
<div class="sect_row">Background: <input type="color" id="bg_color_input" /> <select id="bg_color_sel">
|
|
|
|
|
<option value="bg_color" selected>bg_color</option>
|
|
|
|
|
<option value="secondary_bg_color">secondary_bg_color</option>
|
|
|
|
|
<option value="custom" id="bg_color_val">custom...</option>
|
|
|
|
|
</select></div>
|
2022-06-03 15:46:09 +02:00
|
|
|
</section>
|
|
|
|
|
<section>
|
|
|
|
|
<div id="btn_status" class="hint" style="display: none;">
|
|
|
|
|
</div>
|
|
|
|
|
<p>Test links:</p>
|
|
|
|
|
<ul>
|
|
|
|
|
<li><a id="regular_link" href="?nextpage=1">Regular link #1</a> (opens inside webview)</li>
|
|
|
|
|
<li><a href="https://telegram.org/" target="_blank">target="_blank" link</a> (opens outside webview)</li>
|
|
|
|
|
<li><a href="javascript:window.open('https://telegram.org/');">window.open() link</a> (opens outside webview)</li>
|
|
|
|
|
<li><a href="https://t.me/like">LikeBot t.me link</a> (opens inside Telegram app)</li>
|
|
|
|
|
<li><a href="javascript:Telegram.WebApp.openTelegramLink('https://t.me/vote');">web_app_open_tg_link()</a> (opens inside Telegram app)</li>
|
|
|
|
|
<li><a href="javascript:Telegram.WebApp.openLink('https://google.com/');">web_app_open_link()</a> (opens outside webview)</li>
|
|
|
|
|
<li><a href="tg://resolve?domain=vote">VoteBot tg:// link</a> (does not open)</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<p>Test permissions:</p>
|
|
|
|
|
<ul>
|
|
|
|
|
<li><a href="javascript:;" onclick="return DemoApp.requestLocation(this);">Request Location</a> <span></span></li>
|
|
|
|
|
<li><a href="javascript:;" onclick="return DemoApp.requestVideo(this);">Request Video</a> <span></span></li>
|
|
|
|
|
<li><a href="javascript:;" onclick="return DemoApp.requestAudio(this);">Request Audio</a> <span></span></li>
|
|
|
|
|
</ul>
|
|
|
|
|
<p>Test alerts:</p>
|
2022-07-01 18:14:00 +02:00
|
|
|
<div class="columns">
|
|
|
|
|
<ul>
|
|
|
|
|
<li><a href="javascript:;" onclick="alert('Hello!');">alert</a></li>
|
|
|
|
|
<li><a href="javascript:;" onclick="confirm('Are you sure?');">confirm</a></li>
|
|
|
|
|
<li><a href="javascript:;" onclick="prompt('How old are you?');">prompt</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
<ul>
|
|
|
|
|
<li><a href="javascript:;" onclick="DemoApp.showAlert('Hello!');">showAlert</a></li>
|
|
|
|
|
<li><a href="javascript:;" onclick="DemoApp.showConfirm('Are you sure?');">showConfirm</a></li>
|
|
|
|
|
<li><a href="javascript:;" onclick="DemoApp.showPopup();">showPopup</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
2022-06-03 15:46:09 +02:00
|
|
|
<p>Haptics:</p>
|
|
|
|
|
<ul>
|
|
|
|
|
<li>Impact: <a href="javascript:Telegram.WebApp.HapticFeedback.impactOccurred('heavy');">heavy</a>, <a href="javascript:Telegram.WebApp.HapticFeedback.impactOccurred('light');">light</a>, <a href="javascript:Telegram.WebApp.HapticFeedback.impactOccurred('medium');">medium</a>, <a href="javascript:Telegram.WebApp.HapticFeedback.impactOccurred('rigid');">rigid</a>, <a href="javascript:Telegram.WebApp.HapticFeedback.impactOccurred('soft');">soft</a><br><br></li>
|
|
|
|
|
<li>Notification: <a href="javascript:Telegram.WebApp.HapticFeedback.notificationOccurred('error');">error</a>, <a href="javascript:Telegram.WebApp.HapticFeedback.notificationOccurred('success');">success</a>, <a href="javascript:Telegram.WebApp.HapticFeedback.notificationOccurred('warning');">warning</a><br><br></li>
|
|
|
|
|
<li>Selection: <a href="javascript:Telegram.WebApp.HapticFeedback.selectionChanged();">changed</a><br><br></li>
|
|
|
|
|
</ul>
|
|
|
|
|
<pre><code id="webview_data"></code></pre>
|
|
|
|
|
<div class="hint">
|
|
|
|
|
Data passed to webview.
|
|
|
|
|
<span id="webview_data_status" class="status_need">Checking hash...</span>
|
|
|
|
|
</div>
|
|
|
|
|
<pre><code id="theme_data"></code></pre>
|
|
|
|
|
<div class="hint">
|
|
|
|
|
Theme params
|
|
|
|
|
</div>
|
2022-06-23 15:29:35 +02:00
|
|
|
<div class="hint">
|
|
|
|
|
Version: <span id="ver"></span>
|
|
|
|
|
</div>
|
2022-06-03 15:46:09 +02:00
|
|
|
</section>
|
|
|
|
|
<div class="viewport-border"></div>
|
|
|
|
|
<div class="viewport-stable_border"></div>
|
2022-04-07 08:19:13 +02:00
|
|
|
<script src="/js/jquery.min.js"></script>
|
2022-06-03 15:46:09 +02:00
|
|
|
<script src="https://tg.dev/js/bootstrap.min.js"></script>
|
2022-07-01 18:14:00 +02:00
|
|
|
<script src="/js/webappdemo.js?4"></script>
|
2022-04-07 08:19:13 +02:00
|
|
|
<script>
|
2022-04-13 00:22:26 +02:00
|
|
|
Telegram.WebApp.onEvent('themeChanged', function() {
|
|
|
|
|
$('#theme_data').html(JSON.stringify(Telegram.WebApp.themeParams, null, 2));
|
|
|
|
|
});
|
2022-04-07 08:19:13 +02:00
|
|
|
|
2022-06-03 15:46:09 +02:00
|
|
|
$('#main_btn').toggle(!!DemoApp.initDataUnsafe.query_id);
|
|
|
|
|
$('#with_webview_btn').toggle(!!DemoApp.initDataUnsafe.query_id && !DemoApp.initDataUnsafe.receiver);
|
|
|
|
|
// $('#data_btn').toggle(!DemoApp.initDataUnsafe.query_id || !DemoApp.initDataUnsafe.receiver);
|
|
|
|
|
$('#webview_data').html(JSON.stringify(DemoApp.initDataUnsafe, null, 2));
|
2022-04-13 00:22:26 +02:00
|
|
|
$('#theme_data').html(JSON.stringify(Telegram.WebApp.themeParams, null, 2));
|
2022-04-07 08:19:13 +02:00
|
|
|
$('#regular_link').attr('href', $('#regular_link').attr('href') + location.hash);
|
|
|
|
|
$('#text_field').focus();
|
|
|
|
|
|
2022-06-23 15:29:35 +02:00
|
|
|
$('#ver').text(Telegram.WebApp.version);
|
|
|
|
|
|
2022-06-03 15:46:09 +02:00
|
|
|
if (DemoApp.initDataUnsafe.receiver) {
|
|
|
|
|
$('#peer_wrap').show();
|
|
|
|
|
$('#peer_name').text(DemoApp.initDataUnsafe.receiver.first_name + ' ' + DemoApp.initDataUnsafe.receiver.last_name);
|
|
|
|
|
if (DemoApp.initDataUnsafe.receiver.photo_url) {
|
|
|
|
|
$('#peer_photo').attr('src', DemoApp.initDataUnsafe.receiver.photo_url);
|
2022-04-11 03:58:11 +02:00
|
|
|
} else {
|
2022-06-03 15:46:09 +02:00
|
|
|
$('#peer_photo').hide();
|
2022-04-11 03:58:11 +02:00
|
|
|
}
|
|
|
|
|
}
|
2022-06-03 15:46:09 +02:00
|
|
|
else if (DemoApp.initDataUnsafe.chat) {
|
|
|
|
|
$('#peer_wrap').show();
|
|
|
|
|
$('#peer_name').text(DemoApp.initDataUnsafe.chat.title);
|
|
|
|
|
if (DemoApp.initDataUnsafe.chat.photo_url) {
|
|
|
|
|
$('#peer_photo').attr('src', DemoApp.initDataUnsafe.chat.photo_url);
|
|
|
|
|
} else {
|
|
|
|
|
$('#peer_photo').hide();
|
|
|
|
|
}
|
2022-04-11 03:58:11 +02:00
|
|
|
}
|
|
|
|
|
|
2022-06-03 15:46:09 +02:00
|
|
|
DemoApp.checkInitData();
|
|
|
|
|
|
|
|
|
|
DemoApp.init();
|
|
|
|
|
|
2022-04-11 03:58:11 +02:00
|
|
|
function setViewportData() {
|
2022-06-03 15:46:09 +02:00
|
|
|
$('.viewport-border').attr('text', window.innerWidth + ' x ' + round(Telegram.WebApp.viewportHeight, 2));
|
|
|
|
|
$('.viewport-stable_border').attr('text', window.innerWidth + ' x ' + round(Telegram.WebApp.viewportStableHeight, 2) + ' | is_expanded: ' + (Telegram.WebApp.isExpanded ? 'true' : 'false'));
|
2022-04-09 21:58:54 +02:00
|
|
|
}
|
2022-06-21 18:52:24 +02:00
|
|
|
Telegram.WebApp.setHeaderColor('secondary_bg_color');
|
2022-04-11 03:58:11 +02:00
|
|
|
Telegram.WebApp.onEvent('viewportChanged', setViewportData);
|
|
|
|
|
setViewportData();
|
2022-05-31 18:08:03 +02:00
|
|
|
Telegram.WebApp.onEvent('settingsButtonClicked', function() {
|
|
|
|
|
alert('Settings opened!');
|
|
|
|
|
});
|
2022-04-07 08:19:13 +02:00
|
|
|
|
2022-06-14 21:54:35 +02:00
|
|
|
var prev_bg_color_val = $('#bg_color_sel').val();
|
|
|
|
|
$('#bg_color_input').val(Telegram.WebApp.backgroundColor);
|
2022-06-23 15:29:35 +02:00
|
|
|
$('body').attr('style', '--bg-color:' + Telegram.WebApp.backgroundColor);
|
2022-06-21 18:52:24 +02:00
|
|
|
$('#header_color_sel').val('secondary_bg_color');
|
|
|
|
|
$('#header_color_sel').on('change', function(e) {
|
|
|
|
|
var color_key = e.target.value;
|
|
|
|
|
$('#top_sect').toggleClass('second', color_key == 'secondary_bg_color');
|
|
|
|
|
Telegram.WebApp.setHeaderColor(color_key);
|
2022-06-23 15:29:35 +02:00
|
|
|
$('body').attr('style', '--bg-color:' + Telegram.WebApp.backgroundColor);
|
2022-06-21 18:52:24 +02:00
|
|
|
});
|
2022-06-14 21:54:35 +02:00
|
|
|
$('#bg_color_input').on('change', function(e) {
|
|
|
|
|
var color = e.target.value;
|
|
|
|
|
$('#bg_color_val').text(color);
|
|
|
|
|
$('#bg_color_sel').val('custom');
|
|
|
|
|
prev_bg_color_val = $('#bg_color_sel').val();
|
|
|
|
|
Telegram.WebApp.setBackgroundColor(color);
|
2022-06-23 15:29:35 +02:00
|
|
|
$('body').attr('style', '--bg-color:' + Telegram.WebApp.backgroundColor);
|
2022-06-14 21:54:35 +02:00
|
|
|
});
|
|
|
|
|
$('#bg_color_sel').on('change', function(e) {
|
|
|
|
|
var color_key = e.target.value;
|
|
|
|
|
if (color_key == 'custom') {
|
|
|
|
|
$('#bg_color_sel').val(prev_bg_color_val);
|
|
|
|
|
$('#bg_color_input').focus().click();
|
|
|
|
|
} else {
|
|
|
|
|
$('#bg_color_val').text('custom...');
|
|
|
|
|
Telegram.WebApp.setBackgroundColor(color_key);
|
2022-06-23 15:29:35 +02:00
|
|
|
$('body').attr('style', '--bg-color:' + Telegram.WebApp.backgroundColor);
|
2022-06-14 21:54:35 +02:00
|
|
|
$('#bg_color_input').val(Telegram.WebApp.backgroundColor);
|
|
|
|
|
prev_bg_color_val = $('#bg_color_sel').val();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
Telegram.WebApp.onEvent('themeChanged', function() {
|
|
|
|
|
$('#bg_color_input').val(Telegram.WebApp.backgroundColor);
|
2022-06-23 15:29:35 +02:00
|
|
|
$('body').attr('style', '--bg-color:' + Telegram.WebApp.backgroundColor);
|
2022-06-14 21:54:35 +02:00
|
|
|
});
|
|
|
|
|
|
2022-04-07 08:19:13 +02:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
|
