Escapist webcomics viewer

Allows navigation to next picture (chronologically) on The Escapist webcomics

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name        Escapist webcomics viewer
// @namespace   None
// @description Allows navigation to next picture (chronologically) on The Escapist webcomics
// @require     https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js
// @include     /^http://www\.escapistmagazine\.com/articles/view/comicsandcosplay/comics/.*/.*$/
// @grant       none
// @author      iceman94
// @version     0.01
// @copyright   2015+, iceman94
// ==/UserScript==


//=======================================================================================================
// Cross-browsers load function
// Tests in this order :
// -support for jQuery API
// |-uses $(window).load method if available
// |-uses $(window).ready method if available
// -support for DOMContentLoaded event (compatible only with the following browsers :
// Chrome >= 0.2; Firefox >= 1.0; IE >= 9.0; Opera >= 9.0; Safari >= 3.1)
// -support for document.attachEvent
// -uses setTimeout w/ 5000ms delay
//=======================================================================================================

function XBLoad (func, verbose)
{
    verbose = verbose || false;

    if (window.jQuery)
    {
        if ($(window).load)
        {
            if (verbose == true) { console.log('Javascript loaded using $(window).load method'); };
            return $(window).load(function() { func(); });
        }
        else if ($(window).ready)
        {
            if (verbose == true) { console.log('Javascript loaded using $(window).ready method'); };
            return $(window).ready(function() { func(); });
        };        
    }
    else if (document.addEventListener)
    {
        if (verbose == true) { console.log('Javascript loaded using document.addEventListener method'); };
        document.addEventListener('DOMContentLoaded', function(event)
        {
            return func();
        });
    }
    else if (document.attachEvent)
    {
        if (verbose == true) { console.log('Javascript loaded using document.attachEvent method'); };
        document.attachEvent('load', function()
        {
            return func();
        });
    }
    else
    {
        if (verbose == true) { console.log('Javascript loaded using setTimeout method'); };
        return setTimeout(function() { func(); }, 5000);
    };
};


//=======================================================================================================
// Miscellaneous functions
//=======================================================================================================

// Function to search a string in an array and, if it matches, returns the according string
function searchStringInArray (str, strArray)
{
    for (var j=0; j<strArray.length; j++) {
        if (strArray[j].match(str)) return strArray[j];
    }
    return -1;
};

// Locates field to be modified by its ID, Tag or Class and sets its CSS (optional)
function locateTgt (tgtType, tgtVal, tgtCSS, tgtIdx)
{
    tgtType = tgtType || 'id';
    tgtVal = tgtVal;
    tgtCSS = tgtCSS || '';
    tgtIdx = tgtIdx || '';

    switch (tgtType)
    {
        case 'id':
            var tgt = document.getElementById(tgtVal);
            break;
        case 'tag' :
            var tgt = document.getElementsByTagName(tgtVal)[tgtIdx];
            break;
        case 'class':
            var tgt = document.getElementsByClassName(tgtVal)[tgtIdx];
            break;
    };

    if (tgtCSS !== '')
    {
        setAttr(tgt, 'style', tgtCSS);
    };
    return tgt;
};

// Locates main picture (i.e. comic picture) in a collection of images based on its 'src' attribute
function locatePic (rgx)
{
    var imgColl = document.getElementsByTagName('img');
    for(var i=0; i<imgColl.length; i++)
    {
        if(imgColl[i] && imgColl[i].src.match(rgx) && imgColl[i].height > 120)
        {
            return imgColl[i];
        };
    };
}

// Converts base64 code to HTMLImageElement ('<img>' node)
function base64ToImage (b64Code, nodeId)
{
    nodeId = nodeId || '';
    var image = new Image();
    image.src = b64Code;
    image.id = nodeId;
    return image;
}


//=======================================================================================================
// Allows navigation to next picture as specified by the 'Next' node 
// on any comic page just by clicking on the main picture
//=======================================================================================================

function showtime ()
{
    //Arrow pointer converted to base64
    //Src : https://openclipart.org/image/36px/svg_to_png/191324/cyberscooty-fleche-verte.png
    var picB64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAYCAMAAAClZq98AAAACXBIWXMAAAsTAAALEwEAmpwYAAABI1BMVEUAAAAzgAA5cQA2eQA1dQszego5cQk3dgk1cgk3dQc1ggY9egY7gQQ/gQQ8gwQ9gQRAhgdAhQY7gQg/hghCjQU+hQdAiAdBhglAiQhBighDjAlCigdBighBiwhBiQdBiwdBjAdCjAdDjAdAhwdBiwhCiwZCiAdCiQdBiQdDjgdHlAhJlwhJlwlHlghHlghHlghLnghMoQhFkQhMoAlRpgpPpglPqAlVqxBcshdSrwlXuApXuApjvxdvxStavwpexgttziCE1kFhzAthzQtk0wxm1wxn2Qxo2wxv3RZx3Rtz2iCB4TSC2D+I4EGM202O5EqQ5EyQ5U2T3VmV5FWX5lia512b32We6GOe6GSf6GWg6Gav7H6+8Je/8JjJ8qjO87D////03ckAAAAAQ3RSTlMAChITGBkbHB0lKy5BQURHTFhfYWVvb3Z7hZWbpKmtra2tr7PDyM7S1NnZ2trb3ODg4OHh4+Xl5ufr8PHz9fb7/P3+7RRtNQAAAAFiS0dEYMW3fBAAAADESURBVCjPjdPVDgIxEEDR4u7u7u6ui7u7/P9fsMACISk73LdJTtKknSKESyVEcI6YHEb2UV4PItvmWrFAyLq4Xho+3ntm8TG5JufzaRmWvZAnhCkxPpKtczoKRbb7V7tP+8O9VdlModn8d9O6l/1AQ9oGQfEd9enrpTUk6kIVjX+gjBpEnagEPK7p5yAIVZ3Pe6IzBQP1LBFMqfbDxBXUszC5mFwESVoBEf2qkKjmZiAIlUzg0hFZLbi+1qQU/ghKwdd4A8oUdYndVNudAAAAAElFTkSuQmCC';
    
    // Creates hidden node w/ mouse cursor picture converted from base64 to remove external dependencies
    var hiddenDiv = base64ToImage(picB64);
    
    // Regex to match main picture node 'src'
    var rgx = /^.*\/media\/global\/images\/library\/.*(jpg|png|gif)$/;
    
    // Locates 'Next' node
    var next = locateTgt('class', 'folder_nav_next', null, '0');
    // Locates main picture node
    var pic = locatePic(rgx);
    
    if (next && next.href && pic && pic.src && pic.src.match(rgx))
    {
        pic.style.cursor = "url('" + hiddenDiv.src + "'), auto";
        pic.setAttribute('onclick', "javascript:window.location='" + next.href + "';");
        
        // Makes sure there is no event or link for parent node
        if (pic.parentNode && pic.parentNode.onclick)
        {
            pic.parentNode.removeAttribute('onclick');
        };
        if (pic.parentNode && pic.parentNode.href)
        {
            pic.parentNode.removeAttribute('href');
        };
    };
};


//=======================================================================================================
// Showtime !
//=======================================================================================================

XBLoad(showtime);