MediaWiki:Common.js: Difference between revisions
No edit summary |
No edit summary |
||
| Line 17: | Line 17: | ||
/* | /* Botão de Copiar - Versão Final Estável */ | ||
$(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; | ||
var $button = $('<button>') | var $button = $('<button>') | ||
.text('Copy') | .text('Copy') | ||
| Line 35: | Line 28: | ||
.css({ | .css({ | ||
'position': 'absolute', | 'position': 'absolute', | ||
'top': '10px', | 'top': '10px', | ||
'right': '10px', | 'right': '10px', | ||
'z-index': '100', | 'z-index': '100', | ||
'padding': '8px | 'width': '80px', // Largura fixa para o botão não encolher/mudar de tamanho | ||
'background': '# | 'padding': '8px 0', // Padding vertical | ||
'color': '# | 'background': '#28a745', // Verde inicial | ||
'color': '#ffffff', // Texto sempre branco | |||
'border': 'none', | 'border': 'none', | ||
'border-radius': ' | 'border-radius': '12px', // Cantos bem arredondados | ||
'cursor': 'pointer', | 'cursor': 'pointer', | ||
'font-size': ' | 'font-size': '13px', | ||
'font-weight': 'bold', | 'font-weight': 'bold', | ||
'transition': '0.3s' | 'outline': 'none', // Remove contornos ao clicar | ||
'transition': 'background 0.3s ease' | |||
}); | }); | ||
// | // Forçar a cor do texto para não ficar roxo (importante para Wikis) | ||
$button.on('click', function() { | $button.css('color', '#ffffff !important'); | ||
// Estado: Rato por cima (Hover) | |||
$button.hover( | |||
function() { $(this).css('background', '#218838'); }, | |||
function() { | |||
// 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) { | |||
e.preventDefault(); // Impede qualquer comportamento de link da Wiki | |||
var text = $block.find('pre').text(); | var text = $block.find('pre').text(); | ||
navigator.clipboard.writeText(text).then(function() { | navigator.clipboard.writeText(text).then(function() { | ||
$button.text('Copied!').css('background', '# | // Estado: Sucesso (Copied!) | ||
$button.text('Copied!') | |||
.css({ | |||
'background': '#007bff', // Azul quando copiado | |||
'color': '#ffffff' | |||
}); | |||
setTimeout(function() { | setTimeout(function() { | ||
$button.text('Copy').css('background', '# | // Estado: Voltar ao normal | ||
$button.text('Copy') | |||
.css({ | |||
'background': '#28a745', | |||
'color': '#ffffff' | |||
}); | |||
}, 2000); | }, 2000); | ||
}); | }); | ||
}); | }); | ||
$block.css('position', 'relative').prepend($button); | $block.css('position', 'relative').prepend($button); | ||
}); | }); | ||
}); | }); | ||