07c4add7be
- use object instead of array to ensure uniqueness for each callback - do not use <script data-no-instant> to add callback, they won't be called if the page is not loaded first time; instead, try to set the callback each time the page is loaded
53 lines
1.7 KiB
HTML
53 lines
1.7 KiB
HTML
<div class="comments-box">
|
|
<div id="telegram-widget-container"></div>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
// toogle theme callback
|
|
const key = 'telegram-widget'
|
|
if (!toggleThemeCallbacks.hasOwnProperty(key)) {
|
|
toggleThemeCallbacks[key] = (isDark) => {
|
|
// console.log('window toggle-theme for telegram widget')
|
|
const telegram = window.Telegram
|
|
if (!telegram || !document.querySelector('#telegram-widget-container')) {
|
|
return;
|
|
}
|
|
if (isDark) {
|
|
telegram.setWidgetOptions({'nodark': 1})
|
|
} else {
|
|
telegram.setWidgetOptions({'dark': 1})
|
|
}
|
|
}
|
|
}
|
|
|
|
// telegram widget config attrs
|
|
const attrs = {
|
|
'data-telegram-discussion': "{{ .channel }}",
|
|
'data-comments-limit': "{{ .limit | default 10 }}",
|
|
// prevent the <script> from loading mutiple times by InstantClick
|
|
'data-no-instant': '',
|
|
}
|
|
const accentColor = '{{ with .accentColor }}{{ . }}{{ end }}';
|
|
if (accentColor) {
|
|
attrs['data-color'] = accentColor;
|
|
}
|
|
if (isDarkTheme()) {
|
|
attrs['data-dark'] = '1'
|
|
}
|
|
|
|
// because Telegram does not provide a function to reset the widget from existing instance,
|
|
// we have to add the widget script every time.
|
|
var d = document, s = d.createElement('script');
|
|
s.src = "https://telegram.org/js/telegram-widget.js?19";
|
|
for (const key in attrs) {
|
|
s.setAttribute(key, attrs[key]);
|
|
}
|
|
|
|
const container = document.querySelector('#telegram-widget-container')
|
|
container.innerHTML = '';
|
|
// telegram widget script must be added to the position where you want it to be displayed
|
|
container.appendChild(s);
|
|
})();
|
|
</script>
|