git ssb

1
var { h, Value } = require('mutant')
2
var ObserveLinkHover = require('../../lib/observe-link-hover')
3
var ref = require('ssb-ref')
4
5
var nest = require('depnest')
6
7
exports.needs = nest({
8
  'intl.sync.i18n': 'first',
9
  'profile.html.preview': 'first'
10
})
11
12
exports.gives = nest('app.linkPreview')
13
14
exports.create = function (api) {
15
  var i18n = api.intl.sync.i18n
16
  return nest('app.linkPreview', function (container, delay) {
17
    var currentHover = ObserveLinkHover(container, 500)
18
    var previewElement = Value()
19
    previewElement(currentHover.active.set)
20
21
    currentHover(element => {
22
      var href = element && element.getAttribute('href')
23
      var preview = null
24
25
      if (href) {
26
        if (ref.isFeed(href)) {
27
          preview = api.profile.html.preview(href)
28
          preview.onwheel = previewElement.cancel
29
        } else if (href.includes('://')) {
30
          preview = h('ProfilePreview', [
31
            h('section', [
32
              h('strong', [i18n('External Link'), ' 🌐']), h('br'),
33
              h('code', href)
34
            ])
35
          ])
36
        }
37
      }
38
39
      if (preview) {
40
        var rect = element.getBoundingClientRect()
41
        var width = 510
42
        var maxLeft = window.innerWidth - width
43
        var maxTop = window.innerHeight - 100
44
        var distanceFromRight = window.innerWidth - rect.right
45
        var shouldDisplayBeside = rect.bottom > maxTop || rect.left < 50 || distanceFromRight < 50
46
47
        if (shouldDisplayBeside && rect.bottom > 50) {
48
          if (rect.right > maxLeft && (rect.left - width) < 0) {
49
            // no room, just give up!
50
            previewElement.set(null)
51
            return
52
          } else {
53
            preview.style.top = `${Math.min(rect.top, maxTop)}px`
54
            if (rect.right > maxLeft) {
55
              preview.style.left = `${rect.left - width}px`
56
            } else {
57
              preview.style.left = `${rect.right + 5}px`
58
            }
59
          }
60
        } else {
61
          preview.style.top = `${rect.bottom + 5}px`
62
          preview.style.left = `${Math.min(rect.left, maxLeft)}px`
63
        }
64
65
        previewElement.set(preview)
66
      } else if (element !== false) {
67
        previewElement.set(null)
68
      }
69
    })
70
71
    previewElement.cancel = function () {
72
      currentHover.cancel()
73
      previewElement.set(null)
74
    }
75
76
    return previewElement
77
  })
78
}
79