<!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; } .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/ */ 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; function bind_box_to_button(box, button, ctrl_enter) { // Thanks Yaroslav Yakovlev // http://stackoverflow.com/a/9343095 var 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")); 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>