356 lines
No EOL
7.9 KiB
HTML
356 lines
No EOL
7.9 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()">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;
|
|
}
|
|
|
|
|
|
.submission .text
|
|
{
|
|
color: #aaa;
|
|
margin-left: 16px;
|
|
}
|
|
|
|
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/
|
|
*/
|
|
|
|
var CHECK_DELAY = 30 * 1000;
|
|
var CONTROL_PANEL = document.getElementById("control_panel");
|
|
CONTROL_PANEL.default_color = CONTROL_PANEL.style.backgroundColor;
|
|
var WORKSPACE = document.getElementById("workspace");
|
|
|
|
var id_cache = [];
|
|
var id_cache_size = 20;
|
|
|
|
var first_loop = true;
|
|
var unread_notification_count = 0;
|
|
var subreddit = "";
|
|
var check_timer = null;
|
|
|
|
var page_focused_cached;
|
|
|
|
|
|
var HTTPClient = function()
|
|
{
|
|
/* Thanks ttgagne http://stackoverflow.com/a/22076667 */
|
|
var asynchronous = true;
|
|
this.get = function(url, callback)
|
|
{
|
|
var request = new XMLHttpRequest();
|
|
request.onreadystatechange = function()
|
|
{
|
|
// console.log(request.readyState);
|
|
// console.log(request.status);
|
|
if (request.readyState == 4)
|
|
{
|
|
if (request.status == 200)
|
|
{
|
|
CONTROL_PANEL.style.backgroundColor = CONTROL_PANEL.default_color;
|
|
callback(request.responseText);
|
|
}
|
|
else
|
|
{
|
|
CONTROL_PANEL.style.backgroundColor = "#f00";
|
|
}
|
|
}
|
|
}
|
|
request.open("GET", url, asynchronous);
|
|
//request.withCredentials = true;
|
|
request.send(null);
|
|
}
|
|
}
|
|
|
|
function create_submission_div(submission)
|
|
{
|
|
var div = document.createElement("div");
|
|
div.className = "submission";
|
|
|
|
var 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";
|
|
|
|
var text = document.createElement("div");
|
|
text.className = "text";
|
|
var template = document.createElement("template");
|
|
var txt = document.createElement("textarea");
|
|
txt.innerHTML = unescape(submission["selftext_html"]);
|
|
template.innerHTML = txt.value;
|
|
text.appendChild(template.content);
|
|
|
|
var 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);
|
|
}
|
|
|
|
// var timestamp = document.createElement("span");
|
|
// var submission_time = new Date(submission["created_utc"])
|
|
// timestamp.innerHTML = "" + submission_time.getHours() + ":" + submission_time.getMinutes();
|
|
|
|
div.appendChild(anchor);
|
|
div.appendChild(text);
|
|
div.appendChild(delete_button);
|
|
return div;
|
|
}
|
|
|
|
function apply_to_page(response_json)
|
|
{
|
|
var j = JSON.parse(response_json);
|
|
var submissions = j["data"]["children"];
|
|
submissions.reverse(); // newest last
|
|
var new_items = 0;
|
|
for (var index = 0; index < submissions.length; index += 1)
|
|
{
|
|
var submission = submissions[index]["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()
|
|
{
|
|
console.log("checking");
|
|
if (subreddit == "")
|
|
{
|
|
console.log("no subreddit");
|
|
return;
|
|
}
|
|
var url = "https://api.reddit.com" + subreddit + "/new.json";
|
|
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()
|
|
{
|
|
var 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()
|
|
{
|
|
console.log("start");
|
|
first_loop = true;
|
|
clear_workspace();
|
|
var field = document.getElementById("subreddit_field");
|
|
var text = field.value;
|
|
text = text.replace("/u/", "/user/");
|
|
if (text.indexOf("/") == -1)
|
|
{
|
|
text = "/r/" + text;
|
|
}
|
|
subreddit = text;
|
|
var link = document.getElementById("browser_link");
|
|
var url = "https://reddit.com" + subreddit + "/new";
|
|
link.href = url;
|
|
link.innerHTML = url;
|
|
update_title();
|
|
check_forever();
|
|
}
|
|
|
|
function update_title()
|
|
{
|
|
var title = subreddit + "/new";
|
|
if (unread_notification_count > 0)
|
|
{
|
|
title = "(" + unread_notification_count + ") " + title;
|
|
}
|
|
document.title = title;
|
|
}
|
|
|
|
function visibility_property()
|
|
{
|
|
var prefixes = ["webkit","moz","ms","o"];
|
|
|
|
if ("hidden" in document)
|
|
{
|
|
return "hidden";
|
|
}
|
|
|
|
for (var i = 0; i < prefixes.length; i++)
|
|
{
|
|
hidden_attribute = prefixes[i] + "Hidden";
|
|
if ((hidden_attribute) in document)
|
|
return hidden_attribute;
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
|
|
page_focused_fresh();
|
|
|
|
var my_visibility_property = visibility_property();
|
|
if (my_visibility_property)
|
|
{
|
|
var my_event_name = my_visibility_property.replace(/[H|h]idden/,'') + 'visibilitychange';
|
|
document.addEventListener(my_event_name, on_focus_change);
|
|
}
|
|
|
|
var session = new HTTPClient();
|
|
</script> |