Jump to content

MediaWiki:Common.js: Difference between revisions

From ATRONIA Wiki
No edit summary
No edit summary
Line 17: Line 17:




/* Botão de Copiar - Versão Final Estável */
/* Botão de Copiar Moderno com Ícone */
$(function() {
$(function() {
     $('.mw-highlight').each(function() {
     $('.mw-highlight').each(function() {
         var $block = $(this);
         var $block = $(this);
         if ($block.find('.copy-btn').length > 0) return;
         if ($block.find('.copy-btn').length > 0) return;
        // Ícone SVG de dois quadrados (estilo moderno)
        var copyIcon = '<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" style="margin-right: 8px; vertical-align: middle;"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';


         var $button = $('<button>')
         var $button = $('<button>')
             .text('Copy')
             .html(copyIcon + '<span>Copiar código</span>')
             .addClass('copy-btn')
             .addClass('copy-btn')
             .css({
             .css({
Line 31: Line 34:
                 'right': '10px',
                 'right': '10px',
                 'z-index': '100',
                 'z-index': '100',
                 'padding': '8px 0',     // Padding vertical
                'display': 'flex',
                 'background': '#28a745', // Verde inicial
                'align-items': 'center',
                 'color': '#ffffff',      // Texto sempre branco
                 'padding': '6px 12px',
                 'border': 'none',
                 'background': '#343a40', // Cor cinza escuro moderna
                 'border-radius': '12px', // Cantos bem arredondados
                 'color': '#f8f9fa',      // Texto quase branco
                 'border': '1px solid #495057',
                 'border-radius': '6px', // Cantos ligeiramente arredondados
                 'cursor': 'pointer',
                 'cursor': 'pointer',
                 'font-size': '13px',
                 'font-size': '12px',
                 'font-weight': 'bold',
                 'font-family': 'sans-serif',
                'outline': 'none',       // Remove contornos ao clicar
                 'transition': 'all 0.2s ease'
                 'transition': 'background 0.3s ease'
             });
             });


         // Forçar a cor do texto para não ficar roxo (importante para Wikis)
         // Efeito Hover (passar o rato)
        $button.css('color', '#ffffff !important');
 
        // Estado: Rato por cima (Hover)
         $button.hover(
         $button.hover(
             function() { $(this).css('background', '#218838'); },
             function() { $(this).css({'background': '#495057', 'border-color': '#6c757d'}); },
             function() {  
             function() { $(this).css({'background': '#343a40', 'border-color': '#495057'}); }
                // Volta para a cor correta dependendo se acabou de copiar ou não
                var bg = ($(this).text() === 'Copied!') ? '#007bff' : '#28a745';
                $(this).css('background', bg);
            }
         );
         );


         $button.on('click', function(e) {
         $button.on('click', function(e) {
             e.preventDefault(); // Impede qualquer comportamento de link da Wiki
             e.preventDefault();
             var text = $block.find('pre').text();
             var text = $block.find('pre').text();
              
              
             navigator.clipboard.writeText(text).then(function() {
             navigator.clipboard.writeText(text).then(function() {
                 // Estado: Sucesso (Copied!)
                 // Muda o ícone e texto para "Copiado!"
                 $button.text('Copied!')
                 $button.find('span').text('Copiado!');
                      .css({
                $button.css({'background': '#28a745', 'border-color': '#28a745'});
                          'background': '#007bff', // Azul quando copiado
 
                          'color': '#ffffff'
                      });
               
                 setTimeout(function() {
                 setTimeout(function() {
                    // Estado: Voltar ao normal
                     $button.find('span').text('Copiar código');
                     $button.text('Copy')
                    $button.css({'background': '#343a40', 'border-color': '#495057'});
                          .css({
                              'background': '#28a745',
                              'color': '#ffffff'
                          });
                 }, 2000);
                 }, 2000);
             });
             });

Revision as of 09:43, 13 March 2026

/* Any JavaScript here will be loaded for all users on every page load. */

/**
 * GOOGLE ANALYTICS
 * Injeção correta de script externo para evitar o erro de "Parse error"
 */
var gaScript = document.createElement('script');
gaScript.src = "https://www.googletagmanager.com/gtag/js?id=G-MX174P23PW";
gaScript.async = true;
document.head.appendChild(gaScript);

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-MX174P23PW');



/* Botão de Copiar Moderno com Ícone */
$(function() {
    $('.mw-highlight').each(function() {
        var $block = $(this);
        if ($block.find('.copy-btn').length > 0) return;

        // Ícone SVG de dois quadrados (estilo moderno)
        var copyIcon = '<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" style="margin-right: 8px; vertical-align: middle;"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';

        var $button = $('<button>')
            .html(copyIcon + '<span>Copiar código</span>')
            .addClass('copy-btn')
            .css({
                'position': 'absolute',
                'top': '10px',
                'right': '10px',
                'z-index': '100',
                'display': 'flex',
                'align-items': 'center',
                'padding': '6px 12px',
                'background': '#343a40', // Cor cinza escuro moderna
                'color': '#f8f9fa',      // Texto quase branco
                'border': '1px solid #495057',
                'border-radius': '6px',  // Cantos ligeiramente arredondados
                'cursor': 'pointer',
                'font-size': '12px',
                'font-family': 'sans-serif',
                'transition': 'all 0.2s ease'
            });

        // Efeito Hover (passar o rato)
        $button.hover(
            function() { $(this).css({'background': '#495057', 'border-color': '#6c757d'}); },
            function() { $(this).css({'background': '#343a40', 'border-color': '#495057'}); }
        );

        $button.on('click', function(e) {
            e.preventDefault();
            var text = $block.find('pre').text();
            
            navigator.clipboard.writeText(text).then(function() {
                // Muda o ícone e texto para "Copiado!"
                $button.find('span').text('Copiado!');
                $button.css({'background': '#28a745', 'border-color': '#28a745'});

                setTimeout(function() {
                    $button.find('span').text('Copiar código');
                    $button.css({'background': '#343a40', 'border-color': '#495057'});
                }, 2000);
            });
        });

        $block.css('position', 'relative').prepend($button);
    });
});