View Imgur media in a slideshow format
// ==UserScript==
// @name slideshow
// @namespace https://greasyfork.org/en/users/94062-oshaw
// @version 3
// @description View Imgur media in a slideshow format
// @author Oscar Shaw
// @grant none
// @include https://*.reddit.*/r/*
// @include http://imgur.com/*
// @include https://imgur.com/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// @run-at document-start
// ==/UserScript==
/* "name": "library.js",
"program": "Slideshow",
"description": ""
*/
function say(str_input, tab_input = window) {
tab_input.console.log(str_input);
} say("Compiled");
function list(arrkvp_input, tab_input = window) {
var str_output = "";
for (var i = 0; i < arrkvp_input.length; i++) {
str_output += (
arrkvp_input[i][0] + ": \t\t"
+ arrkvp_input[i][1] + "\n"
);
}
say(str_output, tab_input);
}
function shout(str_input, tab_input = window) {
tab_input.alert(str_input);
}
function tag(str_element, tab_input = window) {
switch (str_element[0]) {
case '.': return tab_input.document.getElementsByClassName(str_element.substring(1));
case '#': return tab_input.document.getElementById(str_element.substring(1));
default: return;
}
}
function sayTab(str_body, str_title = "") {
window.open().document.body.appendChild(document.createElement('pre')).innerHTML
= (str_title != "" ? str_function + "\n\n" : "")
+ str_body;
}
function tryCatch(anon) {
try { anon(); }
catch(str_error) { say(str_error); }
}
function isDef(var_input) {
return !(var_input == null || var_input == undefined || var_input == "");
}
function func_xhr(obj_input) {
say("func_xhr requesting " + obj_input.url_destination);
var xhr = new XMLHttpRequest();
xhr.onload = function() {
try { var json = JSON.parse(this.responseText); }
catch(str_error) {
say("func_error\n\n" + str_error + "\n\n" + this.responseText);
obj_input.func_error(str_error);
}
if (!isDef(json.status)) obj_input.func_success(json);
if (json.status == 200) {
say("func_success");
obj_input.func_success(json);
}
else {
say("func_failure");
obj_input.func_failure(json.status);
}
};
xhr.open("GET", obj_input.url_destination, true);
if (obj_input.str_headerKey != undefined && obj_input.str_headerValue != undefined) {
xhr.setRequestHeader(
obj_input.str_headerKey,
obj_input.str_headerValue
);
}
xhr.send();
}
function func_htmlUnescape(str_input) {
return str_input
.replace(/"/g, '"')
.replace(/'/g, "'")
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/&/g, '&');
}
/* "name": "parsers.js",
"program": "Slideshow",
"description": ""
*/
function func_imgurUrlToJson(url_input, func_callback, arrstr_endpoints = ["append", "album", "image"]) {
const constr_imgurApiId = "b5abfbf0e29baf1";
var hash_source = url_input.substring(url_input.lastIndexOf("/") + 1);
var anon_request = function(str_endpoint, func_next) {
var obj_xhrInputs;
switch(str_endpoint) {
case "append": {
obj_xhrInputs = { url_destination: url_input + ".json" }
break;
}
case "album": {
obj_xhrInputs = {
url_destination: "https://api.imgur.com/3/album/" + hash_source
, str_headerKey: "Authorization"
, str_headerValue: "Client-ID " + constr_imgurApiId
}
break;
}
case "image": {
obj_xhrInputs = {
url_destination: "https://api.imgur.com/3/image/" + hash_source
, str_headerKey: "Authorization"
, str_headerValue: "Client-ID " + constr_imgurApiId
}
break;
}
default: break;
}
func_xhr({
url_destination: obj_xhrInputs.url_destination
, func_success: function(json_response) { func_callback(json_response); }
, func_error: func_next
, func_failure: func_next
, str_headerKey: obj_xhrInputs.str_headerKey
, str_headerValue: obj_xhrInputs.str_headerValue
});
};
var i = 0;
anon_request(arrstr_endpoints[i], function() {
if (isDef(arrstr_endpoints[i + 1])) {
i++;
anon_request(arrstr_endpoints[i], function() {
if (isDef(arrstr_endpoints[i + 1])) {
i++;
anon_request(arrstr_endpoints[i]);
}
});
}
}, function() {
if (isDef(arrstr_endpoints[i + 1])) {
i++;
anon_request(arrstr_endpoints[i], function() {
if (isDef(arrstr_endpoints[i + 1])) {
i++;
anon_request(arrstr_endpoints[i]);
}
});
}
});
}
function func_imgurJsonToSsdn(json_input) {
say("func_imgur_jsonToSsdn");
var bool_isAppend = json_input.data.hasOwnProperty("image");
var node_inputHeader = bool_isAppend ? json_input.data.image : json_input.data;
var node_imageArray = bool_isAppend ? json_input.data.image.album_images.images : json_input.data.images;
var ssdn_output = {
node_header:
{
str_title: (node_inputHeader.title === null) ? "" : node_inputHeader.title
, str_description: (node_inputHeader.description === null) ? "" : node_inputHeader.description
, str_poster: node_inputHeader.account_url
, int_length: bool_isAppend ? node_inputHeader.num_images : node_inputHeader.images_count
, int_views: node_inputHeader.views
, int_points: node_inputHeader.points
, int_ups: node_inputHeader.ups
, int_downs: node_inputHeader.downs
}
, node_payload: []
};
var int_outputLength = ssdn_output.node_header.int_length;
ssdn_output.node_header.int_length = (int_outputLength == null) ? 1 : int_outputLength;
if (ssdn_output.node_header.int_length > 1) { // If album
$.each(node_imageArray, function(i, node_image) {
ssdn_output.node_payload.push({
str_title: (node_image.title === null) ? "" : node_image.title
, str_description: (node_image.description === null) ? "" : node_image.description
, url_direct: bool_isAppend ? "http://i.imgur.com/" + node_image.hash + node_image.ext : node_image.link
});
});
}
else { // If image
ssdn_output.node_payload.push({
str_title: undefined
, str_description: undefined
, url_direct: node_inputHeader.link
});
}
say("func_imgur_jsonToSsdn payload completed");
return ssdn_output;
}
function class_redditParser(url_input, func_send) {
function func_stringToUrlArray(str_input) {
// say("func_stringToUrlArray");
var array_urls = [];
if (isDef(str_input.match(/http(.*?)(?=["?])/g))) {
$.each(str_input.match(
/http(.*?)(?=["?])/g
), function(i, url) { array_urls.push(url); });
}
// say("func_stringToUrlArray completed");
return array_urls;
}
function func_isUrlImageDirect(url_input) {
return (url_input.indexOf(".jpg") != -1
|| url_input.indexOf(".png") != -1
|| url_input.indexOf(".gif") != -1);
}
function func_redditThreadHeaderToSsdnHeader(json_redditHeader) {
return {
node_header: {
str_title: json_redditHeader.title
}
};
}
function func_urlWithRedditContextToSsdnPayload(url, json_redditComment) {
return {
node_payload:
[
{
str_title: json_redditComment.author
, str_description: func_htmlUnescape(json_redditComment.body_html)
, int_points: json_redditComment.score
, url_direct: url
}
]
};
}
function func_main() {
func_xhr({ url_destination: url_input + ".json", func_success: function(json_reddit) {
{ func_send( // Fabricate and send header
func_redditThreadHeaderToSsdnHeader
(json_reddit[0].data.children[0].data)
); }
$.each(json_reddit[1].data.children, function(i, json_comment) { // Each comment
if (!isDef(json_comment.data.body_html)) return;
$.each(func_stringToUrlArray(json_comment.data.body_html), function(j, url) {
if (func_isUrlImageDirect(url)) { // Direct
{ func_send(
func_urlWithRedditContextToSsdnPayload
(url, json_comment.data)
); }
}
else if (url.indexOf("imgur") != -1) { // Indirect
func_imgurUrlToJson(url, function(json_indirectUrlResponse) {
$.each(json_indirectUrlResponse.data.images,
function(k, json_imgurImage) {
ssdn_output = func_urlWithRedditContextToSsdnPayload(
json_imgurImage.link,
json_comment.data);
var node_image = ssdn_output.node_payload[0];
node_image.int_index = k + 1;
node_image.int_length = json_indirectUrlResponse.data.images.length;
node_image.url_album = url;
func_send(ssdn_output);
});
}, ["album", "image"]);
}
}); // Next url in comment
}); // Next comment
}});
} func_main();
say("class_redditParser completed");
}
/* "name": "slideshow.js",
"program": "Slideshow",
"description": ""
*/
function class_slideshow(tab) {
const contab_home = tab;
var css_head = ""; { // CSS
{ css_head +=
"\
<script type='text/javascript' src='http://ajax.googleapis.com/\
ajax/libs/jquery/1.4.1/jquery.min.js'></script>\
"; }
{ css_head += "<title></title><style>"; }
{ css_head += // #ctn_main, #ctn_image,
"\
#ctn_main\
{\
top: 0px;\
right: 0px;\
height: " + contab_home.innerHeight + "px;\
width: " + contab_home.innerWidth + "px;\
position: absolute;\
}\
#ctn_image\
{\
height: " + contab_home.innerHeight + "px;\
width: 100%;\
}\
#act_image\
{\
display: block;\
height: " + contab_home.innerHeight + "px;\
width: 100%;\
position: absolute;\
background-position: center center;\
background-repeat: no-repeat;\
background-size: contain;\
z-index: 1;\
}\
"; }
{ css_head += // .grp_details
"\
.grp_textBoxes\
{\
margin: 0px;\
text-align: center;\
}\
.grp_details\
{\
display: none;\
z-index: 1;\
}\
.grp_bold\
{\
font-weight: bold;\
}\
#ctn_header\
{\
width: 100%;\
}\
#act_header\
{\
box-sizing: border-box;\
padding-top: 0px;\
padding-bottom: 7px;\
padding-left: 45px;\
padding-right: 45px;\
}\
#ctn_footer\
{\
width: 100%;\
}\
#act_footer\
{\
box-sizing: border-box;\
padding-top: 10px;\
padding-bottom: 10px;\
padding-left: 45px;\
padding-right: 45px;\
bottom: 0px;\
width: 100%;\
}\
#p_imageNumbers\
{\
display: none;\
}\
ul\
{\
padding: 0px;\
margin: 0px;\
}\
ol\
{\
padding: 0px;\
margin: 0px;\
}\
p\
{\
padding: 0px;\
margin: 0px;\
}\
"; }
{ css_head += // .grp_navButtons
"\
.grp_navButtons\
{\
top: 0px;\
display: none;\
line-height: " + contab_home.innerHeight + "px;\
height: 100%;\
margin: 0px;\
cursor: pointer;\
text-align: center;\
vertical-align: middle;\
position: absolute;\
z-index: 10;\
}\
#btn_prev\
{\
left: 0px;\
padding-left: 15px;\
padding-right: 15px;\
}\
#btn_next\
{\
padding-left: 15px;\
padding-right: 15px;\
right: 0px;\
}\
"; }
{ css_head += // css_head suffix
"\
</style>\
"; }
}
var html_body = ""; { // HTML
{ html_body += // #ctn_main prefix
"\
<div id = 'ctn_main'>\
"; }
{ html_body += // #ctn_header
"\
<div class = 'grp_details' id = 'ctn_header'>\
<div id = 'act_header'>\
<h1 class = 'grp_textBoxes' id = 'h1_title'></h1>\
<p class = 'grp_textBoxes' id = 'p_subtitle'></p>\
</div>\
</div>\
"; }
{ html_body += // #ctn_image
"\
<div class = 'grp_image' id = 'ctn_image'>\
<div class = 'grp_image' id = 'act_image'></div>\
</div>\
"; }
{ html_body += // #ctn_footer
"\
<div class = 'grp_details' id = 'ctn_footer'>\
<div id = 'act_footer'>\
<p class = 'grp_textBoxes' id = 'p_desc'></p>\
<p class = 'grp_textBoxes grp_bold' id = 'p_imageNumbers'></p>\
</div>\
</div>\
"; }
{ html_body += // #ctn_main suffix, .grp_navButtons,
"\
<div class = 'grp_navButtons' id = 'btn_prev'></div>\
<div class = 'grp_navButtons' id = 'btn_next'></div>\
</div>\
"; }
}
var ssdn_source = { node_header: {}, node_payload: [] };
var int_imageCurrent = 0;
var bool_detailsDisplay = false;
function func_detailsDisplay(bool_newDetailsDisplay = bool_detailsDisplay) {
bool_detailsDisplay = bool_newDetailsDisplay;
if (bool_detailsDisplay) { // Show
var int_allocateHeightHeader = 0;
var int_allocateHeightFooter = 0;
{ var bool_showHeader =
isDef(tag("#h1_title", contab_home).textContent)
|| isDef(tag("#p_subtitle", contab_home).textContent)
};
{ var bool_showFooter =
isDef(tag("#p_desc", contab_home).textContent)
|| tag("#p_imageNumbers", contab_home).style.display == "block"
};
if (bool_showHeader) {
tag("#ctn_header", contab_home).style.display = "block";
int_allocateHeightHeader = tag("#ctn_header", contab_home).clientHeight;
}
if (bool_showFooter) {
tag("#ctn_footer", contab_home).style.display = "block";
int_allocateHeightFooter = tag("#act_footer", contab_home).clientHeight;
}
$.each(tag(".grp_image", contab_home), function(i, elmt) {
elmt.style.height = (
contab_home.innerHeight
- int_allocateHeightHeader
- int_allocateHeightFooter
).toString() + "px";
});
}
else { // Hide
$.each(tag(".grp_details", contab_home), function(i, elmt) {
elmt.style.display = "none";
});
$.each(tag(".grp_image", contab_home), function(i, elmt) {
elmt.style.height = contab_home.innerHeight.toString() + "px";
});
}
say("func_detailsDisplay completed", contab_home);
}
function func_imageDisplay(int_newImageCurrent = int_imageCurrent) {
// If reached end or beginning of album, stop
if (!isDef(ssdn_source.node_payload[int_newImageCurrent])) {
say("func_imageDisplay completed early with " + int_imageCurrent, contab_home);
return;
}
int_imageCurrent = int_newImageCurrent;
var node_image = ssdn_source.node_payload[int_imageCurrent];
{ tag("#act_image", contab_home).style.backgroundImage = (
"url("
+ ((!isDef(node_image.url_direct)) ? "" : node_image.url_direct)
+ ")"
); }
{ tag("#p_desc", contab_home).innerHTML = (
(
(!isDef(node_image.str_title)) ? ""
: ( "<span class = 'grp_bold'>"
+ node_image.str_title
+ "</span> " )
) + (
(!isDef(node_image.str_description)) ? ""
: node_image.str_description
)
); }
{ tag("#p_imageNumbers", contab_home).innerHTML = (
(int_imageCurrent + 1).toString()
+ " / "
+ (
(!isDef(ssdn_source.node_header))
? ssdn_source.node_payload.length
: (
(!isDef(ssdn_source.node_header.int_length))
? ssdn_source.node_payload.length
: ssdn_source.node_header.int_length
)
).toString()
); }
if (isDef(tag(".md", contab_home)[0])) {
$.each(tag(".md", contab_home)[0].querySelectorAll('a'), function(i, elmt) {
if (elmt.href.indexOf(node_image.url_direct) != -1
|| elmt.href.indexOf(node_image.url_album) != -1) {
var str_indexAndLength = "";
if (isDef(node_image.int_index)
&& isDef(node_image.int_length)
&& (node_image.int_length != 1)) {
str_indexAndLength
= " (" + node_image.int_index + " / "
+ node_image.int_length + ")";
}
elmt.innerHTML = (
'<span class = "grp_bold">'
+ elmt.innerHTML
+ str_indexAndLength
+ '</span>'
);
}
});
}
func_detailsDisplay();
}
function func_headerUpdate() {
var node = (!isDef(ssdn_source.node_header))
? {}
: ssdn_source.node_header;
{ (tag("#h1_title", contab_home)).textContent =
(!isDef(node.str_title)) ? ""
: node.str_title;
}
{ (tag("#p_subtitle", contab_home)).innerHTML =
((!isDef(node.str_poster)) ? "" :
"Posted by <span class = 'grp_bold'>\
<a href = 'http://imgur.com/user/"
+ node.str_poster + "'>"
+ node.str_poster
+ "</a></span>"
) +
((isDef(node.str_poster) && (isDef(node.int_points)
|| isDef(node.int_views))) ? " with " : "") +
((!isDef(node.int_points)) ? "" :
"<span class = 'grp_bold'>"
+ node.int_points
+ " point" + ((node.int_points > 1) ? "s" : "") + "</span>"
) +
((isDef(node.int_points) && isDef(node.int_views)) ? " and " : "") +
((!isDef(node.int_views)) ? "" :
"<span class = 'grp_bold'>"
+ node.int_views
+ " view" + ((node.int_views > 1) ? "s" : "") + "</span>"
)
}
if (isDef(ssdn_source.node_header.str_title)) func_detailsDisplay(true);
contab_home.document.title = ssdn_source.node_header.str_title;
}
function func_pageSetup() {
// contab_home.document.head.innerHTML = css_head ;
// contab_home.document.body.innerHTML = html_body ;
// contab_home.document.title = "Slideshow";
$("html").html("<head></head><body></body>");
$("head").html(css_head);
$("body").html(html_body);
tag("#btn_prev", contab_home).textContent = "<" ;
tag("#btn_next", contab_home).textContent = ">" ;
say("func_pageSetup completed", contab_home);
}
function func_pageListeners() {
say("func_pageListeners", contab_home);
contab_home.document.addEventListener('keydown', function(key) {
key.cancelBubble = true;
key.stopImmediatePropagation();
switch(key.keyCode) {
case 39: func_imageDisplay(int_imageCurrent + 1); break;
case 37: func_imageDisplay(int_imageCurrent - 1); break;
case 38: case 40: func_detailsDisplay(!bool_detailsDisplay); break;
default: break;
}
return false;
}, !contab_home.opera);
contab_home.addEventListener("resize", function() {
tag("#ctn_main", contab_home).style.width = contab_home.innerWidth + "px";
tag("#ctn_main", contab_home).style.height = contab_home.innerHeight + "px";
func_detailsDisplay();
$.each(tag(".grp_navButtons", contab_home), function(i, elmt) {
elmt.style.lineHeight = contab_home.innerHeight + "px";
});
});
tag("#btn_prev", contab_home).onmousedown = function() {
func_imageDisplay(int_imageCurrent - 1);
};
tag("#btn_next", contab_home).onmousedown = function() {
func_imageDisplay(int_imageCurrent + 1);
};
tag("#act_image", contab_home).onmousedown = function() {
func_detailsDisplay(!bool_detailsDisplay);
};
say("func_pageListeners completed", contab_home);
}
function func_main() {
func_pageSetup();
func_pageListeners();
func_detailsDisplay();
say("class_slideshow.func_main completed", contab_home);
} func_main();
this.meth_sourceAdd = function(ssdn_input) { try {
if (isDef(ssdn_input.node_header)) { // Header
ssdn_source.node_header = ssdn_input.node_header;
func_headerUpdate();
}
if (isDef(ssdn_input.node_payload)) { // If input payload exists
$.each(ssdn_input.node_payload, function(i, node) {
ssdn_source.node_payload.push(node);
});
}
if (ssdn_source.node_payload.length > 1) { // Update
$("#p_imageNumbers").css("display", "block");
$(".grp_navButtons").css("display", "block");
$("#act_menuButton").css("display", "block");
$("#btn_next").text(">");
$("#btn_prev").text("<");
(tag("#p_imageNumbers", contab_home)).style.display = "block";
$.each(tag(".grp_navButtons", contab_home), function(i, elmt) {
elmt.style.display = "block";
});
}
func_imageDisplay();
} catch(str_error) { say(str_error, contab_home); } };
}
/* "name": "launcher.js",
"program": "Slideshow",
"description": ""
*/
function func_main(str_source) {
window.stop();
var obj_slideshow = new class_slideshow(window);
if (str_source == "imgur") {
func_imgurUrlToJson(location.href, function(json_output) {
var ssdn_input = func_imgurJsonToSsdn(json_output);
obj_slideshow.meth_sourceAdd(ssdn_input);
if (ssdn_input.node_header.int_length > ssdn_input.node_payload.length) {
func_imgurUrlToJson(location.href, function(json_output) {
var ssdn_append = func_imgurJsonToSsdn(json_output);
ssdn_append.node_header = null;
ssdn_append.node_payload.splice(0, ssdn_input.node_payload.length);
obj_slideshow.meth_sourceAdd(ssdn_append);
}, ["album"]);
}
});
}
if (str_source == "reddit") {
var obj_redditParser = new class_redditParser(location.href, function(ssdn_outputEntry) {
obj_slideshow.meth_sourceAdd(ssdn_outputEntry);
});
}
say("func_main completed");
}
function func_handler() {
if (location.href.includes("imgur.com")) func_main("imgur");
if (location.href.includes("reddit.com")) {
$(function() {
var p_launch = document.createElement("p"); {
p_launch.textContent = "slideshow";
p_launch.onclick = function() { func_main("reddit"); };
{ p_launch.setAttribute(
"style", "\
background: none !important; \
background-color: Transparent !important;\
padding: 0 !important;\
font: inherit;\
border: none !important;\
cursor: pointer;\
font-weight: bold;"
); }
{ p_launch.style.color = (
window
.getComputedStyle(tag(".bylink comments may-blank")[0])
.color
); }
}
var ctn_launch = document.createElement("li"); {
ctn_launch.appendChild(p_launch);
}
{ tag(".flat-list buttons")[0].insertBefore(
ctn_launch,
tag(".flat-list buttons")[0].children[1]
); }
});
}
} func_handler();