The allowed time types for articles.
articleViewCache saves temporary data of the article view
Defines the base host.
The allowed sorting types for comments.
homeViewCache saves temporary data of the home view
The allowed sorting types for self pages.
The allowed time types for self pages.
Defines the old version of base host because some functions need it.
The allowed sorting types for search results.
The allowed time types for search results.
searchViewCache saves temporary data of the search view
Defines the ssl version of base host because login needs it.
subredditViewCache saves temporary data of the subreddit view
The allowed sorting types for user pages.
The allowed time types for user pages.
userViewCache saves temporary data of the user view
Requests a comment of an article.
IAPIData
object
IGenericResult
object
Requests the article details and its comments.
IAPIData
object
IGenericResult
object
checkSession gets the base page of reddit to check if a modhash is returned. If the modhash is returned the cookie is valid and the user is logged in. Limited to 1 object, to speed up the request. URL: https://reddit.com/.json?limit=1
IAPIData interface with all data
success
loginUser tries to log a user in and returns session cookies URL: https://ssl.reddit.com/api/login/$USERNAME$?api_type=json&username=$USERNAME$&password=$PASSWORD$
IAPIData interface with all data
success data
Requests the frontpage of the logged in user.
IAPIData
object
IGenericResult
object
Requests the multi subreddits of the logged in user.
IAPIData
object
IGenericResult
array
Requests the articles in a multi subreddit.
IAPIData
object
IGenericResult
object
Requests the multi subreddits of an user.
IAPIData
object
Array
Requests the article result for a query.
IAPIData
object
IGenericResult
object
Requests the subreddit result of a query.
IAPIData
object
ISubredditSearchResult
object
Requests a list of articles of a subreddit
IAPIData
object
IGenericResult
object
Requests the detailed information of a subreddit.
IAPIData
object
IGenericResult
object
Requests the current trending subreddits.
IAPIData
object
ITrendsResult
object
Requests the about data of an user.
IAPIData
object
IGenericResult
object
Requests the comments submitted by an user.
IAPIData
object
IGenericResult
object
Requests the page of an user with articles and comments.
IAPIData
object
IGenericResult
object
Requests the articles submitted by an user.
IAPIData
object
IGenericResult
object
createArticleHTML creates the HTML string for the article view.
createHomeHTML creates the HTML string of the home view.
createSearchHTML creates the HTML string of the search view.
createSubredditHTML creates the HTML string for the subreddit view.
createUserHTML creates the HTML string for the user view.
getView routes the given command to its function.
handleArticle parses the config for the article view and calls the creator function.
handleHome parses the config for the home view and calls the creator function. Navigating to the home view usually resets everything so this is pretty simple.
handleLogin parses the config for the login and then opens the home view.
handleLogout parses the config for the logout and then open the home view.
handleSearch parses the config for the search view and calls the creator function.
handleSubreddit parses the config for the subreddit view and calls the creator function.
handleUser parses the config for the user view and calls the creator function.
nextPage recalculates the count parameter to move to the next page.
prevPage recalculates the count parameter to move the previos page.
resetConfig resets the navigation relevant parts of the given config object.
sortBest sets the best sortation.
sortComments sets the comments sortation.
sortConfidence sets the confidence sortation.
sortControversial sets the controversial sortation.
sortHot sets the hot sortation.
sortNew sets the new sortation.
sortOld sets the old sortation.
sortQA sets the qa sortation.
sortRelevance sets the relevance sortation.
sortRising sets the rising sortation.
sortTop sets the top sortation.
timeAll sets the all interval.
timeDay sets the day interval.
timeHour sets the hour interval.
timeMonth sets the month interval.
timeWeek sets the week interval.
timeYear sets the year interval.
Activates the extension.
Is called on deactivation of extenstion
The article
function returns the HTML string of the section to
represent an article entry. It should display the score, subreddit, author, title and preview.
It needs at least the title which sends the article
command with the subreddit and
article_id to the extension.
<a onclick="handleMessageSending('article', view, ['subreddit', 'article_id'])">
Javascript example:
if (123 in ('r/reddit.com', ekarbe )) {
return { title: "article title", pre: show() };
}
@param data @category View - Template
The articleDetail
function returns the HTML string of the article view section.
It should display the score, upvote_ratio, subreddit, author, date, media_url and
a view of the media or selftext.
Javascript example:
data.parse(123, 90%, 'r/reddit.com', ekarbe, '01/01/2001T14:42');
let comments = 30;
let media = parseMedia(data.path);
showMedia(media);
The breadcrumb
function returns the HTML string of the section to navigate
through multiple views. The breadcrumb names need to send their corresponding
commands to the extensiom. E.g. breadcrumb1 send the command breadcrumb1.
<a onclick="handleMessageSending('breadcrumb1', view, args)">
Javascript example:
\// import the environment constants
import { breadcrumb1, breadcrumb2, breadcrumb3 } from "extension/environment";
The comment
function returns the HTML string of a comment chain section.
It should display the score, author, time and selftext. It needs to recursively
call itself to show the child comment/replies.
Javascript example:
if (123 in (ekarbe, '01/01/2001T14:42')) {
let body = { };
}
The functionHead
function returns the head of a function section.
A function section encloses other templates and should always close with
the functionTail
function.
There are no functional parts in this template section.
Javascript example:
function name(param) {
The functionTail
function returns the tail of a function section.
This is needed to close the div of the section and should contain a
suitable closing to the head.
Javascript example:
}
The head
function returns the head of the HTML string.
It contains the link to the stylesheet to load the colors
of element types. The stylesheet path needs to be formatted as
vscode webview uri and can be found in the config param.
To pass the editor font configuration to the template the parameter
fontFamily
, fontSize
, fontWeight
and fontHeight
are used.
The onload="scrollTop()"
in the body is used to reset the scroll-level
back to the top when changing a view. The scrollTop
function can be found in
script()
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="${data.stylesheet}">
</head>
<body onload="scrollTop()" style="
font-family: ${data.fontFamily};
font-size: ${data.fontSize}px;
font-weight: ${data.fontWeight};
line-height: ${data.lineHeight}px;
">
The lineComment
function returns the HTML string of a line comment.
It is used to display the view name and additional info like the
description of a subreddit.
Javascript example:
\// COMMENT
The login
function returns the HTML string of the section to log an account
into reddit. It needs to contain two input fields for the username and password.
It needs a field to fire the login
function.
login
element example:
<a onclick="login()">
Input example:
<input id="username"> <input id="password">
Javascript example:
login(____________, ____________);
The logout
function returns the HTML string of the section to log an account
out of reddit. It needs to contain an element that fires the handleMessageSending
to send the logout
command to the extension.
<a onclick="handleMessageSending('logout', view, args)">
Javascript example:
logout(username);
The open
function returns the HTML string of the section to open
a subreddit. It needs to contain an element to fire the openSubreddit
function and an input element with the id openQuery
.
openSubreddit
element example:
<a href="" onlcick="openSubreddit('foo')">
openQuery
input example:
<input id="openQuery">
Javascript example:
open("____________");
The pagination
function returns the HTML string of the section to browse
multiple pages of the current view. It needs an element to send the
prev
command and the before param and an element to send the next
command and the after param.
Prev command example:
<a onclick="handleMessageSending('prev', view, [count, undefined, 'before'])">
Next command example:
<a onclick="handleMessageSending('next', view, [count, 'after', undefined])">
Javascript example:
export default { prev(this) { return this-1 }, next(this) { return this+1 } };
The script
function returns the script section of the HTML string.
It's functions are absolutely necessary for Reddit-Viewer to work.
The function handleMessageSending
is used to send messages to the vscode webview.
It contains the params command
, view
and args
.
subreddit
.home
.arg[0]
.Code:
\// get an instance of the vscode api
const vscode = acquireVsCodeApi();
\// handle vscode extension message passing (from webview to extension)
function handleMessageSending(command, view, args) {
vscode.postMessage({
command: command,
view: view,
args: args,
});
}
Usage:
<a href="" onclick="handleMessageSending('foo', 'bar', 'pub')">
The function executeSearch
is used to retrieve the value of the
search input field, validate it and then parse it to be send to
the vscode webview.
home
.Code:
\// execute the search
function executeSearch(view) {
let val = document.getElementById('searchQuery').value;
if(val.trim().length != 0){
let args = [];
args.push(val);
handleMessageSending('search', view, args);
} else {
val = "";
\// error
}
}
Usage:
<a href="" onclick="executeSearch('foo')">
The function openSubreddit
is used to retrieve the value of the
open input field, validate it and then parse it to be send to the
vscode webview.
home
.Code:
\// open a subreddit
function openSubreddit(view) {
let val = document.getElementById('openQuery').value;
if(val.trim().length != 0){
let args = [];
args.push(val);
handleMessageSending('subreddit', view, args);
} else {
val = "";
\// error
}
}
Usage:
<a href="" onclick="openSubreddit('foo')">
The login
function is used to send the login information to the
extension script. It will color the inputs red if there is missing
information.
Code:
\// log the user into reddit
function login() {
let username = document.getElementById('username').value;
let password = document.getElementById('password').value;
if(username.trim().length != 0 && password.trim().length != 0) {
let args = [];
args.push(username);
args.push(password);
handleMessageSending('login', 'home', args);
} else {
document.getElementById('username').style.color = "red";
document.getElementById('password').style.color = "red";
}
}
Usage:
<a onclick="login()"></a>
The function resetError
is used to reset the styling for
incorrect login input.
Code:
\// reset the error colors of the login
function resetError() {
document.getElementById('username').style.color = "inherit";
document.getElementById('password').style.color = "inherit";
}
Usage:
<input onfocus="resetError()">
The function expandElement
is used to change the display style
of a given element to make it appear or disappear.
It is used used to unhide/hide media and comments.
foo
should
be hidden/unhidden the id is foo
.Code:
\// switches between display:none and display:inherit
function expandElement(id) {
element = document.getElementById(id);
if(element.style.display === "none") {
element.style.display = "inherit";
} else {
element.style.display = "none";
}
}
Usage:
<a href="" onclick="expandElement('foo')">
The function scrollTop
is used to set the scroll-level of
the webview to zero. If this isn't done the webview would stay
on the same level after changing views.
Code:
\// called on body load
\// scrolls to top
function scrollTop() {
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
Usage:
<body onload="scrollTop()">
The function checkKey
checks a keyup event for
the keycode and fires the action of the element
if the pressed key is enter.
Code:
\// checks if enter is pressed
function checkKey(element) {
if(event.keyCode === 13) {
switch(element){
case "search":
executeSearch('home');
break;
case "open":
openSubreddit('home');
break;
case "login":
login();
break;
default:
break;
}
}
}
Usage:
<input onkeyup="checkKey('foo')">
The search
function returns the HTML string of the section to search
for subreddits and articles. It needs to contain an element to fire the
executeSearch
function and an input element with the id searchQuery
.
executeSearch
element example:
<a onclick="executeSearch('foo')">
searchQuery
input example:
<input id="searchQuery">
Javascript example:
search("____________");
The sort
function returns the HTML string of the section to sort
the current view by its sort types. The sort names need to fire the
corresponding sort command. E.g. sort1 fires the command sort1.
<a onclick="handleMessageSending('sort1', view, args)">
Javascript example:
const sort = require( "sort1", "sort2", "sort3" );
The subredditSearch
function returns the HTML string of the subreddit search section.
The subreddit names need to send the subreddit
command to the extension.
<a onclick="handleMessageSending('subreddit', view, ['subreddit1'])">
Javascript example:
const subs = {
"GetMotivated": params,
"blaReddit": params,
}
The tail
function returns the tail of the HTML string.
It closes the body and html tag.
</body>
</html>
The time
function returns the HTML string of the section to set the interval
of the current view. The time names need to fire the corresponding time command.
E.g. time1 fires the command time1.
<a onclick="handleMessageSending('time1', view, args)">
Javascript example:
const time = require( "time1", "time2", "time3" );
The trend
function returns the HTML string of the section to browse the
currently trending subreddits. The names need to fire the subreddit
command
to the extension and contain its name in the args param.
<a onclick="handleMessageSending('subreddit', view, ['subreddit'])">
Javascript example:
let trends = [ "trend1", "trend2", "trend3" ];
The userAbout
function returns the HTML string of the users information section.
It should display the karma, submitted_karma and comment_karma.
Javascript example:
let splittedData = data.split(",");
let karma = splittedData[3242];
let posts = splittedData[213];
let comments = splittedData[2900];
The allowed sorting types for articles.