Adding Copy Buttons with Bitty

Hitting a Single

Bitty has a .quickCopy() method. It does two things:

1. Copies the content of the target element.

2. Updates the text of the Copy button to say "Copied" for two seconds then reverts it.

For example:

<bitty-9 data-connect="/blog/01/n6/6r/q5/examples/example-1/bit.js"></bitty-9>

<button data-s="basicCopy">Copy</button>
<span data-r="basicCopy">
  The quick brown fox
</span>

export const b = {};

export function basicCopy(_, sender, el) {
  b.quickCopy(el, sender);
}

Connecting Keys

You can put multiple buttons on a page that all use the same copy function with the help of a data-key attribute:

<bitty-9 data-connect="/blog/01/n6/6r/q5/examples/example-2/bit.js"></bitty-9>

<div>
  <button data-s="copyWithKey" data-key="alfa">
    Copy
  </button>
  <span data-r="copyWithKey" data-key="alfa">
    The quick brown fox
  </span>
</div>

<div>
  <button data-s="copyWithKey" data-key="bravo">
    Copy
  </button>
  <span data-r="copyWithKey" data-key="bravo">
    The lazy dog
  </span>
</div>

export const b = {};

export function copyWithKey(_, sender, el) {
  if (sender.prop("key") === el.prop("key")) {
    b.quickCopy(el, sender);
  }
}

How It Works

• The data-s attributes on the buttons sets them up to send a signal named copyWithKey.

• When the signal comes in, bitty loops through all the elements with a data-r attribute whose value matches the copyWithKey signal name.

  Each element is passed to the copyWithKey function as the el argument. The sender argument is populated by the button that sent the signal.

• Since there are multiple elements with the data-r="copyWithKey" attribute we need a way to filter them down to just the one we want. The approach used here does the filtering by comparing the data-key values of the sending and receiving elements via the .prop() method that bitty adds to the incoming elements.

  When they match, the function calls the .quickCopy() method with the elements to run the process.

Outro

Most of bitty is about setting up functions to add your own features. The .quickCopy() method is an exception. It's fully baked. I found myself adding the functionality so often it made since to include it directly. Check it out if your site has content you want to make it easier for your visitors to grab.

-a