Last active
October 20, 2018 13:02
-
-
Save imShara/0d0391d8742cc7af82166cbc444c749d to your computer and use it in GitHub Desktop.
Greasemonkey script that adds buttons to show more posts of telegram channel in browser
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==UserScript== | |
| // @name Telegram channel navigation | |
| // @description Fixes WEB with adding buttons to show more posts of telegram channel in browser | |
| // @author Shara | |
| // @version 1 | |
| // @include /^https://(www\.)?t\.me/\w+/\d+/?$/ | |
| // @grant none | |
| // ==/UserScript== | |
| let showBy = 10 | |
| let pathParams = window.location.pathname.split('/') | |
| let userName = pathParams[1] | |
| let postId = parseInt(pathParams[2]) | |
| let lastPostUp = postId | |
| let lastPostDown = postId | |
| let headWrapEl = document.querySelector('.tgme_head_wrap') | |
| let pageWrapEl = document.querySelector('.tgme_page_wrap') | |
| let footWrapEl; | |
| function injectCSS(event) { | |
| style = document.createElement('style') | |
| style.innerHTML = ` | |
| a.tgme_head_dl_button { | |
| display: none; | |
| } | |
| .tgme_head, | |
| .tgme_foot{ | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .tgme_head_brand { | |
| position: absolute; | |
| left: 50px; | |
| } | |
| .tgme_head_wrap, | |
| .tgme_foot_wrap { | |
| padding: 30px 70px; | |
| height: auto; | |
| } | |
| @media (max-width: 670px) { | |
| .tgme_head { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .tgme_head_brand { | |
| position: relative; | |
| left: auto; | |
| margin-bottom: 16px; | |
| } | |
| }` | |
| document.head.appendChild(style) | |
| } | |
| function resizeIframe(iframe) { | |
| let iframeHeight = iframe.contentWindow.document.body.scrollHeight | |
| iframe.style.height = iframeHeight + 'px' | |
| return iframeHeight | |
| } | |
| function loadPosts(fromId, postNum, direction) { | |
| console.log('loadPosts', fromId, postNum, direction) | |
| for (let i = 1; i <= postNum; i++) { | |
| let pagePost = document.createElement('div') | |
| pagePost.className = 'tgme_page tgme_page_post' | |
| let paggeWidget = document.createElement("div") | |
| paggeWidget.className = 'tgme_page_widget' | |
| let post = document.createElement("iframe"); | |
| post.id = `telegram-post-${userName}-${fromId}` | |
| post.src = `https://t.me/${userName}/${fromId + i * direction}?embed=1` | |
| post.scrolling = 'no' | |
| post.style.border = 'medium none' | |
| post.style.overflow = 'hidden' | |
| post.style.minWidth = '320px' | |
| post.width = '100%' | |
| post.height = '0' | |
| post.frameborder = '0' | |
| post.onload = function(event) { | |
| let iframeHeight = resizeIframe(event.target) | |
| if (direction < 0) { | |
| window.scrollBy(0, iframeHeight - 18) | |
| } | |
| } | |
| paggeWidget.appendChild(post) | |
| pagePost.appendChild(paggeWidget) | |
| if (direction > 0) { | |
| pageWrapEl.insertBefore(pagePost, footWrapEl) | |
| lastPostUp += direction | |
| } else if (direction < 0) { | |
| pageWrapEl.insertBefore(pagePost, headWrapEl.nextSibling) | |
| window.scrollBy(0, 120) | |
| lastPostDown += direction | |
| } | |
| } | |
| } | |
| function addContolElements() { | |
| injectCSS() | |
| footWrapEl = document.createElement('div') | |
| footWrapEl.className = 'tgme_foot_wrap' | |
| let foot = document.createElement('div') | |
| foot.className = 'tgme_foot' | |
| let next = document.createElement('a') | |
| next.href = '#' | |
| next.className = 'tgme_action_button_new' | |
| next.innerHTML = 'Show 10 Next Posts' | |
| next.style.display = 'block' | |
| next.onclick = function(event) { | |
| event.preventDefault() | |
| loadPosts(lastPostUp, showBy, 1) | |
| } | |
| let head = document.querySelector('.tgme_head') | |
| let brand = head.querySelector('.tgme_head_brand') | |
| let prev = document.createElement('a') | |
| prev.href = '#' | |
| prev.className = 'tgme_action_button_new' | |
| prev.innerHTML = 'Show 10 Previous Posts' | |
| prev.style.display = 'block' | |
| prev.onclick = function(event) { | |
| event.preventDefault() | |
| loadPosts(lastPostDown, showBy, -1) | |
| } | |
| foot.appendChild(next) | |
| footWrapEl.appendChild(foot) | |
| head.appendChild(prev) | |
| pageWrapEl.appendChild(footWrapEl) | |
| } | |
| addContolElements() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment