User:Alexrmski/flags.js

/** * mw.loader.getScript( 'https://ark.gamepedia.com/index.php?title=User:Alexrmski/flags.js&action=raw&ctype=text/javascript' ) * .then( *  function { *     FFlags.run; *   }, *   function(e) {} * ); */

var FFlags = { config: { es: [ {       type: 'rect', color: '#AA151B85', start: [0, 0], end: [1, 1 / 3] },     {        type: 'rect', color: '#F1BF0085', start: [0, 1 / 3], end: [1, 1 / 3] },     {        type: 'rect', color: '#AA151B85', start: [0, 2 / 3], end: [1, 1 / 3] },   ],    fr: [ {       type: 'rect', color: '#0055A485', start: [0, 0], end: [1/3, 1] },     {        type: 'rect', color: '#FFFFFF85', start: [1/3, 0], end: [2/3, 1] },     {        type: 'rect', color: '#EF413585', start: [2/3, 0], end: [1, 1] },   ],    de: [ {       type: 'rect', color: '#00000085', start: [0, 0], end: [1, 1 / 3] },     {        type: 'rect', color: '#FF000085', start: [0, 1 / 3], end: [1, 1 / 3] },     {        type: 'rect', color: '#FFCC0085', start: [0, 2 / 3], end: [1, 1 / 3] },   ],    ja: [ {       type: 'rect', color: '#FFFFFF85', start: [0, 0], end: [1, 1] },     {        type: 'circle', color: '#bc002d85', pos: [1 - 0.5, 1 - 0.5], radius: 0.25 },   ],  },

propertyFromStylesheet: function (selector, attribute) { /* stackoverflow.com/questions/16778814/read-css-property-from-stylesheet */ var value;

[].some.call(document.styleSheets, function (sheet) {     return [].some.call(sheet.rules, function (rule) { if (selector === rule.selectorText) { return [].some.call(rule.style, function (style) {           if (attribute === style) {              value = rule.style.getPropertyValue(attribute);              return true;            }

return false; });       }

return false; });   });

return value; },

draw: function (info, ctx, originW, originH) { ctx.fillStyle = info.color;

switch (info.type) { case "rect": var x0 = originW * info.start[0]; var y0 = originH * info.start[1]; var x1 = originW * info.end[0]; var y1 = originH * info.end[1]; ctx.fillRect(x0, y0, x1, y1); break;

case "circle": var x = originW * info.pos[0]; var y = originH * info.pos[1]; ctx.beginPath; ctx.arc(x, y, info.radius * originW, 0, 2 * Math.PI); ctx.fill; break; } },

paint: function (info, image) { var canvas = document.createElement('canvas'); canvas.width = image.width; canvas.height = image.height; var ctx = canvas.getContext('2d'); ctx.drawImage(image, 0, 0);

info.forEach(function (obj) {     FFlags.draw(obj, ctx, image.width, image.height);    });

return canvas.toDataURL("image/x-icon"); },

run: function { var lang = mw.config.get('wgContentLanguage'); var shapes = FFlags.config[lang]; if (!shapes) { return; }

var IconRel = document.querySelector('[rel="shortcut icon"]'); var LogoRel = document.querySelector('#p-logo .mw-wiki-logo'); var Icon = new Image; var Logo = new Image;

Icon.crossOrigin = "anonymous"; Logo.crossOrigin = "anonymous";

Icon.src = IconRel.getAttribute('href'); var logoUrl = FFlags.propertyFromStylesheet('.mw-wiki-logo', 'background-image'); Logo.src = logoUrl.substr(5, logoUrl.length - 7);

Icon.onload = function { IconRel.setAttribute('href', FFlags.paint(shapes, Icon)); };   Logo.onload = function  { LogoRel.style.backgroundImage = 'url(' + FFlags.paint(shapes, Logo) + ')'; }; }, };