MediaWiki:Character-Banner.js

$(function () {
    var api = new mw.Api();
    var classes = [];
    var maps = {};
    var isMobile = $('body').hasClass('skin-minerva') ? true : false;
    $('#p-Characters-label + .mw-portlet-body #nav > ul > li > a').each(function () {
        classes.push($(this).attr('title').replace('Lu/Ciel', 'LuCiel').replace(/(\/.*)/g, ''))
    });

    $('.character-banner-select a:eq(0)').addClass('active');

    function classesIntoMaps() {
        var apix;
        var i = 1;
        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];
            });
            i++;
            if (i == classes.length) {
                apix.done(function(){
                    $('.character-banner-select').addClass('loading-done');
                });
            }
        }
        
    }

    var lang = $('.character-banner-outer')[0].dataset.lang ?? ''

    if (isMobile) {
        var classes = [];
        var apix = api.parse(
            new mw.Title('MediaWiki:NavSidebar' + (lang ? '/' + lang : '') + '/Character'), { contentmodel: 'wikitext', wrapoutputclass: '', disablelimitreport: true, prop: 'text' });
        apix.then(function (text) {
            $('html').prepend('<div id="sidebar-content" style="display:none;position:absolute;top:-999999px;">' + text + '</div>');
            $('#sidebar-content #nav > ul > li > a').each(function () {
                classes.push($(this).attr('title').replace('Lu/Ciel', 'LuCiel').replace(/(\/.*)/g, ''));
            });
            console.log(classes)
            $('#sidebar-content').remove();
            classesIntoMaps();
        });

        $('.character-banner-select a').off('click').attr('href', '');
    }
    
    classesIntoMaps();

    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()[0].dataset.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, 2];
        else coords = [index - 8, 3];

        if ($(this).attr('data-unreleased') == 'true') {
            coords = [undefined, undefined];
        }

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

    function changeCharacterLink(el) {
        $('.char-banner').click(function () {
            var base_name = $(el)[0].dataset.base;
            if (base_name == 'LuCiel (Lu)') base_name = 'LuCiel';
            window.location.href = '/w/' + base_name + (lang ? '/' + lang : '');
        });
    }
    changeCharacterLink('.char-banner-tree');

    $('.char-banner-tree').mouseleave(function (e) {
        var base_name = $(this)[0].dataset.base;
        if (base_name == 'LuCiel') base_name = 'Lu/Ciel';
        $('.char-banner-title').text($(this)[0].dataset.displayBase);
        $('.char-banner-image').html(face(base_name.replace('/', '')));
        changeCharacterLink(this);
    });

    var global_tree = 'Elsword';
    var global_display_tree = 'Elsword';

    $('.character-banner-select a').click(function (e) {
        e.preventDefault();
        $('.character-banner-select a').removeClass('active');
        $(this).addClass('active');
        var base_name = $(this).parents('div[data-base]')[0].dataset.base;
        if (base_name == 'LuCiel (Lu)') base_name = 'LuCiel';
        $('.char-banner-tree').hide();
        $('.char-banner-tree[data-base=' + base_name + ']').css('display', 'grid');
        global_tree = base_name;
        global_display_tree = $(this).parents('div[data-base]')[0].dataset.displayBase;
        changeCharacterLink($(this).parent()[0]);
    });

    $('.character-banner-select a').on('mouseenter', function () {
        var base_name = $(this).parents('div[data-base]')[0].dataset.base;
        var base_display_name = $(this).parents('div[data-base]')[0].dataset.displayBase;
        if (base_name == 'LuCiel (Lu)') base_name = 'LuCiel';
        var coords = [undefined, undefined];

        $('.char-banner-title').text(base_display_name.replace('LuCiel', 'Lu/Ciel'));
        $('.char-banner-image').html(face(base_name, coords[0], coords[1]));
    });

    $('.character-banner-select').mouseleave(function () {
        var coords = [undefined, undefined];

        $('.char-banner-title').text(global_display_tree.replace('LuCiel', 'Lu/Ciel'));
        $('.char-banner-image').html(face(global_tree, coords[0], coords[1]));
    });
});