teletype/lib/site-positions-component.js at master · atom/teletype · 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
84
85
86
87
88
89
90
91
92
const etch = require('etch')
const $ = etch.dom
const getAvatarURL = require('./get-avatar-url')
const {FollowState} = require('@atom/teletype-client')

module.exports =
class SitePositionsComponent {
  constructor (props) {
    this.props = {
      positionsBySiteId: {}
    }
    Object.assign(this.props, props)
    etch.initialize(this)
  }

  destroy () {
    return etch.destroy(this)
  }

  update (props) {
    Object.assign(this.props, props)
    return etch.update(this)
  }

  show (containerElement) {
    containerElement.appendChild(this.element)
  }

  hide () {
    this.element.remove()
  }

  render () {
    const otherSiteIds = Object.keys(this.props.positionsBySiteId)
      .map((siteId) => parseInt(siteId))
      .filter((siteId) => siteId !== this.props.portal.siteId)

    return $.div({className: 'SitePositionsComponent'},
      otherSiteIds.map((siteId) => this.renderSite(siteId))
    )
  }

  renderSite (siteId) {
    const {portal} = this.props

    const {login} = portal.getSiteIdentity(siteId)
    const color = this.isCursorVisibleForSite(siteId) ? `color--site-${siteId}` : ''
    const location = this.getLocationForSite(siteId)
    const onClick = (location === 'viewing-non-portal-item')
      ? () => {}
      : () => this.onSelectSiteId(siteId)

    return $.div({className: `SitePositionsComponent-site site-${siteId} ${location} ${color}`},
      (portal.getFollowedSiteId() === siteId) ? $.div({className: 'icon icon-link'}) : null,
      $.img({
        src: getAvatarURL(login, 80),
        onClick
      })
    )
  }

  onSelectSiteId (siteId) {
    if (siteId === this.props.portal.getFollowedSiteId()) {
      this.props.portal.unfollow()
    } else {
      this.props.portal.follow(siteId)
    }
  }

  // Private
  isCursorVisibleForSite (siteId) {
    const followState = this.props.positionsBySiteId[siteId].followState
    return this.getLocationForSite(siteId) === 'viewing-current-editor' &&
      (followState === FollowState.DISCONNECTED || followState === FollowState.EXTENDED)
  }

  // Private
  getLocationForSite (siteId) {
    const {portal, positionsBySiteId} = this.props
    const localPosition = positionsBySiteId[portal.siteId]
    const localEditorProxy = localPosition && localPosition.editorProxy
    const editorProxyForSite = positionsBySiteId[siteId].editorProxy

    if (editorProxyForSite == null) {
      return 'viewing-non-portal-item'
    } else if (editorProxyForSite === localEditorProxy) {
      return 'viewing-current-editor'
    } else {
      return 'viewing-other-editor'
    }
  }
}