clipboard example

clipboard-copy.js

import { inject, bindable, viewResources, containerless } from 'aurelia-framework';
import { EventAggregator } from 'aurelia-event-aggregator';
import ClipBoard from 'clipboard';
import { userType } from 'services/permissions';
import uuid from 'uuid/v4';

@bindable('text')
@inject(EventAggregator)
@containerless
@viewResources('components/info-message')
export class ClipboardCopy {
  constructor(ea) {
    this.ea = ea;
    this.isAdmin = userType === 'admin';
    this.id = `clipboard-${uuid()}`;
  }

  attached() {
    const self = this;
    if (ClipBoard.isSupported() && this.isAdmin) {
      this.clipboardjs = new ClipBoard(`#${this.id}`, {
        text() {
          return self.text;
        }
      });
      this.clipboardRef.setAttribute('data-tooltip', 'Click to copy to clipboard');
    }
  }

  publishFeedback() {
    if (this.clipboardjs) {
      this.ea.publish('infoMessageOpen', {
        id: this.id,
        text: `Copied '${this.text}' to clipboard!`,
        dismissible: false,
        shouldReload: false
      });
    }
  }
}

clipboard-copy.pug

template
  span(id.bind='id' click.delegate='publishFeedback()' ref="clipboardRef") ${text}
  info-message(info_id.bind='id')

company-header.pug

template
  .row
    .col-xs-12
      h1 ${carrier.legal_name}
  .row.flex.items-center
    .vertically-center(class.bind='carrier.state_name === "Active" || carrier.state_name === "Fresh" ? "col-lg-2" : "col-lg-3"')
      img.icon.inline(src.bind='carrierStatusIcon')
      span.fixed-width.align-right.align-bottom(class.bind='carrierStatusTextColor')   ${carrier.state_name}
    .col-lg-3(if.bind='carrier.mc_number')
      p MC: #[clipboard-copy(text.bind="carrier.mc_number")]
    .col-lg-3(if.bind='carrier.dot_number')
      p DOT: #[clipboard-copy(text.bind="carrier.dot_number")]
    .col-lg-3
      p ID: #[clipboard-copy(text.bind="carrier.id")]