atom/packages/about/lib/components/about-view.js

const { Disposable } = require('atom')
const etch = require('etch')
const shell = require('shell')
const AtomLogo = require('./atom-logo')
const EtchComponent = require('../etch-component')
const UpdateView = require('./update-view')

const $ = etch.dom

module.exports = class AboutView extends EtchComponent {
  handleAtomVersionClick (e) {
    e.preventDefault()
    atom.clipboard.write(this.props.currentAtomVersion)
  }

  handleElectronVersionClick (e) {
    e.preventDefault()
    atom.clipboard.write(this.props.currentElectronVersion)
  }

  handleChromeVersionClick (e) {
    e.preventDefault()
    atom.clipboard.write(this.props.currentChromeVersion)
  }

  handleNodeVersionClick (e) {
    e.preventDefault()
    atom.clipboard.write(this.props.currentNodeVersion)
  }

  handleReleaseNotesClick (e) {
    e.preventDefault()
    shell.openExternal(
      this.props.updateManager.getReleaseNotesURLForAvailableVersion()
    )
  }

  handleLicenseClick (e) {
    e.preventDefault()
    atom.commands.dispatch(
      atom.views.getView(atom.workspace),
      'application:open-license'
    )
  }

  handleTermsOfUseClick (e) {
    e.preventDefault()
    shell.openExternal('https://atom.io/terms')
  }

  handleHowToUpdateClick (e) {
    e.preventDefault()
    shell.openExternal(
      'https://flight-manual.atom.io/getting-started/sections/installing-atom/'
    )
  }

  handleShowMoreClick (e) {
    e.preventDefault()
    var showMoreDiv = document.querySelector('.show-more')
    var showMoreText = document.querySelector('.about-more-expand')
    switch (showMoreText.textContent) {
      case 'Show more':
        showMoreDiv.classList.toggle('hidden')
        showMoreText.textContent = 'Hide'
        break
      case 'Hide':
        showMoreDiv.classList.toggle('hidden')
        showMoreText.textContent = 'Show more'
        break
    }
  }

  render () {
    return $.div(
      { className: 'pane-item native-key-bindings about' },
      $.div(
        { className: 'about-container' },
        $.header(
          { className: 'about-header' },
          $.a(
            { className: 'about-atom-io', href: 'https://atom.io' },
            $(AtomLogo)
          ),
          $.div(
            { className: 'about-header-info' },
            $.span(
              {
                className: 'about-version-container inline-block atom',
                onclick: this.handleAtomVersionClick.bind(this)
              },
              $.span(
                { className: 'about-version' },
                `${this.props.currentAtomVersion} ${process.arch}`
              ),
              $.span({ className: 'icon icon-clippy about-copy-version' })
            ),
            $.a(
              {
                className: 'about-header-release-notes',
                onclick: this.handleReleaseNotesClick.bind(this)
              },
              'Release Notes'
            )
          ),
          $.span(
            {
              className:
                'about-version-container inline-block show-more-expand',
              onclick: this.handleShowMoreClick.bind(this)
            },
            $.span({ className: 'about-more-expand' }, 'Show more')
          ),
          $.div(
            { className: 'show-more hidden about-more-info' },
            $.div(
              { className: 'about-more-info' },
              $.span(
                {
                  className: 'about-version-container inline-block electron',
                  onclick: this.handleElectronVersionClick.bind(this)
                },
                $.span(
                  { className: 'about-more-version' },
                  `Electron: ${this.props.currentElectronVersion} `
                ),
                $.span({ className: 'icon icon-clippy about-copy-version' })
              )
            ),
            $.div(
              { className: 'about-more-info' },
              $.span(
                {
                  className: 'about-version-container inline-block chrome',
                  onclick: this.handleChromeVersionClick.bind(this)
                },
                $.span(
                  { className: 'about-more-version' },
                  `Chrome: ${this.props.currentChromeVersion} `
                ),
                $.span({ className: 'icon icon-clippy about-copy-version' })
              )
            ),
            $.div(
              { className: 'about-more-info' },
              $.span(
                {
                  className: 'about-version-container inline-block node',
                  onclick: this.handleNodeVersionClick.bind(this)
                },
                $.span(
                  { className: 'about-more-version' },
                  `Node: ${this.props.currentNodeVersion} `
                ),
                $.span({ className: 'icon icon-clippy about-copy-version' })
              )
            )
          )
        )
      ),

      $(UpdateView, {
        updateManager: this.props.updateManager,
        availableVersion: this.props.availableVersion,
        viewUpdateReleaseNotes: this.handleReleaseNotesClick.bind(this),
        viewUpdateInstructions: this.handleHowToUpdateClick.bind(this)
      }),

      $.div(
        { className: 'about-actions group-item' },
        $.div(
          { className: 'btn-group' },
          $.button(
            {
              className: 'btn view-license',
              onclick: this.handleLicenseClick.bind(this)
            },
            'License'
          ),
          $.button(
            {
              className: 'btn terms-of-use',
              onclick: this.handleTermsOfUseClick.bind(this)
            },
            'Terms of Use'
          )
        )
      ),

      $.div(
        { className: 'about-love group-start' },
        $.span({ className: 'icon icon-code' }),
        $.span({ className: 'inline' }, ' with '),
        $.span({ className: 'icon icon-heart' }),
        $.span({ className: 'inline' }, ' by '),
        $.a({ className: 'icon icon-logo-github', href: 'https://github.com' })
      ),

      $.div(
        { className: 'about-credits group-item' },
        $.span({ className: 'inline' }, 'And the awesome '),
        $.a(
          { href: 'https://github.com/atom/atom/contributors' },
          'Atom Community'
        )
      )
    )
  }

  serialize () {
    return {
      deserializer: this.constructor.name,
      uri: this.props.uri
    }
  }

  onDidChangeTitle () {
    return new Disposable()
  }

  onDidChangeModified () {
    return new Disposable()
  }

  getTitle () {
    return 'About'
  }

  getIconName () {
    return 'info'
  }
}