Easily navigate Lemmy with your keyboard
// ==UserScript== // @name lemmy-keyboard-navigation // @match https://*/* // @grant none // @version 2.1 // @author vmavromatis // @author [email protected] // @author InfinibyteF4 // @author aglidden // @license GPL3 // @icon https://raw.githubusercontent.com/vmavromatis/Lemmy-keyboard-navigation/main/icon.png?inline=true // @homepageURL https://github.com/vmavromatis/Lemmy-keyboard-navigation // @namespace https://github.com/vmavromatis/Lemmy-keyboard-navigation // @description Easily navigate Lemmy with your keyboard // @run-at document-end // ==/UserScript== /*global window,console,localStorage,sessionStorage,document,GM_addStyle,PRO_addStyle,addStyle,MutationObserver,location*/ //isLemmySite if (document.querySelectorAll('.lemmy-site').length >= 1) { // DEBUGGING (ignore me!) //localStorage.clear(); //sessionStorage.clear(); //settings page (this is from lemmyTools) const optionsKey = "lemmy-keyboard-navigation-Options"; function getSettingsFromLocalStorage() { try { return JSON.parse(localStorage.getItem(optionsKey) || "{}"); } catch (_) { return {}; } } function checkedIfTrue(val) { return val ? "checked" : ""; } function options(open) { const odiv = document.getElementById("lkOptions"); let userOptions = {}; if (open === "open") { odiv.style.display = "block"; } else if (open === "set") { //First run set defaults or pull from localstorage. userOptions = Object.assign({}, { pageOffset: 5, vimKeyNavigation: true, smoothScroll: false, scrollPosition: "middle", expandOption: "both", backgroundHex: "#373737", kb_expand: "KeyX", kb_comments: "KeyC", kb_openLink: "Enter", kb_parent: "KeyP", kb_upvote: "KeyA", kb_downvote: "KeyZ", kb_replyComm: "KeyR", kb_save: "KeyS", kb_context: "KeyQ", kb_smallerImg: "Minus", kb_largerImg: "Equal", kb_user: "KeyU", kb_edit: "KeyE", kb_top: "KeyT", m_dialog: "KeyG", m_first: "Digit1", m_second: "Digit2", m_third: "Digit3", m_fourth: "Digit4", m_fifth: "Digit5", m_frontpage: "KeyF", m_saved: "KeyS", m_userpage: "KeyU", m_inbox: "KeyI", m_options: "KeyO" }, getSettingsFromLocalStorage() ); localStorage.setItem(optionsKey, JSON.stringify(userOptions)); } else if (open === "save") { //save button odiv.style.display = "none"; //general userOptions.vimKeyNavigation = document.getElementById("option_vimKeyNavigation").checked; userOptions.smoothScroll = document.getElementById("option_smoothScroll").checked; let offset = parseFloat( document.getElementById("option_pageOffset").value ); if (isNaN(offset) || offset < 0 || offset > 100) { userOptions.pageOffset = 0; } else { userOptions.pageOffset = offset; } userOptions.scrollPosition = document.getElementById("option_scrollPosition").value; userOptions.expandOption = document.getElementById("option_expandOption").value; userOptions.backgroundHex = document.getElementById("option_backgroundHex").value; //keybinds userOptions.kb_expand = document.getElementById("option_kb_expand").value; userOptions.kb_comments = document.getElementById("option_kb_comments").value; userOptions.kb_openLink = document.getElementById("option_kb_openLink").value; userOptions.kb_parent = document.getElementById("option_kb_parent").value; userOptions.kb_upvote = document.getElementById("option_kb_upvote").value; userOptions.kb_downvote = document.getElementById("option_kb_downvote").value; userOptions.kb_replyComm = document.getElementById("option_kb_replyComm").value; userOptions.kb_save = document.getElementById("option_kb_save").value; userOptions.kb_context = document.getElementById("option_kb_context").value; userOptions.kb_smallerImg = document.getElementById("option_kb_smallerImg").value; userOptions.kb_largerImg = document.getElementById("option_kb_largerImg").value; userOptions.kb_user = document.getElementById("option_kb_user").value; userOptions.kb_edit = document.getElementById("option_kb_edit").value; userOptions.kb_top = document.getElementById("option_kb_top").value; //dialog keybinds userOptions.m_dialog = document.getElementById("option_m_dialog").value; userOptions.m_first = document.getElementById("option_m_first").value; userOptions.m_second = document.getElementById("option_m_second").value; userOptions.m_third = document.getElementById("option_m_third").value; userOptions.m_fourth = document.getElementById("option_m_fourth").value; userOptions.m_fifth = document.getElementById("option_m_fifth").value; userOptions.m_frontpage = document.getElementById("option_m_frontpage").value; userOptions.m_saved = document.getElementById("option_m_saved").value; userOptions.m_userpage = document.getElementById("option_m_userpage").value; userOptions.m_inbox = document.getElementById("option_m_inbox").value; userOptions.m_options = document.getElementById("option_m_options").value; localStorage.setItem(optionsKey, JSON.stringify(userOptions)); window.location.reload(); } userOptions = getSettingsFromLocalStorage(); return userOptions; } let settings = options("set"); let vimKeyNavigation = checkedIfTrue(settings.vimKeyNavigation); let smoothScroll = checkedIfTrue(settings.smoothScroll); let pageOffset = window.innerHeight * settings.pageOffset / 100; let scrollPosition = settings.scrollPosition; let backgroundHex = settings.backgroundHex; let expandOption = settings.expandOption; // Set selected entry colors const backgroundColor = `${backgroundHex}`; const textColor = 'white'; // Set navigation keys with keycodes here: https://www.toptal.com/developers/keycode let nextKey = 'ArrowDown'; let prevKey = 'ArrowUp'; let nextPageKey = 'ArrowRight'; let prevPageKey = 'ArrowLeft'; if (vimKeyNavigation) { nextKey = 'KeyJ'; prevKey = 'KeyK'; nextPageKey = 'KeyL'; prevPageKey = 'KeyH'; } const expandKey = `${settings.kb_expand}`; const openCommentsKey = `${settings.kb_comments}`; const openLinkAndCollapseKey = `${settings.kb_openLink}`; const parentCommentKey = `${settings.kb_parent}`; const upvoteKey = `${settings.kb_upvote}`; const downvoteKey = `${settings.kb_downvote}`; const replyCommKey = `${settings.kb_replyComm}`; const saveKey = `${settings.kb_save}`; const contextKey = `${settings.kb_context}`; const smallerImgKey = `${settings.kb_smallerImg}`; const biggerImgKey = `${settings.kb_largerImg}`; const userKey = `${settings.kb_user}`; const editKey = `${settings.kb_edit}`; const topKey = `${settings.kb_top}`; const linkOneKey = 'Digit1'; const linkTwoKey = 'Digit2'; const linkThreeKey = 'Digit3'; const linkFourKey = 'Digit4'; const linkFiveKey = 'Digit5'; const linkSixKey = 'Digit6'; const linkSevenKey = 'Digit7'; const linkEightKey = 'Digit8'; const linkNineKey = 'Digit9'; const linkZeroKey = 'Digit0'; const modalPopupKey = `${settings.m_dialog}`; const modalSortOneKey = `${settings.m_first}`; const modalSortTwoKey = `${settings.m_second}`; const modalSortThreeKey = `${settings.m_third}`; const modalSortFourKey = `${settings.m_fourth}`; const modalSortFiveKey = `${settings.m_fifth}`; const modalFrontpageKey = `${settings.m_frontpage}`; const modalSavedKey = `${settings.m_saved}`; const modalProfileKey = `${settings.m_userpage}`; const modalInboxKey = `${settings.m_inbox}`; const modalOptionsKey = `${settings.m_options}`; const escapeKey = 'Escape'; let modalMode = 0; console.log(`modalMode: ${modalMode}`); // Stop arrows from moving the page if not using Vim navigation window.addEventListener("keydown", function(e) { if (["ArrowUp", "ArrowDown"].indexOf(e.code) > -1 && !vimKeyNavigation) { e.preventDefault(); } }, false); // Remove scroll animations document.documentElement.style = "scroll-behavior: auto"; // Set CSS for selected entry const css = ` .selected { background-color: ${backgroundColor} !important; color: ${textColor}; }`; // dialog box let myDialog = document.createElement("dialog"); document.body.appendChild(myDialog); let para = document.createElement("p"); para.innerHTML = ` <h3><b>Sort by</b></h3> <p>${modalSortOneKey} = N/A</br> ${modalSortTwoKey} = N/A</br> ${modalSortThreeKey} = N/A</br> ${modalSortFourKey} = N/A</br> ${modalSortFiveKey} = N/A</p> <h3><b>Go To Page</b></h3> <p>${modalFrontpageKey} = Frontpage</br> ${modalSavedKey} = Saved</br> ${modalProfileKey} = User Profile Page</br> ${modalInboxKey} = Inbox</br></p> <h6>${modalOptionsKey} = Options Page</br></br></h6> `; myDialog.appendChild(para); let button = document.createElement("button"); button.classList.add('CLOSEBUTTON1'); button.innerHTML = `Press ESC or ${modalPopupKey} to Close`; myDialog.appendChild(button); //draw settings page const odiv = document.createElement("div"); odiv.setAttribute("id", "lkOptions"); odiv.classList.add("lkoptions", "border-secondary", "card"); odiv.innerHTML = ` <h4>Lemmy-keyboard-navigation Options</h4> </hr> <div class='table-responsive'> <table class='table'> <thead class='pointer'> <td><b>Save and close settings</b></td> <td><button id='LKsaveoptionsTop'>Save and Close</button></td> </tr> <tr> <th><h3><b>General</b></h3></th><td><td/> </thead> </tr> <tbody> <tr> <td><b>Use Vim key navigation</b><br/>Also known as HJKL navigation.<br/>Uncheck to use arrow keys instead.</td> <td><input type='checkbox' id='option_vimKeyNavigation' ${vimKeyNavigation} /></td> </tr> <tr> <td><b>Smooth scrolling</b><br/>Scroll smoothly to the current selection.</td> <td><input type='checkbox' id='option_smoothScroll' ${smoothScroll} /></td> </tr> <tr> <td><b>Page Offset</b><br/>Percent of page to offset selected entry when scrolling.<br/>0-20% recommended<br/>Default: 5</td> <td><textarea id='option_pageOffset'>${settings.pageOffset}</textarea>%</td> </tr> <tr> <td><b>Scrolling position</b><br/>middle: only scroll the page if selection is near the bottom.<br/>top: always scroll to keep the selection near the top.</td> <td><select id="option_scrollPosition"> <option value='${settings.scrollPosition}'>${settings.scrollPosition}</option> <option value='middle'>middle</option> <option value='top'>top</option> </select></td> </tr> <tr> <td><b>Expand All Posts</b><br/>Pressing Shift + X will expand all posts.<br/>both: expand both text boxes and images.<br/>images: only expand images.<br/>text: only expand text boxes</td> <td><select id="option_expandOption"> <option value='${settings.expandOption}'>${settings.expandOption}</option> <option value='both'>both</option> <option value='text'>text</option> <option value='images'>images</option> </select></td> </tr> <tr> <td><b>Selected Hex Code</b><br/>The background color of selected posts/comments.<br/>Default: #373737</td> <td><textarea id='option_backgroundHex'>${settings.backgroundHex}</textarea></td> </tr> <tr> <td><h3><b>Rebind Keys</b></h3>Set keybinds with keycodes here:<br/><a href='https://www.toptal.com/developers/keycode'>https://www.toptal.com/developers/keycode</a></td><td><td/> </tr> <tr> <tr> <td><b>Expand/Collapse</b><br/>Expand/collapse both post and comment content.<br/>Default: KeyX</td> <td><textarea id='option_kb_expand'>${settings.kb_expand}</textarea></td> </tr> <tr> <td><b>Open Comments</b><br/>Go to the comments of a post.<br/>Default: KeyC</td> <td><textarea id='option_kb_comments'>${settings.kb_comments}</textarea></td> </tr> <tr> <td><b>Open Links</b><br/>Open Links on a post.<br/>(can also be used to collapse comments!)<br/>Default: Enter</td> <td><textarea id='option_kb_openLink'>${settings.kb_openLink}</textarea></td> </tr> <tr> <td><b>Go to Parent Comment</b><br/>Goes one level up the comment chain.<br/>Default: KeyP</td> <td><textarea id='option_kb_parent'>${settings.kb_parent}</textarea></td> </tr> <tr> <td><b>Upvote</b><br/>:\)<br/>Default: KeyA</td> <td><textarea id='option_kb_upvote'>${settings.kb_upvote}</textarea></td> </tr> <tr> <td><b>Downvote</b><br/>:\(<br/>Default: KeyZ</td> <td><textarea id='option_kb_downvote'>${settings.kb_downvote}</textarea></td> </tr> <tr> <td><b>Reply/Go to community</b><br/>Posts: goes to the post's community<br/>Comments: replies to the selected comment<br/>Default: KeyR</td> <td><textarea id='option_kb_replyComm'>${settings.kb_replyComm}</textarea></td> </tr> <tr> <td><b>Save post/comment</b><br/>Saves the selected post/comment.<br/>Default: KeyS</td> <td><textarea id='option_kb_save'>${settings.kb_save}</textarea></td> </tr> <tr> <td><b>Get context of comment</b><br/>Goes to the context of the selected comment.<br/>Default: KeyQ</td> <td><textarea id='option_kb_context'>${settings.kb_context}</textarea></td> </tr> <tr> <td><b>Shrink expanded image</b><br/>Make an expanded image smaller.<br/>Default: Minus</td> <td><textarea id='option_kb_smallerImg'>${settings.kb_smallerImg}</textarea></td> </tr> <tr> <td><b>Grow expanded image</b><br/>Make an expanded image larger.<br/>Default: Equal</td> <td><textarea id='option_kb_largerImg'>${settings.kb_largerImg}</textarea></td> </tr> <tr> <td><b>Go to poster's profile</b><br/>Go to the profile of whoever posted the selected post/comment.<br/>Default: KeyU</td> <td><textarea id='option_kb_user'>${settings.kb_user}</textarea></td> </tr> <tr> <td><b>Edit the selected post/comment</b><br/>It only works on your own posts!<br/>Default: KeyE</td> <td><textarea id='option_kb_edit'>${settings.kb_edit}</textarea></td> </tr> <tr> <td><b>Scroll to top</b><br/>Scroll to the top of the page.<br/>Default: KeyT</td> <td><textarea id='option_kb_top'>${settings.kb_top}</textarea></td> </tr> <tr> <td><h3><b>Rebind Dialog Keys</b></h3></td><td><td/> </tr> <tr> <td><b>Open/Close Dialog</b><br/>Default: KeyG</td> <td><textarea id='option_m_dialog'>${settings.m_dialog}</textarea></td> </tr> <tr> <tr> <td><h4><b>Sort buttons</b></h4>For example: If you were to press G then 3 on the front page,<br/>it would sort by subscribed, but doing the same in a<br/>comment section would sort by new. The dialog<br/>text will change with what sort buttons are avaliable!</td><td><td/> </tr> <td><b>First Sort Button</b><br/>Default: Digit1</td> <td><textarea id='option_m_first'>${settings.m_first}</textarea></td> </tr> <tr> <td><b>Second Sort Button</b><br/>Default: Digit2</td> <td><textarea id='option_m_second'>${settings.m_second}</textarea></td> </tr> <tr> <td><b>Third Sort Button</b><br/>Default: Digit3</td> <td><textarea id='option_m_third'>${settings.m_third}</textarea></td> </tr> <tr> <td><b>Fourth Sort Button</b><br/>Default: Digit4</td> <td><textarea id='option_m_fourth'>${settings.m_fourth}</textarea></td> </tr> <tr> <td><b>Fifth Sort Button</b><br/>Default: Digit5</td> <td><textarea id='option_m_fifth'>${settings.m_fifth}</textarea></td> </tr> <tr> <td><h4><b>Go to page</b></h4></td><td><td/> </tr> <tr> <td><b>Go to Frontpage</b><br/>Default: KeyF</td> <td><textarea id='option_m_frontpage'>${settings.m_frontpage}</textarea></td> </tr> <tr> <td><b>Go to Saved posts/comments</b><br/>Default: KeyS</td> <td><textarea id='option_m_saved'>${settings.m_saved}</textarea></td> </tr> <tr> <td><b>Go to Current User's Profile</b><br/>Default: KeyU</td> <td><textarea id='option_m_userpage'>${settings.m_userpage}</textarea></td> </tr> <tr> <td><b>Go to Inbox</b><br/>Default: KeyI</td> <td><textarea id='option_m_inbox'>${settings.m_inbox}</textarea></td> </tr> <tr> <td><b>Open options page</b><br/>Default: KeyO</td> <td><textarea id='option_m_options'>${settings.m_options}</textarea></td> </tr> <tr> <td><b>Save and close settings</b></td> <td><button id='LKsaveoptions'>Save and Close</button></td> </tr> <tr> <td><b style='color:red;'>WARNING:<br/>The button below will reset all your settings to default.<br/>This cannot be undone.</b></td><td></td> </tr> <tr> <td><button id='LKresetoptions'>Reset All Settings</button></td><td></td> </tr> </tbody> </table> </div> <hr /> <p>lemmy-keyboard-navigation links:</p> <a href='https://github.com/vmavromatis/Lemmy-keyboard-navigation'>Github</a><br/><a href='https://greasyfork.org/en/scripts/470498-lemmy-keyboard-navigation'>GreasyFork</a><br/><a href='https://chrome.google.com/webstore/detail/lemmy-keyboard-navigator/lamoeoaekeeklbcekclbceaeafjkdhbi'>Chrome Extension</a><br/></p> <p>This settings page was taken from the <a href='https://github.com/howdy-tsc/LemmyTools'>LemmyTools</a> Userscript.</p> `; let styleString = ` .lkoptions { position: fixed; min-width: auto; min-height: auto; width: auto; height: 100%; top: 0; display: none; left: 0; overflow: scroll; z-index: 1000; padding: 0.5%; margin-top:35px; } `; document.head.appendChild(document.createElement("style")).innerHTML = styleString; document.body.appendChild(odiv); //options document.getElementById("LKsaveoptions").addEventListener("click", (e) => { e.preventDefault(); options("save"); }); document.getElementById("LKsaveoptionsTop").addEventListener("click", (e) => { e.preventDefault(); options("save"); }); document.getElementById("LKresetoptions").addEventListener("click", (e) => { e.preventDefault(); localStorage.clear(); window.location.reload(); }); // Global variables let currentEntry; let commentBlock; let entries = []; let previousUrl = ""; let expand = false; if (typeof GM_addStyle !== "undefined") { GM_addStyle(css); } else if (typeof PRO_addStyle !== "undefined") { PRO_addStyle(css); } else if (typeof addStyle !== "undefined") { addStyle(css); } else { let node = document.createElement("style"); node.type = "text/css"; node.appendChild(document.createTextNode(css)); let heads = document.getElementsByTagName("head"); if (heads.length > 0) { heads[0].appendChild(node); } else { // no head yet, stick it whereever document.documentElement.appendChild(node); } } const selectedClass = "selected"; const targetNode = document.documentElement; const config = { childList: true, subtree: true }; const observer = new MutationObserver(() => { entries = document.querySelectorAll(".post-listing, .comment-node"); if (entries.length > 0) { if (location.href !== previousUrl) { previousUrl = location.href; currentEntry = null; } init(); } }); observer.observe(targetNode, config); function init() { // If jumping to comments if (window.location.search.includes("scrollToComments=true") && entries.length > 1 && (!currentEntry || Array.from(entries).indexOf(currentEntry) < 0) ) { selectEntry(entries[1], true); } // If jumping to comment from anchor link else if (window.location.pathname.includes("/comment/") && (!currentEntry || Array.from(entries).indexOf(currentEntry) < 0) ) { const commentId = window.location.pathname.replace("/comment/", ""); const anchoredEntry = document.getElementById("comment-" + commentId); if (anchoredEntry) { selectEntry(anchoredEntry, true); } } // If no entries yet selected, default to last selected else if (!currentEntry || Array.from(entries).indexOf(currentEntry) < 0) { if (sessionStorage.getItem('currentselection') === null) { selectEntry(entries[0]); } else { sessionCurrentEntry("restore"); } } Array.from(entries).forEach(entry => { entry.removeEventListener("click", clickEntry, true); entry.addEventListener('click', clickEntry, true); }); document.removeEventListener("keydown", handleKeyPress, true); document.addEventListener("keydown", handleKeyPress, true); } function handleKeyPress(event) { if (["TEXTAREA", "INPUT"].indexOf(event.target.tagName) > -1 || event.metaKey) { return; } switch (modalMode) { case modalMode = 0: switch (event.code) { case nextKey: case prevKey: previousKey(event); break; case upvoteKey: upVote(); break; case downvoteKey: downVote(); break; case expandKey: if (event.shiftKey) { expandAll(); } else { toggleExpand(); expand = isExpanded() ? true : false; } break; case smallerImgKey: imgResize("smaller"); break; case biggerImgKey: imgResize("larger"); break; case saveKey: save(); break; case editKey: edit(); break; case openCommentsKey: comments(event); break; case modalPopupKey: dialogUpdate(); goToDialog("open"); break; case contextKey: getContext(event); break; case replyCommKey: // allow refresh with Ctrl + R if (!event.ctrlKey) { if (window.location.pathname.includes("/post/")) { reply(event); } else { community(event); } } break; case userKey: visitUser(event); break; case openLinkAndCollapseKey: if (window.location.pathname.includes("/post/")) { toggleExpand(); } else { const linkElement = currentEntry.querySelector(".col.flex-grow-1>p>a"); if (linkElement) { if (event.shiftKey) { window.open(linkElement.href); } else { linkElement.click(); } } else { comments(event); } } break; case parentCommentKey: { let targetBlock; if (currentEntry.classList.contains("ms-1")) { targetBlock = getPrevEntry(currentEntry); } else if (currentEntry.parentElement.parentElement.parentElement.nodeName === "LI") { targetBlock = currentEntry.parentElement.parentElement.parentElement.getElementsByTagName("article")[0]; } if (targetBlock) { if (expand) { collapseEntry(); } selectEntry(targetBlock, true); if (expand) { expandEntry(); } } } break; case topKey: goToTop(); break; case linkOneKey: clickLink(1); break; case linkTwoKey: clickLink(2); break; case linkThreeKey: clickLink(3); break; case linkFourKey: clickLink(4); break; case linkFiveKey: clickLink(5); break; case linkSixKey: clickLink(6); break; case linkSevenKey: clickLink(7); break; case linkEightKey: clickLink(8); break; case linkNineKey: clickLink(9); break; case linkZeroKey: clickLink(0); break; case nextPageKey: case prevPageKey: { const pageButtons = Array.from(document.querySelectorAll(".paginator>button")); if (pageButtons && (document.getElementsByClassName('paginator').length > 0)) { const buttonText = event.code === nextPageKey ? "Next" : "Prev"; pageButtons.find(btn => btn.innerHTML === buttonText).click(); } // Jump next block of comments if (event.code === nextPageKey) { commentBlock = getNextEntrySameLevel(currentEntry); } // Jump previous block of comments if (event.code === prevPageKey) { commentBlock = getPrevEntrySameLevel(currentEntry); } if (commentBlock) { if (expand) { collapseEntry(); } selectEntry(commentBlock, true); if (expand) { expandEntry(); } } } sessionStorage.setItem('currentselection', 0); //reset the selection back to the first post when switching pages } break; case modalMode = 1: switch (event.code) { case escapeKey: modalMode = 0; console.log(`modalMode: ${modalMode}`); break; case modalPopupKey: goToDialog("close"); break; case modalSavedKey: if (window.location.pathname.includes("/u/")) { let savedelement = document.getElementsByClassName("btn btn-outline-secondary pointer")[3]; if (savedelement) { savedelement.click(); goToDialog("close"); } } else { instanceAndUser("saved"); } break; case modalFrontpageKey: frontpage(); break; case modalProfileKey: let profileelement = document.getElementsByClassName("dropdown-item px-2")[0]; if (profileelement) { profileelement.click(); goToDialog("close"); } else { instanceAndUser("profile"); } break; case modalInboxKey: let notifelement = document.getElementsByClassName("nav-link d-inline-flex align-items-center d-md-inline-block")[2]; if (notifelement) { notifelement.click(); goToDialog("close"); } else { window.location.replace(window.location.origin + "/login"); } break; case modalSortOneKey: let firstbutton = document.getElementsByClassName("btn btn-outline-secondary")[0]; sessionStorage.setItem('currentselection', 0); //reset the selection to the first post when switching filters firstbutton.click(); goToDialog("close"); break; case modalSortTwoKey: let secondbutton = document.getElementsByClassName("btn btn-outline-secondary")[1]; sessionStorage.setItem('currentselection', 0); secondbutton.click(); goToDialog("close"); break; case modalSortThreeKey: let thirdbutton = document.getElementsByClassName("btn btn-outline-secondary")[2]; sessionStorage.setItem('currentselection', 0); thirdbutton.click(); goToDialog("close"); break; case modalSortFourKey: let fourthbutton = document.getElementsByClassName("btn btn-outline-secondary")[3]; sessionStorage.setItem('currentselection', 0); fourthbutton.click(); goToDialog("close"); break; case modalSortFiveKey: let fifthbutton = document.getElementsByClassName("btn btn-outline-secondary")[4]; sessionStorage.setItem('currentselection', 0); fifthbutton.click(); goToDialog("close"); break; case modalOptionsKey: options("open"); goToDialog("close"); break; } } } function getNextEntry(e) { const currentEntryIndex = Array.from(entries).indexOf(e); if (currentEntryIndex + 1 >= entries.length) { return e; } return entries[currentEntryIndex + 1]; } function getPrevEntry(e) { const currentEntryIndex = Array.from(entries).indexOf(e); if (currentEntryIndex - 1 < 0) { return e; } return entries[currentEntryIndex - 1]; } function getNextEntrySameLevel(e) { const nextSibling = e.parentElement.nextElementSibling; if (!nextSibling || nextSibling.getElementsByTagName("article").length < 1) { return getNextEntry(e); } return nextSibling.getElementsByTagName("article")[0]; } function getPrevEntrySameLevel(e) { const prevSibling = e.parentElement.previousElementSibling; if (!prevSibling || prevSibling.getElementsByTagName("article").length < 1) { return getPrevEntry(e); } return prevSibling.getElementsByTagName("article")[0]; } function dialogUpdate() { para.remove(); para = document.createElement("p"); para.innerHTML = ` <h3><b>Sort by</b></h3> <p>${modalSortOneKey} = ${dialogLocation(1)}</br> ${modalSortTwoKey} = ${dialogLocation(2)}</br> ${modalSortThreeKey} = ${dialogLocation(3)}</br> ${modalSortFourKey} = ${dialogLocation(4)}</br> ${modalSortFiveKey} = ${dialogLocation(5)}</p> <h3><b>Go To Page</b></h3> <p>${modalFrontpageKey} = Frontpage</br> ${modalSavedKey} = Saved</br> ${modalProfileKey} = User Profile Page</br> ${modalInboxKey} = Inbox</br></p> <h6>${modalOptionsKey} = Options Page</br></br></h6> `; myDialog.appendChild(para); myDialog.appendChild(button); } function dialogLocation(n) { var sort = document.getElementsByClassName("btn btn-outline-secondary"); if (n === 1 && 1 <= sort.length) { return sort[0].innerText; } if (n === 2 && 2 <= sort.length) { return sort[1].innerText; } if (n === 3 && 3 <= sort.length) { return sort[2].innerText; } if (n === 4 && 4 <= sort.length) { return sort[3].innerText; } if (n === 5 && 5 <= sort.length) { return sort[4].innerText; } return "N/A"; } function clickEntry(event) { const e = event.currentTarget; const target = event.target; // Deselect if already selected, also ignore if clicking on any link/button if (e === currentEntry && e.classList.contains(selectedClass) && !( target.tagName.toLowerCase() === "button" || target.tagName.toLowerCase() === "a" || target.parentElement.tagName.toLowerCase() === "button" || target.parentElement.tagName.toLowerCase() === "a" || target.parentElement.parentElement.tagName.toLowerCase() === "button" || target.parentElement.parentElement.tagName.toLowerCase() === "a" ) ) { e.classList.remove(selectedClass); } else { selectEntry(e); } } function selectEntry(e, scrollIntoView = false) { if (currentEntry) { currentEntry.classList.remove(selectedClass); let linkNumber = currentEntry.querySelectorAll(".linkNumber"); if (linkNumber) { for (const link of linkNumber) { link.remove(); } } } currentEntry = e; currentEntry.classList.add(selectedClass); sessionCurrentEntry("save"); let links = currentEntry.getElementsByClassName("md-div")[0]; if (links) { let alink = links.querySelectorAll('a'); if (alink.length > 0) { alink.forEach(function(value, i) { let linkNumber = document.createElement("span"); linkNumber.classList.add("linkNumber"); linkNumber.style.fontSize = "9px"; linkNumber.style.lineHeight = 0; linkNumber.style.verticalAlign = "super"; linkNumber.setAttribute("data-text", `[${i+1}]`); linkNumber.innerText = `[${i+1}]`; linkNumber.title = `Press ${i+1} to open link`; if (i <= 9) { value.appendChild(linkNumber); } }); } } if (scrollIntoView) { scrollIntoViewWithOffset(e, pageOffset); } } function sessionCurrentEntry(n) { const sessionEntry = sessionStorage.getItem('currentselection'); const currentEntryIndex = Array.from(entries).indexOf(currentEntry); if (n === "save") { if (document.querySelector(".home")) { sessionStorage.setItem('currentselection', currentEntryIndex); } } else if (n === "restore") { selectEntry(entries[sessionEntry]); console.log(`Set to entry ${sessionEntry}`); } } function clickLink(n) { let links = currentEntry.getElementsByClassName("md-div")[0]; let alink = links.querySelectorAll('a'); if (n === 1) { window.open( alink[0].href ); } else if (n === 2) { window.open( alink[1].href ); } else if (n === 3) { window.open( alink[2].href ); } else if (n === 4) { window.open( alink[3].href ); } else if (n === 5) { window.open( alink[4].href ); } else if (n === 6) { window.open( alink[5].href ); } else if (n === 7) { window.open( alink[6].href ); } else if (n === 8) { window.open( alink[7].href ); } else if (n === 9) { window.open( alink[8].href ); } else if (n === 0) { window.open( alink[9].href ); } } function isExpanded() { if ( currentEntry.querySelector("a.d-inline-block:not(.thumbnail)") || currentEntry.querySelector("#postContent") || currentEntry.querySelector(".card-body") ) { return true; } return false; } function previousKey(event) { let selectedEntry; // Next button if (event.code === nextKey) { if (event.shiftKey && vimKeyNavigation) { selectedEntry = getNextEntrySameLevel(currentEntry); } else { selectedEntry = getNextEntry(currentEntry); } } // Previous button if (event.code === prevKey) { if (event.shiftKey && vimKeyNavigation) { selectedEntry = getPrevEntrySameLevel(currentEntry); } else { selectedEntry = getPrevEntry(currentEntry); } } if (selectedEntry) { if (expand) { collapseEntry(); } selectEntry(selectedEntry, true); if (expand) { expandEntry(); } } } function upVote() { identifyButtons(); if (upvoteButton) { upvoteButton.click(); } } function downVote() { identifyButtons(); if (downvoteButton) { downvoteButton.click(); } } function goToDialog(n) { const closeButton = document.getElementsByClassName("CLOSEBUTTON1")[0]; closeButton.addEventListener("click", () => { myDialog.close(); modalMode = 0; console.log(`modalMode: ${modalMode}`); }); if (n === "open") { myDialog.showModal(); modalMode = 1; console.log(`modalMode: ${modalMode}`); } if (n === "close") { myDialog.close(); modalMode = 0; console.log(`modalMode: ${modalMode}`); } } function instanceAndUser(n) { let currentInstance = window.location.origin; let username = document.getElementsByClassName("btn dropdown-toggle")[0].textContent; if (n === "profile") { if (username) { let userlink = currentInstance + "/u/" + username; window.location.replace(userlink); } else { window.location.replace(currentInstance + "/login"); } } if (n === "saved") { if (username) { let savedlink = currentInstance + "/u/" + username + "?page=1&sort=New&view=Saved"; window.location.replace(savedlink); } else { window.location.replace(currentInstance + "/login"); } } } var selectionType; function checkSelection() { let postSelection = document.getElementsByClassName("post-listing mt-2 selected")[0]; let username = '@' + document.getElementsByClassName("btn dropdown-toggle")[0].textContent; let posterusername = currentEntry.getElementsByClassName("person-listing d-inline-flex align-items-baseline text-info")[0].innerText; if (postSelection) { selectionType = "post"; contextCheck = currentEntry.getElementsByClassName("btn btn-link btn-animate")[11]; // check for direct link button (rainbow star) if (contextCheck) { selectionType = `${selectionType}-fedi`; } if (window.location.pathname.includes("/post/")) { contextCheck = currentEntry.getElementsByClassName("btn btn-link btn-animate")[13]; // check for direct link button if (contextCheck) { selectionType = "post-page-fedi" } else { selectionType = "post-page" } } } else { selectionType = "comment"; let contextButton = currentEntry.getElementsByClassName("btn btn-link btn-animate text-muted btn-sm")[0].href; let contextButton2 = currentEntry.getElementsByClassName("btn btn-link btn-animate")[2].href; if (contextButton === contextButton2) { selectionType = `${selectionType}-context`; } if (window.location.pathname.includes("/inbox")) { selectionType = "comment-inbox"; } } if (username === posterusername) { selectionType = `my-${selectionType}`; } console.log(`current selection: ${selectionType}`); } var upvoteButton; var downvoteButton; var replyButton; var moreButton; var saveButton; var editButton; var commentButton; function identifyButtons() { checkSelection(); let getButton = currentEntry.getElementsByClassName("btn btn-link btn-animate"); if (selectionType === "post") { // posts on link pages upvoteButton = getButton[0]; downvoteButton = getButton[1]; saveButton = getButton[2]; commentButton = currentEntry.getElementsByClassName("btn btn-link btn-sm text-muted ps-0")[1]; if (selectionType === "my-post") { // add edit button if the post is yours editButton = currentEntry.getElementsByClassName("btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item")[2]; } } else if (selectionType === "post-fedi" || selectionType === "post-page-fedi") { // federated posts on link pages and on the page upvoteButton = getButton[1]; downvoteButton = getButton[2]; saveButton = getButton[3]; commentButton = currentEntry.getElementsByClassName("btn btn-link btn-sm text-muted ps-0")[1]; } else if (selectionType === "post-page" || selectionType === "my-post-page") { // on the page of the post upvoteButton = getButton[0]; downvoteButton = getButton[1]; saveButton = getButton[2]; commentButton = currentEntry.getElementsByClassName("btn btn-link btn-sm text-muted ps-0")[1]; if (selectionType === "my-post-page") { // add edit button if the post is yours editButton = currentEntry.getElementsByClassName("btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item")[2]; } // X - X numbers is the getButton array size depending on if moreButton was clicked or not } else if (selectionType === "comment" || selectionType === "my-comment") { // 6 - 10 comments upvoteButton = getButton[2]; downvoteButton = getButton[3]; replyButton = getButton[4]; moreButton = getButton[5]; if (selectionType === "my-comment") { // 6 - 9 add edit button if the comment is yours saveButton = getButton[5]; editButton = getButton[7]; } else { saveButton = getButton[8]; } } else if (selectionType === "comment-context" || selectionType === "my-comment-context") { // 8 - 12 comments with context buttons upvoteButton = getButton[4]; downvoteButton = getButton[5]; replyButton = getButton[6]; moreButton = getButton[7]; if (selectionType === "my-comment-context") { // 8 - 11 add edit button if the comment is yours saveButton = getButton[7]; editButton = getButton[9]; } else { saveButton = getButton[10]; } } else if (selectionType === "comment-inbox") { // 9 - 13 comments in your inbox upvoteButton = getButton[5]; downvoteButton = getButton[6]; replyButton = getButton[7]; moreButton = getButton[8]; saveButton = getButton[11]; } } function frontpage() { let homeElement = document.getElementsByClassName("d-flex align-items-center navbar-brand me-md-3 active")[0]; if (homeElement) { homeElement.click(); goToDialog("close"); } else { window.location.replace(window.location.origin); } } function reply(event) { identifyButtons(); if (replyButton) { event.preventDefault(); replyButton.click(); } } function community(event) { if (event.shiftKey) { window.open( currentEntry.querySelector("a.community-link").href ); } else { currentEntry.querySelector("a.community-link").click(); } } function visitUser(event) { if (event.shiftKey) { window.open( currentEntry.getElementsByClassName("person-listing d-inline-flex align-items-baseline text-info")[0].href ); } else { currentEntry.getElementsByClassName("person-listing d-inline-flex align-items-baseline text-info")[0].click(); } } function comments(event) { identifyButtons(); if (event.shiftKey) { window.open( commentButton.href ); } else { commentButton.click(); } } function getContext(event) { if (event.shiftKey) { window.open( currentEntry.getElementsByClassName("btn btn-link btn-animate text-muted btn-sm")[0].href ); } else { currentEntry.getElementsByClassName("btn btn-link btn-animate text-muted btn-sm")[0].click(); } } let maxSize = 0; function imgResize(n) { let expandedImg = currentEntry.getElementsByClassName("overflow-hidden pictrs-image img-fluid img-expanded slight-radius")[0]; let expandedHeight = expandedImg.height; let expandedWidth = expandedImg.width; let expandedHeightbefore = expandedHeight; let expandedWidthbefore = expandedWidth; if (n === "smaller") { expandedHeight = expandedHeight / 1.15; expandedWidth = expandedWidth / 1.15; expandedImg.style.height = expandedHeight + 'px'; expandedImg.style.width = expandedWidth + 'px'; maxSize = 0; console.log(`maxSize: ${maxSize}`); } if (n === "larger") { expandedHeight = expandedHeight * 1.15; expandedWidth = expandedWidth * 1.15; expandedImg.style.width = expandedWidth + 'px'; expandedImg.style.height = expandedHeight + 'px'; if (maxSize === 1) { expandedImg.style.width = expandedWidthbefore + 'px'; expandedImg.style.height = expandedHeightbefore + 'px'; } if (expandedImg.width !== Math.round(expandedWidth) || expandedImg.height !== Math.round(expandedHeight)) { maxSize = 1; console.log(`maxSize: ${maxSize}`); } } } function save() { identifyButtons(); if (saveButton) { saveButton.click(); } else { moreButton.click(); } } function edit() { identifyButtons(); if (editButton) { editButton.click(); } else { moreButton.click(); } } function toggleExpand() { const expandButton = currentEntry.getElementsByClassName("thumbnail rounded overflow-hidden d-inline-block bg-transparent")[0]; const textExpandButton = currentEntry.querySelector(".post-title>button"); const commentExpandButton = currentEntry.querySelector(".ms-2>div>button"); const moreExpandButton = currentEntry.querySelector(".ms-1>button"); if (expandButton) { expandButton.click(); // Scroll into view if picture/text preview cut off const imgContainer = currentEntry.querySelector("a.d-inline-block"); if (imgContainer) { // Check container positions once image is loaded imgContainer.querySelector("img").addEventListener("load", function() { scrollIntoViewWithOffset(imgContainer, pageOffset); }, true); currentEntry.getElementsByClassName("offset-sm-3 my-2 d-none d-sm-block")[0].className = "my-2 d-none d-sm-block"; } } if (textExpandButton) { textExpandButton.click(); const textContainers = [currentEntry.querySelector("#postContent"), currentEntry.querySelector(".card-body")]; textContainers.forEach(container => { if (container) { scrollIntoViewWithOffset(container, pageOffset); } }); } if (commentExpandButton) { commentExpandButton.click(); } if (moreExpandButton) { moreExpandButton.click(); selectEntry(getPrevEntry(currentEntry), true); } } function expandEntry() { if (!isExpanded()) { toggleExpand(); } } function collapseEntry() { if (isExpanded()) { toggleExpand(); } } function expandAll() { let imageExpand = document.getElementsByClassName("thumbnail rounded overflow-hidden d-inline-block bg-transparent"); let textExpand = document.getElementsByClassName("btn btn-sm btn-link link-dark link-opacity-75 link-opacity-100-hover align-baseline"); goToTop(); console.log(`Expanding`); if (expandOption === "text" || expandOption === "both") { for (let i = 1; i < textExpand.length; i += 2) { try { textExpand[i].click(); } catch {} } } if (expandOption === "images" || expandOption === "both") { for (let i = 0; i < imageExpand.length; i++) { try { imageExpand[i].click(); } catch {} } } goToTop(); } function goToTop () { window.scrollTo(0, 0); sessionStorage.setItem('currentselection', 0); sessionCurrentEntry("restore"); } function scrollIntoViewWithOffset(e, offset) { const y = e.getBoundingClientRect().top + window.scrollY - offset; if (scrollPosition === "middle") { if (e.getBoundingClientRect().top < 0 || e.getBoundingClientRect().bottom > window.innerHeight ) { scrollPage(y); } } else if (scrollPosition === "top") { scrollPage(y); } } function scrollPage(y) { if (smoothScroll) { window.scrollTo({ top: y, behavior: "smooth" }); } else { window.scrollTo({ top: y }); } } }
