Update content of files

This commit is contained in:
GitHub Action 2023-09-03 17:39:56 +00:00
parent 44de4d65ca
commit c89ba5de61
4 changed files with 70 additions and 24 deletions

View file

@ -457,37 +457,61 @@
WebView.postEvent('web_app_setup_closing_behavior', false, {need_confirmation: isClosingConfirmationEnabled});
}
var headerColorKey = 'bg_color';
var headerColorKey = 'bg_color', headerColor = null;
function getHeaderColor() {
return themeParams[headerColorKey] || null;
if (headerColorKey == 'secondary_bg_color') {
return themeParams.secondary_bg_color;
} else if (headerColorKey == 'bg_color') {
return themeParams.bg_color;
}
return headerColor;
}
function setHeaderColor(color) {
if (!versionAtLeast('6.1')) {
console.warn('[Telegram.WebApp] Header color is not supported in version ' + webAppVersion);
return;
}
var color_key;
if (color == 'bg_color' || color == 'secondary_bg_color') {
color_key = color;
} else {
color_key = parseColorToHex(color);
if (!versionAtLeast('6.10')) {
if (themeParams.bg_color &&
themeParams.bg_color == color_key) {
color_key = 'bg_color';
themeParams.bg_color == color) {
color = 'bg_color';
} else if (themeParams.secondary_bg_color &&
themeParams.secondary_bg_color == color_key) {
color_key = 'secondary_bg_color';
} else {
color_key = false;
themeParams.secondary_bg_color == color) {
color = 'secondary_bg_color';
}
}
if (color_key != 'bg_color' &&
var head_color = null, color_key = null;
if (color == 'bg_color' || color == 'secondary_bg_color') {
color_key = color;
} else if (versionAtLeast('6.10')) {
head_color = parseColorToHex(color);
if (!head_color) {
console.error('[Telegram.WebApp] Header color format is invalid', color);
throw Error('WebAppHeaderColorInvalid');
}
}
if (!versionAtLeast('6.10') &&
color_key != 'bg_color' &&
color_key != 'secondary_bg_color') {
console.error('[Telegram.WebApp] Header color key should be one of Telegram.WebApp.themeParams.bg_color, Telegram.WebApp.themeParams.secondary_bg_color, \'bg_color\', \'secondary_bg_color\'', color);
throw Error('WebAppHeaderColorKeyInvalid');
}
headerColorKey = color_key;
WebView.postEvent('web_app_set_header_color', false, {color_key: color_key});
headerColor = head_color;
updateHeaderColor();
}
var appHeaderColorKey = null, appHeaderColor = null;
function updateHeaderColor() {
if (appHeaderColorKey != headerColorKey ||
appHeaderColor != headerColor) {
appHeaderColorKey = headerColorKey;
appHeaderColor = headerColor;
if (appHeaderColor) {
WebView.postEvent('web_app_set_header_color', false, {color: headerColor});
} else {
WebView.postEvent('web_app_set_header_color', false, {color_key: headerColorKey});
}
}
}
var backgroundColor = 'bg_color';
@ -1525,6 +1549,7 @@
window.Telegram.WebApp = WebApp;
updateHeaderColor();
updateBackgroundColor();
setViewportHeight();

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.js?33"></script>
<script src="https://tg.dev/js/telegram-web-app.js?34"></script>
<script>
function setThemeClass() {
document.documentElement.className = Telegram.WebApp.colorScheme;

View file

@ -140,10 +140,10 @@ section {
background-color: var(--bg-color, #ffffff);
}
section#top_sect {
background-color: var(--tg-theme-bg-color, #ffffff);
background-color: var(--header-color, var(--tg-theme-bg-color, #ffffff));
}
section#top_sect.second {
background-color: var(--tg-theme-secondary-bg-color, #efefef);
background-color: var(--header-color, var(--tg-theme-secondary-bg-color, #efefef));
}
section .sect_row {
margin: 10px 0;

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.js?33"></script>
<script src="https://tg.dev/js/telegram-web-app.js?34"></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?7" rel="stylesheet">
<link href="/css/webappdemo.css?8" rel="stylesheet">
</head>
<body class="" style="visibility: hidden;">
<section id="top_sect" class="second">
@ -34,9 +34,10 @@
<img id="peer_photo" class="chat_img" src="">
<span id="peer_name"></span>
</div>
<div class="sect_row">Header: <select id="header_color_sel">
<div class="sect_row">Header: <input type="color" id="header_color_input" /> <select id="header_color_sel">
<option value="bg_color" selected>bg_color</option>
<option value="secondary_bg_color">secondary_bg_color</option>
<option value="custom" id="header_color_val">custom...</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>
@ -199,12 +200,32 @@ Telegram.WebApp.onEvent('settingsButtonClicked', function() {
var prev_bg_color_val = $('#bg_color_sel').val();
$('#bg_color_input').val(Telegram.WebApp.backgroundColor);
$('body').attr('style', '--bg-color:' + Telegram.WebApp.backgroundColor);
var prev_header_color_val = $('#header_color_sel').val();
$('#header_color_input').val(Telegram.WebApp.headerColor);
$('body').attr('style', '--header-color:' + Telegram.WebApp.headerColor);
$('#header_color_sel').val('secondary_bg_color');
$('#header_color_input').on('change', function(e) {
var color = e.target.value;
$('#header_color_val').text(color);
$('#header_color_sel').val('custom');
prev_header_color_val = $('#header_color_sel').val();
Telegram.WebApp.setHeaderColor(color);
$('body').attr('style', '--header-color:' + Telegram.WebApp.headerColor);
});
$('#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);
$('body').attr('style', '--bg-color:' + Telegram.WebApp.backgroundColor);
if (color_key == 'custom') {
$('#header_color_sel').val(prev_header_color_val);
$('#header_color_input').focus().click();
} else {
$('#header_color_val').text('custom...');
Telegram.WebApp.setHeaderColor(color_key);
$('#top_sect').toggleClass('second', color_key == 'secondary_bg_color');
$('body').attr('style', '--header-color:' + Telegram.WebApp.headerColor);
$('#header_color_input').val(Telegram.WebApp.headerColor);
prev_header_color_val = $('#header_color_sel').val();
}
});
$('#bg_color_input').on('change', function(e) {
var color = e.target.value;