MediaWiki:Common.js: Difference between revisions
No edit summary |
No edit summary |
||
| Line 17: | Line 17: | ||
/* Botão de Copiar | /* 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>') | ||
. | .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': ' | 'display': 'flex', | ||
'background': '# | 'align-items': 'center', | ||
'color': '# | 'padding': '6px 12px', | ||
'border': ' | 'background': '#343a40', // Cor cinza escuro moderna | ||
'border-radius': ' | 'color': '#f8f9fa', // Texto quase branco | ||
'border': '1px solid #495057', | |||
'border-radius': '6px', // Cantos ligeiramente arredondados | |||
'cursor': 'pointer', | 'cursor': 'pointer', | ||
'font-size': ' | 'font-size': '12px', | ||
'font- | 'font-family': 'sans-serif', | ||
'transition': 'all 0.2s ease' | |||
'transition': ' | |||
}); | }); | ||
// | // Efeito Hover (passar o rato) | ||
$button.hover( | $button.hover( | ||
function() { $(this).css('background', '# | function() { $(this).css({'background': '#495057', 'border-color': '#6c757d'}); }, | ||
function() { | function() { $(this).css({'background': '#343a40', 'border-color': '#495057'}); } | ||
); | ); | ||
$button.on('click', function(e) { | $button.on('click', function(e) { | ||
e.preventDefault(); | 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() { | ||
// | // Muda o ícone e texto para "Copiado!" | ||
$button.text(' | $button.find('span').text('Copiado!'); | ||
$button.css({'background': '#28a745', 'border-color': '#28a745'}); | |||
setTimeout(function() { | setTimeout(function() { | ||
$button.find('span').text('Copiar código'); | |||
$button.text(' | $button.css({'background': '#343a40', 'border-color': '#495057'}); | ||
}, 2000); | }, 2000); | ||
}); | }); | ||