848 lines
32 KiB
HTML
848 lines
32 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<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" />
|
||
|
|
<title></title>
|
||
|
|
<script src="https://telegram.org/js/telegram-web-app.js?1"></script>
|
||
|
|
<script>
|
||
|
|
function setThemeClass() {
|
||
|
|
document.documentElement.className = Telegram.WebApp.colorScheme;
|
||
|
|
}
|
||
|
|
Telegram.WebApp.onEvent('themeChanged', setThemeClass);
|
||
|
|
setThemeClass();
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
--bg-color: var(--tg-theme-bg-color, #fff);
|
||
|
|
font-family: sans-serif;
|
||
|
|
background-color: var(--bg-color);
|
||
|
|
color: var(--tg-theme-text-color, #222);
|
||
|
|
font-size: 14px;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
color-scheme: var(--tg-color-scheme);
|
||
|
|
}
|
||
|
|
body.gray {
|
||
|
|
background-color: var(--tg-theme-secondary-bg-color, #efefef);
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: var(--tg-theme-link-color, #2678b6);
|
||
|
|
}
|
||
|
|
.btn {
|
||
|
|
font-size: 14px;
|
||
|
|
padding: 10px 17px;
|
||
|
|
}
|
||
|
|
.btn-primary {
|
||
|
|
background-color: var(--tg-theme-button-color, #50a8eb);
|
||
|
|
color: var(--tg-theme-button-text-color, #fff);
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
button {
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
font-size: 14px;
|
||
|
|
margin: 15px 0;
|
||
|
|
padding: 12px 20px;
|
||
|
|
border: none;
|
||
|
|
border-radius: 4px;
|
||
|
|
background-color: var(--tg-theme-button-color, #50a8eb);
|
||
|
|
color: var(--tg-theme-button-text-color, #ffffff);
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.main-container {
|
||
|
|
padding: 15px;
|
||
|
|
}
|
||
|
|
.list-header {
|
||
|
|
text-transform: uppercase;
|
||
|
|
font-size: .92em;
|
||
|
|
color: var(--tg-theme-hint-color, #ccc);
|
||
|
|
margin: 0 0 10px;
|
||
|
|
}
|
||
|
|
a.list-group-item,
|
||
|
|
button.list-group-item {
|
||
|
|
color: var(--tg-theme-text-color, #222);
|
||
|
|
}
|
||
|
|
.main-container p {
|
||
|
|
margin: 0 0 10px;
|
||
|
|
}
|
||
|
|
.main-container pre,
|
||
|
|
.main-container > .btn {
|
||
|
|
margin: 0 0 7px;
|
||
|
|
}
|
||
|
|
.main-container pre + .hint,
|
||
|
|
.main-container > .btn + .hint {
|
||
|
|
text-align: center;
|
||
|
|
margin: 0 0 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
button[disabled] {
|
||
|
|
opacity: 0.6;
|
||
|
|
cursor: auto;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
button.close_btn {
|
||
|
|
/*position: fixed;*/
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
border-radius: 0;
|
||
|
|
margin: 0;
|
||
|
|
padding: 16px 20px;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type="text"],
|
||
|
|
.input[contenteditable] {
|
||
|
|
display: block;
|
||
|
|
box-sizing: border-box;
|
||
|
|
font-size: 14px;
|
||
|
|
width: 100%;
|
||
|
|
padding: 12px 20px;
|
||
|
|
margin: 15px 0;
|
||
|
|
border: 1px solid var(--tg-theme-link-color, #000);
|
||
|
|
background-color: var(--tg-theme-bg-color, #ffffff);
|
||
|
|
border-radius: 4px;
|
||
|
|
color: var(--tg-theme-text-color, #222222);
|
||
|
|
text-align: start;
|
||
|
|
}
|
||
|
|
input[type="text"]::-webkit-input-placeholder {
|
||
|
|
color: var(--tg-theme-hint-color, #ccc);
|
||
|
|
}
|
||
|
|
input[type="text"]::-moz-placeholder {
|
||
|
|
color: var(--tg-theme-hint-color, #ccc);
|
||
|
|
}
|
||
|
|
input[type="text"]:-ms-input-placeholder {
|
||
|
|
color: var(--tg-theme-hint-color, #ccc);
|
||
|
|
}
|
||
|
|
.input[data-placeholder] {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.input[data-placeholder]:empty:before {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
content: attr(data-placeholder);
|
||
|
|
color: var(--tg-theme-hint-color, #ccc);
|
||
|
|
padding: 0 20px;
|
||
|
|
font-weight: normal;
|
||
|
|
white-space: nowrap;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
overflow: hidden;
|
||
|
|
pointer-events: none;
|
||
|
|
z-index: -1;
|
||
|
|
}
|
||
|
|
section {
|
||
|
|
padding: 15px;
|
||
|
|
text-align: center;
|
||
|
|
background-color: var(--bg-color, #ffffff);
|
||
|
|
}
|
||
|
|
section#top_sect {
|
||
|
|
background-color: var(--tg-theme-bg-color, #ffffff);
|
||
|
|
}
|
||
|
|
section#top_sect.second {
|
||
|
|
background-color: var(--tg-theme-secondary-bg-color, #efefef);
|
||
|
|
}
|
||
|
|
section .sect_row {
|
||
|
|
margin: 10px 0;
|
||
|
|
}
|
||
|
|
section + section {
|
||
|
|
padding: 0 15px 65px;
|
||
|
|
}
|
||
|
|
p {
|
||
|
|
margin: 40px 0 15px;
|
||
|
|
}
|
||
|
|
ul {
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
li {
|
||
|
|
color: var(--tg-theme-hint-color, #a8a8a8);
|
||
|
|
}
|
||
|
|
textarea {
|
||
|
|
width: 100%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 7px;
|
||
|
|
}
|
||
|
|
pre {
|
||
|
|
background: rgba(0, 0, 0, .07);
|
||
|
|
color: var(--tg-theme-text-color, #222);
|
||
|
|
font-size: 12px;
|
||
|
|
border: none;
|
||
|
|
border-radius: 4px;
|
||
|
|
padding: 8px;
|
||
|
|
margin: 7px 0;
|
||
|
|
word-break: break-word;
|
||
|
|
white-space: pre-wrap;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
.dark pre {
|
||
|
|
background: rgba(255, 255, 255, .15);
|
||
|
|
}
|
||
|
|
.chat_img {
|
||
|
|
width: 30px;
|
||
|
|
border-radius: 15px;
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
.columns {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
.columns>* {
|
||
|
|
flex-grow: 1;
|
||
|
|
}
|
||
|
|
.hint {
|
||
|
|
font-size: .8em;
|
||
|
|
color: var(--tg-theme-hint-color, #a8a8a8);
|
||
|
|
}
|
||
|
|
.ok {
|
||
|
|
color: green;
|
||
|
|
}
|
||
|
|
.err {
|
||
|
|
color: red;
|
||
|
|
}
|
||
|
|
.status_need {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
#fixed_wrap {
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
transform: translateY(100vh);
|
||
|
|
}
|
||
|
|
.viewport-container {
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
height: var(--tg-viewport-stable-height, 100vh);
|
||
|
|
transition: height .2s ease;
|
||
|
|
}
|
||
|
|
.viewport-container .main-container {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.viewport-container .main-container button {
|
||
|
|
width: auto;
|
||
|
|
}
|
||
|
|
.viewport-border,
|
||
|
|
.viewport-stable_border {
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
height: var(--tg-viewport-height, 100vh);
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
.viewport-stable_border {
|
||
|
|
height: var(--tg-viewport-stable-height, 100vh);
|
||
|
|
}
|
||
|
|
.viewport-border:before,
|
||
|
|
.viewport-stable_border:before {
|
||
|
|
content: attr(text);
|
||
|
|
display: inline-block;
|
||
|
|
position: absolute;
|
||
|
|
background: gray;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
font-size: 7px;
|
||
|
|
padding: 2px 4px;
|
||
|
|
vertical-align: top;
|
||
|
|
}
|
||
|
|
.viewport-stable_border:before {
|
||
|
|
background: green;
|
||
|
|
left: 0;
|
||
|
|
right: auto;
|
||
|
|
}
|
||
|
|
.viewport-border:after,
|
||
|
|
.viewport-stable_border:after {
|
||
|
|
content: '';
|
||
|
|
display: block;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
border: 2px dashed gray;
|
||
|
|
}
|
||
|
|
.viewport-stable_border:after {
|
||
|
|
border-color: green;
|
||
|
|
}
|
||
|
|
|
||
|
|
small {
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body class="" style="visibility: hidden;">
|
||
|
|
|
||
|
|
<section id="top_sect" class="second">
|
||
|
|
<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>
|
||
|
|
<input type="text" placeholder="Input text in regular input..." id="regular_field" />
|
||
|
|
<div
|
||
|
|
class="input"
|
||
|
|
contenteditable="true"
|
||
|
|
data-placeholder="Input text in contenteditable field..."
|
||
|
|
id="text_field"
|
||
|
|
></div>
|
||
|
|
<div id="peer_wrap" style="display:none">
|
||
|
|
<img id="peer_photo" class="chat_img" src="">
|
||
|
|
<span id="peer_name"></span>
|
||
|
|
</div>
|
||
|
|
<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>
|
||
|
|
</section>
|
||
|
|
<section>
|
||
|
|
<div id="btn_status" class="hint" style="display: none;">
|
||
|
|
</div>
|
||
|
|
<p>Test links:</p>
|
||
|
|
<ul>
|
||
|
|
<li><a id="regular_link" href="">Regular link #2</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>
|
||
|
|
<li><a href="javascript:Telegram.WebApp.openLink('https://telegra.ph/api',{try_instant_view:true});">web_app_open_link({try_instant_view:true})</a> (opens IV inside Telegram app)</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>
|
||
|
|
<li><a href="javascript:;" onclick="return DemoApp.requestAudioVideo(this);">Request Audio+Video</a> <span></span></li>
|
||
|
|
<li><a href="javascript:;" onclick="return DemoApp.testClipboard(this);" id="clipboard_test">Read from clipboard</a> <span></span></li>
|
||
|
|
</ul>
|
||
|
|
<p>Test alerts:</p>
|
||
|
|
<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>
|
||
|
|
<li><a href="javascript:;" onclick="DemoApp.showScanQrPopup();">showScanQrPopup</a></li>
|
||
|
|
<li><a href="javascript:;" onclick="DemoApp.showScanQrPopup(true);">showScanQrPopup (links only)</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<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>
|
||
|
|
<div class="hint">
|
||
|
|
Version: <span id="ver"></span>,
|
||
|
|
platform: <span id="platform"></span>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<div class="viewport-border"></div>
|
||
|
|
<div class="viewport-stable_border"></div>
|
||
|
|
|
||
|
|
<script type="application/javascript">
|
||
|
|
|
||
|
|
/*
|
||
|
|
* This is a demo code for Telegram WebApp for Bots
|
||
|
|
* It contains basic examples of how to use the API
|
||
|
|
* Note: all requests to backend are disabled in this demo, you should use your own backend
|
||
|
|
*/
|
||
|
|
|
||
|
|
const DemoApp = {
|
||
|
|
initData: Telegram.WebApp.initData || '',
|
||
|
|
initDataUnsafe: Telegram.WebApp.initDataUnsafe || {},
|
||
|
|
MainButton: Telegram.WebApp.MainButton,
|
||
|
|
|
||
|
|
init(options) {
|
||
|
|
document.body.style.visibility = '';
|
||
|
|
Telegram.WebApp.ready();
|
||
|
|
Telegram.WebApp.MainButton.setParams({
|
||
|
|
text: 'CLOSE WEBVIEW',
|
||
|
|
is_visible: true
|
||
|
|
}).onClick(DemoApp.close);
|
||
|
|
},
|
||
|
|
expand() {
|
||
|
|
Telegram.WebApp.expand();
|
||
|
|
},
|
||
|
|
close() {
|
||
|
|
Telegram.WebApp.close();
|
||
|
|
},
|
||
|
|
toggleMainButton(el) {
|
||
|
|
const mainButton = Telegram.WebApp.MainButton;
|
||
|
|
if (mainButton.isVisible) {
|
||
|
|
mainButton.hide();
|
||
|
|
el.innerHTML = 'Show Main Button';
|
||
|
|
} else {
|
||
|
|
mainButton.show();
|
||
|
|
el.innerHTML = 'Hide Main Button';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// actions
|
||
|
|
sendMessage(msg_id, with_webview) {
|
||
|
|
if (!DemoApp.initDataUnsafe.query_id) {
|
||
|
|
alert('WebViewQueryId not defined');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
document.querySelectorAll('button').forEach((btn) => btn.disabled = true);
|
||
|
|
|
||
|
|
const btn = document.querySelector('#btn_status');
|
||
|
|
btn.textContent = 'Sending...';
|
||
|
|
|
||
|
|
DemoApp.apiRequest('sendMessage', {
|
||
|
|
msg_id: msg_id || '',
|
||
|
|
with_webview: !DemoApp.initDataUnsafe.receiver && with_webview ? 1 : 0
|
||
|
|
}, function(result) {
|
||
|
|
document.querySelectorAll('button').forEach((btn) => btn.disabled = false);
|
||
|
|
|
||
|
|
if (result.response) {
|
||
|
|
if (result.response.ok) {
|
||
|
|
btn.textContent = 'Message sent successfully!';
|
||
|
|
btn.className = 'ok';
|
||
|
|
btn.style.display = 'block';
|
||
|
|
} else {
|
||
|
|
btn.textContent = result.response.description;
|
||
|
|
btn.className = 'err';
|
||
|
|
btn.style.display = 'block';
|
||
|
|
alert(result.response.description);
|
||
|
|
}
|
||
|
|
} else if (result.error) {
|
||
|
|
btn.textContent = result.error;
|
||
|
|
btn.className = 'err';
|
||
|
|
btn.style.display = 'block';
|
||
|
|
alert(result.error);
|
||
|
|
} else {
|
||
|
|
btn.textContent = 'Unknown error';
|
||
|
|
btn.className = 'err';
|
||
|
|
btn.style.display = 'block';
|
||
|
|
alert('Unknown error');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
changeMenuButton(close) {
|
||
|
|
document.querySelectorAll('button').forEach((btn) => btn.disabled = true);
|
||
|
|
const btnStatus = document.querySelector('#btn_status');
|
||
|
|
btnStatus.textContent = 'Changing button...';
|
||
|
|
|
||
|
|
DemoApp.apiRequest('changeMenuButton', {}, function(result) {
|
||
|
|
document.querySelectorAll('button').forEach((btn) => btn.disabled = false);
|
||
|
|
|
||
|
|
if (result.response) {
|
||
|
|
if (result.response.ok) {
|
||
|
|
btnStatus.textContent = 'Button changed!';
|
||
|
|
btnStatus.className = 'ok';
|
||
|
|
btnStatus.style.display = 'block';
|
||
|
|
Telegram.WebApp.close();
|
||
|
|
} else {
|
||
|
|
btnStatus.textContent = result.response.description;
|
||
|
|
btnStatus.className = 'err';
|
||
|
|
btnStatus.style.display = 'block';
|
||
|
|
alert(result.response.description);
|
||
|
|
}
|
||
|
|
} else if (result.error) {
|
||
|
|
btnStatus.textContent = result.error;
|
||
|
|
btnStatus.className = 'err';
|
||
|
|
btnStatus.style.display = 'block';
|
||
|
|
alert(result.error);
|
||
|
|
} else {
|
||
|
|
btnStatus.textContent = 'Unknown error';
|
||
|
|
btnStatus.className = 'err';
|
||
|
|
btnStatus.style.display = 'block';
|
||
|
|
alert('Unknown error');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
if (close) {
|
||
|
|
setTimeout(function() {
|
||
|
|
Telegram.WebApp.close();
|
||
|
|
}, 50);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
checkInitData() {
|
||
|
|
const webViewStatus = document.querySelector('#webview_data_status');
|
||
|
|
if (DemoApp.initDataUnsafe.query_id &&
|
||
|
|
DemoApp.initData &&
|
||
|
|
webViewStatus.classList.contains('status_need')
|
||
|
|
) {
|
||
|
|
webViewStatus.classList.remove('status_need');
|
||
|
|
DemoApp.apiRequest('checkInitData', {}, function(result) {
|
||
|
|
if (result.ok) {
|
||
|
|
webViewStatus.textContent = 'Hash is correct (async)';
|
||
|
|
webViewStatus.className = 'ok';
|
||
|
|
} else {
|
||
|
|
webViewStatus.textContent = result.error + ' (async)';
|
||
|
|
webViewStatus.className = 'err';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
sendText(spam) {
|
||
|
|
const textField = document.querySelector('#text_field');
|
||
|
|
const text = textField.value;
|
||
|
|
if (!text.length) {
|
||
|
|
return textField.focus();
|
||
|
|
}
|
||
|
|
if (byteLength(text) > 4096) {
|
||
|
|
return alert('Text is too long');
|
||
|
|
}
|
||
|
|
|
||
|
|
const repeat = spam ? 10 : 1;
|
||
|
|
for (let i = 0; i < repeat; i++) {
|
||
|
|
Telegram.WebApp.sendData(text);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
sendTime(spam) {
|
||
|
|
const repeat = spam ? 10 : 1;
|
||
|
|
for (let i = 0; i < repeat; i++) {
|
||
|
|
Telegram.WebApp.sendData(new Date().toString());
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// Alerts
|
||
|
|
showAlert(message) {
|
||
|
|
Telegram.WebApp.showAlert(message);
|
||
|
|
},
|
||
|
|
showConfirm(message) {
|
||
|
|
Telegram.WebApp.showConfirm(message);
|
||
|
|
},
|
||
|
|
showPopup() {
|
||
|
|
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(buttonId) {
|
||
|
|
if (buttonId === 'delete') {
|
||
|
|
DemoApp.showAlert("'Delete all' selected");
|
||
|
|
} else if (buttonId === 'faq') {
|
||
|
|
Telegram.WebApp.openLink('https://telegram.org/faq');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
showScanQrPopup: function(linksOnly) {
|
||
|
|
Telegram.WebApp.showScanQrPopup({
|
||
|
|
text: linksOnly ? 'with any link' : 'for test purposes'
|
||
|
|
}, function(text) {
|
||
|
|
if (linksOnly) {
|
||
|
|
const lowerText = text.toString().toLowerCase();
|
||
|
|
if (lowerText.substring(0, 7) === 'http://' ||
|
||
|
|
lowerText.substring(0, 8) === 'https://'
|
||
|
|
) {
|
||
|
|
setTimeout(function() {
|
||
|
|
Telegram.WebApp.openLink(text);
|
||
|
|
}, 50);
|
||
|
|
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
DemoApp.showAlert(text);
|
||
|
|
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
// Permissions
|
||
|
|
requestLocation(el) {
|
||
|
|
if (navigator.geolocation) {
|
||
|
|
navigator.geolocation.getCurrentPosition(function (position) {
|
||
|
|
el.nextElementSibling.innerHTML = '(' + position.coords.latitude + ', ' + position.coords.longitude + ')';
|
||
|
|
el.nextElementSibling.className = 'ok';
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
el.nextElementSibling.innerHTML = 'Geolocation is not supported in this browser.';
|
||
|
|
el.nextElementSibling.className = 'err';
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
requestVideo(el) {
|
||
|
|
if (navigator.mediaDevices) {
|
||
|
|
navigator.mediaDevices.getUserMedia({ audio: false, video: true }).then(function(stream) {
|
||
|
|
el.nextElementSibling.innerHTML = '(Access granted)';
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
el.nextElementSibling.innerHTML = 'Media devices is not supported in this browser.';
|
||
|
|
el.nextElementSibling.className = 'err';
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
requestAudio(el) {
|
||
|
|
if (navigator.mediaDevices) {
|
||
|
|
navigator.mediaDevices.getUserMedia({ audio: true, video: false }).then(function(stream) {
|
||
|
|
el.nextElementSibling.innerHTML = '(Access granted)';
|
||
|
|
el.nextElementSibling.className = 'ok';
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
el.nextElementSibling.innerHTML = 'Media devices is not supported in this browser.';
|
||
|
|
el.nextElementSibling.className = 'err';
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
requestAudioVideo(el) {
|
||
|
|
if (navigator.mediaDevices) {
|
||
|
|
navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(function(stream) {
|
||
|
|
el.nextElementSibling.innerHTML = '(Access granted)';
|
||
|
|
el.nextElementSibling.className = 'ok';
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
el.nextElementSibling.innerHTML = 'Media devices is not supported in this browser.';
|
||
|
|
el.nextElementSibling.className = 'err';
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
testClipboard(el) {
|
||
|
|
Telegram.WebApp.readTextFromClipboard(function(clipText) {
|
||
|
|
if (clipText === null) {
|
||
|
|
el.nextElementSibling.innerHTML = 'Clipboard text unavailable.';
|
||
|
|
el.nextElementSibling.className = 'err';
|
||
|
|
} else {
|
||
|
|
el.nextElementSibling.innerHTML = '(Read from clipboard: «' + clipText + '»)';
|
||
|
|
el.nextElementSibling.className = 'ok';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
|
||
|
|
// Other
|
||
|
|
apiRequest(method, data, onCallback) {
|
||
|
|
// DISABLE BACKEND FOR FRONTEND DEMO
|
||
|
|
// YOU CAN USE YOUR OWN REQUESTS TO YOUR OWN BACKEND
|
||
|
|
// CHANGE THIS CODE TO YOUR OWN
|
||
|
|
return onCallback && onCallback({error: 'This function (' + method + ') should send requests to your backend. Please, change this code to your own.'});
|
||
|
|
|
||
|
|
const authData = DemoApp.initData || '';
|
||
|
|
fetch('/demo/api', {
|
||
|
|
method: 'POST',
|
||
|
|
body: JSON.stringify(Object.assign(data, {
|
||
|
|
_auth: authData,
|
||
|
|
method: method,
|
||
|
|
})),
|
||
|
|
credentials: 'include',
|
||
|
|
headers: {
|
||
|
|
'Content-Type': 'application/json'
|
||
|
|
}
|
||
|
|
}).then(function(response) {
|
||
|
|
return response.json();
|
||
|
|
}).then(function(result) {
|
||
|
|
onCallback && onCallback(result);
|
||
|
|
}).catch(function(error) {
|
||
|
|
onCallback && onCallback({error: 'Server error'});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const DemoAppMenu = {
|
||
|
|
init() {
|
||
|
|
DemoApp.init();
|
||
|
|
document.body.classList.add('gray');
|
||
|
|
Telegram.WebApp.setHeaderColor('secondary_bg_color');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const DemoAppInitData = {
|
||
|
|
init() {
|
||
|
|
DemoApp.init();
|
||
|
|
Telegram.WebApp.onEvent('themeChanged', function() {
|
||
|
|
document.getElementById('theme_data').innerHTML = JSON.stringify(Telegram.WebApp.themeParams, null, 2);
|
||
|
|
});
|
||
|
|
document.getElementById('webview_data').innerHTML = JSON.stringify(DemoApp.initDataUnsafe, null, 2);
|
||
|
|
document.getElementById('theme_data').innerHTML = JSON.stringify(Telegram.WebApp.themeParams, null, 2);
|
||
|
|
DemoApp.checkInitData();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const DemoAppViewport = {
|
||
|
|
init() {
|
||
|
|
DemoApp.init();
|
||
|
|
Telegram.WebApp.onEvent('viewportChanged', DemoAppViewport.setData);
|
||
|
|
DemoAppViewport.setData();
|
||
|
|
},
|
||
|
|
setData() {
|
||
|
|
document.querySelector('.viewport-border')
|
||
|
|
.setAttribute('text', window.innerWidth + ' x ' + round(Telegram.WebApp.viewportHeight, 2))
|
||
|
|
document.querySelector('.viewport-stable_border')
|
||
|
|
.setAttribute('text', window.innerWidth + ' x ' + round(Telegram.WebApp.viewportStableHeight, 2) +
|
||
|
|
' | is_expanded: ' + (Telegram.WebApp.isExpanded ? 'true' : 'false'));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
function byteLength(str) {
|
||
|
|
if (window.Blob) {
|
||
|
|
try { return new Blob([str]).size; } catch (e) {}
|
||
|
|
}
|
||
|
|
|
||
|
|
let s = str.length;
|
||
|
|
for (let i = str.length - 1; i >= 0; i--) {
|
||
|
|
const 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) {
|
||
|
|
const k = Math.pow(10, d || 0);
|
||
|
|
return Math.round(val * k) / k;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script type="application/javascript">
|
||
|
|
/*
|
||
|
|
* This part of code is used to initialize the demo app and set up the event handlers we need.
|
||
|
|
*/
|
||
|
|
|
||
|
|
Telegram.WebApp.onEvent('themeChanged', function() {
|
||
|
|
document.getElementById('theme_data').innerHTML = JSON.stringify(Telegram.WebApp.themeParams, null, 2);
|
||
|
|
});
|
||
|
|
|
||
|
|
if (DemoApp.initDataUnsafe.query_id) {
|
||
|
|
document.getElementById('main_btn').style.display = 'block';
|
||
|
|
}
|
||
|
|
document.getElementById('with_webview_btn').style.display = !!DemoApp.initDataUnsafe.query_id && !DemoApp.initDataUnsafe.receiver ? 'block' : 'none';
|
||
|
|
document.getElementById('webview_data').innerHTML = JSON.stringify(DemoApp.initDataUnsafe, null, 2);
|
||
|
|
|
||
|
|
document.getElementById('theme_data').innerHTML = JSON.stringify(Telegram.WebApp.themeParams, null, 2);
|
||
|
|
document.getElementById('regular_link').setAttribute('href', document.getElementById('regular_link').getAttribute('href') + location.hash);
|
||
|
|
document.getElementById('text_field').focus();
|
||
|
|
document.getElementById('regular_field').addEventListener('input', function(e) {
|
||
|
|
const val = this.value.toLowerCase();
|
||
|
|
if (val.indexOf('progress') >= 0) {
|
||
|
|
Telegram.WebApp.MainButton.showProgress();
|
||
|
|
} else {
|
||
|
|
Telegram.WebApp.MainButton.hideProgress();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById('ver').innerHTML = Telegram.WebApp.version;
|
||
|
|
document.getElementById('platform').innerHTML = Telegram.WebApp.platform;
|
||
|
|
|
||
|
|
if (DemoApp.initDataUnsafe.receiver) {
|
||
|
|
document.getElementById('peer_wrap').style.display = 'block';
|
||
|
|
document.getElementById('peer_name').innerHTML = DemoApp.initDataUnsafe.receiver.first_name + ' ' + DemoApp.initDataUnsafe.receiver.last_name;
|
||
|
|
if (DemoApp.initDataUnsafe.receiver.photo_url) {
|
||
|
|
document.getElementById('peer_photo').setAttribute('src', DemoApp.initDataUnsafe.receiver.photo_url);
|
||
|
|
} else {
|
||
|
|
document.getElementById('peer_photo').style.display = 'none';
|
||
|
|
}
|
||
|
|
} else if (DemoApp.initDataUnsafe.chat) {
|
||
|
|
document.getElementById('peer_wrap').style.display = 'block';
|
||
|
|
document.getElementById('peer_name').innerHTML = DemoApp.initDataUnsafe.chat.title;
|
||
|
|
if (DemoApp.initDataUnsafe.chat.photo_url) {
|
||
|
|
document.getElementById('peer_photo').setAttribute('src', DemoApp.initDataUnsafe.chat.photo_url);
|
||
|
|
} else {
|
||
|
|
document.getElementById('peer_photo').style.display = 'none';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
DemoApp.checkInitData();
|
||
|
|
DemoApp.init();
|
||
|
|
|
||
|
|
function setViewportData() {
|
||
|
|
document.querySelector('.viewport-border')
|
||
|
|
.setAttribute('text', window.innerWidth + ' x ' + round(Telegram.WebApp.viewportHeight, 2))
|
||
|
|
document.querySelector('.viewport-stable_border')
|
||
|
|
.setAttribute('text', window.innerWidth + ' x ' + round(Telegram.WebApp.viewportStableHeight, 2) +
|
||
|
|
' | is_expanded: ' + (Telegram.WebApp.isExpanded ? 'true' : 'false'));
|
||
|
|
}
|
||
|
|
Telegram.WebApp.setHeaderColor('secondary_bg_color');
|
||
|
|
Telegram.WebApp.onEvent('viewportChanged', setViewportData);
|
||
|
|
setViewportData();
|
||
|
|
Telegram.WebApp.onEvent('settingsButtonClicked', function() {
|
||
|
|
alert('Settings opened!');
|
||
|
|
});
|
||
|
|
|
||
|
|
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;
|
||
|
|
document.getElementById('bg_color_val').textContent = color;
|
||
|
|
headerColorSel.value = 'custom';
|
||
|
|
prevBgColorVal = document.getElementById('bg_color_sel').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();
|
||
|
|
} else {
|
||
|
|
document.getElementById('bg_color_val').textContent = 'custom...';
|
||
|
|
Telegram.WebApp.setBackgroundColor(colorKey);
|
||
|
|
document.body.setAttribute('style', '--bg-color:' + Telegram.WebApp.backgroundColor);
|
||
|
|
bgColorInput.value = Telegram.WebApp.backgroundColor;
|
||
|
|
prevBgColorVal = headerColorSel.value;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
Telegram.WebApp.onEvent('themeChanged', function() {
|
||
|
|
bgColorInput.value = Telegram.WebApp.backgroundColor;
|
||
|
|
document.body.setAttribute('style', '--bg-color:' + Telegram.WebApp.backgroundColor);
|
||
|
|
});
|
||
|
|
|
||
|
|
DemoApp.testClipboard(document.getElementById('clipboard_test'));
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|