Widget:Droflax

(function() {

   'use strict';
   
   var config = {
       modes: {
           styles: function() {
               // CSS crítico para visualización inicial
               var criticalCSS = `
                   .personaje-box {
                       display: block;
                       visibility: visible;
                       min-height: 200px;
                       font-family: sans-serif;
                   }
                   .personaje-header {
                       background: #f5f5f5;
                       padding: 15px;
                       border-radius: 8px 8px 0 0;
                   }
                   .personaje-nome {
                       font-size: 24px;
                       font-weight: bold;
                   }
                   .art-personaje {
                       max-width: 100%;
                       height: auto;
                       display: block;
                       margin: 0 auto;
                   }
               `;
               
               var styleTag = document.createElement('style');
               styleTag.textContent = criticalCSS;
               document.head.appendChild(styleTag);
               
               // Precargar recursos
               var preloadLinks = [
                   '<link rel="preload" href="https://wiki.gla.com.br/w/index.php?title=MediaWiki:Droflax.css&action=raw&ctype=text/css" as="style" onload="this.onload=null;this.rel=\'stylesheet\'">',
                   '<link rel="preload" href="https://wiki.gla.com.br/w/index.php?title=MediaWiki:Droflax.js&action=raw&ctype=text/javascript" as="script">'
               ].join();
               
               document.head.insertAdjacentHTML('beforeend', preloadLinks);
           },
           scripts: function() {
               var checkReady = setInterval(function() {
                   var container = document.querySelector('.personaje-box');
                   if (container && container.getAttribute('data-loaded') === 'false') {
                       clearInterval(checkReady);
                       initDroflax();
                   }
               }, 100);
               
               function initDroflax() {
                   var script = document.createElement('script');
                   script.src = 'https://wiki.gla.com.br/w/index.php?title=MediaWiki:Droflax.js&action=raw&ctype=text/javascript';
                   script.defer = true;
                   document.head.appendChild(script);
               }
           }
       },
       init: function() {
           var mode = this.getMode();
           if (this.modes[mode]) {
               this.modes[mode]();
           }
       },
       getMode: function() {
           var matches = location.href.match(/[?&]mode=([^&]+)/);
           return matches ? matches[1] : 'scripts';
       }
   };
   
   if (typeof module === 'object' && typeof module.exports === 'object') {
       module.exports = config;
   } else {
       config.init();
   }

})();