396 lines
8.6 KiB
HTML
396 lines
8.6 KiB
HTML
<!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> |