voussoir/else
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity
else/Javascript/reddit_live_new.html

396 lines
8.6 KiB
HTML
Raw Normal View History

else
2016-07-05 07:24:08 +00:00
<!DOCTYPE html>
<html>
else
2016-07-28 03:41:13 +00:00
<!--
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.
else
2016-07-05 07:24:08 +00:00
else
2016-07-28 03:41:13 +00:00
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
-->
else
2016-07-05 07:24:08 +00:00
<head>
<title>/new</title>
else
2016-07-28 03:41:13 +00:00
<meta charset="UTF-8">
else
2016-07-05 07:24:08 +00:00
</head>
<body>
<div id="control_panel">
else
2016-09-24 00:35:58 +00:00
<input type="text" id="subreddit_field" placeholder="/r/learnpython" autofocus>
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
<button id="start_button" onclick="start_button()">Start</button>
else
2016-07-05 07:24:08 +00:00
<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;
}
else
2016-07-10 04:38:49 +00:00
else
2016-07-05 07:24:08 +00:00
#control_panel
{
background-color: #284142;
padding: 5px;
}
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
#control_panel.error
{
background-color: #f00;
}
else
2016-07-10 04:38:49 +00:00
Show bodies of new posts directly in place.
2020-02-19 17:19:21 +00:00
.submission .text
{
color: #aaa;
margin-left: 16px;
}
Add overflow-x to submission pre.
2020-02-25 18:38:49 +00:00
.submission pre
{
overflow-x: auto;
}
Show bodies of new posts directly in place.
2020-02-19 17:19:21 +00:00
else
2016-07-05 07:24:08 +00:00
a
{
color: #ddd;
text-decoration: none;
font-family: sans-serif;
}
a:hover
{
text-decoration: underline;
}
else
2016-07-10 04:38:49 +00:00
.delete_button
{
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: 5%;
border: 0px;
background-color: #b53030;
}
else
2016-07-05 07:24:08 +00:00
.submission
{
else
2016-07-10 04:38:49 +00:00
position: relative;
else
2016-07-05 07:24:08 +00:00
padding: 10px;
padding-top: 20px;
padding-bottom: 20px;
else
2016-07-10 04:38:49 +00:00
padding-right: 6%; /*for the delete button*/
else
2016-07-05 07:24:08 +00:00
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/
*/
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
const CHECK_DELAY = 30 * 1000;
const CONTROL_PANEL = document.getElementById("control_panel");
const WORKSPACE = document.getElementById("workspace");
else
2016-07-05 07:24:08 +00:00
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
const ID_CACHE = [];
const ID_CACHE_SIZE = 20;
else
2016-07-10 04:38:49 +00:00
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
let FIRST_LOOP = true;
let UNREAD_NOTIFICATION_COUNT = 0;
let SUBREDDIT = "";
let CHECK_TIMER = null;
let PAGE_FOCUSED_CACHED;
else
2016-07-10 04:38:49 +00:00
Bind Enter to the start button.
2020-02-29 00:07:42 +00:00
function bind_box_to_button(box, button, ctrl_enter)
{
// Thanks Yaroslav Yakovlev
// http://stackoverflow.com/a/9343095
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
const bound_box_hook = function(event)
Bind Enter to the start button.
2020-02-29 00:07:42 +00:00
{
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"));
else
2016-07-10 04:38:49 +00:00
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
const HTTPClient = function()
else
2016-07-05 07:24:08 +00:00
{
/* Thanks ttgagne http://stackoverflow.com/a/22076667 */
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
const asynchronous = true;
else
2016-07-05 07:24:08 +00:00
this.get = function(url, callback)
{
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
const request = new XMLHttpRequest();
else
2016-07-05 07:24:08 +00:00
request.onreadystatechange = function()
else
2016-07-10 04:38:49 +00:00
{
// console.log(request.readyState);
// console.log(request.status);
if (request.readyState == 4)
else
2016-07-05 07:24:08 +00:00
{
else
2016-07-10 04:38:49 +00:00
if (request.status == 200)
{
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
CONTROL_PANEL.classList.remove("error");
else
2016-07-10 04:38:49 +00:00
callback(request.responseText);
}
else
{
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
CONTROL_PANEL.classList.add("error");
else
2016-07-10 04:38:49 +00:00
}
else
2016-07-05 07:24:08 +00:00
}
}
request.open("GET", url, asynchronous);
//request.withCredentials = true;
request.send(null);
}
}
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
const session = new HTTPClient();
else
2016-07-05 07:24:08 +00:00
Show bodies of new posts directly in place.
2020-02-19 17:19:21 +00:00
function create_submission_div(submission)
{
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
const div = document.createElement("div");
Show bodies of new posts directly in place.
2020-02-19 17:19:21 +00:00
div.className = "submission";
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
const anchor = document.createElement("a");
Show bodies of new posts directly in place.
2020-02-19 17:19:21 +00:00
anchor.innerHTML = "/r/" + submission["subreddit"] + " - " + submission["title"];
anchor.href = "https://reddit.com/r/" + submission["subreddit"] + "/comments/" + submission["id"];
anchor.target = "_blank";
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
const text = document.createElement("div");
Show bodies of new posts directly in place.
2020-02-19 17:19:21 +00:00
text.className = "text";
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
const template = document.createElement("template");
const txt = document.createElement("textarea");
Show bodies of new posts directly in place.
2020-02-19 17:19:21 +00:00
txt.innerHTML = unescape(submission["selftext_html"]);
template.innerHTML = txt.value;
text.appendChild(template.content);
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
const delete_button = document.createElement("button");
Show bodies of new posts directly in place.
2020-02-19 17:19:21 +00:00
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;
}
else
2016-07-10 04:38:49 +00:00
function apply_to_page(response_json)
else
2016-07-05 07:24:08 +00:00
{
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
const j = JSON.parse(response_json);
const submissions = j["data"]["children"];
else
2016-07-05 07:24:08 +00:00
submissions.reverse(); // newest last
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
let new_items = 0;
for (let submission of submissions)
else
2016-07-05 07:24:08 +00:00
{
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
submission = submission["data"];
if (ID_CACHE.includes(submission["id"]))
else
2016-07-05 07:24:08 +00:00
{
continue;
}
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
ID_CACHE.push(submission["id"]);
else
2016-07-05 07:24:08 +00:00
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
if (FIRST_LOOP)
else
2016-07-05 07:24:08 +00:00
{
continue;
}
new_items += 1;
Show bodies of new posts directly in place.
2020-02-19 17:19:21 +00:00
div = create_submission_div(submission);
WORKSPACE.insertBefore(div, WORKSPACE.firstChild);
// WORKSPACE.appendChild(div);
else
2016-07-05 07:24:08 +00:00
}
console.log("+" + new_items);
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
if (new_items > 0 && !PAGE_FOCUSED_CACHED)
else
2016-07-05 07:24:08 +00:00
{
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
UNREAD_NOTIFICATION_COUNT += new_items;
else
2016-07-05 07:24:08 +00:00
update_title();
}
else
2016-07-10 04:38:49 +00:00
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
while (ID_CACHE.length < ID_CACHE_SIZE)
else
2016-07-10 04:38:49 +00:00
{
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
ID_CACHE.shift();
else
2016-07-10 04:38:49 +00:00
}
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
FIRST_LOOP = false;
else
2016-07-05 07:24:08 +00:00
}
function check_forever()
{
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
clearTimeout(CHECK_TIMER);
else
2016-07-05 07:24:08 +00:00
check_once();
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
CHECK_TIMER = setTimeout(check_forever, CHECK_DELAY);
else
2016-07-05 07:24:08 +00:00
}
function check_once()
{
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
if (SUBREDDIT == "")
else
2016-07-05 07:24:08 +00:00
{
console.log("no subreddit");
return;
}
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
const url = "https://api.reddit.com" + SUBREDDIT + "/new.json";
console.log(`Checking ${url}`);
else
2016-07-05 07:24:08 +00:00
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())
{
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
UNREAD_NOTIFICATION_COUNT = 0;
else
2016-07-05 07:24:08 +00:00
update_title();
}
}
function page_focused_fresh()
{
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
const property = visibility_property();
else
2016-07-05 07:24:08 +00:00
if (!property)
{
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
PAGE_FOCUSED_CACHED = true;
else
2016-07-05 07:24:08 +00:00
return true;
}
else
{
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
PAGE_FOCUSED_CACHED = !document[property];
else
2016-07-05 07:24:08 +00:00
}
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
return PAGE_FOCUSED_CACHED;
else
2016-07-05 07:24:08 +00:00
}
else
2016-07-10 04:38:49 +00:00
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;
}
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
function start_button()
{
const subreddit = document.getElementById("subreddit_field").value.trim();
if (subreddit !== "")
{
return start(subreddit);
}
}
function start(subreddit)
else
2016-07-05 07:24:08 +00:00
{
console.log("start");
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
FIRST_LOOP = true;
else
2016-07-05 07:24:08 +00:00
clear_workspace();
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
subreddit = subreddit.replace("/u/", "/user/");
if (subreddit.indexOf("/") == -1)
else
2016-07-10 04:38:49 +00:00
{
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
subreddit = "/r/" + subreddit;
else
2016-07-10 04:38:49 +00:00
}
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
SUBREDDIT = subreddit;
const link = document.getElementById("browser_link");
const url = "https://reddit.com" + SUBREDDIT + "/new";
else
2016-07-05 07:24:08 +00:00
link.href = url;
link.innerHTML = url;
update_title();
check_forever();
}
function update_title()
{
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
let title = SUBREDDIT + "/new";
if (UNREAD_NOTIFICATION_COUNT > 0)
else
2016-07-05 07:24:08 +00:00
{
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
title = "(" + UNREAD_NOTIFICATION_COUNT + ") " + title;
else
2016-07-05 07:24:08 +00:00
}
document.title = title;
}
function visibility_property()
{
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
const prefixes = ["webkit", "moz", "ms", "o"];
else
2016-07-05 07:24:08 +00:00
if ("hidden" in document)
{
return "hidden";
}
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
for (const prefix of prefixes)
else
2016-07-05 07:24:08 +00:00
{
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
const hidden_attribute = prefix + "Hidden";
if (hidden_attribute in document)
{
else
2016-07-05 07:24:08 +00:00
return hidden_attribute;
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
}
else
2016-07-05 07:24:08 +00:00
}
return null;
}
page_focused_fresh();
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
const my_visibility_property = visibility_property();
else
2016-07-05 07:24:08 +00:00
if (my_visibility_property)
{
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
const my_event_name = my_visibility_property.replace(/[H|h]idden/,'') + 'visibilitychange';
else
2016-07-05 07:24:08 +00:00
document.addEventListener(my_event_name, on_focus_change);
}
Various updates to reddit_live_new.
2021-06-22 22:50:07 +00:00
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);
else
2016-07-05 07:24:08 +00:00
</script>
Reference in a new issue Copy permalink