@pegakit/pegakit/source/scripts/components/copy-color/index.js

The living styleguide, pattern library, UI ToolKit, and front-end build tools that power Pega's digital web properties.

import 'skatejs-web-components';
import * as skate from 'skatejs';

var Clipboard = require('clipboard/dist/clipboard.js');
var clipboard; 

skate.define('copy-color', {

  created(elem){
    
    clipboard = new Clipboard(elem);
    
    var clipboardButton = elem.getElementsByClassName('js-copy-button')[0];
    
    elem.addEventListener('mousedown', elem.click);
    elem.addEventListener('mouseup', elem.unclick);

    clipboard.on('success', function(e) {
      clipboardButton.classList.add('is-copied');
      
      setTimeout(function(){
        clipboardButton.classList.remove('is-copied');
      }, 1000);
    });
    clipboard.on('error', function(e) {
      console.log(e);
    });
  },

  prototype: {
    click(e) {
      this.classList.add('is-clicked');
    },
    unclick(e) {
      this.classList.remove('is-clicked');
    }
  }
});