<!DOCTYPE html>
<html>
<!--
This page lets you see new posts as they are made in a subreddit.
Just type a subreddit's name into the box, and press Start.
Although the default behavior is to interpret the box's contents as a subreddit
name, you can actually insert something like "/u/goldensights/m/loband" to watch
https://reddit.com/u/goldensights/m/loband/new
-->
<head>
<title>/new</title>
<meta charset="UTF-8">
</head>
<body>
<div id="control_panel">
<input type="text" id="subreddit_field" placeholder="/r/learnpython" autofocus>
<button id="start_button" onclick="start_button()">Start</button>
<a id="browser_link"></a>
<button id="clear_button" onclick="clear_workspace()">Clear workspace</button>
</div>
<div id="workspace">
</div>
</body>
</html>
<style>
html
{
background-color: #1b1c18;
}
body
{
background-color: #272822;
margin-left: 10%;
margin-right: 10%;
padding: 5px;
}
#control_panel
{
background-color: #284142;
padding: 5px;
}
#control_panel.error
{
background-color: #f00;
}
.submission .text
{
color: #aaa;
margin-left: 16px;
}
.submission pre
{
overflow-x: auto;
}
a
{
color: #ddd;
text-decoration: none;
font-family: sans-serif;
}
a:hover
{
text-decoration: underline;
}
.delete_button
{
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: 5%;
border: 0px;
background-color: #b53030;
}
.submission
{
position: relative;
padding: 10px;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 6%; /*for the delete button*/
margin: 10px;
margin-top: 20px;
margin-bottom: 20px;
box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.5);
background-color: #284142;
}
</style>
<script type="text/javascript">
/*
Thanks Joe Marini for the tab focus code
http://www.html5rocks.com/en/tutorials/pagevisibility/intro/
*/
const CHECK_DELAY = 30 * 1000;
const CONTROL_PANEL = document.getElementById("control_panel");
const WORKSPACE = document.getElementById("workspace");
const ID_CACHE = [];
const ID_CACHE_SIZE = 20;
let FIRST_LOOP = true;
let UNREAD_NOTIFICATION_COUNT = 0;
let SUBREDDIT = "";
let CHECK_TIMER = null;
let PAGE_FOCUSED_CACHED;
function bind_box_to_button(box, button, ctrl_enter)
{
// Thanks Yaroslav Yakovlev
// http://stackoverflow.com/a/9343095
const bound_box_hook = function(event)
{
if (event.key !== "Enter")
{return;}
ctrl_success = !ctrl_enter || (event.ctrlKey)
if (! ctrl_success)
{return;}
button.click();
}
box.addEventListener("keyup", bound_box_hook);
}
bind_box_to_button(document.getElementById("subreddit_field"), document.getElementById("start_button"));
const HTTPClient = function()
{
/* Thanks ttgagne http://stackoverflow.com/a/22076667 */
const asynchronous = true;
this.get = function(url, callback)
{
const request = new XMLHttpRequest();
request.onreadystatechange = function()
{
// console.log(request.readyState);
// console.log(request.status);
if (request.readyState == 4)
{
if (request.status == 200)
{
CONTROL_PANEL.classList.remove("error");
callback(request.responseText);
}
else
{
CONTROL_PANEL.classList.add("error");
}
}
}
request.open("GET", url, asynchronous);
//request.withCredentials = true;
request.send(null);
}
}
const session = new HTTPClient();
function create_submission_div(submission)
{
const div = document.createElement("div");
div.className = "submission";
const anchor = document.createElement("a");
anchor.innerHTML = "/r/" + submission["subreddit"] + " - " + submission["title"];
anchor.href = "https://reddit.com/r/" + submission["subreddit"] + "/comments/" + submission["id"];
anchor.target = "_blank";
const text = document.createElement("div");
text.className = "text";
const template = document.createElement("template");
const txt = document.createElement("textarea");
txt.innerHTML = unescape(submission["selftext_html"]);
template.innerHTML = txt.value;
text.appendChild(template.content);
const delete_button = document.createElement("button");
delete_button.className = "delete_button";
delete_button.div = div;
delete_button.innerHTML = "X";
delete_button.onclick = function()
{
this.div.parentElement.removeChild(this.div);
}
div.appendChild(anchor);
div.appendChild(text);
div.appendChild(delete_button);
return div;
}
function apply_to_page(response_json)
{
const j = JSON.parse(response_json);
const submissions = j["data"]["children"];
submissions.reverse(); // newest last
let new_items = 0;
for (let submission of submissions)
{
submission = submission["data"];
if (ID_CACHE.includes(submission["id"]))
{
continue;
}
ID_CACHE.push(submission["id"]);
if (FIRST_LOOP)
{
continue;
}
new_items += 1;
div = create_submission_div(submission);
WORKSPACE.insertBefore(div, WORKSPACE.firstChild);
// WORKSPACE.appendChild(div);
}
console.log("+" + new_items);
if (new_items > 0 && !PAGE_FOCUSED_CACHED)
{
UNREAD_NOTIFICATION_COUNT += new_items;
update_title();
}
while (ID_CACHE.length < ID_CACHE_SIZE)
{
ID_CACHE.shift();
}
FIRST_LOOP = false;
}
function check_forever()
{
clearTimeout(CHECK_TIMER);
check_once();
CHECK_TIMER = setTimeout(check_forever, CHECK_DELAY);
}
function check_once()
{
if (SUBREDDIT == "")
{
console.log("no subreddit");
return;
}
const url = "https://api.reddit.com" + SUBREDDIT + "/new.json";
console.log(`Checking ${url}`);
session.get(url, apply_to_page);
}
function clear_workspace()
{
while (WORKSPACE.children.length > 0)
{
WORKSPACE.removeChild(WORKSPACE.firstChild);
}
}
function on_focus_change()
{
if (page_focused_fresh())
{
UNREAD_NOTIFICATION_COUNT = 0;
update_title();
}
}
function page_focused_fresh()
{
const property = visibility_property();
if (!property)
{
PAGE_FOCUSED_CACHED = true;
return true;
}
else
{
PAGE_FOCUSED_CACHED = !document[property];
}
return PAGE_FOCUSED_CACHED;
}
function sort_submission_comparator(submission_1, submission_2)
{
created_1 = submission_1["created_utc"];
created_2 = submission_2["created_utc"];
if (created_1 < created_2)
{return -1;}
if (created_1 > created_2)
{return 1;}
return 0;
}
function start_button()
{
const subreddit = document.getElementById("subreddit_field").value.trim();
if (subreddit !== "")
{
return start(subreddit);
}
}
function start(subreddit)
{
console.log("start");
FIRST_LOOP = true;
clear_workspace();
subreddit = subreddit.replace("/u/", "/user/");
if (subreddit.indexOf("/") == -1)
{
subreddit = "/r/" + subreddit;
}
SUBREDDIT = subreddit;
const link = document.getElementById("browser_link");
const url = "https://reddit.com" + SUBREDDIT + "/new";
link.href = url;
link.innerHTML = url;
update_title();
check_forever();
}
function update_title()
{
let title = SUBREDDIT + "/new";
if (UNREAD_NOTIFICATION_COUNT > 0)
{
title = "(" + UNREAD_NOTIFICATION_COUNT + ") " + title;
}
document.title = title;
}
function visibility_property()
{
const prefixes = ["webkit", "moz", "ms", "o"];
if ("hidden" in document)
{
return "hidden";
}
for (const prefix of prefixes)
{
const hidden_attribute = prefix + "Hidden";
if (hidden_attribute in document)
{
return hidden_attribute;
}
}
return null;
}
page_focused_fresh();
const my_visibility_property = visibility_property();
if (my_visibility_property)
{
const my_event_name = my_visibility_property.replace(/[H|h]idden/,'') + 'visibilitychange';
document.addEventListener(my_event_name, on_focus_change);
}
function on_pageload()
{
const url_params = new URLSearchParams(window.location.search);
const subreddit = (url_params.get('subreddit') || "").trim();
if (subreddit !== "")
{
start(subreddit);
}
}
document.addEventListener("DOMContentLoaded", on_pageload);
</script>