git ssb

1
var { h, Value, computed } = 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, (value, lastValue) => {
18
      var href = value && value.getAttribute('href')
19
      var oldHref = lastValue && lastValue.getAttribute('href')
20
21
      var delay = 500
22
      if (href && oldHref) {
23
        delay = 100
24
      } else if (!value) {
25
        delay = 200
26
      }
27
28
      return delay
29
    })
30
    var previewElement = Value()
31
32
    // hide preview on scroll
33
    var hasPreview = computed(previewElement, x => !!x)
34
    hasPreview(value => {
35
      if (value) {
36
        window.addEventListener('wheel', previewElement.cancel)
37
      } else {
38
        window.removeEventListener('wheel', previewElement.cancel)
39
      }
40
    })
41
42
    currentHover(element => {
43
      var href = element && element.getAttribute('href')
44
      var preview = null
45
46
      if (href) {
47
        if (ref.isFeed(href)) {
48
          preview = api.profile.html.preview(href)
49
        } else if (href.includes('://')) {
50
          preview = h('ProfilePreview', [
51
            h('section', [
52
              h('strong', [i18n('External Link'), ' 🌐']), h('br'),
53
              h('code', href)
54
            ])
55
          ])
56
        }
57
      }
58
59
      if (preview) {
60
        var rect = element.getBoundingClientRect()
61
        var width = 510
62
        var maxLeft = window.innerWidth - width
63
        var maxTop = window.innerHeight - 100
64
        var distanceFromRight = window.innerWidth - rect.right
65
        var shouldDisplayBeside = rect.bottom > maxTop || rect.left < 50 || distanceFromRight < 50
66
67
        if (shouldDisplayBeside && rect.bottom > 50) {
68
          if (rect.right > maxLeft && (rect.left - width) < 0) {
69
            // no room, just give up!
70
            previewElement.set(null)
71
            return
72
          } else {
73
            preview.style.top = `${Math.min(rect.top, maxTop)}px`
74
            if (rect.right > maxLeft) {
75
              preview.style.left = `${rect.left - width}px`
76
            } else {
77
              preview.style.left = `${rect.right + 5}px`
78
            }
79
          }
80
        } else {
81
          preview.style.top = `${rect.bottom + 5}px`
82
          preview.style.left = `${Math.min(rect.left, maxLeft)}px`
83
        }
84
85
        previewElement.set(preview)
86
      } else if (element !== false) {
87
        previewElement.set(null)
88
      }
89
    })
90
91
    previewElement.cancel = function () {
92
      currentHover.cancel()
93
      previewElement.set(null)
94
    }
95
96
    return previewElement
97
  })
98
}
99