prehistoric-systems/removeddit
1
0
Fork 0
mirror of https://github.com/gurnec/removeddit.git synced 2026-03-11 08:54:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Can now display subreddits! Also started using sass and pug

Browse source
This commit is contained in:
Jesper Wrang 2017-11-11 23:56:21 +01:00
parent 74edeb1c7c
commit 741f451f8e
25 changed files with 1389 additions and 412 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored
View file

@ -1,2 +1,4 @@
.secret
.vscode/settings.json
.sass-cache/
*.css.map

44
about.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<title>Removeddit</title>
<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">
</head>
<body>
<header>
<div id="header">
<h1><a href="/">Removeddit</a></h1>
<nav><a href="/r/all">subreddit</a><a href="/r/bestof/comments/7c8jof/">thread</a><a href="/search/">search</a><a href="/about/">about</a></nav>
</div>
</header>
<div id="main">
<div id="main-box">
<h2 class="about">About</h2>
<p>Display <b class="removed" title="Removed by mods">removed</b> (by mods) and <b class="deleted" title="Deleted by users">deleted</b> (by users) comments/threads from Reddit.</p>
<p><b>Usage</b>: Drag this bookmarklet <a class="bookmarklet" href="javascript: document.location = document.URL.replace('reddit.com','removeddit.com');">Removeddit</a>
to your bookmark bar and use it to get from reddit to removeddit.<br><br>Alternatively you can manually replace the <i>reddit</i> in the URL to <i>removeddit</i>.<br>E.g. <a href="/r/TwoXChromosomes/comments/6z1hch/">https://www.removeddit.com/r/TwoXChromosomes/comments/6z1hch/</a>
</p>
<p>Created by <a href="https://github.com/JubbeArt/">Jesper Wrang</a> and uses <a href="https://pushshift.io/">Jason Baumgartner</a> service for getting removed comments.</p>
<h2 class="todo">TODO</h2>
<ul>
<li>Collapsing comments</li>
<li>Get removed selftext of thread</li>
<li>Subreddits!</li>
<li>Maybe for specific users </li>
</ul>
<h2 class="contact">Links/Contact</h2>
<p style="margin-bottom:8px;">For feedback and bug reports:</p>
<ul>
<li>email: removeddit (at) gmail.com</li>
<li>reddit: <a href="https://www.reddit.com/user/Jubbeart/">/u/JubbeArt</a></li>
</ul>
<p><a href="https://github.com/JubbeArt/removeddit">Code on Github.</a></p>
</div>
</div>
</body>
</html>

5
compile.sh Executable file
View file

@ -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

55
index.html
View file

@ -1,55 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Removeddit - Display removed and deleted comments from Reddit</title>
<meta charset="utf-8">
<meta type="description" content="Display removed and deleted comments from Reddit">
<meta type="author" content="Jesper Wrang">
<meta name="google-site-verification" content="Hb7-KTi33kHkzQwP9_7s5DxecMN2xFctAm3e21fu4R0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/static/css/style.css" rel="stylesheet">
<link rel="shotcut icon" href="/static/images/favicon.ico">
</head>
<body>
<header id="header">
<a href="/" id="header-title-link"><h1 id="header-title">Removeddit</h1></a>
</header>
<div id="main">
<div id="main-box" class="frontpage-box">
<h2 style="color:#CA302C; margin-top:5px; margin-bottom: 10px;">About</h2>
<p>
Display <span title="Removed by mods" style="font-weight:bold; color:#ca302c;">removed</span> and <span title="Deleted by users" style="font-weight:bold; color:#00007D;">deleted</span> comments from Reddit.
</p>
<p>
<b>Usage</b>: Drag this bookmarklet <a class="bookmarklet" href="javascript: document.location = document.URL.replace('reddit.com','removeddit.com');">Removeddit</a> to your bookmark bar and use it to get from reddit to removeddit.
<br><br>
Alternatively you can manually replace the <i>reddit</i> in the URL to <i>removeddit</i>.
<br>E.g.
<a href="/r/TwoXChromosomes/comments/6z1hch/">
https://www.removeddit.com/r/TwoXChromosomes/comments/6z1hch/
</a>
</p>
<p>
Created by <a href="https://github.com/JubbeArt/">Jesper Wrang</a> and uses <a href="https://pushshift.io/">Jason Baumgartner</a> service for getting removed comments.
</p>
<h2 style="color:#239F2B; margin-bottom: 10px;">TODO</h2>
<ul style="margin: 0">
<li>Collapsing comments</li>
<li>Get removed selftext of thread</li>
<li>Subreddits!</li>
<li>Maybe for specific users</li>
</ul>
<h2 style="color: #1B767A; margin-bottom: 10px;">Links/Contact</h2>
<p style="margin-bottom:0">For feedback and bug reports:</p>
<ul style="margin-top: 5px;">
<li>email: removeddit (at) gmail.com</li>
<li>reddit: <a href="https://www.reddit.com/user/Jubbeart/">/u/JubbeArt</a></li>
</ul>
<p>
<a href="https://github.com/JubbeArt/removeddit">Code on Github.</a>
</p>
</div>
</div>
</body>
</html>

46
pug/about.pug Normal file
View file

@ -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.

38
pug/base.pug Normal file
View file

@ -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')

4
pug/search.pug Normal file
View file

@ -0,0 +1,4 @@
extends base.pug
block main
h1 Comming soon

9
pug/subreddit.pug Normal file
View file

@ -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')

8
pug/thread.pug Normal file
View file

@ -0,0 +1,8 @@
extends base.pug
block vars
- var status = true
- var script = true
append script
script(src='/static/js/thread.js')

38
sass/about.sass Normal file
View file

@ -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

52
sass/comment.sass Normal file
View file

@ -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

40
sass/header.sass Normal file
View file

@ -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

34
sass/main.sass Normal file
View file

@ -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

131
sass/post.sass Normal file
View file

@ -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

0
sass/search.sass Normal file
View file

29
sass/subreddit.sass Normal file
View file

@ -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

13
sass/thread.sass Normal file
View file

@ -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

23
search.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<title>Removeddit</title>
<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">
</head>
<body>
<header>
<div id="header">
<h1><a href="/">Removeddit</a></h1>
<nav><a href="/r/all">subreddit</a><a href="/r/bestof/comments/7c8jof/">thread</a><a href="/search/">search</a><a href="/about/">about</a></nav>
</div>
</header>
<div id="main">
<h1>Comming soon</h1>
</div>
</body>
</html>

564
static/css/style.css
View file

@ -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;
}
#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;
}

101
static/js/functions.js
View file

@ -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;
}
}})();

165
static/js/libraries/js.cookie.js Normal file
View file

@ -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 () {});
}));

223
static/js/subreddit.js
View file

@ -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 = '<a href="'+threadLink+'"';
if(_.includes(defaultThumbnails, thread.thumbnail)) {
thumbnail += ' class="thumbnail thumbnail-'+thread.thumbnail+'"></a>';
} else {
var thumbnailWidth = _.defaultTo(thread.thumbnail_width, 140);
var thumbnailHeight = _.defaultTo(thread.thumbnail_height, 140);
thumbnail += '"><img class="thumbnail" src="'+thread.thumbnail+'" width="'+(thumbnailWidth*0.5)+'" height="'+(thumbnailHeight*0.5)+'"></a>';
}
threadDiv.innerHTML = ' \
<span class="post-rank">'+postRank+'</span> \
<div class="thread-score-box"> \
<div class="vote upvote"></div> \
<div class="thread-score">'+Format.prettyScore(thread.score)+'</div> \
<div class="vote downvote"></div> \
</div>'+
thumbnail+
'<div class="thread-content"> \
'+(! _.isNil(thread.link_flair_text) ? '<span class="link-flair">'+thread.link_flair_text+'</span>' : '') +
'<a class="thread-title" href="'+threadLink+'">'+thread.title+'</a> \
<span class="domain">('+thread.domain+')</span> \
<div class="thread-info"> \
submitted <span class="thread-time">'+Format.prettyDate(thread.created_utc)+'</span> by \
<a class="thread-author author" href="https://www.reddit.com/user/'+thread.author+'">'+thread.author+'</a> '+
((_.toLower(Reddit.subreddit) === 'all') ? 'to <a class="subreddit-link author" href="/r/'+thread.subreddit+'">/r/'+thread.subreddit+'</a>':'')+
'</div> \
<div class="total-comments"> \
<a class="grey-link" href="'+thread.permalink+'"><b>'+thread.num_comments+' comments</b></a> \
<a class="grey-link" href="https://www.reddit.com'+thread.permalink+'"><b>reddit</b></a> \
</div> \
</div> \
';
mainDiv.appendChild(threadDiv);
},
createInfo: function(subreddit, time) {
var infoDiv = document.createElement("div");
infoDiv.className = "subreddit-info";
infoDiv.innerHTML = 'top post of <a href="https://www.reddit.com/r/'+subreddit+'">/r/'+subreddit+'</a> 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 += '<option value="'+values[i]+'"' + ((values[i] === time) ? " selected" : '')+'>'+display[i]+'</option>';
}
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 += '<a href="'+hrefBase+1+'">1</a> ... ';
}
for(var i = start; i <= end; i++) {
if(Vars.getPage() === i) {
links += "<span>"+i+"</span>";
} else {
links += '<a href="'+hrefBase+i+'">'+i+'</a>';
}
}
pagination.innerHTML = links;
mainDiv.appendChild(pagination);
}
};
})();
if(isSupported) {
app.loadPage();
}

63
static/js/thread.js
View file

@ -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 = '<a href="'+thread.permalink+'" class="thumbnail';
if(thread.thumbnail === "") {
thumbnail = "";
} else if(_.includes(defaultThumbnails, thread.thumbnail)) {
thumbnail += ' thumbnail-'+thread.thumbnail+'"></a>';
} else {
thumbnail += '"><img src="'+thread.thumbnail+'" width="'+(thread.thumbnail_width * 0.5)+'" height="'+(thread.thumbnail_height * 0.5)+'"></a>';
}
var threadDiv = document.createElement("div");
threadDiv.className = "thread";
threadDiv.innerHTML = ' \
<div id="thread"> \
<div id="thread-score-box"> \
<div class="vote upvote"></div> \
<div id="thread-score">'+Format.prettyScore(thread.score)+'</div> \
<div class="vote downvote"></div> \
</div> \
<div id="thumbnail"></div> \
<div id="thread-content"> \
'+(thread.link_flair_text !== null ? '<span class="link-flair">'+thread.link_flair_text+'</span>' : '') +
'<a id="thread-title" href="'+thread.url+'">'+thread.title+'</a> \
<span id="domain">('+thread.domain+')</span> \
<div id="thread-info"> \
submitted <span id="thread-time">'+Format.prettyDate(thread.created_utc)+'</span> by \
<a id="thread-author" class="user-link" href="https://www.reddit.com/user/'+thread.author+'">'+thread.author+'</a> to \
<a id="subreddit-link" class="user-link" href="https://reddit.com/r/'+thread.subreddit+'">/r/'+thread.subreddit+'</a> \
<div class="thread-score-box"> \
<div class="vote upvote"></div> \
<div class="thread-score">'+Format.prettyScore(thread.score)+'</div> \
<div class="vote downvote"></div> \
</div>'+
thumbnail+
'<div class="thread-content"> \
'+(thread.link_flair_text !== null ? '<span class="link-flair">'+thread.link_flair_text+'</span>' : '') +
'<a class="thread-title" href="'+thread.url+'">'+thread.title+'</a> \
<span class="domain">('+thread.domain+')</span> \
<div class="thread-info"> \
submitted <span class="thread-time">'+Format.prettyDate(thread.created_utc)+'</span> by \
<a class="thread-author author" href="https://www.reddit.com/user/'+thread.author+'">'+thread.author+'</a> to \
<a class="subreddit-link author" href="/r/'+thread.subreddit+'">/r/'+thread.subreddit+'</a> \
</div>' +
(thread.selftext !== '' ? '<div class="thread-selftext user-text">'+Format.parse(thread.selftext)+'</div>':'') +
'<div class="total-comments"> \
<a class="grey-link" href="'+thread.permalink+'"><b>'+thread.num_comments+' comments</b></a> \
<a class="grey-link" href="https://www.reddit.com'+thread.permalink+'"><b>reddit</b></a> \
</div>' +
(thread.selftext !== '' ? '<div id="thread-selftext" class="user-text">'+Format.parse(thread.selftext)+'</div>':'') +
'<div id="total-comments"> \
<a class="grey-link" href="'+thread.permalink+'"><b>'+thread.num_comments+' comments</b></a> \
<a class="grey-link" href="https://www.reddit.com'+thread.permalink+'"><b>reddit</b></a> \
</div>' +
(thread.media !== null ? HTML.parse(thread.media_embed.content) : '') +
(_.includes(imageHosts, thread.domain) && _.has(thread, "preview") ? '<a href="'+thread.url+'"><img id="thread-image" src="'+thread.preview.images[0].source.url+'"></a>' : '') +
'</div> \
</div> \
(thread.media !== null ? HTML.parse(thread.media_embed.content) : '') +
(_.includes(imageHosts, thread.domain) && _.has(thread, "preview") ? '<a href="'+thread.url+'"><img id="thread-image" src="'+thread.preview.images[0].source.url+'"></a>' : '') +
'</div> \
';
mainDiv.appendChild(threadDiv);
return data;
@ -382,8 +391,8 @@ var ThreadHTML = (function(){
commentDiv.className = "comment " + commentCss;
commentDiv.innerHTML = ' \
<div class="comment-head"> \
<a href="javascript:void(0)" class="user-link">[–]</a> \
<a href="https://www.reddit.com/user/'+comment.author+'" class="user-link comment-author">'+comment.author+(isDeleted ? " (deleted by user)" : "")+'</a> \
<a href="javascript:void(0)" class="author">[–]</a> \
<a href="https://www.reddit.com/user/'+comment.author+'" class="author comment-author">'+comment.author+(isDeleted ? " (deleted by user)" : "")+'</a> \
<span class="comment-score">'+Format.prettyScore(comment.score)+' point'+((comment.score == 1) ? '': 's')+'</span> \
<span class="comment-time">'+Format.prettyDate(comment.created_utc)+'</span> \
</div> \

56
subreddit.html
View file

@ -1,29 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<title>Removeddit</title>
<meta charset="utf-8">
<meta type="description" content="Display removed and deleted comments from Reddit">
<meta type="author" content="Jesper Wrang">
<meta name="google-site-verification" content="Hb7-KTi33kHkzQwP9_7s5DxecMN2xFctAm3e21fu4R0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/static/css/style.css" rel="stylesheet">
<link rel="shotcut icon" href="/static/images/favicon.ico">
</head>
<body>
<header id="header">
<a href="/" id="header-title-link"><h1 id="header-title">Removeddit</h1></a>
<div id="loading">
<p id="loading-text"></p>
<img id="loading-image" src="/static/images/loading.gif"></img>
</div>
</header>
<div id="main"></div>
<script src="/static/js/libraries/lodash.min.js"></script>
<script src="/static/js/polyfills/promise.min.js"></script>
<script src="/static/js/polyfills/fetch.js"></script>
<script src="/static/js/id.js"></script>
<script src="/static/js/functions.js"></script>
<script src="/static/js/subreddit.js"></script>
</body>
<head>
<title>Removeddit</title>
<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">
</head>
<body>
<header>
<div id="header">
<h1><a href="/">Removeddit</a></h1>
<nav><a href="/r/all">subreddit</a><a href="/r/bestof/comments/7c8jof/">thread</a><a href="/search/">search</a><a href="/about/">about</a></nav>
</div>
<div id="status">
<p id="status-text"></p><img id="status-image" src="/static/images/loading.gif">
</div>
</header>
<div id="main">
</div>
<script src="/static/js/libraries/snuownd.js"></script>
<script src="/static/js/libraries/lodash.min.js"></script>
<script src="/static/js/polyfills/promise.min.js"></script>
<script src="/static/js/polyfills/fetch.js"></script>
<script src="/static/js/id.js"></script>
<script src="/static/js/functions.js"></script>
<script src="/static/js/libraries/js.cookie.js"></script>
<script src="/static/js/subreddit.js"></script>
</body>
</html>

58
thread.html
View file

@ -1,30 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<title>Removeddit</title>
<meta charset="utf-8">
<meta type="description" content="Display removed and deleted comments from Reddit">
<meta type="author" content="Jesper Wrang">
<meta name="google-site-verification" content="Hb7-KTi33kHkzQwP9_7s5DxecMN2xFctAm3e21fu4R0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/static/css/style.css" rel="stylesheet">
<link rel="shotcut icon" href="/static/images/favicon.ico">
</head>
<body>
<header id="header">
<a href="/" id="header-title-link"><h1 id="header-title">Removeddit</h1></a>
<div id="loading">
<p id="loading-text"></p>
<img id="loading-image" src="/static/images/loading.gif"></img>
</div>
</header>
<div id="main"></div>
<script src="/static/js/libraries/snuownd.js"></script>
<script src="/static/js/libraries/lodash.min.js"></script>
<script src="/static/js/polyfills/promise.min.js"></script>
<script src="/static/js/polyfills/fetch.js"></script>
<script src="/static/js/id.js"></script>
<script src="/static/js/functions.js"></script>
<script src="/static/js/thread.js"></script>
</body>
</html>
<head>
<title>Removeddit</title>
<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">
</head>
<body>
<header>
<div id="header">
<h1><a href="/">Removeddit</a></h1>
<nav><a href="/r/all">subreddit</a><a href="/r/bestof/comments/7c8jof/">thread</a><a href="/search/">search</a><a href="/about/">about</a></nav>
</div>
<div id="status">
<p id="status-text"></p><img id="status-image" src="/static/images/loading.gif">
</div>
</header>
<div id="main">
</div>
<script src="/static/js/libraries/snuownd.js"></script>
<script src="/static/js/libraries/lodash.min.js"></script>
<script src="/static/js/polyfills/promise.min.js"></script>
<script src="/static/js/polyfills/fetch.js"></script>
<script src="/static/js/id.js"></script>
<script src="/static/js/functions.js"></script>
<script src="/static/js/thread.js"></script>
</body>
</html>