From 741f451f8e51574aefe2aee4bc4b286ecf261b70 Mon Sep 17 00:00:00 2001 From: Jesper Wrang Date: Sat, 11 Nov 2017 23:56:21 +0100 Subject: [PATCH] Can now display subreddits! Also started using sass and pug --- .gitignore | 2 + about.html | 44 +++ compile.sh | 5 + index.html | 55 --- pug/about.pug | 46 +++ pug/base.pug | 38 +++ pug/search.pug | 4 + pug/subreddit.pug | 9 + pug/thread.pug | 8 + sass/about.sass | 38 +++ sass/comment.sass | 52 +++ sass/header.sass | 40 +++ sass/main.sass | 34 ++ sass/post.sass | 131 +++++++ sass/search.sass | 0 sass/subreddit.sass | 29 ++ sass/thread.sass | 13 + search.html | 23 ++ static/css/style.css | 564 +++++++++++++++++-------------- static/js/functions.js | 101 +++++- static/js/libraries/js.cookie.js | 165 +++++++++ static/js/subreddit.js | 223 ++++++++++++ static/js/thread.js | 63 ++-- subreddit.html | 56 +-- thread.html | 58 ++-- 25 files changed, 1389 insertions(+), 412 deletions(-) create mode 100644 about.html create mode 100755 compile.sh delete mode 100644 index.html create mode 100644 pug/about.pug create mode 100644 pug/base.pug create mode 100644 pug/search.pug create mode 100644 pug/subreddit.pug create mode 100644 pug/thread.pug create mode 100644 sass/about.sass create mode 100644 sass/comment.sass create mode 100644 sass/header.sass create mode 100644 sass/main.sass create mode 100644 sass/post.sass create mode 100644 sass/search.sass create mode 100644 sass/subreddit.sass create mode 100644 sass/thread.sass create mode 100644 search.html create mode 100644 static/js/libraries/js.cookie.js diff --git a/.gitignore b/.gitignore index 3294e9e..cd5a54d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,4 @@ .secret .vscode/settings.json +.sass-cache/ +*.css.map \ No newline at end of file diff --git a/about.html b/about.html new file mode 100644 index 0000000..2dc57d7 --- /dev/null +++ b/about.html @@ -0,0 +1,44 @@ + + + + Removeddit + + + + + + + + +
+ +
+
+
+

About

+

Display removed (by mods) and deleted (by users) comments/threads from Reddit.

+

Usage: Drag this bookmarklet Removeddit + to your bookmark bar and use it to get from reddit to removeddit.

Alternatively you can manually replace the reddit in the URL to removeddit.
E.g. https://www.removeddit.com/r/TwoXChromosomes/comments/6z1hch/ +

+

Created by Jesper Wrang and uses Jason Baumgartner service for getting removed comments.

+

TODO

+
    +
  • Collapsing comments
    • +
  • Get removed selftext of thread
    • +
  • Subreddits!
    • +
  • Maybe for specific users
    • +
+

Links/Contact

+

For feedback and bug reports:

+
    +
  • email: removeddit (at) gmail.com
    • +
  • reddit: /u/JubbeArt
    • +
+

Code on Github.

+
+
+ + \ No newline at end of file diff --git a/compile.sh b/compile.sh new file mode 100755 index 0000000..a2f4d25 --- /dev/null +++ b/compile.sh @@ -0,0 +1,5 @@ +pug -P -o . pug/about.pug pug/thread.pug pug/subreddit.pug pug/search.pug +sass --sourcemap=none --style expanded sass/main.sass static/css/style.css + +#pug --watch -P -o . pug/about.pug pug/thread.pug pug/subreddit.pug pug/search.pug +#sass --watch --sourcemap=none --style expanded sass/main.sass:static/css/style.css \ No newline at end of file diff --git a/index.html b/index.html deleted file mode 100644 index 1667ae7..0000000 --- a/index.html +++ /dev/null @@ -1,55 +0,0 @@ - - - - Removeddit - Display removed and deleted comments from Reddit - - - - - - - - - - -
-
-

About

-

- Display removed and deleted comments from Reddit. -

-

- Usage: Drag this bookmarklet Removeddit to your bookmark bar and use it to get from reddit to removeddit. -

- Alternatively you can manually replace the reddit in the URL to removeddit. -
E.g. - - https://www.removeddit.com/r/TwoXChromosomes/comments/6z1hch/ - -

-

- Created by Jesper Wrang and uses Jason Baumgartner service for getting removed comments. -

-

TODO

-
    -
  • Collapsing comments
    • -
  • Get removed selftext of thread
    • -
  • Subreddits!
    • -
  • Maybe for specific users
    • -
-

Links/Contact

-

For feedback and bug reports:

-
    -
  • email: removeddit (at) gmail.com
    • -
  • reddit: /u/JubbeArt
    • -
- -

- Code on Github. -

-
-
- - \ No newline at end of file diff --git a/pug/about.pug b/pug/about.pug new file mode 100644 index 0000000..aeec58a --- /dev/null +++ b/pug/about.pug @@ -0,0 +1,46 @@ +extends base.pug + +block main + #main-box + h2.about About + p + | Display + b(title='Removed by mods').removed removed + | (by mods) and + b(title='Deleted by users').deleted deleted + | (by users) comments/threads from Reddit. + p + | #[b Usage]: Drag this bookmarklet + a(href="javascript: document.location = document.URL.replace('reddit.com','removeddit.com');").bookmarklet Removeddit + | + | to your bookmark bar and use it to get from reddit to removeddit. + br + br + | Alternatively you can manually replace the #[i reddit] in the URL to #[i removeddit]. + br + | E.g. + a(href='/r/TwoXChromosomes/comments/6z1hch/') https://www.removeddit.com/r/TwoXChromosomes/comments/6z1hch/ + p + | Created by + a(href='https://github.com/JubbeArt/') Jesper Wrang + | and uses + a(href='https://pushshift.io/') Jason Baumgartner + | service for getting removed comments. + + h2.todo TODO + ul + li Collapsing comments + li Get removed selftext of thread + li Subreddits! + li Maybe for specific users + h2.contact Links/Contact + p(style='margin-bottom:8px;') + | For feedback and bug reports: + ul + li + | email: removeddit (at) gmail.com + li + | reddit: + a(href='https://www.reddit.com/user/Jubbeart/') /u/JubbeArt + p + a(href='https://github.com/JubbeArt/removeddit') Code on Github. \ No newline at end of file diff --git a/pug/base.pug b/pug/base.pug new file mode 100644 index 0000000..f1e90d7 --- /dev/null +++ b/pug/base.pug @@ -0,0 +1,38 @@ +block vars +doctype html +html + head + if title + title Removeddit - #{title} + else + title Removeddit + meta(charset='utf-8') + meta(type='description' content='Display removed and deleted comments from Reddit') + meta(type='author' content='Jesper Wrang') + meta(name='viewport' content='width=device-width, initial-scale=1.0') + link(href='/static/css/style.css' rel='stylesheet') + link(href='/static/images/favicon.ico' rel='shotcut icon') + body + header + #header + h1 + a(href='/') Removeddit + nav + a(href='/r/all') subreddit + a(href='/r/bestof/comments/7c8jof/') thread + a(href='/search/') search + a(href='/about/') about + if status + #status + p#status-text + img#status-image(src='/static/images/loading.gif') + #main + block main + if script + block script + script(src='/static/js/libraries/snuownd.js') + script(src='/static/js/libraries/lodash.min.js') + script(src='/static/js/polyfills/promise.min.js') + script(src='/static/js/polyfills/fetch.js') + script(src='/static/js/id.js') + script(src='/static/js/functions.js') \ No newline at end of file diff --git a/pug/search.pug b/pug/search.pug new file mode 100644 index 0000000..26045dd --- /dev/null +++ b/pug/search.pug @@ -0,0 +1,4 @@ +extends base.pug + +block main + h1 Comming soon \ No newline at end of file diff --git a/pug/subreddit.pug b/pug/subreddit.pug new file mode 100644 index 0000000..32849b0 --- /dev/null +++ b/pug/subreddit.pug @@ -0,0 +1,9 @@ +extends base.pug + +block vars + - var status = true + - var script = true + +append script + script(src='/static/js/libraries/js.cookie.js') + script(src='/static/js/subreddit.js') \ No newline at end of file diff --git a/pug/thread.pug b/pug/thread.pug new file mode 100644 index 0000000..8e562a8 --- /dev/null +++ b/pug/thread.pug @@ -0,0 +1,8 @@ +extends base.pug + +block vars + - var status = true + - var script = true + +append script + script(src='/static/js/thread.js') \ No newline at end of file diff --git a/sass/about.sass b/sass/about.sass new file mode 100644 index 0000000..654d76f --- /dev/null +++ b/sass/about.sass @@ -0,0 +1,38 @@ +#main-box + margin: 0 auto + padding: 20px + border-radius: 5px + color: #fff + word-wrap: break-word + max-width: 800px + background-color: #161616 + + .removed + color: $red + + .deleted + color: $blue + + h2 + margin: 20px 0px 12px + + h2.about + margin: 0 + color: $red + h2.todo + color: #239f2b + h2.contact + color: #1b767a + + ul + padding-left: 30px + margin: 0 + + .bookmarklet + background: $red + color: #fff + padding: 9px + font-size: large + font-weight: bold + display: inline-block + border-radius: 5px diff --git a/sass/comment.sass b/sass/comment.sass new file mode 100644 index 0000000..2c30e1d --- /dev/null +++ b/sass/comment.sass @@ -0,0 +1,52 @@ +.comment + margin: 0 0 8px 0 + padding: 5px 8px 5px 30px + border: 1px solid #333 + border-radius: 3px + color: #ddd + font-size: 14px + + .comment-head + font-size: 10px + + .comment-author + font-weight: bold + + .comment-score + color: #b4b4b4 + font-weight: bold + + .comment-time + color: #828282 + + .comment-body + max-width: 840px + line-height: 20px + + p + margin: 5px 0 + line-height: 20px + + a:hover + text-decoration: none + + .comment-links + margin-bottom: 6px + + .comment-links a + color: #828282 + font-weight: bold + font-size: 10px + margin-right: 4px + +.comment-removed + background-color: #840c09 + +.comment-deleted + background-color: #00007d + +.comment-odd + background-color: #121212 + +.comment-even + background-color: #161616 \ No newline at end of file diff --git a/sass/header.sass b/sass/header.sass new file mode 100644 index 0000000..545fa07 --- /dev/null +++ b/sass/header.sass @@ -0,0 +1,40 @@ +header + background-color: $red///*#19171c;/*#181818*/ + display: flex + justify-content: space-between + align-items: center + padding: 10px + + #header + a + color: #fff + + h1 + margin: 7px 0 + text-align: center + + a + transition: color 0.3s + + + a:hover + text-decoration: none + color: #ff8b88 + nav + a + margin: 0 7px + font-size: 20px + + #status + display: flex + justify-content: space-between + align-items: center + + #status-text + color: #fff + margin: 0 20px 0 0 + + #status-image + height: 64px + width: 64px + border-radius: 32px \ No newline at end of file diff --git a/sass/main.sass b/sass/main.sass new file mode 100644 index 0000000..1a11ee8 --- /dev/null +++ b/sass/main.sass @@ -0,0 +1,34 @@ +$background: #262626 +$red: #ca302c +$blue: #00007d +$link: #8cb3d9 +$author: #6a98af + +html, body + margin: 0 + padding: 0 + background-color: $background + font-family: verdana, arial, helvetica, sans-serif + +#main + margin: 15px + +a + color: #8cb3d9 + +a:link, a:visited, a:active + text-decoration: none + +a:hover + text-decoration: underline + +.author + color: $author + + +@import header +@import about +@import comment +@import post +@import thread +@import subreddit diff --git a/sass/post.sass b/sass/post.sass new file mode 100644 index 0000000..44fca67 --- /dev/null +++ b/sass/post.sass @@ -0,0 +1,131 @@ +.thread + display: flex + flex-grow: 1 + margin-bottom: 7px + + .thumbnail + width: 70px + margin-right: 3px + + img + border-radius: 1px + + .thumbnail-default + background-image: url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png") + background-position: 0px -1099px + background-repeat: no-repeat + height: 50px + + .thumbnail-self + background-image: url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png") + background-position: 0px -1267px + background-repeat: no-repeat + height: 50px + + .thumbnail-image + background-image: url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png") + background-position: 0px -1043px + background-repeat: no-repeat + height: 50px + + .thumbnail-nsfw + background-image: url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png") + background-position: 0px -1155px + background-repeat: no-repeat + height: 50px + .thread-score-box + margin: 0 7px + width: 43px + + .vote + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAcCAMAAADC4sagAAABFFBMVEUjJCQiIiIjIyMkIiIkJCQlJSUlJicmJiYnIyEnJycnKCsoKCgpLC8rIyErKyssMDUvLy8wJCAwMDAxMTEyMjI0NDQ2NjY3JR83Nzc5OTk7Ozs8PDw9PT0+Pj4/Pz9AQEBBQUFCQkJDQ0NGRkZISEhKSkpKV2tLS0tMTExOTk5PT09QYHdSUlJTU1NVVVVWVlZXV1dXaINYWFhaWlpabYlbW1tecpBgYGBhYWFid5dkZGRle5xlfJ1pgKRrhKhshKlshapuLhZwirFyjbV0j7h4lL97mcZ9MBR/nsyCo9OOMxGcNQ+eNg+kNw6sOA2vOAy0OQy7Ogq/OwrBOwrDPAnLPQjPPQfTPgfbPwXjQQTrQgPzQwLKxGgxAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVlJREFUOMu9lF1TwjAQRTcMvmeQOi1QPmxFBQTxW1ERUUFEUVRU/P//w9yGmBTFyZPnpXNmbju76W6IJM8Uw49rLa6Tz4mpq/mCqY3Gvqnj6XQ61lp0mGd8favCwx2tow8wUlpwGWOZrNJKjXO+UVc6fJcMZzV7IswSOU/qej0l0rwyq33wphhAM1kWkcy70GB7mUfUNqG9V02PyPMTMs2Wig5RaTctwzxVXyPqvJh0VkJBIKJ4huncCRAvHOEZyGKegO4a6UDrIdLGCT4C6/QDsE7fA+v0HdAadWqk0SH9D3sgXkm4uJIDYKTFnwwXd3kMrNOnwDp9BmzS5QuTshN1iDRwfkxV9VJTJXLzSWYM+NzEEjWvFE2oGvCE7/2yDeL8riWzM8xmorRazLlNI2rdgNb3ZYLF1Es/t8VE7X6/39Yqlt4tLLwhiLq3XVNLfumP24fo3Opm+wLGCVa252Y8tQAAAABJRU5ErkJggg==) + background-repeat: no-repeat + margin-left: auto + margin-right: auto + width: 15px + height: 14px + cursor: pointer + + .upvote + background-position: -15px 0px + margin-top: 2px + + .downvote + background-position: -15px -14px + margin-top: 2px + + .thread-score + color: #646464 + font-size: 13px + font-weight: bold + text-align: center + + .thread-content + flex: 1 + float: left + margin-left: 3px + + .link-flair + color: #c8c8c8 + background-color: #404040 + margin-right: 5px + border: 1px solid #4d4d4d + border-radius: 2px + padding: 0 2px + font-size: 10px + + .thread-title + color: #a6a6a6 + margin-right: 5px + + .thread-title:hover + text-decoration: none + + .domain + color: #888 + font-size: 10px + + .thread-selftext + border: 1px solid #666 + border-radius: 7px + margin: 5px 0 7px + padding: 5px 10px + max-width: 840px + color: #ddd + font-size: 14px + + p + margin: 5px 0 + line-height: 20px + + a:hover + text-decoration: none + + p:first-child + margin-top: 0px + + + p:last-child + margin-bottom: 0px + + + .thread-image + max-width: 768px + max-height: 768px + + .thread-info + color: #828282 + font-size: 10px + margin-top: 2px + + + .total-comments + color: #828282 + font-size: 10px + margin: 4px 0 + + + .grey-link, .grey-link:link, .grey-link:visited, .grey-link:hover, .grey-link:focus, .grey-link:active + color: #828282 + margin-right: 4px + \ No newline at end of file diff --git a/sass/search.sass b/sass/search.sass new file mode 100644 index 0000000..e69de29 diff --git a/sass/subreddit.sass b/sass/subreddit.sass new file mode 100644 index 0000000..7bff6ad --- /dev/null +++ b/sass/subreddit.sass @@ -0,0 +1,29 @@ +.post-rank + min-width: 20px + color: #505050 + font-size: 16px + text-align: right + margin: 14px 4px 0 0 + +.subreddit-info + border-bottom: 1px dotted gray + padding: 5px 10px + color: #ccc + font-size: 14px + margin-bottom: 5px + + select + background: #262626 + color: #808080 + font-size: 14px + font-weight: bold + text-decoration: underline + border: 0 + +#pagination + border-top: 1px dotted gray + padding: 5px 10px + color: #ccc + font-size: 16px + span, a + margin: 5px \ No newline at end of file diff --git a/sass/thread.sass b/sass/thread.sass new file mode 100644 index 0000000..b205c04 --- /dev/null +++ b/sass/thread.sass @@ -0,0 +1,13 @@ +#comment-info + color: #ca302c + margin-top: 10px + font-weight: bold + padding-bottom: 5px + border-bottom: 1px dotted #808080 + font-size: 16px + + +#comment-sort + color: #808080 + font-size: 12px + margin: 5px 0 10px diff --git a/search.html b/search.html new file mode 100644 index 0000000..2bbe371 --- /dev/null +++ b/search.html @@ -0,0 +1,23 @@ + + + + Removeddit + + + + + + + + +
+ +
+
+

Comming soon

+
+ + \ No newline at end of file diff --git a/static/css/style.css b/static/css/style.css index 04151fe..d4f1e0a 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1,298 +1,344 @@ -body { - background-color: #262626; - margin: 0; - font-family: verdana, arial, helvetica, sans-serif; -} - -p { - margin: 5px 0; - line-height: 20px; -} - -#thread-selftext p:first-child { - margin-top: 0px; -} - -#thread-selftext p:last-child { - margin-bottom: 0px; -} - -a { - color: #8cb3d9; -} - -a:link, a:visited, a:hover, a:active { - text-decoration: none; -} - -a:hover { - text-decoration: underline; -} - -.user-text { - color: #ddd; - font-size: 14px; -} - -.user-link { - color: #6a98af; -} - -#header { - background-color: #ca302c;/*#19171c;/*#181818*/ - display: flex; - justify-content: space-between; - padding: 10px; -} - -#header-title-link { - align-self: center; - color: #fff;/*#ddd;*/ - transition: color 0.3s; - margin: 12px 0; -} - -#header-title-link:hover { - color: #FF8B88;/*#ca302c*/; - text-decoration: none; -} - -#header-title { - margin: 0; - display: inline; -} - -#loading { - color: #fff; - display: flex; - align-items: center; -} - -#loading-text { - margin: 0 20px 0 0; -} - -#loading-image { - height: 64px; - width: 64px; - border-radius: 32px; +html, body { + margin: 0; + padding: 0; + background-color: #262626; + font-family: verdana, arial, helvetica, sans-serif; } #main { - margin: 15px; + margin: 15px; +} + +a { + color: #8cb3d9; +} + +a:link, a:visited, a:active { + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + +.author { + color: #6a98af; +} + +header { + background-color: #ca302c; + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; +} +header #header a { + color: #fff; +} +header #header h1 { + margin: 7px 0; + text-align: center; +} +header #header h1 a { + transition: color .3s; +} +header #header h1 a:hover { + text-decoration: none; + color: #ff8b88; +} +header #header nav a { + margin: 0 7px; + font-size: 20px; +} +header #status { + display: flex; + justify-content: space-between; + align-items: center; +} +header #status #status-text { + color: #fff; + margin: 0 20px 0 0; +} +header #status #status-image { + height: 64px; + width: 64px; + border-radius: 32px; } #main-box { - margin: 0 auto; - padding: 20px; - border-radius: 5px; - color: #fff; - word-wrap: break-word; + margin: 0 auto; + padding: 20px; + border-radius: 5px; + color: #fff; + word-wrap: break-word; + max-width: 800px; + background-color: #161616; } - -.error-box { - max-width: 500px; - background-color: #ca302c; +#main-box .removed { + color: #ca302c; } - -.frontpage-box { - max-width: 800px; - background-color: #161616; - +#main-box .deleted { + color: #00007d; } - -.frontpage-box p { - margin: 15px; +#main-box h2 { + margin: 20px 0px 12px; } - -.error-title { - margin: 0 0 15px 0; +#main-box h2.about { + margin: 0; + color: #ca302c; } - -#thread { - display: flex; - flex-grow: 1; +#main-box h2.todo { + color: #239f2b; } - - -.thumbnail { - background-color: black; - float: left; - width: 70px; - height: 70px; +#main-box h2.contact { + color: #1b767a; } - -#thread-score-box { - margin: 0 7px; +#main-box ul { + padding-left: 30px; + margin: 0; } - -.vote { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAcCAMAAADC4sagAAABFFBMVEUjJCQiIiIjIyMkIiIkJCQlJSUlJicmJiYnIyEnJycnKCsoKCgpLC8rIyErKyssMDUvLy8wJCAwMDAxMTEyMjI0NDQ2NjY3JR83Nzc5OTk7Ozs8PDw9PT0+Pj4/Pz9AQEBBQUFCQkJDQ0NGRkZISEhKSkpKV2tLS0tMTExOTk5PT09QYHdSUlJTU1NVVVVWVlZXV1dXaINYWFhaWlpabYlbW1tecpBgYGBhYWFid5dkZGRle5xlfJ1pgKRrhKhshKlshapuLhZwirFyjbV0j7h4lL97mcZ9MBR/nsyCo9OOMxGcNQ+eNg+kNw6sOA2vOAy0OQy7Ogq/OwrBOwrDPAnLPQjPPQfTPgfbPwXjQQTrQgPzQwLKxGgxAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVlJREFUOMu9lF1TwjAQRTcMvmeQOi1QPmxFBQTxW1ERUUFEUVRU/P//w9yGmBTFyZPnpXNmbju76W6IJM8Uw49rLa6Tz4mpq/mCqY3Gvqnj6XQ61lp0mGd8favCwx2tow8wUlpwGWOZrNJKjXO+UVc6fJcMZzV7IswSOU/qej0l0rwyq33wphhAM1kWkcy70GB7mUfUNqG9V02PyPMTMs2Wig5RaTctwzxVXyPqvJh0VkJBIKJ4huncCRAvHOEZyGKegO4a6UDrIdLGCT4C6/QDsE7fA+v0HdAadWqk0SH9D3sgXkm4uJIDYKTFnwwXd3kMrNOnwDp9BmzS5QuTshN1iDRwfkxV9VJTJXLzSWYM+NzEEjWvFE2oGvCE7/2yDeL8riWzM8xmorRazLlNI2rdgNb3ZYLF1Es/t8VE7X6/39Yqlt4tLLwhiLq3XVNLfumP24fo3Opm+wLGCVa252Y8tQAAAABJRU5ErkJggg==); - background-repeat: no-repeat; - margin-left: auto; - margin-right: auto; - width: 15px; - height: 14px; - cursor: pointer; -} - -.upvote { - background-position: -15px 0px; - margin-top: 2px; -} - -.downvote { - background-position: -15px -14px; - margin-top: 18px; -} - -#thread-score { - color: #646464; - float: left; - font-size: 13px; - font-weight: bold; - text-align: center; -} - -#thread-content { - flex: 1; - float: left; - margin-left: 3px; -} - -.link-flair { - color: #c8c8c8; - background-color: #404040; - margin-right: 5px; - border: 1px solid #4d4d4d; - border-radius: 2px; - padding: 0 2px; - font-size: 10px; -} - -#thread-title { - color: #a6a6a6; - margin-right: 5px; -} - -#thread-title:hover { - text-decoration: none; -} - -#domain { - color: #888; - font-size: 10px; -} - -#thread-info { - color: #828282; - font-size: 10px; - margin-top: 2px; -} - -#total-comments { - color: #828282; - font-size: 10px; - margin: 4px 0; -} - -.grey-link, .grey-link:link, .grey-link:visited, .grey-link:hover, .grey-link:focus, .grey-link:active { - color: #828282; -} - - -#thread-selftext { - border: 1px solid #666; - border-radius: 7px; - margin: 5px 0 7px; - padding: 5px 10px; - max-width: 840px; -} - -#thread-image { - max-width: 768px; - max-height: 768px; -} - -#comment-info { - color: #ca302c; - margin-top: 10px; - font-weight: bold; - padding-bottom: 5px; - border-bottom: 1px dotted #808080; - font-size: 16px; -} - -#comment-sort { - color: #808080; - font-size: 12px; - margin: 5px 0 10px; +#main-box .bookmarklet { + background: #ca302c; + color: #fff; + padding: 9px; + font-size: large; + font-weight: bold; + display: inline-block; + border-radius: 5px; } .comment { - margin: 0 0 8px 0; - padding: 5px 8px 5px /*14px*/ 30px; - border: 1px solid #333; - border-radius: 3px; - color: #ddd; - font-size: 14px; + margin: 0 0 8px 0; + padding: 5px 8px 5px 30px; + border: 1px solid #333; + border-radius: 3px; + color: #ddd; + font-size: 14px; } - -.comment-head { - font-size: 10px; +.comment .comment-head { + font-size: 10px; } - -.comment-author { - font-weight: bold; +.comment .comment-author { + font-weight: bold; } - -.comment-score { - color: #b4b4b4; - font-weight: bold; +.comment .comment-score { + color: #b4b4b4; + font-weight: bold; } - -.comment-time { - color: #828282; +.comment .comment-time { + color: #828282; } - -.comment-body { - max-width: 840px; - line-height: 20px; +.comment .comment-body { + max-width: 840px; + line-height: 20px; } - -.comment-links { - margin-bottom: 6px; +.comment .comment-body p { + margin: 5px 0; + line-height: 20px; } - -.comment-links a { - color: #828282; - font-weight: bold; - font-size: 10px; +.comment .comment-body a:hover { + text-decoration: none; +} +.comment .comment-links { + margin-bottom: 6px; +} +.comment .comment-links a { + color: #828282; + font-weight: bold; + font-size: 10px; + margin-right: 4px; } .comment-removed { - background-color: #840c09; + background-color: #840c09; } .comment-deleted { - background-color: #00007D; + background-color: #00007d; } .comment-odd { - background-color: #121212; + background-color: #121212; } .comment-even { - background-color: #161616; + background-color: #161616; } +.thread { + display: flex; + flex-grow: 1; + margin-bottom: 7px; +} +.thread .thumbnail { + width: 70px; + margin-right: 3px; +} +.thread .thumbnail img { + border-radius: 1px; +} +.thread .thumbnail-default { + background-image: url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png"); + background-position: 0px -1099px; + background-repeat: no-repeat; + height: 50px; +} +.thread .thumbnail-self { + background-image: url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png"); + background-position: 0px -1267px; + background-repeat: no-repeat; + height: 50px; +} +.thread .thumbnail-image { + background-image: url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png"); + background-position: 0px -1043px; + background-repeat: no-repeat; + height: 50px; +} +.thread .thumbnail-nsfw { + background-image: url("https://www.redditstatic.com/sprite-reddit.6Om8v6KMv28.png"); + background-position: 0px -1155px; + background-repeat: no-repeat; + height: 50px; +} +.thread .thread-score-box { + margin: 0 7px; + width: 43px; +} +.thread .vote { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAcCAMAAADC4sagAAABFFBMVEUjJCQiIiIjIyMkIiIkJCQlJSUlJicmJiYnIyEnJycnKCsoKCgpLC8rIyErKyssMDUvLy8wJCAwMDAxMTEyMjI0NDQ2NjY3JR83Nzc5OTk7Ozs8PDw9PT0+Pj4/Pz9AQEBBQUFCQkJDQ0NGRkZISEhKSkpKV2tLS0tMTExOTk5PT09QYHdSUlJTU1NVVVVWVlZXV1dXaINYWFhaWlpabYlbW1tecpBgYGBhYWFid5dkZGRle5xlfJ1pgKRrhKhshKlshapuLhZwirFyjbV0j7h4lL97mcZ9MBR/nsyCo9OOMxGcNQ+eNg+kNw6sOA2vOAy0OQy7Ogq/OwrBOwrDPAnLPQjPPQfTPgfbPwXjQQTrQgPzQwLKxGgxAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAVlJREFUOMu9lF1TwjAQRTcMvmeQOi1QPmxFBQTxW1ERUUFEUVRU/P//w9yGmBTFyZPnpXNmbju76W6IJM8Uw49rLa6Tz4mpq/mCqY3Gvqnj6XQ61lp0mGd8favCwx2tow8wUlpwGWOZrNJKjXO+UVc6fJcMZzV7IswSOU/qej0l0rwyq33wphhAM1kWkcy70GB7mUfUNqG9V02PyPMTMs2Wig5RaTctwzxVXyPqvJh0VkJBIKJ4huncCRAvHOEZyGKegO4a6UDrIdLGCT4C6/QDsE7fA+v0HdAadWqk0SH9D3sgXkm4uJIDYKTFnwwXd3kMrNOnwDp9BmzS5QuTshN1iDRwfkxV9VJTJXLzSWYM+NzEEjWvFE2oGvCE7/2yDeL8riWzM8xmorRazLlNI2rdgNb3ZYLF1Es/t8VE7X6/39Yqlt4tLLwhiLq3XVNLfumP24fo3Opm+wLGCVa252Y8tQAAAABJRU5ErkJggg==); + background-repeat: no-repeat; + margin-left: auto; + margin-right: auto; + width: 15px; + height: 14px; + cursor: pointer; +} +.thread .upvote { + background-position: -15px 0px; + margin-top: 2px; +} +.thread .downvote { + background-position: -15px -14px; + margin-top: 2px; +} +.thread .thread-score { + color: #646464; + font-size: 13px; + font-weight: bold; + text-align: center; +} +.thread .thread-content { + flex: 1; + float: left; + margin-left: 3px; +} +.thread .link-flair { + color: #c8c8c8; + background-color: #404040; + margin-right: 5px; + border: 1px solid #4d4d4d; + border-radius: 2px; + padding: 0 2px; + font-size: 10px; +} +.thread .thread-title { + color: #a6a6a6; + margin-right: 5px; +} +.thread .thread-title:hover { + text-decoration: none; +} +.thread .domain { + color: #888; + font-size: 10px; +} +.thread .thread-selftext { + border: 1px solid #666; + border-radius: 7px; + margin: 5px 0 7px; + padding: 5px 10px; + max-width: 840px; + color: #ddd; + font-size: 14px; +} +.thread .thread-selftext p { + margin: 5px 0; + line-height: 20px; +} +.thread .thread-selftext a:hover { + text-decoration: none; +} +.thread .thread-selftext p:first-child { + margin-top: 0px; +} +.thread .thread-selftext p:last-child { + margin-bottom: 0px; +} +.thread .thread-image { + max-width: 768px; + max-height: 768px; +} +.thread .thread-info { + color: #828282; + font-size: 10px; + margin-top: 2px; +} +.thread .total-comments { + color: #828282; + font-size: 10px; + margin: 4px 0; +} +.thread .grey-link, .thread .grey-link:link, .thread .grey-link:visited, .thread .grey-link:hover, .thread .grey-link:focus, .thread .grey-link:active { + color: #828282; + margin-right: 4px; +} -.bookmarklet { - background: #ca302c; - color: white; - padding: 9px; - font-size: large; - font-weight: bold; - display: inline-block; - border-radius: 5px; -} \ No newline at end of file +#comment-info { + color: #ca302c; + margin-top: 10px; + font-weight: bold; + padding-bottom: 5px; + border-bottom: 1px dotted #808080; + font-size: 16px; +} + +#comment-sort { + color: #808080; + font-size: 12px; + margin: 5px 0 10px; +} + +.post-rank { + min-width: 20px; + color: #505050; + font-size: 16px; + text-align: right; + margin: 14px 4px 0 0; +} + +.subreddit-info { + border-bottom: 1px dotted gray; + padding: 5px 10px; + color: #ccc; + font-size: 14px; + margin-bottom: 5px; +} +.subreddit-info select { + background: #262626; + color: #808080; + font-size: 14px; + font-weight: bold; + text-decoration: underline; + border: 0; +} + +#pagination { + border-top: 1px dotted gray; + padding: 5px 10px; + color: #ccc; + font-size: 16px; +} +#pagination span, #pagination a { + margin: 5px; +} diff --git a/static/js/functions.js b/static/js/functions.js index e2f5e35..ef6f14b 100644 --- a/static/js/functions.js +++ b/static/js/functions.js @@ -2,8 +2,8 @@ // Little display-bar in the upper right corner var Status = (function(){ - var loadingText = document.getElementById("loading-text"); - var statusImage = document.getElementById("loading-image"); + var loadingText = document.getElementById("status-text"); + var statusImage = document.getElementById("status-image"); var loadingImg = "/static/images/loading.gif"; var successImg = "/static/images/done.png"; var errorImg = "/static/images/error.png"; @@ -54,7 +54,7 @@ var Reddit = (function() { return { init: init, - subreddit: window.location.pathname.split("/")[2], + subreddit: _.defaultTo(window.location.pathname.split("/")[2], 'all'), threadID: window.location.pathname.split("/")[4], permalink: window.location.pathname.split("/")[6], fetchToken: function() { @@ -70,14 +70,14 @@ return { if(response.ok) { return response.json(); } else { - return Promise.reject("Can't connect to Reddit API (401)"); + return Promise.reject("Can't connect to Reddit API"); } }) .then(function(json) { init.headers.Authorization = "bearer " + json.access_token; }) .catch(function(error) { - return Promise.reject("Can't connect to Reddit API (401)"); + return Promise.reject("Can't connect to Reddit API"); }); } }})(); @@ -115,6 +115,7 @@ return { var URLs = (function(){ var reddit = "https://oauth.reddit.com"; var pushshift = "https://api.pushshift.io"; + var elastic = "https://elastic.pushshift.io"; var maxItemsPerRequest = 100; return { @@ -123,13 +124,15 @@ var URLs = (function(){ var dataChunks = _.chunk(data, chunkSize); return _.map(dataChunks, function(chunk) { return url + chunk; }) }, - pushshiftComments:pushshift+"/reddit/comment/search?ids=", - pushshiftIDs: pushshift+"/reddit/submission/comment_ids/"+Reddit.threadID, - thread: reddit+"/r/"+Reddit.subreddit+"/comments/"+Reddit.threadID, - moreChildren: reddit+"/api/morechildren?link_id=t3_"+Reddit.threadID+"&children=", - singleComments: reddit+"/r/"+Reddit.subreddit+"/api/info/?id=" + pushshiftComments: pushshift+"/reddit/comment/search?ids=", + pushshiftIDs: pushshift+"/reddit/submission/comment_ids/"+Reddit.threadID, + thread: reddit+"/r/"+Reddit.subreddit+"/comments/"+Reddit.threadID, + moreChildren: reddit+"/api/morechildren?link_id=t3_"+Reddit.threadID+"&children=", + singleComments: reddit+"/r/"+Reddit.subreddit+"/api/info/?id=", + subreddit: reddit+"/r/"+Reddit.subreddit, + elasticThreads: elastic+"/rs/submissions/_search?source=" }; -})() +})(); // HTML parsing @@ -140,7 +143,65 @@ return { tmpDiv.innerHTML = htmlString return tmpDiv.childNodes.length === 0 ? "" : tmpDiv.childNodes[0].nodeValue } -}})(); +}; +})(); + + +var Time = (function(){ +return { + utc: function() { + return Math.floor(_.now()/1000); + }, + + toUTC: function(timeString) { + var parts = timeString.split(/[a-zA-Z]+/); + var times = 1; + + if(parts.length === 2 && parts[0] !== "") { + times = _.parseInt(parts[0]); + } + + if(_.includes(timeString, "hour")) return times * 3600; + if(_.includes(timeString, "day")) return times * 86400; + if(_.includes(timeString, "week")) return times * 604800; + if(_.includes(timeString, "month")) return times * 2592000; + if(_.includes(timeString, "year")) return times * 31536000; + + return Time.utc(); + }, + + difference: function(utc) { + return Time.utc() - utc; + } +}; +})(); + +var GetVars = (function(){ +return { + get: function(variable) { + var urlParts = window.location.href.split("?"); + if(urlParts.length <= 1) { + return undefined; + } + + var getVariables = urlParts[1].split("&"); + + for(var i = 0, len = getVariables.length; i < len; i++) { + var keyAndValue = getVariables[i].split("="); + + if(keyAndValue[0] === variable) { + return keyAndValue[1]; + } + } + + return undefined; + }, + + set: function(variable, value) { + window.location.href = window.location.href.split("?")[0] + "?"+variable+"="+value; + } +}; +})(); // For text formatting @@ -150,7 +211,7 @@ return { parse: function(text){ return markdown.render(text) }, - // UTC -> "Reddit time format" (5 hours ago, just now, etc...) + // UTC -> "Reddit time format" (e.g. 5 hours ago, just now, etc...) prettyDate: function(createdUTC){ var currentUTC = Math.floor((new Date()).getTime() / 1000); var secondDiff = currentUTC - createdUTC; @@ -158,8 +219,8 @@ return { if(dayDiff < 0) return ""; if(dayDiff == 0) { - if(secondDiff < 10) return "just now"; - if(secondDiff < 60) return secondDiff + " seconds ago"; + if(secondDiff < 10) return "just now"; + if(secondDiff < 60) return secondDiff + " seconds ago"; if(secondDiff < 120) return "a minute ago"; if(secondDiff < 3600) return Math.floor(secondDiff / 60) + " minutes ago"; if(secondDiff < 7200) return "an hour ago"; @@ -170,8 +231,14 @@ return { if(dayDiff < 365) return Math.floor(dayDiff / 30) + " months ago"; return Math.floor(dayDiff / 365) + " years ago"; }, - // 12000 => 1.2k + // e.g. 12000 => 12k prettyScore: function(score) { - return score >= 10000 ? (score / 1000).toFixed(1) + "k" : score; + if(score >= 100000) { + return (score / 1000).toFixed(0) + "k"; + } else if(score >= 10000) { + return (score / 1000).toFixed(1) + "k"; + } + + return score; } }})(); \ No newline at end of file diff --git a/static/js/libraries/js.cookie.js b/static/js/libraries/js.cookie.js new file mode 100644 index 0000000..9a0945e --- /dev/null +++ b/static/js/libraries/js.cookie.js @@ -0,0 +1,165 @@ +/*! + * JavaScript Cookie v2.2.0 + * https://github.com/js-cookie/js-cookie + * + * Copyright 2006, 2015 Klaus Hartl & Fagner Brack + * Released under the MIT license + */ +;(function (factory) { + var registeredInModuleLoader = false; + if (typeof define === 'function' && define.amd) { + define(factory); + registeredInModuleLoader = true; + } + if (typeof exports === 'object') { + module.exports = factory(); + registeredInModuleLoader = true; + } + if (!registeredInModuleLoader) { + var OldCookies = window.Cookies; + var api = window.Cookies = factory(); + api.noConflict = function () { + window.Cookies = OldCookies; + return api; + }; + } +}(function () { + function extend () { + var i = 0; + var result = {}; + for (; i < arguments.length; i++) { + var attributes = arguments[ i ]; + for (var key in attributes) { + result[key] = attributes[key]; + } + } + return result; + } + + function init (converter) { + function api (key, value, attributes) { + var result; + if (typeof document === 'undefined') { + return; + } + + // Write + + if (arguments.length > 1) { + attributes = extend({ + path: '/' + }, api.defaults, attributes); + + if (typeof attributes.expires === 'number') { + var expires = new Date(); + expires.setMilliseconds(expires.getMilliseconds() + attributes.expires * 864e+5); + attributes.expires = expires; + } + + // We're using "expires" because "max-age" is not supported by IE + attributes.expires = attributes.expires ? attributes.expires.toUTCString() : ''; + + try { + result = JSON.stringify(value); + if (/^[\{\[]/.test(result)) { + value = result; + } + } catch (e) {} + + if (!converter.write) { + value = encodeURIComponent(String(value)) + .replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent); + } else { + value = converter.write(value, key); + } + + key = encodeURIComponent(String(key)); + key = key.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent); + key = key.replace(/[\(\)]/g, escape); + + var stringifiedAttributes = ''; + + for (var attributeName in attributes) { + if (!attributes[attributeName]) { + continue; + } + stringifiedAttributes += '; ' + attributeName; + if (attributes[attributeName] === true) { + continue; + } + stringifiedAttributes += '=' + attributes[attributeName]; + } + return (document.cookie = key + '=' + value + stringifiedAttributes); + } + + // Read + + if (!key) { + result = {}; + } + + // To prevent the for loop in the first place assign an empty array + // in case there are no cookies at all. Also prevents odd result when + // calling "get()" + var cookies = document.cookie ? document.cookie.split('; ') : []; + var rdecode = /(%[0-9A-Z]{2})+/g; + var i = 0; + + for (; i < cookies.length; i++) { + var parts = cookies[i].split('='); + var cookie = parts.slice(1).join('='); + + if (!this.json && cookie.charAt(0) === '"') { + cookie = cookie.slice(1, -1); + } + + try { + var name = parts[0].replace(rdecode, decodeURIComponent); + cookie = converter.read ? + converter.read(cookie, name) : converter(cookie, name) || + cookie.replace(rdecode, decodeURIComponent); + + if (this.json) { + try { + cookie = JSON.parse(cookie); + } catch (e) {} + } + + if (key === name) { + result = cookie; + break; + } + + if (!key) { + result[name] = cookie; + } + } catch (e) {} + } + + return result; + } + + api.set = api; + api.get = function (key) { + return api.call(api, key); + }; + api.getJSON = function () { + return api.apply({ + json: true + }, [].slice.call(arguments)); + }; + api.defaults = {}; + + api.remove = function (key, attributes) { + api(key, '', extend(attributes, { + expires: -1 + })); + }; + + api.withConverter = init; + + return api; + } + + return init(function () {}); +})); diff --git a/static/js/subreddit.js b/static/js/subreddit.js index 3918c74..e2bb184 100644 --- a/static/js/subreddit.js +++ b/static/js/subreddit.js @@ -1 +1,224 @@ "use strict"; + +var app = (function(){ +return { + loadPage: function() { + Status.loading("Loading subreddit..."); + Vars.loadTime(); + Vars.loadPage(); + + if(Vars.isAll) { + document.title = 'all subreddits'; + } else { + document.title = Reddit.subreddit; + } + + var timeDifference = Time.difference(Time.toUTC(Vars.getTime())); + SubredditHTML.createInfo(Reddit.subreddit, Vars.getTime()); + + Reddit.fetchToken() + .then(function(){ + return fetch(ElasticSearch.subreddit(Reddit.subreddit, timeDifference, Vars.getPage())) + .catch(function(error){ + return Promise.reject("Could not get removed posts"); + }); + }) + .then(function(response){ + if(response.ok) { + return response; + } else { + return Promise.reject("Could not get removed posts"); + } + }) + .then(Fetch2.json) + .then(function(json){ + var sourceArray = json.hits.hits; + var pageNr = (Vars.getPage() - 1) * 25 + 1; + for(var i = 0, len = sourceArray.length; i < len; i++) { + SubredditHTML.createThread(sourceArray[i]._source, pageNr+i); + } + + SubredditHTML.createPagination(json.hits.total); + Status.success(); + }) + .catch(function(error) { + if(_.includes(_.toLower(error), "error")) { + Status.error(error); + } else { + Status.error("Error: "+error); + } + }); + } +}; +})(); + +var Vars = (function(){ + var time; + var page; + +return { + isAll: _.toLower(Reddit.subreddit) === 'all', + loadTime: function(){ + var tmpTime = _.defaultTo(GetVars.get("t"), Cookies.get("t")); + + if(Vars.isAll) { + time = _.defaultTo(tmpTime, "12hour"); + } else { + time = _.defaultTo(tmpTime, "day"); + } + }, + loadPage: function() { + var tmpPage = _.defaultTo(GetVars.get("page"), "1"); + + if(tmpPage === "") { + page = 1; + } else { + page = _.parseInt(tmpPage); + } + }, + setTime: function(newTime) { + time = newTime; + }, + setPage: function(newPage) { + page = newPage; + }, + getTime: function(){ + return time; + }, + getPage: function(){ + return page; + } +}; +})(); + + +var ElasticSearch = (function(){ +return { + subreddit: function(subreddit, time, page){ + var condition = '[{"term":{"subreddit":"'+_.toLower(subreddit)+'"}},'+ + '{"range":{"created_utc":{"gt":'+time+'}}}]'; + + if(Vars.isAll) { + condition = '{"range":{"created_utc":{"gt":'+time+'}}}'; + } + + return URLs.elasticThreads+'{'+ + '"query":{'+ + '"bool":{'+ + '"must":'+condition+ + '}'+ + '},'+ + '"_source":["author","url","subreddit","link_flair_text","score","title","created_utc","selftext","num_comments","domain","permalink","id","thumbnail","thumbnail_height","thumbnail_width"],'+ + '"sort":[{"score":"desc"}],'+ + '"from":'+(page-1)*25+','+ + '"size":25}'; + } +} +})(); + +var SubredditHTML = (function(){ + var mainDiv = document.getElementById("main"); +return { + createThread: function(thread, postRank) { + var threadDiv = document.createElement("div"); + threadDiv.className = "thread"; + var threadLink = thread.url; + + if(_.has(thread, 'selftext')) { + if(thread.selftext !== "") { + threadLink = thread.permalink; + } + } + var defaultThumbnails = ["self", "default", "image", "nsfw"]; + var thumbnail = ''; + } else { + var thumbnailWidth = _.defaultTo(thread.thumbnail_width, 140); + var thumbnailHeight = _.defaultTo(thread.thumbnail_height, 140); + + thumbnail += '">'; + } + + threadDiv.innerHTML = ' \ + '+postRank+' \ +
\ +
\ +
'+Format.prettyScore(thread.score)+'
\ +
\ +
'+ + thumbnail+ + '
\ + '+(! _.isNil(thread.link_flair_text) ? ''+thread.link_flair_text+'' : '') + + ''+thread.title+' \ + ('+thread.domain+') \ +
\ + submitted '+Format.prettyDate(thread.created_utc)+' by \ + '+thread.author+' '+ + ((_.toLower(Reddit.subreddit) === 'all') ? 'to /r/'+thread.subreddit+'':'')+ + '
\ +
\ + '+thread.num_comments+' comments \ + reddit \ +
\ +
\ + '; + mainDiv.appendChild(threadDiv); + }, + + createInfo: function(subreddit, time) { + var infoDiv = document.createElement("div"); + infoDiv.className = "subreddit-info"; + infoDiv.innerHTML = 'top post of /r/'+subreddit+' from:'; + + + var values = ["hour", "12hour", "day", "week", "month", "6month", "year", "all"]; + var display = ["past hour", "past 12 hours", "past day", "past week", "past month", "past 6 months", "past year", "all time"]; + var options = ""; + + for(var i = 0, len = values.length; i < len; i++) { + options += ''; + } + + var select = document.createElement("select"); + select.innerHTML = options; + select.addEventListener("change", function(event) { + Cookies.set('t', select.value, { expires: 365 }); + document.location.href = document.location.href.split("?")[0] + "?t=" + select.value; + }); + infoDiv.appendChild(select); + mainDiv.appendChild(infoDiv); + }, + + createPagination: function(totalPosts) { + var pagination = document.createElement("div"); + pagination.id = "pagination"; + + var start = Math.max(Vars.getPage()-3, 1); + var end = Math.min(start + 9, Math.ceil(totalPosts/25)); + var links = "Page: "; + var hrefBase = document.location.href.split("?")[0] + "?t=" + Vars.getTime() + "&page="; + + if(start > 1) { + links += '1 ... '; + } + + for(var i = start; i <= end; i++) { + if(Vars.getPage() === i) { + links += ""+i+""; + } else { + links += ''+i+''; + } + } + + pagination.innerHTML = links; + mainDiv.appendChild(pagination); + } +}; +})(); + + +if(isSupported) { + app.loadPage(); +} \ No newline at end of file diff --git a/static/js/thread.js b/static/js/thread.js index 2a10e43..1fcd53c 100644 --- a/static/js/thread.js +++ b/static/js/thread.js @@ -69,7 +69,7 @@ return { Status.success(); }) .catch(function(error) { - if(_.includes(_.lowerCase(error), "error")) { + if(_.includes(_.toLower(error), "error")) { Status.error(error); } else { Status.error("Error: "+error); @@ -288,34 +288,43 @@ var ThreadHTML = (function(){ var thread = data[0].data.children[0].data; Comments.setTotalComments(thread.num_comments); document.title = thread.title+" : "+thread.subreddit; + + var defaultThumbnails = ["self", "default", "image", "nsfw"]; + var thumbnail = ''; + } else { + thumbnail += '">'; + } var threadDiv = document.createElement("div"); + threadDiv.className = "thread"; threadDiv.innerHTML = ' \ -
\ -
\ -
\ -
'+Format.prettyScore(thread.score)+'
\ -
\ -
\ -
\ -
\ - '+(thread.link_flair_text !== null ? ''+thread.link_flair_text+'' : '') + - ''+thread.title+' \ - ('+thread.domain+') \ -
\ - submitted '+Format.prettyDate(thread.created_utc)+' by \ - '+thread.author+' to \ - /r/'+thread.subreddit+' \ +
\ +
\ +
'+Format.prettyScore(thread.score)+'
\ +
\ +
'+ + thumbnail+ + '
\ + '+(thread.link_flair_text !== null ? ''+thread.link_flair_text+'' : '') + + ''+thread.title+' \ + ('+thread.domain+') \ +
\ + submitted '+Format.prettyDate(thread.created_utc)+' by \ + '+thread.author+' to \ + /r/'+thread.subreddit+' \ +
' + + (thread.selftext !== '' ? '
'+Format.parse(thread.selftext)+'
':'') + + '
\ + '+thread.num_comments+' comments \ + reddit \
' + - (thread.selftext !== '' ? '
'+Format.parse(thread.selftext)+'
':'') + - '' + - (thread.media !== null ? HTML.parse(thread.media_embed.content) : '') + - (_.includes(imageHosts, thread.domain) && _.has(thread, "preview") ? '' : '') + - '
\ -
\ + (thread.media !== null ? HTML.parse(thread.media_embed.content) : '') + + (_.includes(imageHosts, thread.domain) && _.has(thread, "preview") ? '' : '') + + '
\ '; mainDiv.appendChild(threadDiv); return data; @@ -382,8 +391,8 @@ var ThreadHTML = (function(){ commentDiv.className = "comment " + commentCss; commentDiv.innerHTML = ' \
\ - [–] \ - '+comment.author+(isDeleted ? " (deleted by user)" : "")+' \ + [–] \ + '+comment.author+(isDeleted ? " (deleted by user)" : "")+' \ '+Format.prettyScore(comment.score)+' point'+((comment.score == 1) ? '': 's')+' \ '+Format.prettyDate(comment.created_utc)+' \
\ diff --git a/subreddit.html b/subreddit.html index 14c1961..a50008b 100644 --- a/subreddit.html +++ b/subreddit.html @@ -1,29 +1,33 @@ - - Removeddit - - - - - - - - - - -
- - - - - - - + + Removeddit + + + + + + + + +
+ +
+

+
+
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/thread.html b/thread.html index 6df561e..efc0b48 100644 --- a/thread.html +++ b/thread.html @@ -1,30 +1,32 @@ - - Removeddit - - - - - - - - - - -
- - - - - - - - - + + Removeddit + + + + + + + + +
+ +
+

+
+
+
+
+ + + + + + + + + \ No newline at end of file