Zkopírujte tlačítko URL pomocí Bootstrap a Clipboard.js

Při vytváření stránky je velmi důležité zahrnout funkci sdílení, alespoň zkopírovat url s hashtagy nebo jinými sdílenými adresami URL, pokud jsou mimo hlavní adresu URL. Tentokrát chci vytvořit kopii tlačítka jako ta, kterou vytvořila bootstrap stránka, a bude vypadat takto

Vyžadovat

• Bootstrap; popis
• Javascripty; smyčky, logika atd
• Plugin Clipboard.js

Tlačítko Připravit

<div class="float-end bd-highlight">
    <button type="button" url-site="http://example.org#event" class="btn btn-outline-secondary fw-light link-copy" data-bs-original-title="Copy Url"><i class="bi-share-fill"></i> Share</button>
</div>

V tlačítku je několik atributů a tříd, které je třeba vzít v úvahu, jako je data-bs-original-title="Copy Url" atribut, který zobrazí popis popisku, site-url atribut, který uloží adresu URL, která se má uložit. a link-copy class, která bude použita jako třída tokenu pro aktivaci tooltipu.

Popis instalace

document.querySelectorAll('.link-copy').forEach(function(a){
  var b=new bootstrap.Tooltip(a);
  a.addEventListener('mouseleave', function(){
    b.hide()}
  )
   // console.log(a.getAttribute('url-site'));
});

Skript vybere všechny položky s třídou link-copy poté spustí funkci instalace tooltipu, která je nastavena tak, aby aktivovala tooltip pouze při najetí myší.

Spusťte soubor Clipboard.js

var d = new ClipboardJS('.link-copy',{
    text:function(a){
      return a.getAttribute('url-site') 
     }
   });

d.on('success', function(a){
  var b = bootstrap.Tooltip.getInstance(a.trigger);
  a.trigger.setAttribute('data-bs-original-title','Copied!');
  b.show();
  a.trigger.setAttribute('data-bs-original-title','Copy Url');
  a.clearSelection()
});

Nainstalovaná schránka zkopíruje popis z url-site , věnujte pozornost text popis ve skriptu. Po úspěšném zkopírování skript načte několik dalších akcí, které zahrnují popis popisku, který se změní po kliknutí spouštěče je výsledek Copied! a vrátí se k výchozímu popisu, když nastane další spouštěč.

Hotovo