nomailto/content.js at master · mattcdowning/nomailto · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
$(function() {
  ;(function() {
    const $mailto = $("a[href^='mailto:']")

    if ($mailto.length > 0) {
      const style = document.createElement('link')
      style.rel = 'stylesheet'
      style.type = 'text/css'
      style.href = chrome.extension.getURL('nmtstyles.css')
      document.head.appendChild(style)

      $mailto.on('click', function(e) {
        e.preventDefault()
        const that = this
        const mailaddress = $(this)
          .attr('href')
          .substring(7)
        const mailhref = `mailto:${mailaddress}`
        const copy = `
          <div tabindex="0" id="nmt">
            <h1 class="heading">NoMailto:</h1>
            <h2 class="copy">Whoa! That's a mailto:</h2>
            <button data-clipboard-text="${mailaddress}" class="copy-btn" id="copyToClip">Copy to clipboard</button>
            <a href="${mailhref}" id="openDefault">Open default</a>
            <div class="copied-container">
              <p class="copied">Copied!</p>
            </div>
          </div>
        `

        if ($('#nmt').length === 0) {
          $(copy).insertBefore(this)
        }

        $('#nmt')
          .modal()
          .focus()

        $(document).on('keydown', '#nmt', function(e) {
          if (e.keyCode === 27) {
            that.focus()
          }
        })

        $('.close-modal').on('click', function() {
          that.focus()
        })

        $('#copyToClip').on('click', function() {
          $('.copied').fadeIn()
          setTimeout(() => {
            $('.copied').fadeOut()
            $(this).focus()
          }, 1000)
        })

        new Clipboard('#copyToClip')

        const theModal = document.getElementById('nmt')
        const focusableEls = theModal.querySelectorAll('a[href], button')
        const firstFocusableEl = theModal
        const lastFocusableEl = focusableEls[focusableEls.length - 1]
        const KEYCODE_TAB = 9

        theModal.addEventListener('keydown', function(e) {
          const isTabPressed = e.key === 'Tab' || e.keyCode === KEYCODE_TAB
          if (!isTabPressed) {
            return
          }
          if (e.shiftKey) {
            if (document.activeElement === firstFocusableEl) {
              lastFocusableEl.focus()
              e.preventDefault()
            }
          } else if (document.activeElement === lastFocusableEl) {
            firstFocusableEl.focus()
            e.preventDefault()
          }
        })
      })
    }
  })()
})