Previews covers in innist forum when hovering over the respective hyperlinks. Puts images on the table and zooms when mouseover the image. CTRL+SPACE TO ACTIVATE.
// ==UserScript==
// @name INNIST LIST Cover on threads Preview
// @namespace innist_list_cover
// @include https://innist.forumvi.com/f3*-act-rpg-slg*
// @include https://innist.forumvi.com/f4*-jav*
// @include https://innist.forumvi.com/f5*-eroge*
// @include https://innist.forumvi.com/f7*-pc-games*
// @include https://innist.forumvi.com/f6-cgs*
// @include https://innist.forumvi.com/f5p*-eroge
// @include https://innist.forumvi.com/f3p*-act-rpg-slg
// @include https://innist.forumvi.com/f4p*-jav
// @include https://innist.forumvi.com/f6p*-cgs
// @include https://innist.forumvi.com/f7p*-pc-games
// @include https://innist.forumvi.com/search*
// @version 1.0.3
// @description Previews covers in innist forum when hovering over the respective hyperlinks. Puts images on the table and zooms when mouseover the image. CTRL+SPACE TO ACTIVATE.
// @grant GM_setValue
// @grant GM_getValue
// @require http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
// @license http://creativecommons.org/licenses/by-nc-sa/4.0/
// @inject-into content
// ==/UserScript==
// For analyzing what kind of page
var pageURL = document.URL;
var deactivatedColor = 'rosybrown';
//debug
unsafeWindow.dvar = "TEST";
var styles = `
.tdsOff {
width: 0px;
}
.tdsOn {
width: 150px;
}
`
var styleSheet = document.createElement("style")
styleSheet.type = "text/css"
styleSheet.innerText = styles
document.head.appendChild(styleSheet)
var mActive = false;
var keysDown = {};
window.onkeydown = function(e) {
if(keysDown[e.key] == true) return;
keysDown[e.key] = true;
if (keysDown["Control"] && keysDown[" "]) {
mActive = !mActive;
if(mActive) {
console.log("ACTIVATED ajax query");
$('#popoverstatus').css('visibility', 'visible');
$('#popoverstatus').css('border-color', 'darkgreen');
$('#popoverstatus').css('background-color', 'darkgreen');
$('#popoverstatus').css('color', 'wheat');
$('#popoverstatus').text("Mouseover active");
// Remove width 0 to properly display character images
var mTds = $('.tdsOff');
mTds.removeClass('tdsOff');
mTds.addClass('tdsOn');
} else {
console.log("DE-ACTIVATED ajax query");
$('#popoverstatus').css('visibility', 'visible');
$('#popoverstatus').css('border-color', deactivatedColor);
$('#popoverstatus').css('background-color', deactivatedColor);
$('#popoverstatus').css('color', 'white');
$('#popoverstatus').text("CTRL+Space to activate");
// Don't remove new cell so the mini-images can be seen even with it deactivated
}
}
}
window.onkeyup = function(e) {
keysDown[e.key] = false;
}
// Centering function
jQuery.fn.center = function () {
this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px");
// Display image on left hand side
// this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) * 0.4) + $(window).scrollLeft()) + "px");
// Display image on right hand side
this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) * 0.6) + $(window).scrollLeft()) + "px");
$('#popover img').css('display','block');
return this;
};
// Add box where the image will sit
$('body').append('<div ID="popover"></div>');
$('#popover').css('position', 'absolute');
$('#popover').css('z-index', '10');
$('#popover').css('box-shadow','0px 0px 5px black');
// Status box
$('body').append('<div ID="popoverstatus"></div>');
$('#popoverstatus').css('z-index', '10');
$('#popoverstatus').css('box-shadow','0px 0px 5px black');
$('#popoverstatus').css('position', 'fixed');
$('#popoverstatus').css('top', '20%');
$('#popoverstatus').css('right', '2%');
$('#popoverstatus').css('border-style', 'solid');
$('#popoverstatus').css('border-color', deactivatedColor);
$('#popoverstatus').css('background-color', deactivatedColor);
$('#popoverstatus').css('color', "white");
$('#popoverstatus').css('border-radius', '6px');
$('#popoverstatus').css('visibility', 'visible');
$('#popoverstatus').css('margin-left', '-5px');
$('#popoverstatus').css('border-width', '5px');
$('#popoverstatus').append("CTRL+Space to activate");
function mouseOverImage(ev) {
//console.log("popup img");
$('#popover').empty();
$('#popover').append('<img src="' + ev.target.src + '"></img>');
$('#popover img').load(function() {
$('#popover').center();
});
}
function mouseLeaveImage(ev) {
$('#popover').empty();
}
$('dd a').mouseover(function () {
if(!mActive) {
console.log("NOT ACTIVATED, returning");
return;
}
unsafeWindow.dvar = $(this)
$(this).css('font-weight', 'bold'); // Bolds hovered links
var pagelink = 'https://innist.forumvi.com/' + $(this).attr('href');
var mImageCell = $(this).closest("dl")[0].children[0];
var mStyle = "text-align:center; vertical-align:middle; max-width:150px; max-height:150px;"
// If image link pre-cached
if (GM_getValue(pagelink)){
var retrievedLink = GM_getValue(pagelink);
//console.log("REPLACED");
// Put image if not any
if(mImageCell.childElementCount == 0) {
var img = document.createElement('img');
img.style = mStyle;
img.src = retrievedLink;
img.onmouseover = mouseOverImage;
img.onmouseleave = mouseLeaveImage;
mImageCell.appendChild(img);
}
} // Else get image src from link
else{
$.ajax({
url: pagelink,
dataType: 'text',
success: function (data) {
// console.log("OK");
var imagelink = $('<div>').html(data)[0].getElementsByClassName('postbody')[0].getElementsByTagName('img')[0].src;
console.log("link " + imagelink)
unsafeWindow.dvar = data
if(mImageCell.childElementCount == 0) {
var img = document.createElement('img');
img.style = mStyle;
img.src = imagelink;
img.onmouseover = mouseOverImage;
img.onmouseleave = mouseLeaveImage;
mImageCell.appendChild(img);
mImageCell.style = "style : 150px";
}
// cache info
GM_setValue(pagelink, imagelink);
console.log("(" + pagelink + ", "+ imagelink + ") successfully cached.") // for testing purposes
}
});
}
});
//Put an extra td for the image
var trs = document.querySelectorAll('.row dl');
trs.forEach(function(mTr) {
var newItem = document.createElement("dd");
newItem.className = "tdsOff";
mTr.insertBefore(newItem, mTr.firstChild)
});