-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3 from nemanjam/feature/new-reddit-design
Update to new design
- Loading branch information
Showing
43 changed files
with
1,224 additions
and
801 deletions.
There are no files selected for viewing
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
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
|
|
||
|
|
||
| const commentId = 't1_kznmxco'; | ||
|
|
||
| const commentSelector = 'shreddit-comment[thingid^="t1_"]'; | ||
|
|
||
| const getCommentSelectorById = (commentId) => `shreddit-comment[thingid^="${commentId}"]`; | ||
|
|
||
| const getTimestampSelectorById = (commentId) => { | ||
| const targetedCommentSelector = getCommentSelectorById(commentId); | ||
| // avoid nested comments | ||
| const timestampSelector = `${targetedCommentSelector} *:not(${commentSelector}) time:first-child[datetime]`; | ||
| return timestampSelector; | ||
| }; | ||
|
|
||
| const timestampSelector = getTimestampSelectorById(commentId); | ||
|
|
||
| document.querySelectorAll(timestampSelector); | ||
|
|
||
| document.querySelectorAll( | ||
| 'shreddit-comment[thingid^="t1_kznmxco"] :not(shreddit-comment) time:first-child[datetime]' | ||
| ); | ||
|
|
||
| document.querySelectorAll( | ||
| 'shreddit-comment[thingid^="t1_kznmxco"] > div[slot="commentMeta"] time' | ||
| ); | ||
|
|
||
|
|
||
| document.querySelectorAll('shreddit-comment[thingid^="t1_kzklld1"]'); | ||
| document.querySelector( | ||
| 'shreddit-comment[thingid^="t1_kzklld1"] time:first-child[datetime]' | ||
| ); | ||
|
|
||
| const shadowHost = document.getElementById('shadow-host'); | ||
| const shadowRoot = shadowHost.getRootNode(); | ||
| const buttonInsideShadow = shadowRoot.querySelector('button'); | ||
| buttonInsideShadow.click(); | ||
|
|
||
|
|
||
| document.querySelector('shreddit-sort-dropdown').click() | ||
|
|
||
|
|
||
| document.querySelector('#comment-sort-button').click() | ||
|
|
||
|
|
||
| document.querySelectorAll('shreddit-sort-dropdown') | ||
|
|
||
|
|
||
|
|
||
| var shadowHost = document.querySelector('shreddit-sort-dropdown'); | ||
| var buttonInsideShadow = shadowHost.shadowRoot.querySelector('button[id="comment-sort-button"] > span > span'); | ||
| buttonInsideShadow.textContent | ||
|
|
||
| buttonInsideShadow.click(); | ||
|
|
||
|
|
||
| document.querySelector('button[id="comment-sort-button"]'); | ||
|
|
||
|
|
||
| document.querySelector('data[value="NEW"]').click() | ||
|
|
||
| document.querySelector('#main-content').click() | ||
|
|
||
| ------------- | ||
|
|
||
| var currentElement = document.querySelector('shreddit-comment[thingid^="t1_kz4bckd"]') | ||
| var contentElement = currentElement.querySelector('shreddit-comment[thingid^="t1_kz4bckd"] > div[slot="comment"]') | ||
| contentElement; | ||
|
|
||
|
|
||
|
|
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| break dom into multiple files | ||
| remove modal from events | ||
| parse exact time from time.datetime iso string | ||
| put config vars into single object | ||
| mark as read label in popup ui | ||
| review delay values | ||
| fix sort by new selector | ||
| wrapper for querySelector that returns Node or throws, not null | ||
| scroll ctrl + space broken | ||
| update readme | ||
| all exception should be handled in 1-2 chosen levels | ||
| everything should throw custom exception classes and log | ||
| db wrapper | ||
| mark thread as read button, immediately radio | ||
| add version label | ||
| nested comments, check that only comments content is in viewport | ||
|
|
||
| fix chrome manifest errors | ||
|
|
||
| // ovde na pocetku nove sesije oznacava prethodnu kao procitanu | ||
| const { threadId, updatedAt } = existingThread; | ||
| const updatedComments = await updateCommentsSessionCreatedAtForThread( | ||
| db, | ||
| threadId, | ||
| updatedAt | ||
| ); | ||
| comment.sessionCreatedAt = thread.updatedAt | ||
|
|
||
| // zapravo meni treba ovo, da oznacim comments mark as rad za current session, sa 2e12 | ||
| // a to je addComment() | ||
| const sessionCreatedAt = currentSessionCreatedAt; | ||
| await addComment(db, { threadId, commentId, sessionCreatedAt }); |
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import 'emoji-log'; | ||
| import browser from 'webextension-polyfill'; | ||
|
|
||
| // for Chrome manifest v3 | ||
| browser.runtime.onInstalled.addListener((): void => { | ||
| console.emoji('🦄', 'extension installed'); | ||
| }); |
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
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| /*----------------------------------- My constants ---------------------------------*/ | ||
|
|
||
| /*---------- url and scroll waiting ---------*/ | ||
|
|
||
| /** Must reduce number of triggers on scroll */ | ||
| export const scrollDebounceWait = 1000; | ||
|
|
||
| /** Must wait for routing (change page), and load content */ | ||
| export const urlChangeDebounceWait = 2000; | ||
|
|
||
| /*----------- sort by new dropdown ----------*/ | ||
|
|
||
| /** Wait for new comments to reload. */ | ||
| export const waitAfterSortByNew = 2000; | ||
|
|
||
| /** Wait for sort menu to load. */ | ||
| export const sortMenuWait = 300; | ||
|
|
||
| /*------------------ popup -----------------*/ | ||
|
|
||
| /** Debounce only slider onChange in form. */ | ||
| export const formSubmitDebounceWait = 300; | ||
|
|
||
| export const calcHighlightOnTimeDebounceWait = 300; | ||
|
|
||
| /** Refetch every interval. */ | ||
| export const highlightedCommentsCountInterval = 1000; | ||
|
|
||
| export const markAllAsReadDbAndDomWait = 500; | ||
|
|
||
| /*--------------- highlighting --------------*/ | ||
|
|
||
| /** In highlight by read mode, delay to mark as read and un-highlight comments. */ | ||
| export const markAsReadDelay = 5 * 1000; | ||
|
|
||
| /** Increase comment height by 100px. */ | ||
| export const commentHeightHeadroom = 100; | ||
|
|
||
| /*------------- highlight classes ------------*/ | ||
|
|
||
| export const highlightedCommentClass = 'ruc-highlight-comment'; | ||
| export const highlightedCommentReadClass = 'ruc-highlight-comment-read'; | ||
| /** Both read and unread. Don't use.*/ | ||
| export const allHighlightedCommentsSelector = `.${highlightedCommentClass}, .${highlightedCommentReadClass}`; | ||
|
|
||
| export const highlightedCommentByDateClass = 'ruc-highlight-comment-by-date'; | ||
|
|
||
| /*------------------ datetime -----------------*/ | ||
|
|
||
| /** Offset in seconds to fix Date comparison 1hr > 1hr and prevent flicker. */ | ||
| export const dateCorrectionOffset = 30 as const; | ||
|
|
||
| /*------------------ database -----------------*/ | ||
|
|
||
| export const databaseName = 'reddit-unread-comments-db'; | ||
|
|
||
| /** 2 * 10**12 */ | ||
| export const currentSessionCreatedAt = 2e12 as const; | ||
|
|
||
| /*--------------- database limits --------------*/ | ||
|
|
||
| /** Start deleting at. */ | ||
| export const dbSizeLimit: number = 1 * 1024 * 1024; // 1 MB limit | ||
| /** Bring to this size. */ | ||
| export const dbTargetSize: number = 0.5 * 1024 * 1024; // 0.5 MB target size |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| // selectors, easier to select children than parents | ||
|
|
||
| /*------------------ url regex -----------------*/ | ||
|
|
||
| export const redditThreadUrlRegex = /https?:\/\/www\.?reddit\.com\/r\/\w+\/comments\/.+/; | ||
| export const redditUrlRegex = /https?:\/\/www\.?reddit\.com.*/; | ||
|
|
||
| /*------------------ comment -----------------*/ | ||
|
|
||
| export const commentIdAttribute = 'thingid'; | ||
| export const commentSelector = 'shreddit-comment[thingid^="t1_"]'; | ||
| export const commentIdRegexValidate = /^t1_[a-z0-9]+$/; | ||
|
|
||
| // comment | ||
| export const getCommentSelectorFromId = (commentId: string) => | ||
| `shreddit-comment[thingid^="${commentId}"]`; | ||
|
|
||
| // timestamp | ||
| export const getTimestampSelectorFromId = (commentId: string) => { | ||
| const targetCommentSelector = getCommentSelectorFromId(commentId); | ||
|
|
||
| // select direct child element first to exclude nested comments | ||
| const timestampSelector = `${targetCommentSelector} > div[slot="commentMeta"] time[datetime]`; | ||
| return timestampSelector; | ||
| }; | ||
|
|
||
| // content | ||
| export const getContentSelectorFromId = (commentId: string) => { | ||
| const targetCommentSelector = getCommentSelectorFromId(commentId); | ||
|
|
||
| const contentSelector = `${targetCommentSelector} > div[slot="comment"]`; // used in styles.scss too | ||
| return contentSelector; | ||
| }; | ||
|
|
||
| /*----------------- thread ----------------*/ | ||
|
|
||
| export const threadPostSelector = 'shreddit-post[id^="t3_"]'; | ||
| export const threadPostIdRegexReplace = /^t3_/; // Only to get url id from element.id | ||
| export const threadPostIdRegexValidate = /^t3_[a-z0-9]+$/; | ||
|
|
||
| /*----------------- header ----------------*/ | ||
|
|
||
| export const pageHeaderSelector = 'reddit-header-large'; | ||
|
|
||
| /*------------- sort dropdown ------------*/ | ||
|
|
||
| // shadow host 1 | ||
| export const sortMenuShadowHostSelector = 'shreddit-sort-dropdown'; | ||
| // inside shadow dom | ||
| export const currentlySelectedItemSelector = '#comment-sort-button > span > span'; | ||
| export const sortMenuClickSelector = '#comment-sort-button'; | ||
|
|
||
| // dropdown item new | ||
| export const sortByNewMenuItemSelector = 'div[slot="dropdown-items"] span.text-14'; | ||
|
|
||
| // for blur, outside of shadow dom, simple selector | ||
| export const mainContentForBlurSelector = '#main-content'; |
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
Oops, something went wrong.