Update content of files

This commit is contained in:
GitHub Action 2022-04-11 01:58:11 +00:00
parent 0d8c88ea93
commit 5a8b0337c5
3 changed files with 145 additions and 55 deletions

View file

@ -1,7 +1,6 @@
(function () {
var eventHandlers = {};
// Parse init params from location hash: for Android < 5.0, TDesktop
var locationHash = '';
try {
locationHash = location.hash.toString();
@ -10,6 +9,8 @@
var initParams = urlParseHashParams(locationHash);
var webAppDataRaw = '', webAppData = {};
var themeParams = {}, colorScheme = 'light';
if (initParams.tgWebAppData && initParams.tgWebAppData.length) {
webAppDataRaw = initParams.tgWebAppData;
webAppData = urlParseHashParams(webAppDataRaw);
@ -24,6 +25,15 @@
} catch (e) {}
}
}
if (initParams.tgWebAppThemeParams && initParams.tgWebAppThemeParams.length) {
var themeParamsRaw = initParams.tgWebAppThemeParams;
try {
var theme_params = JSON.parse(themeParamsRaw);
setThemeParams(theme_params);
} catch (e) {}
} else if (webAppData.theme_params) { // legacy
setThemeParams(webAppData.theme_params);
}
var isIframe = false;
try {
@ -47,24 +57,26 @@
function onThemeChanged(eventType, eventData) {
if (eventData.theme_params) {
setThemeParams(eventData.theme_params);
window.Telegram.WebApp.MainButton.setParams({});
window.Telegram.WebApp.MainButton.setParams({
force_update: true
});
receiveWebViewEvent('themeChanged');
}
}
var lastWindowHeight = window.innerHeight, skipOnViewportChanged = false;
var lastWindowHeight = window.innerHeight;
function onViewportChanged(eventType, eventData) {
if (!skipOnViewportChanged &&
eventData.height) {
if (eventData.height) {
window.removeEventListener('resize', onWindowResize);
setViewportHeight(eventData.height);
setViewportHeight(eventData);
}
}
function onWindowResize(e) {
if (lastWindowHeight != window.innerHeight) {
lastWindowHeight = window.innerHeight;
skipOnViewportChanged = true;
receiveEvent('viewport_changed', {height: lastWindowHeight});
skipOnViewportChanged = false;
receiveWebViewEvent('viewportChanged', {
isStateStable: true
});
}
}
@ -128,7 +140,6 @@
return url + addHash;
}
function postEvent(eventType, callback, eventData) {
if (!callback) {
callback = function () {};
@ -168,9 +179,12 @@
};
function receiveEvent(eventType, eventData) {
if (initParams.tgWebAppDebug) {
console.log('[Telegram.WebView] receiveEvent', eventType, eventData);
}
callEventCallbacks(eventType, function(callback) {
callback(eventType, eventData);
});
}
function callEventCallbacks(eventType, func) {
var curEventHandlers = eventHandlers[eventType];
if (curEventHandlers === undefined ||
!curEventHandlers.length) {
@ -178,7 +192,7 @@
}
for (var i = 0; i < curEventHandlers.length; i++) {
try {
curEventHandlers[i](eventType, eventData);
func(curEventHandlers[i]);
} catch (e) {}
}
}
@ -204,6 +218,22 @@
eventHandlers[eventType].splice(index, 1);
};
function receiveWebViewEvent(eventType) {
var args = Array.prototype.slice.call(arguments);
eventType = args.shift();
callEventCallbacks('webview:' + eventType, function(callback) {
callback.apply(window.Telegram.WebApp, args);
});
}
function onWebViewEvent(eventType, callback) {
onEvent('webview:' + eventType, callback);
};
function offWebViewEvent(eventType, callback) {
offEvent('webview:' + eventType, callback);
};
function setCssProperty(name, value) {
var root = document.documentElement;
if (root && root.style && root.style.setProperty) {
@ -211,7 +241,6 @@
}
}
var themeParams = {}, colorScheme = 'light';
function setThemeParams(theme_params) {
var color;
for (var key in theme_params) {
@ -227,20 +256,31 @@
}
}
var viewportHeight = false;
function setViewportHeight(height) {
if (typeof height !== 'undefined') {
viewportHeight = height;
var viewportHeight = false, viewportStableHeight = false, isExpanded = true;
function setViewportHeight(data) {
if (typeof data !== 'undefined') {
isExpanded = !!data.is_expanded;
viewportHeight = data.height;
if (data.is_state_stable) {
viewportStableHeight = data.height;
}
receiveWebViewEvent('viewportChanged', {
isStateStable: !!data.is_state_stable
});
}
var css_height;
var height, stable_height;
if (viewportHeight !== false) {
css_height = (viewportHeight - mainButtonHeight) + 'px';
} else if (mainButtonHeight) {
css_height = 'calc(100vh - ' + mainButtonHeight + 'px)';
height = (viewportHeight - mainButtonHeight) + 'px';
} else {
css_height = '100vh';
height = mainButtonHeight ? 'calc(100vh - ' + mainButtonHeight + 'px)' : '100vh';
}
setCssProperty('viewport-height', css_height);
if (viewportStableHeight !== false) {
stable_height = (viewportStableHeight - mainButtonHeight) + 'px';
} else {
stable_height = mainButtonHeight ? 'calc(100vh - ' + mainButtonHeight + 'px)' : '100vh';
}
setCssProperty('viewport-height', height);
setCssProperty('viewport-stable-height', stable_height);
}
@ -301,7 +341,6 @@
var buttonText = 'CONTINUE';
var buttonColor = false;
var buttonTextColor = false;
var onClickCallback = null;
var mainButton = {};
Object.defineProperty(mainButton, 'text', {
@ -367,8 +406,8 @@
}
function onMainButtonPressed() {
if (isActive && onClickCallback) {
onClickCallback();
if (isActive) {
receiveWebViewEvent('mainButtonClicked');
}
}
@ -395,7 +434,8 @@
mainButtonHeight = (isVisible ? 48 : 0);
if (document.documentElement) {
document.documentElement.style.marginBottom = mainButtonHeight + 'px';
document.documentElement.style.boxSizing = 'border-box';
document.documentElement.style.paddingBottom = mainButtonHeight + 'px';
}
setViewportHeight();
}
@ -473,19 +513,21 @@
}
isActive = !!params.is_active;
}
if (changed) {
if (changed || params.force_update) {
updateButton();
}
return mainButton;
}
mainButton.setParams = setParams;
mainButton.setText = function(text) {
mainButton.text = text;
return mainButton;
return mainButton.setParams({text: text});
};
mainButton.onClick = function(callback) {
onClickCallback = callback;
onWebViewEvent('mainButtonClicked', callback);
return mainButton;
};
mainButton.offClick = function(callback) {
offWebViewEvent('mainButtonClicked', callback);
return mainButton;
};
mainButton.show = function() {
@ -514,6 +556,7 @@
updateButton();
return mainButton;
}
mainButton.setParams = setParams;
return mainButton;
})();
@ -588,9 +631,12 @@
}
};
window.Telegram.WebApp = {
onEvent: onEvent,
offEvent: offEvent,
MainButton: MainButton,
onEvent: function(eventType, callback) {
onWebViewEvent(eventType, callback);
},
offEvent: function(eventType, callback) {offWebViewEvent(eventType, callback);
},
sendData: function (data) {
if (!data || !data.length) {
console.error('[Telegram.WebApp] Data is required', data);
@ -624,22 +670,32 @@
get: function(){ return colorScheme; },
enumerable: true
});
Object.defineProperty(window.Telegram.WebApp, 'themeParams', {
get: function(){ return themeParams; },
enumerable: true
});
Object.defineProperty(window.Telegram.WebApp, 'isExpanded', {
get: function(){ return isExpanded; },
enumerable: true
});
Object.defineProperty(window.Telegram.WebApp, 'viewportHeight', {
get: function(){ return (viewportHeight === false ? window.innerHeight : viewportHeight) - mainButtonHeight; },
enumerable: true
});
Object.defineProperty(window.Telegram.WebApp, 'viewportStableHeight', {
get: function(){ return (viewportStableHeight === false ? window.innerHeight : viewportStableHeight) - mainButtonHeight; },
enumerable: true
});
if (webAppData.theme_params) {
setThemeParams(webAppData.theme_params);
}
setViewportHeight();
window.addEventListener('resize', onWindowResize);
onEvent('theme_changed', onThemeChanged);
onEvent('viewport_changed', onViewportChanged);
postEvent('web_app_request_theme');
postEvent('web_app_request_viewport');
window.addEventListener('resize', onWindowResize);
// For Windows Phone app
window.TelegramGameProxy_receiveEvent = receiveEvent;

View file

@ -9,12 +9,12 @@
<meta name="MobileOptimized" content="176" />
<meta name="HandheldFriendly" content="True" />
<meta name="robots" content="noindex, nofollow" />
<script src="https://tg.dev/js/telegram-webview.js?11"></script>
<script src="https://tg.dev/js/telegram-webview.js?14"></script>
<script>
function setThemeClass() {
document.documentElement.className = Telegram.WebApp.colorScheme;
}
Telegram.WebView.onEvent('theme_changed', setThemeClass);
Telegram.WebApp.onEvent('themeChanged', setThemeClass);
setThemeClass();
</script>
<link href="/css/cafe.css?15" rel="stylesheet">

View file

@ -8,12 +8,12 @@
<meta name="MobileOptimized" content="176" />
<meta name="HandheldFriendly" content="True" />
<meta name="robots" content="noindex,nofollow" />
<script src="https://telegram.org/js/telegram-webview.js?11"></script>
<script src="https://telegram.org/js/telegram-webview.js?14"></script>
<script>
function setThemeClass() {
document.documentElement.className = Telegram.WebApp.colorScheme;
}
Telegram.WebView.onEvent('theme_changed', setThemeClass);
Telegram.WebApp.onEvent('themeChanged', setThemeClass);
setThemeClass();
</script>
@ -106,7 +106,8 @@
top: 0;
transform: translateY(100vh);
}
.viewport_border {
.viewport_border,
.viewport_stable_border {
position: fixed;
left: 0;
right: 0;
@ -114,17 +115,28 @@
height: var(--tg-viewport-height, 100vh);
pointer-events: none;
}
.viewport_border:before {
.viewport_stable_border {
height: var(--tg-viewport-stable-height, 100vh);
}
.viewport_border:before,
.viewport_stable_border:before {
content: attr(text);
display: inline-block;
background: green;
left: 0;
position: absolute;
background: gray;
right: 0;
top: 0;
font-size: 7px;
padding: 2px 4px;
vertical-align: top;
}
.viewport_border:after {
.viewport_stable_border:before {
background: green;
left: 0;
right: auto;
}
.viewport_border:after,
.viewport_stable_border:after {
content: '';
display: block;
position: absolute;
@ -132,7 +144,10 @@
right: 0;
top: 0;
bottom: 0;
border: 2px dashed green;
border: 2px dashed gray;
}
.viewport_stable_border:after {
border-color: green;
}
</style>
</head>
@ -142,6 +157,7 @@
<button id="with_webview_btn" onclick="sendMessage('', true);">Send «Hello, World!» with inline webview button</button>
<button id="data_btn" onclick="sendTime(true);">Send current time to bot (x10)</button>
<button onclick="webviewExpand();">Expand Webview</button>
<button onclick="toggleMainButton(this);">Hide Main Button</button>
<div id="btn_status" class="hint" style="display: none;">
</div>
<p>Test links:</p>
@ -165,6 +181,7 @@
</div>
</section>
<div class="viewport_border"></div>
<div class="viewport_stable_border"></div>
<script src="/js/jquery.min.js"></script>
<script>
Telegram.WebApp.ready();
@ -337,11 +354,28 @@ Telegram.WebApp.MainButton
.show()
.onClick(function(){ webviewClose(); });
function setViewportHeight() {
$('.viewport_border').attr('text', window.innerWidth + ' x ' + Telegram.WebApp.viewportHeight);
function toggleMainButton(el) {
var mainButton = Telegram.WebApp.MainButton;
if (mainButton.isVisible) {
mainButton.hide();
el.innerHTML = 'Show Main Button';
} else {
mainButton.show();
el.innerHTML = 'Hide Main Button';
}
}
Telegram.WebApp.onEvent('viewport_changed', setViewportHeight);
setViewportHeight();
function round(val, d) {
var k = Math.pow(10, d || 0);
return Math.round(val * k) / k;
}
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'));
}
Telegram.WebApp.onEvent('viewportChanged', setViewportData);
setViewportData();
</script>