Efl Learner Profile Social Links

import { Rive, Layout } from '@rive-app/canvas';

export default (parentElement, id) => {
  const copyButton = parentElement.querySelector('.copy');
  const copyParentDiv = copyButton.parentElement;
  const copyText = copyParentDiv.querySelector('p');
  const copyLinkData = copyButton.getAttribute('data-copy-url');
  const copiedTextData = copyButton.getAttribute('data-copied-text');
  let copied = true;
  const profileSetting = parentElement.closest('.efl-learner-profile-settings');
  let copyTextOld = '';
  const linkedinButton = parentElement.querySelector('.linkedin');
  const body = document.querySelector('body');

  if (copyText) {
    copyTextOld = copyText.innerHTML;
  }

  let animation = null;

  const copyImage = copyButton.querySelector('img');

  copyButton.addEventListener('click', e => {
    e.preventDefault();

    if (!e.target.closest('.canvas')) {
      let imageWidth = '32';
      let imageHeight = '32';

      if (profileSetting) {
        imageWidth = '32';
        imageHeight = '32';
      }

      const riveCanvas = document.createElement('canvas');
      const riveDiv = document.createElement('div');

      riveDiv.classList.add('canvas', 'transparent');

      riveCanvas.width = imageWidth;
      riveCanvas.height = imageHeight;
      riveCanvas.id = `rive-copy-${id}`;
      copyButton.appendChild(riveDiv);
      riveDiv.appendChild(riveCanvas);

      animation = new Rive({
        src: '/assets/example-content/copy_tick.riv',
        // Or the path to a local Rive asset
        // src: './example.riv',
        canvas: riveCanvas,
        layout: new Layout({ fit: 'fill' }),
        onLoad: () => {
          animation.resizeDrawingSurfaceToCanvas();
        },
      });

      navigator.clipboard.writeText(copyLinkData).catch(console.error);
      if (copyText && copiedTextData) {
        copyText.innerHTML = copiedTextData;
      }
      if (animation && copied) {
        copyImage.classList.add('hidden');
        riveDiv.classList.remove('transparent');
        animation.play('Animation');
        copied = true;
      }
    }
  });

  const getMobileOperatingSystem = () => {
    const userAgent = navigator.userAgent || navigator.vendor || window.opera;

    // Windows Phone must come first because its UA also contains "Android"
    if (/windows phone/i.test(userAgent)) {
      body.classList.add('windows-phone');
    }

    if (/android/i.test(userAgent)) {
      body.classList.add('android-phone');
    }

    // iOS detection from: http://stackoverflow.com/a/9039885/177710
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
      body.classList.add('ios-phone');
    }
  };

  getMobileOperatingSystem();

  if (linkedinButton) {
    linkedinButton.addEventListener('click', e => {
      if (
        body.classList.contains('windows-phone') ||
        body.classList.contains('android-phone') ||
        body.classList.contains('ios-phone')
      ) {
        e.preventDefault();
        // console.log(copyLinkData);
        const linkedinURL = `https://www.linkedin.com/shareArticle?mini=true&url=${copyLinkData}`;

        window.open(linkedinURL);
      }
    });
  }

  document.addEventListener('click', e => {
    if (!e.target.classList.contains('copy') && !e.target.closest('.copy')) {
      const copyCanvas = copyButton.querySelector('.canvas');

      if (copyCanvas) {
        copyImage.classList.remove('hidden');
        copyCanvas.remove();
      }
      if (copyText && copiedTextData) {
        copyText.innerHTML = copyTextOld;
      }
    }
  });
};