PaperModX/layouts/partials/telegram_widget.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>