Update content of files

This commit is contained in:
GitHub Action 2024-11-07 00:32:21 +00:00
parent 43c587813f
commit 582d68c318
4 changed files with 149 additions and 36 deletions

View file

@ -9,7 +9,7 @@
<meta name="MobileOptimized" content="176" />
<meta name="HandheldFriendly" content="True" />
<meta name="robots" content="noindex, nofollow" />
<script src="https://tg.dev/js/telegram-web-app-beta.js?59"></script>
<script src="https://tg.dev/js/telegram-web-app-beta.js?65"></script>
<script>
function setThemeClass() {
document.documentElement.className = Telegram.WebApp.colorScheme;

View file

@ -243,7 +243,7 @@ pre {
width: auto;
}
.viewport-border,
.viewport-stable_border {
.viewport-stable-border {
position: fixed;
left: 0;
right: 0;
@ -251,20 +251,29 @@ pre {
height: var(--tg-viewport-height, 100vh);
pointer-events: none;
}
.viewport-stable_border {
.viewport-stable-border {
height: var(--tg-viewport-stable-height, 100vh);
}
.safe-area_border {
.safe-area-border {
position: fixed;
left: env(safe-area-inset-left);
right: env(safe-area-inset-right);
top: env(safe-area-inset-top);
bottom: env(safe-area-inset-bottom);
left: env(safe-area-inset-left, -1000px);
right: env(safe-area-inset-right, -1000px);
top: env(safe-area-inset-top, -1000px);
bottom: env(safe-area-inset-bottom, -1000px);
pointer-events: none;
}
.tg-safe-area-border {
position: fixed;
left: var(--tg-safe-area-inset-left, 0);
right: var(--tg-safe-area-inset-right, 0);
top: var(--tg-safe-area-inset-top, 0);
bottom: var(--tg-safe-area-inset-bottom, 0);
pointer-events: none;
}
.viewport-border:before,
.viewport-stable_border:before,
.safe-area_border:before {
.viewport-stable-border:before,
.safe-area-border:before,
.tg-safe-area-border:before {
content: attr(text);
display: inline-block;
position: absolute;
@ -275,19 +284,25 @@ pre {
padding: 2px 4px;
vertical-align: top;
}
.viewport-stable_border:before {
.viewport-stable-border:before {
background: green;
left: 0;
right: auto;
}
.safe-area_border:before {
.safe-area-border:before {
content: 'safe-area';
background: darkorange;
right: 100px;
}
.tg-safe-area-border:before {
content: 'tg-safe-area';
background: orange;
right: 50px;
}
.viewport-border:after,
.viewport-stable_border:after,
.safe-area_border:after {
.viewport-stable-border:after,
.safe-area-border:after,
.tg-safe-area-border:after {
content: '';
display: block;
position: absolute;
@ -297,9 +312,12 @@ pre {
bottom: 0;
border: 2px dashed gray;
}
.viewport-stable_border:after {
.viewport-stable-border:after {
border-color: green;
}
.safe-area_border:after {
.safe-area-border:after {
border-color: darkorange;
}
.tg-safe-area-border:after {
border-color: orange;
}

View file

@ -8,7 +8,7 @@
<meta name="MobileOptimized" content="176" />
<meta name="HandheldFriendly" content="True" />
<meta name="robots" content="noindex,nofollow" />
<script src="https://tg.dev/js/telegram-web-app-beta.js?59"></script>
<script src="https://tg.dev/js/telegram-web-app-beta.js?65"></script>
<script>
function setThemeClass() {
document.documentElement.className = Telegram.WebApp.colorScheme;
@ -19,7 +19,7 @@
</script>
<link href="https://tg.dev/css/bootstrap.min.css?3" rel="stylesheet">
<link href="https://tg.dev/css/bootstrap-extra.css?2" rel="stylesheet">
<link href="/css/webappdemo.css?12" rel="stylesheet">
<link href="/css/webappdemo.css?15" rel="stylesheet">
</head>
<body class="" style="visibility: hidden;">
<section id="top_sect" class="second">
@ -85,17 +85,22 @@
<li><a href="javascript:Telegram.WebApp.shareToStory('https://telegra.ph/file/5583ac37c90979f052b7b.png',{widget_link:{url:'https://telegra.ph/Almost-done-07-23'}});">Share picture to story</a> (with link widget)</li>
<li><a href="javascript:Telegram.WebApp.shareToStory('https://telegra.ph/file/61f1dac694c3131a7b4ac.mp4',{text:'Test caption',widget_link:{url:'https://telegra.ph/Almost-done-07-23',name:'Link'}});">Share video to story</a> (with caption and link widget)</li>
</ul>
<ul>
<li><a href="javascript:DemoApp.downloadFile(this, 'https://telegra.ph/file/5583ac37c90979f052b7b.png', 'Photo.png');">Download picture</a> <span></span></li>
<li><a href="javascript:DemoApp.downloadFile(this, 'https://telegra.ph/file/61f1dac694c3131a7b4ac.mp4', 'Video.mp4');">Download video</a> <span></span></li>
<li><a href="javascript:DemoApp.downloadFile(this, 'https://pdfobject.com/pdf/sample.pdf', 'Sample.pdf');">Download PDF</a> <span></span></li>
</ul>
<ul>
<li><a href="javascript:Telegram.WebApp.openTelegramLink('https://t.me/addstickers/fltmp');">Stickerpack</a></li>
<li><a href="javascript:Telegram.WebApp.openTelegramLink('https://t.me/addstickers/fltmp', {force_request:true});">Stickerpack</a> (nocache)</li>
</ul>
<ul>
<li><a href="javascript:;" onclick="return DemoApp.checkHomeScreenStatus(this);">Check Home Screen Status</a> <span></span></li>
<li><a href="javascript:;" onclick="return DemoApp.addToHomeScreen(this);">Add to Home Screen</a></li>
<li><a id="add_to_home_btn" href="javascript:;" onclick="return DemoApp.addToHomeScreen(this);">Add to Home Screen</a></li>
</ul>
<ul>
<li><a href="javascript:DemoApp.setEmojiStatus(this, '5213305508034783384');">Set emoji status</a> <span></span></li>
<li><a href="javascript:DemoApp.setEmojiStatus(this, '5213305508034783384', 1730937780);">Set emoji status</a> for 5 min <span></span></li>
<li><a href="javascript:DemoApp.setEmojiStatus(this, '5213305508034783384', 1730939759);">Set emoji status</a> for 5 min <span></span></li>
<li><a href="javascript:DemoApp.setEmojiStatus(this, '123');">Set emoji status</a> (invalid id) <span></span></li>
</ul>
<p>Test permissions:</p>
@ -178,6 +183,15 @@
<li><a href="javascript:;" onclick="return DemoApp.biometricRequestAuth(this);">Request auth</a> <span></span></li>
</ul>
</div>
<p>Location:</p>
<div class="columns">
<ul>
<li>isInited: <span class="txt" id="loc_inited">false</span></li>
<li>available: <span class="txt" id="loc_available">false</span></li>
<li>access_requested: <span class="txt" id="loc_access_requested">false</span> (<a href="javascript:;" onclick="return DemoApp.locationGet(this);">Request location</a>) <span></span></li>
<li>access_granted: <span class="txt" id="loc_access_granted">false</span> <span id="loc_settings" style="display:none;">(<a href="javascript:;" onclick="return DemoApp.locationOpenSettings(this);">Open settings</a>)</span></li>
</ul>
</div>
<pre><code id="webview_data"></code></pre>
<div class="hint">
Data passed to webview.
@ -191,13 +205,17 @@
Version: <span id="ver"></span>,
platform: <span id="platform"></span>
</div>
<div class="hint">
<span id="cur_activity"></span><span id="prev_activity"></span>
</div>
</section>
<div class="safe-area_border"></div>
<div class="safe-area-border"></div>
<div class="tg-safe-area-border"></div>
<div class="viewport-border"></div>
<div class="viewport-stable_border"></div>
<div class="viewport-stable-border"></div>
<script src="/js/jquery.min.js"></script>
<script src="https://tg.dev/js/bootstrap.min.js"></script>
<script src="/js/webappdemo.js?32"></script>
<script src="/js/webappdemo.js?36"></script>
<script>DemoApp.apiUrl = "/demo/api";
Telegram.WebApp.onEvent('themeChanged', function() {
@ -248,7 +266,7 @@ DemoApp.init();
function setViewportData() {
$('.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'));
$('.viewport-stable-border').attr('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);
@ -355,12 +373,18 @@ try {
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) {}
</script>
</body>

View file

@ -379,6 +379,45 @@ var DemoApp = {
}
});
},
locationInit: function(el) {
var locationManager = Telegram.WebApp.LocationManager;
if (!DemoApp.locationInited) {
DemoApp.locationInited = true;
Telegram.WebApp.onEvent('locationManagerUpdated', function() {
$('#loc_inited').text(locationManager.isInited ? 'true' : 'false');
$('#loc_available').text(locationManager.isLocationAvailable ? 'true' : 'false');
$('#loc_access_requested').text(locationManager.isAccessRequested ? 'true' : 'false');
$('#loc_access_granted').text(locationManager.isAccessGranted ? 'true' : 'false');
$('#loc_settings').toggle(locationManager.isLocationAvailable && locationManager.isAccessRequested && !locationManager.isAccessGranted);
});
}
locationManager.init();
},
locationGet: function(el) {
var locationManager = Telegram.WebApp.LocationManager;
if (!locationManager.isInited) {
return DemoApp.showAlert('Location not inited yet!');
}
locationManager.getLocation(function(location_data) {
if (location_data) {
$(el).next('span').text('(' + JSON.stringify(location_data) + ')').attr('class', 'ok');
} else {
$(el).next('span').text('(Request declined)').attr('class', 'err');
}
});
},
locationOpenSettings: function(el) {
var locationManager = Telegram.WebApp.LocationManager;
if (!locationManager.isInited) {
return DemoApp.showAlert('Location not inited yet!');
}
if (!locationManager.isBiometricAvailable ||
!locationManager.isAccessRequested ||
locationManager.isAccessGranted) {
return false;
}
locationManager.openSettings();
},
toggleMainButton: function(el) {
if (DemoApp.MainButton.isVisible) {
DemoApp.MainButton.hide();
@ -564,22 +603,16 @@ var DemoApp = {
}
},
homeScreenInit: function() {
Telegram.WebApp.onEvent('homeScreenFailed', function(params) {
DemoApp.showAlert('userEmojiStatusFailed: ' + params.error);
Telegram.WebApp.onEvent('homeScreenAdded', function(params) {
$('#add_to_home_btn').next('span').text('(added!)').attr('class', 'ok');
});
},
addToHomeScreen: function(el) {
Telegram.WebApp.addToHomeScreen(function(result) {
if (result) {
$(el).next('span').text('(added!)').attr('class', 'ok');
} else {
$(el).next('span').text('(NOT added)').attr('class', 'err');
}
});
Telegram.WebApp.addToHomeScreen();
},
checkHomeScreenStatus: function(el) {
Telegram.WebApp.checkHomeScreenStatus(function(is_added, is_supported) {
$(el).next('span').text('(is_added: ' + (is_added ? 'true' : 'false') + '; is_supported: ' + (is_supported ? 'true' : 'false') + ')').attr('class', 'ok');
Telegram.WebApp.checkHomeScreenStatus(function(status) {
$(el).next('span').text('(status: ' + status + ')').attr('class', 'ok');
});
},
emojiStatusInit: function() {
@ -596,6 +629,44 @@ var DemoApp = {
}
});
},
downloadFile: function(el, url, file_name) {
Telegram.WebApp.downloadFile({url: url, file_name: file_name}, function(result) {
if (result) {
$(el).next('span').text('(downloading...)').attr('class', 'ok');
} else {
$(el).next('span').text('(declined)').attr('class', 'err');
}
});
},
activityStartTime: new Date(),
activityPrevDuration: false,
activityTo: null,
activityInit: function() {
Telegram.WebApp.onEvent('activated', function(params) {
DemoApp.activityStartTime = new Date();
DemoApp.activityUpdate();
});
Telegram.WebApp.onEvent('deactivated', function(params) {
DemoApp.activityPrevDuration = new Date() - DemoApp.activityStartTime;
DemoApp.activityStartTime = false;
clearTimeout(DemoApp.activityTo);
DemoApp.activityUpdate();
});
DemoApp.activityUpdate();
},
activityUpdate: function() {
if (Telegram.WebApp.isActive) {
var nowDuration = new Date() - DemoApp.activityStartTime;
$('#cur_activity').html('Mini App is active for <b>' + Math.round(nowDuration / 1000) + '</b> sec');
DemoApp.activityTo = setTimeout(DemoApp.activityUpdate, 100);
} else {
$('#cur_activity').html('Mini App is <b>inactive</b>');
}
if (DemoApp.activityPrevDuration !== false) {
var prevDuration = DemoApp.activityPrevDuration;
$('#prev_activity').html(', <br>previously was active for <b>' + Math.round(prevDuration / 1000) + '</b> sec');
}
},
showAlert: function(message) {
Telegram.WebApp.showAlert(message);
},
@ -692,7 +763,7 @@ var DemoAppViewport = {
},
setData: function() {
$('.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'));
$('.viewport-stable-border').attr('text', window.innerWidth + ' x ' + round(Telegram.WebApp.viewportStableHeight, 2) + ' | is_expanded: ' + (Telegram.WebApp.isExpanded ? 'true' : 'false'));
}
};