|
|
(3 intermediate revisions by the same user not shown) |
Line 1: |
Line 1: |
| <includeonly> | | <includeonly> |
| <script type="application/javascript"> | | <script type="application/javascript"> |
| ; (function () {
| | var character_banner_exists = true; |
| RLQ.push(function () {
| |
| 'use strict';
| |
| 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>';
| |
| }
| |
| | |
| var ready = function() {
| |
| $('.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;
| |
| });
| |
| });
| |
| };
| |
| if (document.readyState == 'loading') {
| |
| document.addEventListener('DOMContentLoaded', ready);
| |
| } else {
| |
| ready();
| |
| }
| |
| });
| |
| })();
| |
| </script> | | </script> |
| </includeonly> | | </includeonly> |