MediaWiki:Character-Banner.js

$(function () {
    var classes = [];
    var maps = {};
    $('#p-Characters-label + .mw-portlet-body #nav > ul > li > a').each(function () {
        classes.push($(this).attr('title').replace('/', ''))
    });

    var api = new mw.Api();
    for (let classx of classes) {
        var apix = api.parse(
            '[[File: Face - ' + classx + '.png]]', { contentmodel: 'wikitext', wrapoutputclass: '', disablelimitreport: true });
        apix.then(function (text) {
            maps[classx] = text.match(/\/wiki(.*?)\.png/g)[0];
        });
    }

    var face_coords = function (path_no, job_no) {
        var coords = [1, 1];
        if (job_no !== undefined && path_no !== undefined) {
            if (job_no == 1) {
                if (path_no == 4) coords = [2, 4]
                else coords = [1 + path_no, 1]
            } else if (job_no == 2) {
                if (path_no == 4) coords = [3, 4]
                else coords = [path_no, 2]
            } else {
                if (path_no == 1) coords = [3, 3]
                else if (path_no == 2) coords = [4, 3]
                else if (path_no == 3) coords = [1, 4]
                else coords = [1, 5]
            }
        }
        return coords;
    }

    var face = function (base_char, path_no, job_no) {
        var coords = face_coords(path_no, job_no);
        var offset_left = Math.abs(((coords[0] - 1) * 118) + 1) * -1;
        var offset_top = Math.abs(((coords[1] - 1) * 62) + 1) * -1;
        return '<div class="image-cropped"><div class="image-wrap" style="top: ' + offset_top + 'px; left: ' + offset_left + 'px;"><img src="' + maps[base_char] + '"/></div>';
    }

    $('.char-banner-tree-image').mouseenter(function (e) {
        var base_name = $(this).parent().attr('data-base');
        var class_name = $(this).attr('data-class-name');
        var index = $(this).index() + 1;
        var coords = [1, 1];

        if (index >= 1 && index <= 4) coords = [index, 1];
        else if (index >= 5 && index <= 8) coords = [index - 4, 1];
        else coords = [index - 8, 3];

        $('.char-banner-title').text(class_name);
        $('.char-banner-image').html(face('Aisha', coords[0], coords[1]));
    });

    $('.char-banner-tree').mouseleave(function (e) {
        var base_name = $(this).attr('data-base');
        if (base_name == 'LuCiel') base_name = 'Lu/Ciel';
        $('.char-banner-title').text(base_name);
        $('.char-banner-image').html(face('Aisha'));
        $('.char-banner-image').click(function () {
            window.location.href = '/w/' + base_name;
        });
    });
});