voussoir
/
else
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Various updates to reddit_live_new.

master
voussoir 2021-06-22 15:50:07 -07:00
parent 71a66e4b54
commit 84c8f0ac71
No known key found for this signature in database
GPG Key ID: 5F7554F8C26DACCB
1 changed files with 90 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

163
Javascript/reddit_live_new.html
View File

@ -16,7 +16,7 @@
<body> <body>
<div id="control_panel"> <div id="control_panel">
<input type="text" id="subreddit_field" placeholder="/r/learnpython" autofocus> <input type="text" id="subreddit_field" placeholder="/r/learnpython" autofocus>
<button id="start_button" onclick="start()">Start</button> <button id="start_button" onclick="start_button()">Start</button>
<a id="browser_link"></a> <a id="browser_link"></a>
<button id="clear_button" onclick="clear_workspace()">Clear workspace</button> <button id="clear_button" onclick="clear_workspace()">Clear workspace</button>
</div> </div>
@ -41,12 +41,15 @@ body
padding: 5px; padding: 5px;
} }
#control_panel #control_panel
{ {
background-color: #284142; background-color: #284142;
padding: 5px; padding: 5px;
} }
#control_panel.error
{
background-color: #f00;
}
.submission .text .submission .text
{ {
@ -107,26 +110,26 @@ a:hover
http://www.html5rocks.com/en/tutorials/pagevisibility/intro/ http://www.html5rocks.com/en/tutorials/pagevisibility/intro/
*/ */
var CHECK_DELAY = 30 * 1000; const CHECK_DELAY = 30 * 1000;
var CONTROL_PANEL = document.getElementById("control_panel"); const CONTROL_PANEL = document.getElementById("control_panel");
CONTROL_PANEL.default_color = CONTROL_PANEL.style.backgroundColor; const WORKSPACE = document.getElementById("workspace");
var WORKSPACE = document.getElementById("workspace");
var id_cache = []; const ID_CACHE = [];
var id_cache_size = 20; const ID_CACHE_SIZE = 20;
var first_loop = true; let FIRST_LOOP = true;
var unread_notification_count = 0; let UNREAD_NOTIFICATION_COUNT = 0;
var subreddit = ""; let SUBREDDIT = "";
var check_timer = null; let CHECK_TIMER = null;
let PAGE_FOCUSED_CACHED;
var page_focused_cached;
function bind_box_to_button(box, button, ctrl_enter) function bind_box_to_button(box, button, ctrl_enter)
{ {
// Thanks Yaroslav Yakovlev // Thanks Yaroslav Yakovlev
// http://stackoverflow.com/a/9343095 // http://stackoverflow.com/a/9343095
var bound_box_hook = function(event) const bound_box_hook = function(event)
{ {
if (event.key !== "Enter") if (event.key !== "Enter")
{return;} {return;}
@ -143,13 +146,13 @@ function bind_box_to_button(box, button, ctrl_enter)
bind_box_to_button(document.getElementById("subreddit_field"), document.getElementById("start_button")); bind_box_to_button(document.getElementById("subreddit_field"), document.getElementById("start_button"));
var HTTPClient = function() const HTTPClient = function()
{ {
/* Thanks ttgagne http://stackoverflow.com/a/22076667 */ /* Thanks ttgagne http://stackoverflow.com/a/22076667 */
var asynchronous = true; const asynchronous = true;
this.get = function(url, callback) this.get = function(url, callback)
{ {
var request = new XMLHttpRequest(); const request = new XMLHttpRequest();
request.onreadystatechange = function() request.onreadystatechange = function()
{ {
// console.log(request.readyState); // console.log(request.readyState);
@ -158,12 +161,12 @@ var HTTPClient = function()
{ {
if (request.status == 200) if (request.status == 200)
{ {
CONTROL_PANEL.style.backgroundColor = CONTROL_PANEL.default_color; CONTROL_PANEL.classList.remove("error");
callback(request.responseText); callback(request.responseText);
} }
else else
{ {
CONTROL_PANEL.style.backgroundColor = "#f00"; CONTROL_PANEL.classList.add("error");
} }
} }
} }
@ -172,26 +175,27 @@ var HTTPClient = function()
request.send(null); request.send(null);
} }
} }
const session = new HTTPClient();
function create_submission_div(submission) function create_submission_div(submission)
{ {
var div = document.createElement("div"); const div = document.createElement("div");
div.className = "submission"; div.className = "submission";
var anchor = document.createElement("a"); const anchor = document.createElement("a");
anchor.innerHTML = "/r/" + submission["subreddit"] + " - " + submission["title"]; anchor.innerHTML = "/r/" + submission["subreddit"] + " - " + submission["title"];
anchor.href = "https://reddit.com/r/" + submission["subreddit"] + "/comments/" + submission["id"]; anchor.href = "https://reddit.com/r/" + submission["subreddit"] + "/comments/" + submission["id"];
anchor.target = "_blank"; anchor.target = "_blank";
var text = document.createElement("div"); const text = document.createElement("div");
text.className = "text"; text.className = "text";
var template = document.createElement("template"); const template = document.createElement("template");
var txt = document.createElement("textarea"); const txt = document.createElement("textarea");
txt.innerHTML = unescape(submission["selftext_html"]); txt.innerHTML = unescape(submission["selftext_html"]);
template.innerHTML = txt.value; template.innerHTML = txt.value;
text.appendChild(template.content); text.appendChild(template.content);
var delete_button = document.createElement("button"); const delete_button = document.createElement("button");
delete_button.className = "delete_button"; delete_button.className = "delete_button";
delete_button.div = div; delete_button.div = div;
delete_button.innerHTML = "X"; delete_button.innerHTML = "X";
@ -200,10 +204,6 @@ function create_submission_div(submission)
this.div.parentElement.removeChild(this.div); 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(anchor);
div.appendChild(text); div.appendChild(text);
div.appendChild(delete_button); div.appendChild(delete_button);
@ -212,21 +212,21 @@ function create_submission_div(submission)
function apply_to_page(response_json) function apply_to_page(response_json)
{ {
var j = JSON.parse(response_json); const j = JSON.parse(response_json);
var submissions = j["data"]["children"]; const submissions = j["data"]["children"];
submissions.reverse(); // newest last submissions.reverse(); // newest last
var new_items = 0; let new_items = 0;
for (var index = 0; index < submissions.length; index += 1) for (let submission of submissions)
{ {
var submission = submissions[index]["data"]; submission = submission["data"];
if (id_cache.includes(submission["id"])) if (ID_CACHE.includes(submission["id"]))
{ {
continue; continue;
} }
id_cache.push(submission["id"]); ID_CACHE.push(submission["id"]);
if (first_loop) if (FIRST_LOOP)
{ {
continue; continue;
} }
@ -238,36 +238,36 @@ function apply_to_page(response_json)
// WORKSPACE.appendChild(div); // WORKSPACE.appendChild(div);
} }
console.log("+" + new_items); console.log("+" + new_items);
if (new_items > 0 && !page_focused_cached) if (new_items > 0 && !PAGE_FOCUSED_CACHED)
{ {
unread_notification_count += new_items; UNREAD_NOTIFICATION_COUNT += new_items;
update_title(); update_title();
} }
while (id_cache.length < id_cache_size) while (ID_CACHE.length < ID_CACHE_SIZE)
{ {
id_cache.shift(); ID_CACHE.shift();
} }
first_loop = false; FIRST_LOOP = false;
} }
function check_forever() function check_forever()
{ {
clearTimeout(check_timer); clearTimeout(CHECK_TIMER);
check_once(); check_once();
check_timer = setTimeout(check_forever, CHECK_DELAY); CHECK_TIMER = setTimeout(check_forever, CHECK_DELAY);
} }
function check_once() function check_once()
{ {
console.log("checking"); if (SUBREDDIT == "")
if (subreddit == "")
{ {
console.log("no subreddit"); console.log("no subreddit");
return; return;
} }
var url = "https://api.reddit.com" + subreddit + "/new.json"; const url = "https://api.reddit.com" + SUBREDDIT + "/new.json";
console.log(`Checking ${url}`);
session.get(url, apply_to_page); session.get(url, apply_to_page);
} }
@ -283,24 +283,24 @@ function on_focus_change()
{ {
if (page_focused_fresh()) if (page_focused_fresh())
{ {
unread_notification_count = 0; UNREAD_NOTIFICATION_COUNT = 0;
update_title(); update_title();
} }
} }
function page_focused_fresh() function page_focused_fresh()
{ {
var property = visibility_property(); const property = visibility_property();
if (!property) if (!property)
{ {
page_focused_cached = true; PAGE_FOCUSED_CACHED = true;
return true; return true;
} }
else else
{ {
page_focused_cached = !document[property]; PAGE_FOCUSED_CACHED = !document[property];
} }
return page_focused_cached; return PAGE_FOCUSED_CACHED;
} }
function sort_submission_comparator(submission_1, submission_2) function sort_submission_comparator(submission_1, submission_2)
@ -315,21 +315,28 @@ function sort_submission_comparator(submission_1, submission_2)
return 0; return 0;
} }
function start() function start_button()
{
const subreddit = document.getElementById("subreddit_field").value.trim();
if (subreddit !== "")
{
return start(subreddit);
}
}
function start(subreddit)
{ {
console.log("start"); console.log("start");
first_loop = true; FIRST_LOOP = true;
clear_workspace(); clear_workspace();
var field = document.getElementById("subreddit_field"); subreddit = subreddit.replace("/u/", "/user/");
var text = field.value; if (subreddit.indexOf("/") == -1)
text = text.replace("/u/", "/user/");
if (text.indexOf("/") == -1)
{ {
text = "/r/" + text; subreddit = "/r/" + subreddit;
} }
subreddit = text; SUBREDDIT = subreddit;
var link = document.getElementById("browser_link"); const link = document.getElementById("browser_link");
var url = "https://reddit.com" + subreddit + "/new"; const url = "https://reddit.com" + SUBREDDIT + "/new";
link.href = url; link.href = url;
link.innerHTML = url; link.innerHTML = url;
update_title(); update_title();
@ -338,42 +345,52 @@ function start()
function update_title() function update_title()
{ {
var title = subreddit + "/new"; let title = SUBREDDIT + "/new";
if (unread_notification_count > 0) if (UNREAD_NOTIFICATION_COUNT > 0)
{ {
title = "(" + unread_notification_count + ") " + title; title = "(" + UNREAD_NOTIFICATION_COUNT + ") " + title;
} }
document.title = title; document.title = title;
} }
function visibility_property() function visibility_property()
{ {
var prefixes = ["webkit","moz","ms","o"]; const prefixes = ["webkit", "moz", "ms", "o"];
if ("hidden" in document) if ("hidden" in document)
{ {
return "hidden"; return "hidden";
} }
for (var i = 0; i < prefixes.length; i++) for (const prefix of prefixes)
{ {
hidden_attribute = prefixes[i] + "Hidden"; const hidden_attribute = prefix + "Hidden";
if ((hidden_attribute) in document) if (hidden_attribute in document)
{
return hidden_attribute; return hidden_attribute;
}
} }
return null; return null;
} }
page_focused_fresh(); page_focused_fresh();
var my_visibility_property = visibility_property(); const my_visibility_property = visibility_property();
if (my_visibility_property) if (my_visibility_property)
{ {
var my_event_name = my_visibility_property.replace(/[H|h]idden/,'') + 'visibilitychange'; const my_event_name = my_visibility_property.replace(/[H|h]idden/,'') + 'visibilitychange';
document.addEventListener(my_event_name, on_focus_change); document.addEventListener(my_event_name, on_focus_change);
} }
var session = new HTTPClient(); 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> </script>