mirror of
https://github.com/MarshalX/telegram-crawler.git
synced 2024-11-23 15:58:27 +01:00
Update content of files
This commit is contained in:
parent
44de4d65ca
commit
c89ba5de61
4 changed files with 70 additions and 24 deletions
|
@ -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();
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue