Vue

by inser

HTML

<div id="app">
  <input type="text" v-model="model" />
  <a href='#' @click="copyThisLink">Copy Link</a>
  <input type="checkbox" v-model="isHtml" /> IsHTML
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

TypeScript

interface CopyLink {
  linkUrl: string
  linkText: string
  isHtml: boolean
}

const defaultLinkText = 'ZynBit Calendar Scheduling Link'

function clipboardPlaceholder (): HTMLElement {
  let placeholder = document.getElementById('copy-link-placeholder')

  if (!placeholder) {
    placeholder = document.createElement('div')
    placeholder.setAttribute('id', 'copy-link-placeholder')
    placeholder.setAttribute('style', 'display:none')
    document.body.appendChild(placeholder)
  }

  return placeholder
}

function appendAnchorElement (parent: HTMLElement, link: CopyLink): HTMLElement {
  const a = document.createElement('A')
  a.setAttribute('href', link.linkUrl)
  a.innerText = link.linkText || defaultLinkText

  parent.appendChild(a)

  return a
}

function selectElement (element: HTMLElement) {
  const range = document.createRange()
  range.selectNode(element)

  let selection = window.getSelection()

  if (selection) {
    selection.addRange(range)
  }
}

function copyHook (element: HTMLElement, link: CopyLink) {
  return (e: ClipboardEvent) => {
    if (e.clipboardData) {
      e.clipboardData.setData('text/plain', link.linkUrl)
      e.clipboardData.setData('text/html', link.isHtml ? element.outerHTML : link.linkUrl)

      e.preventDefault()
    }
  }
}

function copyLink (payload: CopyLink): boolean {
  let success = false

  const placeholder = clipboardPlaceholder()
  const link = appendAnchorElement(placeholder, payload)

  placeholder.style.display = 'inline'

  selectElement(link)

  const hook = copyHook(link, payload)

  document.addEventListener('copy', hook)

  success = document.execCommand('copy')

  document.removeEventListener('copy', hook)

  placeholder.innerText = ''
  placeholder.style.display = 'none'
  window.getSelection().removeAllRanges()

  return success
}


new Vue({
  el: "#app",
  data: function() {
  	return {
    	model: 'Test',
      isHtml: true
    }
  },
  methods: {

    copyThisLink: function () {
   ...