Botão copiar no codebox

Item: Botão copiar no codebox
Rating: 1

por YouTube3 07.03.18 18:16

Detalhes da questão

Endereço do fórum: http://vgnfamily.forumais.com/
Versão do fórum: PunBB

Descrição

Olá !

Gostaria de adicionar o botão "Copiar", no codebox do fórum. É possível?

Até,

por virus 07.03.18 18:43

Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'.

Veja se isto ajuda -> https://ajuda.forumeiros.com/t92138-tag-code-igual-ao-do-fdf#626393

Até.

por YouTube3 07.03.18 19:00

Sem resultados, quando utilizei os códigos mudou toda aparência do [code].
Apenas quero adicionar só o botão de "copiar" no codebox.

por YouTube3 09.03.18 1:26

#UP ^^^

por Chanp 09.03.18 3:22

Olá,
Tente trocar o código por esse:

Código:: $(function() { var deferreds; deferreds = []; if (typeof ZeroClipboard === 'undefined') { deferreds.push($.getScript('http://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.0.0-beta.5/ZeroClipboard.min.js')); } $.when.apply(null, deferreds).then(function() { var client; ZeroClipboard.config({swfPath: 'http://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.0.0-beta.5/ZeroClipboard.swf'}); client = ZeroClipboard($('.punbb-copy')); }); });

Resulta?
o/

por YouTube3 09.03.18 19:34

Chanp escreveu:Olá,
Tente trocar o código por esse:

Código:
$(function() { var deferreds; deferreds = []; if (typeof ZeroClipboard === 'undefined') { deferreds.push($.getScript('http://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.0.0-beta.5/ZeroClipboard.min.js')); } $.when.apply(null, deferreds).then(function() { var client; ZeroClipboard.config({swfPath: 'http://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.0.0-beta.5/ZeroClipboard.swf'}); client = ZeroClipboard($('.punbb-copy')); }); });

Resulta?
o/

Bom. Usei o código a cima como JS, estou certo? Sem resultados.

por virus 09.03.18 19:40

Olá, use o código do Ange Tuteur - Forumactif.
https://ajuda.forumeiros.com/t111637-copiar-mesclado-ao-selecionar-tudo#788366

Até!

por YouTube3 09.03.18 20:38

Adicionei o código e ficou assim: https://i.imgur.com/fAEtjv3.jpg
Não há como deixar assim? https://i.imgur.com/7l9m7sC.jpg

A imagem não precisa ser a mesma do FDF pode ser esse: <i class="fas fa-clipboard"></i>
Link dele: https://fontawesome.com/icons/clipboard?style=solid

por **Fraise** 10.03.18 10:42

Olá @YouTube3

Troque o código JS por este:

Código:: $.getScript('https://cdn.jsdelivr.net/clipboard.js/1.5.16/clipboard.min.js', function() { window.fae_copyCode = { copy : '<i class="fas fa-clipboard"></i>', copied : '<i class="fas fa-clipboard"></i>' }; $(function() { var a = $('.codebox dt').not('.spoiler > dt, .hidecode > dt'), i = 0, j = a.length; if (a[0]) { $('head').append('<style type="text/css">.fae_copy-code{float:right;cursor:pointer;}.fae_copy-code:hover{text-decoration:underline}</style>'); for (; i < j; i++) { a[i].insertAdjacentHTML('beforeend', '<span class="fae_copy-code">' + fae_copyCode.copy + '</span>'); } new Clipboard('.fae_copy-code',{ target : function (copy) { if (copy.innerHTML != fae_copyCode.copied) { return $(copy).closest('.codebox').find('.cont_code, code')[0]; } } }).on('success', function (e) { var copy = e.trigger; if (copy.innerHTML != fae_copyCode.copied) { copy.innerHTML = fae_copyCode.copied; copy.className += ' fae_copied'; window.setTimeout(function() { copy.innerHTML = fae_copyCode.copy; copy.className = copy.className.replace('fae_copied', ''); }, 1000); } e.clearSelection(); }); } }); });

Observação: Você tem de ter pelo menos a versão 5.5.0 da FontAwesome para que o ícone apareça. Para instalar essa versão, basta aceder ao template overall_header e abaixo da tag <head> adicionar: (não se esqueça de salvar e publicar o template)

Código:: <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>

Atenciosamente,
Fraise.

por YouTube3 10.03.18 14:48

Bom, fiz tudo que pediu porem deu alguns problemas. ^^

Na parte de copiar do codebox ficou assim: https://imgur.com/a/OYUCu
Fica dando diversos problemas quando clico no botão.

E quando adicionei o código:

Código:: <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>

Abaixo do <head> deu problema nos ícones do fórum: https://i.imgur.com/CSboqtD.jpg

por **tikky** 10.03.18 18:27

Olá,
remova as etapas passadas em cima e simplesmente usa este JS

Código:: $.getScript('https://cdn.jsdelivr.net/clipboard.js/1.5.16/clipboard.min.js', function() { window.fae_copyCode = { copy : ' ', copied : 'Copiado!' }; $(function() { var a = $('.codebox dt').not('.spoiler > dt, .hidecode > dt'), i = 0, j = a.length; if (a[0]) { $('head').append('<style type="text/css">.fae_copy-code{float:right;cursor:pointer;}.fae_copy-code:hover{color: tomato}</style>'); for (; i < j; i++) { a[i].insertAdjacentHTML('beforeend', '<span class="fae_copy-code fa fa-clipboard"></span>'); } new Clipboard('.fae_copy-code',{ target : function (copy) { if (copy.innerHTML != fae_copyCode.copied) { return $(copy).closest('.codebox').find('.cont_code, code')[0]; } } }).on('success', function (e) { var copy = e.trigger; if (copy.innerHTML != fae_copyCode.copied) { copy.innerHTML = fae_copyCode.copied; copy.className += ' fae_copied'; window.setTimeout(function() { copy.innerHTML = fae_copyCode.copy; copy.className = copy.className.replace('fae_copied', ''); }, 1000); } e.clearSelection(); }); } }); });

e se ainda não tiver o Font awesome instalado em seu fórum adicione simplesmente isto do overall_header, em baixo da variável {CSS}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

por virus 10.03.18 18:38

Com poucas edições pode chegar em um resultado parecido e lembrando que não vai precisar chamar o fontawesome.

Código:: $.getScript('https://cdn.jsdelivr.net/clipboard.js/1.5.16/clipboard.min.js', function() { window.fae_copyCode = { copy: "<span class='yoal'>Copy!</span>", copied: "<span class='yoal'>Copy!</span>" }; $(function() { var a = $('.codebox dt').not('.spoiler > dt, .hidecode > dt'), i = 0, j = a.length; if (a[0]) { $('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" /><style type="text/css">.yoal {color:transparent;}.fae_copy-code:hover:after{content: "Copiar código";background-color: #4c4747;border-radius: 5px;padding: 4px;color: white;font-family: "Threbuchet", sans-serif;position: absolute;right: 0;top: -4px;}.fae_copy-code{float:right;cursor:pointer;}.fae_copy-code:hover{text-decoration:none}</style>'); for (; i < j; i++) { a[i].insertAdjacentHTML('beforeend', '<a class="fa fa-clipboard fae_copy-code " aria-hidden="true">' + fae_copyCode.copy + '</a>'); } new Clipboard('.fae_copy-code',{ target : function (copy) { if (copy.innerHTML != fae_copyCode.copied) { return $(copy).closest('.codebox').find('.cont_code, code')[0]; } } }).on('success', function (e) { var copy = e.trigger; if (copy.innerHTML != fae_copyCode.copied) { copy.innerHTML = fae_copyCode.copied; copy.className += ' fae_copied'; window.setTimeout(function() { copy.innerHTML = fae_copyCode.copy; copy.className = copy.className.replace('fae_copied', ''); }, 1000); } e.clearSelection(); }); } }); });

Até.

por YouTube3 10.03.18 20:04

O código do Pedxz funcionou, só que quando clica no botão "copiar" ou passa o mouse sobre ele fica assim.
Alguma forma de remover esse "copiado" e esse efeito hover vermelho que fica ao passar o mouse?

Eu uso esse mesmo efeito tooltip que utilizam aqui, é possível adicionar ele ao invés de ficar a escrita "Copiado"?
Exemplo: https://imgur.com/a/kY6CG

Em questão ao código do virus ficou assim: https://i.imgur.com/xlzlhVB.jpg

Até,

por **tikky** 10.03.18 20:54

Muda para:

Código:: $.getScript('https://cdn.jsdelivr.net/clipboard.js/1.5.16/clipboard.min.js', function() { window.fae_copyCode = { copy : ' ', copied : ' ' }; $(function() { var a = $('.codebox dt').not('.spoiler > dt, .hidecode > dt'), i = 0, j = a.length; if (a[0]) { $('head').append('<style type="text/css">.fae_copy-code{float:right;cursor:pointer;}.tooltip{display: inline;position: relative;}.tooltip:hover:after {background: #333;background: rgba(0,0,0,.8);border-radius: 5px;bottom: 26px;color: #fff;content: attr(title);left: 20%;padding: 5px 15px;position: absolute;z-index: 98;width: auto}</style>'); for (; i < j; i++) { a[i].insertAdjacentHTML('beforeend', '<span class="fae_copy-code tooltip fa fa-clipboard" title="Copiar"></span>'); } new Clipboard('.fae_copy-code',{ target : function (copy) { if (copy.innerHTML != fae_copyCode.copied) { return $(copy).closest('.codebox').find('.cont_code, code')[0]; } } }).on('success', function (e) { var copy = e.trigger; if (copy.innerHTML != fae_copyCode.copied) { copy.innerHTML = fae_copyCode.copied; copy.className += ' fae_copied'; window.setTimeout(function() { copy.innerHTML = fae_copyCode.copy; copy.className = copy.className.replace('fae_copied', ''); }, 1000); } e.clearSelection(); }); } }); });

por YouTube3 10.03.18 22:48

Quase lá, reparei que quando passa o mouse sobre o clipboard aparece tipo que uma tarja preta e logo em seguida aparece o tooltip de copiar. Só tenta remover essa tarjinha e quando clicar no clipboard aparecer copiado? É possível?
Botão copiar no codebox FvRw5dg

Até.

por **tikky** 11.03.18 13:55

Mude para:

Código:: $.getScript('https://cdn.jsdelivr.net/clipboard.js/1.5.16/clipboard.min.js', function() { window.fae_copyCode = { copy : ' ', copied : ' ' }; $(function() { var a = $('.codebox dt').not('.spoiler > dt, .hidecode > dt'), i = 0, j = a.length; if (a[0]) { $('head').append('<style type="text/css">.fae_copy-code{float:right;cursor:pointer;}.tooltip{display: inline;position: relative;}.tooltip:hover:after {background: #333;background: rgba(0,0,0,.8);border-radius: 5px;bottom: 26px;color: #fff;content: "Cópiar";left: 20%;padding: 5px 15px;position: absolute;z-index: 98;width: auto}.tooltip:active:after {background: #333;background: rgba(0,0,0,.8);border-radius: 5px;bottom: 26px;color: #fff;content: "Copiado!";left: 20%;padding: 5px 15px;position: absolute;z-index: 99;width: auto}</style>'); for (; i < j; i++) { a[i].insertAdjacentHTML('beforeend', '<span class="fae_copy-code tooltip fa fa-clipboard"></span>'); } new Clipboard('.fae_copy-code',{ target : function (copy) { if (copy.innerHTML != fae_copyCode.copied) { return $(copy).closest('.codebox').find('.cont_code, code')[0]; } } }).on('success', function (e) { var copy = e.trigger; if (copy.innerHTML != fae_copyCode.copied) { copy.className += ' fae_copied'; window.setTimeout(function() { copy.className = copy.className.replace('fae_copied', ''); }, 1000); } e.clearSelection(); }); } }); });

por YouTube3 11.03.18 15:30

Pedxz escreveu:Mude para:

Código:
$.getScript('https://cdn.jsdelivr.net/clipboard.js/1.5.16/clipboard.min.js', function() { window.fae_copyCode = { copy : ' ', copied : ' ' }; $(function() { var a = $('.codebox dt').not('.spoiler > dt, .hidecode > dt'), i = 0, j = a.length; if (a[0]) { $('head').append('<style type="text/css">.fae_copy-code{float:right;cursor:pointer;}.tooltip{display: inline;position: relative;}.tooltip:hover:after {background: #333;background: rgba(0,0,0,.8);border-radius: 5px;bottom: 26px;color: #fff;content: "Cópiar";left: 20%;padding: 5px 15px;position: absolute;z-index: 98;width: auto}.tooltip:active:after {background: #333;background: rgba(0,0,0,.8);border-radius: 5px;bottom: 26px;color: #fff;content: "Copiado!";left: 20%;padding: 5px 15px;position: absolute;z-index: 99;width: auto}</style>'); for (; i < j; i++) { a[i].insertAdjacentHTML('beforeend', '<span class="fae_copy-code tooltip fa fa-clipboard"></span>'); } new Clipboard('.fae_copy-code',{ target : function (copy) { if (copy.innerHTML != fae_copyCode.copied) { return $(copy).closest('.codebox').find('.cont_code, code')[0]; } } }).on('success', function (e) { var copy = e.trigger; if (copy.innerHTML != fae_copyCode.copied) { copy.className += ' fae_copied'; window.setTimeout(function() { copy.className = copy.className.replace('fae_copied', ''); }, 1000); } e.clearSelection(); }); } }); });

Agora sumiu os tooltip, e ao passar o mouse sobre o clipboard aparece um tooltip preto escrito "código"
Botão copiar no codebox L58gG9n

por **tikky** 11.03.18 15:51

E que eu usei um forum que usa como versão modernbb, e o "corpo do post" tem limites nas outras versões não, logo acontece o apresentado do print, teste este

Código:: $.getScript('https://cdn.jsdelivr.net/clipboard.js/1.5.16/clipboard.min.js', function() { window.fae_copyCode = { copy : ' ', copied : ' ' }; $(function() { var a = $('.codebox dt').not('.spoiler > dt, .hidecode > dt'), i = 0, j = a.length; if (a[0]) { $('head').append('<style type="text/css">.fae_copy-code{float:right;cursor:pointer;}.tooltip{display: inline;position: relative;}.tooltip:hover:after {background: rgba(0,0,0,.8);border-radius: 5px;color: #fff;content: "Cópiar";position: absolute;z-index: 98;padding: 6px 16px;margin-left: -47px;margin-top: -34px;width: auto}.tooltip:active:after {background: rgba(0,0,0,.8);border-radius: 5px;color: #fff;content: "Copiado!";position: absolute;z-index: 98;padding: 6px 16px;margin-left: -47px;margin-top: -34px;width: auto}</style>'); for (; i < j; i++) { a[i].insertAdjacentHTML('beforeend', '<span class="fae_copy-code tooltip fa fa-clipboard"></span>'); } new Clipboard('.fae_copy-code',{ target : function (copy) { if (copy.innerHTML != fae_copyCode.copied) { return $(copy).closest('.codebox').find('.cont_code, code')[0]; } } }).on('success', function (e) { var copy = e.trigger; if (copy.innerHTML != fae_copyCode.copied) { copy.className += ' fae_copied'; window.setTimeout(function() { copy.className = copy.className.replace('fae_copied', ''); }, 1000); } e.clearSelection(); }); } }); });

por YouTube3 11.03.18 20:29

Bom, ficou desse jeito: https://i.imgur.com/Lg71U1S.jpg
Quando você passa o mouse sobre o (clipboard) aparece o tooltip "Copiar" certo?
E no caso quando você clica nele apenas remove a letra "R" do "copiar" e adiciona a letra "DO" pra ficar "Copiado"

É possível logo quando clicar no clipboard ele muda diretamente pra copiado?
Com o efeito do tooltip que já utilizo em meu fórum? código:

Código:: $(function(){ // general options for editing the tooltip // see more : http://iamceege.github.io/tooltipster/#options var options = { animation : 'fade', arrow : true, speed : 300, delay : 300, onlyOne : true, theme : 'tooltipster-default' }, // delay execution by placing the function into another queue // helps with applying to other JS created elements such as the editor queue = true, titles, parse = function() { titles = $('[title]'); titles.tooltipster && titles.not('[title=""], .mentiontag, .tooltipstered').tooltipster(options); }; queue ? $(parse) : parse(); });

Até mais.

por Luiz 13.03.18 1:10

Até onde pude ver, o código fornecido pelo @pedxz é funcional. E creio que o senhor sabe que não podemos fazer iguala o deste fórum, correto?

o/

por YouTube3 13.03.18 2:01

Luiz escreveu:Até onde pude ver, o código fornecido pelo @pedxz é funcional. E creio que o senhor sabe que não podemos fazer iguala o deste fórum, correto?

o/

Sim, oque eu quero fazer é nada mais do que mudar o tooltip do clipboard.
Esse: Botão copiar no codebox NsH8geC

por este:

Já tenho esse efeito tooltip adicionado ao meu fórum, no caso só queria adicionar ele no clipboard do codebox também.

Até,

por Luiz 13.03.18 20:55

Luiz escreveu:Até onde pude ver, o código fornecido pelo @pedxz é funcional. E creio que o senhor sabe que não podemos fazer iguala o deste fórum, correto?

o/

Foi o que disse acima. Feliz

por YouTube3 14.03.18 1:19

Sem problemas ^^ pode fechar obg aos 2

por virus 14.03.18 3:06

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.

Botão copiar no codebox