atom/packages/welcome/lib/guide-view.js

/** @babel */
/** @jsx etch.dom **/

import etch from 'etch';

export default class GuideView {
  constructor(props) {
    this.props = props;
    this.didClickProjectButton = this.didClickProjectButton.bind(this);
    this.didClickGitButton = this.didClickGitButton.bind(this);
    this.didClickGitHubButton = this.didClickGitHubButton.bind(this);
    this.didClickTeletypeButton = this.didClickTeletypeButton.bind(this);
    this.didClickPackagesButton = this.didClickPackagesButton.bind(this);
    this.didClickThemesButton = this.didClickThemesButton.bind(this);
    this.didClickStylingButton = this.didClickStylingButton.bind(this);
    this.didClickInitScriptButton = this.didClickInitScriptButton.bind(this);
    this.didClickSnippetsButton = this.didClickSnippetsButton.bind(this);
    this.didExpandOrCollapseSection = this.didExpandOrCollapseSection.bind(
      this
    );
    etch.initialize(this);
  }

  update() {}

  render() {
    return (
      <div className="welcome is-guide">
        <div className="welcome-container">
          <section className="welcome-panel">
            <h1 className="welcome-title">Get to know Atom!</h1>

            <details
              className="welcome-card"
              {...this.getSectionProps('project')}
            >
              <summary className="welcome-summary icon icon-repo">
                Open a <span className="welcome-highlight">Project</span>
              </summary>
              <div className="welcome-detail">
                <p>
                  <img
                    className="welcome-img"
                    src="atom://welcome/assets/project.svg"
                  />
                </p>
                <p>
                  In Atom you can open individual files or a whole folder as a
                  project. Opening a folder will add a tree view to the editor
                  where you can browse all the files.
                </p>
                <p>
                  <button
                    ref="projectButton"
                    onclick={this.didClickProjectButton}
                    className="btn btn-primary"
                  >
                    Open a Project
                  </button>
                </p>
                <p className="welcome-note">
                  <strong>Next time:</strong> You can also open projects from
                  the menu, keyboard shortcut or by dragging a folder onto the
                  Atom dock icon.
                </p>
              </div>
            </details>

            <details className="welcome-card" {...this.getSectionProps('git')}>
              <summary className="welcome-summary icon icon-mark-github">
                Version control with{' '}
                <span class="welcome-highlight">Git and GitHub</span>
              </summary>
              <div className="welcome-detail">
                <p>
                  <img
                    className="welcome-img"
                    src="atom://welcome/assets/package.svg"
                  />
                </p>
                <p>
                  Track changes to your code as you work. Branch, commit, push,
                  and pull without leaving the comfort of your editor.
                  Collaborate with other developers on GitHub.
                </p>
                <p>
                  <button
                    onclick={this.didClickGitButton}
                    className="btn btn-primary inline-block"
                  >
                    Open the Git panel
                  </button>
                  <button
                    onclick={this.didClickGitHubButton}
                    className="btn btn-primary inline-block"
                  >
                    Open the GitHub panel
                  </button>
                </p>
                <p className="welcome-note">
                  <strong>Next time:</strong> You can toggle the Git tab by
                  clicking on the
                  <span className="icon icon-diff" /> button in your status bar.
                </p>
              </div>
            </details>

            <details
              className="welcome-card"
              {...this.getSectionProps('teletype')}
            >
              <summary className="welcome-summary icon icon-radio-tower">
                Collaborate in real time with{' '}
                <span class="welcome-highlight">Teletype</span>
              </summary>
              <div className="welcome-detail">
                <p>
                  <img
                    className="welcome-img"
                    src="atom://welcome/assets/code.svg"
                  />
                </p>
                <p>
                  Share your workspace with team members and collaborate on code
                  in real time.
                </p>
                <p>
                  <button
                    onclick={this.didClickTeletypeButton}
                    className="btn btn-primary inline-block"
                  >
                    Install Teletype for Atom
                  </button>
                </p>
              </div>
            </details>

            <details
              className="welcome-card"
              {...this.getSectionProps('packages')}
            >
              <summary className="welcome-summary icon icon-package">
                Install a <span className="welcome-highlight">Package</span>
              </summary>
              <div className="welcome-detail">
                <p>
                  <img
                    className="welcome-img"
                    src="atom://welcome/assets/package.svg"
                  />
                </p>
                <p>
                  One of the best things about Atom is the package ecosystem.
                  Installing packages adds new features and functionality you
                  can use to make the editor suit your needs. Let's install one.
                </p>
                <p>
                  <button
                    ref="packagesButton"
                    onclick={this.didClickPackagesButton}
                    className="btn btn-primary"
                  >
                    Open Installer
                  </button>
                </p>
                <p className="welcome-note">
                  <strong>Next time:</strong> You can install new packages from
                  the settings.
                </p>
              </div>
            </details>

            <details
              className="welcome-card"
              {...this.getSectionProps('themes')}
            >
              <summary className="welcome-summary icon icon-paintcan">
                Choose a <span class="welcome-highlight">Theme</span>
              </summary>
              <div className="welcome-detail">
                <p>
                  <img
                    className="welcome-img"
                    src="atom://welcome/assets/theme.svg"
                  />
                </p>
                <p>Atom comes with preinstalled themes. Let's try a few.</p>
                <p>
                  <button
                    ref="themesButton"
                    onclick={this.didClickThemesButton}
                    className="btn btn-primary"
                  >
                    Open the theme picker
                  </button>
                </p>
                <p>
                  You can also install themes created by the Atom community. To
                  install new themes, click on "+ Install" and switch the toggle
                  to "themes".
                </p>
                <p className="welcome-note">
                  <strong>Next time:</strong> You can switch themes from the
                  settings.
                </p>
              </div>
            </details>

            <details
              className="welcome-card"
              {...this.getSectionProps('styling')}
            >
              <summary className="welcome-summary icon icon-paintcan">
                Customize the <span class="welcome-highlight">Styling</span>
              </summary>
              <div className="welcome-detail">
                <p>
                  <img
                    className="welcome-img"
                    src="atom://welcome/assets/code.svg"
                  />
                </p>
                <p>
                  You can customize almost anything by adding your own CSS/LESS.
                </p>
                <p>
                  <button
                    ref="stylingButton"
                    onclick={this.didClickStylingButton}
                    className="btn btn-primary"
                  >
                    Open your Stylesheet
                  </button>
                </p>
                <p>Now uncomment some of the examples or try your own</p>
                <p className="welcome-note">
                  <strong>Next time:</strong> You can open your stylesheet from
                  Menu {this.getApplicationMenuName()}.
                </p>
              </div>
            </details>

            <details
              className="welcome-card"
              {...this.getSectionProps('init-script')}
            >
              <summary className="welcome-summary icon icon-code">
                Hack on the <span class="welcome-highlight">Init Script</span>
              </summary>
              <div className="welcome-detail">
                <p>
                  <img
                    className="welcome-img"
                    src="atom://welcome/assets/code.svg"
                  />
                </p>
                <p>
                  The init script is a bit of JavaScript or CoffeeScript run at
                  startup. You can use it to quickly change the behaviour of
                  Atom.
                </p>
                <p>
                  <button
                    ref="initScriptButton"
                    onclick={this.didClickInitScriptButton}
                    className="btn btn-primary"
                  >
                    Open your Init Script
                  </button>
                </p>
                <p>Uncomment some of the examples or try out your own.</p>
                <p className="welcome-note">
                  <strong>Next time:</strong> You can open your init script from
                  Menu > {this.getApplicationMenuName()}.
                </p>
              </div>
            </details>

            <details
              className="welcome-card"
              {...this.getSectionProps('snippets')}
            >
              <summary className="welcome-summary icon icon-code">
                Add a <span class="welcome-highlight">Snippet</span>
              </summary>
              <div className="welcome-detail">
                <p>
                  <img
                    className="welcome-img"
                    src="atom://welcome/assets/code.svg"
                  />
                </p>
                <p>
                  Atom snippets allow you to enter a simple prefix in the editor
                  and hit tab to expand the prefix into a larger code block with
                  templated values.
                </p>
                <p>
                  <button
                    ref="snippetsButton"
                    onclick={this.didClickSnippetsButton}
                    className="btn btn-primary"
                  >
                    Open your Snippets
                  </button>
                </p>
                <p>
                  In your snippets file, type <code>snip</code> then hit{' '}
                  <code>tab</code>. The <code>snip</code> snippet will expand to
                  create a snippet!
                </p>
                <p className="welcome-note">
                  <strong>Next time:</strong> You can open your snippets in Menu
                  > {this.getApplicationMenuName()}.
                </p>
              </div>
            </details>

            <details
              className="welcome-card"
              {...this.getSectionProps('shortcuts')}
            >
              <summary className="welcome-summary icon icon-keyboard">
                Learn <span class="welcome-highlight">Keyboard Shortcuts</span>
              </summary>
              <div className="welcome-detail">
                <p>
                  <img
                    className="welcome-img"
                    src="atom://welcome/assets/shortcut.svg"
                  />
                </p>
                <p>
                  If you only remember one keyboard shortcut make it{' '}
                  <kbd className="welcome-key">
                    {this.getCommandPaletteKeyBinding()}
                  </kbd>
                  . This keystroke toggles the command palette, which lists
                  every Atom command. It's a good way to learn more shortcuts.
                  Yes, you can try it now!
                </p>
                <p>
                  If you want to use these guides again use the command palette{' '}
                  <kbd className="welcome-key">
                    {this.getCommandPaletteKeyBinding()}
                  </kbd>{' '}
                  and search for <span className="text-highlight">Welcome</span>
                  .
                </p>
              </div>
            </details>
          </section>
        </div>
      </div>
    );
  }

  getSectionProps(sectionName) {
    const props = {
      dataset: { section: sectionName },
      onclick: this.didExpandOrCollapseSection
    };
    if (
      this.props.openSections &&
      this.props.openSections.indexOf(sectionName) !== -1
    ) {
      props.open = true;
    }
    return props;
  }

  getCommandPaletteKeyBinding() {
    if (process.platform === 'darwin') {
      return 'cmd-shift-p';
    } else {
      return 'ctrl-shift-p';
    }
  }

  getApplicationMenuName() {
    if (process.platform === 'darwin') {
      return 'Atom';
    } else if (process.platform === 'linux') {
      return 'Edit';
    } else {
      return 'File';
    }
  }

  serialize() {
    return {
      deserializer: this.constructor.name,
      openSections: this.getOpenSections(),
      uri: this.getURI()
    };
  }

  getURI() {
    return this.props.uri;
  }

  getTitle() {
    return 'Welcome Guide';
  }

  isEqual(other) {
    return other instanceof GuideView;
  }

  getOpenSections() {
    return Array.from(this.element.querySelectorAll('details[open]')).map(
      sectionElement => sectionElement.dataset.section
    );
  }

  didClickProjectButton() {
    this.props.reporterProxy.sendEvent('clicked-project-cta');
    atom.commands.dispatch(
      atom.views.getView(atom.workspace),
      'application:open'
    );
  }

  didClickGitButton() {
    this.props.reporterProxy.sendEvent('clicked-git-cta');
    atom.commands.dispatch(
      atom.views.getView(atom.workspace),
      'github:toggle-git-tab'
    );
  }

  didClickGitHubButton() {
    this.props.reporterProxy.sendEvent('clicked-github-cta');
    atom.commands.dispatch(
      atom.views.getView(atom.workspace),
      'github:toggle-github-tab'
    );
  }

  didClickPackagesButton() {
    this.props.reporterProxy.sendEvent('clicked-packages-cta');
    atom.workspace.open('atom://config/install', { split: 'left' });
  }

  didClickThemesButton() {
    this.props.reporterProxy.sendEvent('clicked-themes-cta');
    atom.workspace.open('atom://config/themes', { split: 'left' });
  }

  didClickStylingButton() {
    this.props.reporterProxy.sendEvent('clicked-styling-cta');
    atom.workspace.open('atom://.atom/stylesheet', { split: 'left' });
  }

  didClickInitScriptButton() {
    this.props.reporterProxy.sendEvent('clicked-init-script-cta');
    atom.workspace.open('atom://.atom/init-script', { split: 'left' });
  }

  didClickSnippetsButton() {
    this.props.reporterProxy.sendEvent('clicked-snippets-cta');
    atom.workspace.open('atom://.atom/snippets', { split: 'left' });
  }

  didClickTeletypeButton() {
    this.props.reporterProxy.sendEvent('clicked-teletype-cta');
    atom.workspace.open('atom://config/packages/teletype', { split: 'left' });
  }

  didExpandOrCollapseSection(event) {
    const sectionName = event.currentTarget.closest('details').dataset.section;
    const action = event.currentTarget.hasAttribute('open')
      ? 'collapse'
      : 'expand';
    this.props.reporterProxy.sendEvent(`${action}-${sectionName}-section`);
  }
}