akkoma/priv/static/packs/modals/onboarding_modal.js.map

{"version":3,"sources":["webpack:///./app/javascript/mastodon/features/ui/components/onboarding_modal.js"],"names":["noop","messages","Object","react_intl__WEBPACK_IMPORTED_MODULE_6__","home_title","id","defaultMessage","notifications_title","local_title","federated_title","PageOne","_ref","acct","domain","babel_runtime_helpers_jsx__WEBPACK_IMPORTED_MODULE_3___default","className","PageTwo","_ref2","myAccount","_compose_components_navigation_bar__WEBPACK_IMPORTED_MODULE_12__","account","_compose_components_compose_form__WEBPACK_IMPORTED_MODULE_10__","text","suggestions","immutable__WEBPACK_IMPORTED_MODULE_14__","mentionedDomains","spoiler","onChange","onSubmit","onPaste","onPickEmoji","onChangeSpoilerText","onClearSuggestions","onFetchSuggestions","onSuggestionSelected","showSearch","PageThree","_ref3","_compose_components_search__WEBPACK_IMPORTED_MODULE_11__","value","onClear","onShow","values","illustration","_components_permalink__WEBPACK_IMPORTED_MODULE_9__","to","href","introductions","PageFour","_ref4","intl","_column_header__WEBPACK_IMPORTED_MODULE_13__","icon","type","formatMessage","style","marginBottom","PageSix","_ref5","admin","adminSection","get","guidelines","target","github","rel","apps","OnboardingModal","react_redux__WEBPACK_IMPORTED_MODULE_5__","state","getIn","_initial_state__WEBPACK_IMPORTED_MODULE_15__","currentIndex","handleSkip","e","preventDefault","_this","props","onClose","handleDot","i","Number","currentTarget","getAttribute","setState","handlePrev","_ref6","Math","max","handleNext","pages","_ref7","min","length","handleSwipe","index","handleKeyUp","_ref8","key","handleClose","componentWillMount","_props","this","componentDidMount","window","addEventListener","componentWillUnmount","render","_this3","nextOrDoneBtn","hasMore","onClick","react_swipeable_views__WEBPACK_IMPORTED_MODULE_7___default","a","onChangeIndex","map","page","classnames__WEBPACK_IMPORTED_MODULE_8___default","onboarding-modal__page__wrapper--active","_","active","role","tabIndex","data-index","react__WEBPACK_IMPORTED_MODULE_4___default","PureComponent"],"mappings":"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","file":"modals/onboarding_modal.js","sourcesContent":["import React from 'react';\nimport { connect } from 'react-redux';\nimport PropTypes from 'prop-types';\nimport ImmutablePropTypes from 'react-immutable-proptypes';\nimport { defineMessages, injectIntl, FormattedMessage } from 'react-intl';\nimport ReactSwipeableViews from 'react-swipeable-views';\nimport classNames from 'classnames';\nimport Permalink from '../../../components/permalink';\nimport ComposeForm from '../../compose/components/compose_form';\nimport Search from '../../compose/components/search';\nimport NavigationBar from '../../compose/components/navigation_bar';\nimport ColumnHeader from './column_header';\nimport { List as ImmutableList } from 'immutable';\nimport { me } from '../../../initial_state';\n\nconst noop = () => { };\n\nconst messages = defineMessages({\n  home_title: { id: 'column.home', defaultMessage: 'Home' },\n  notifications_title: { id: 'column.notifications', defaultMessage: 'Notifications' },\n  local_title: { id: 'column.community', defaultMessage: 'Local timeline' },\n  federated_title: { id: 'column.public', defaultMessage: 'Federated timeline' },\n});\n\nconst PageOne = ({ acct, domain }) => (\n  <div className='onboarding-modal__page onboarding-modal__page-one'>\n    <div className='onboarding-modal__page-one__lead'>\n      <h1><FormattedMessage id='onboarding.page_one.welcome' defaultMessage='Welcome to Mastodon!' /></h1>\n      <p><FormattedMessage id='onboarding.page_one.federation' defaultMessage='Mastodon is a network of independent servers joining up to make one larger social network. We call these servers instances.' /></p>\n    </div>\n\n    <div className='onboarding-modal__page-one__extra'>\n      <div className='display-case'>\n        <div className='display-case__label'>\n          <FormattedMessage id='onboarding.page_one.full_handle' defaultMessage='Your full handle' />\n        </div>\n\n        <div className='display-case__case'>\n          @{acct}@{domain}\n        </div>\n      </div>\n\n      <p><FormattedMessage id='onboarding.page_one.handle_hint' defaultMessage='This is what you would tell your friends to search for.' /></p>\n    </div>\n  </div>\n);\n\nPageOne.propTypes = {\n  acct: PropTypes.string.isRequired,\n  domain: PropTypes.string.isRequired,\n};\n\nconst PageTwo = ({ myAccount }) => (\n  <div className='onboarding-modal__page onboarding-modal__page-two'>\n    <div className='figure non-interactive'>\n      <div className='pseudo-drawer'>\n        <NavigationBar account={myAccount} />\n\n        <ComposeForm\n          text='Awoo! #introductions'\n          suggestions={ImmutableList()}\n          mentionedDomains={[]}\n          spoiler={false}\n          onChange={noop}\n          onSubmit={noop}\n          onPaste={noop}\n          onPickEmoji={noop}\n          onChangeSpoilerText={noop}\n          onClearSuggestions={noop}\n          onFetchSuggestions={noop}\n          onSuggestionSelected={noop}\n          showSearch\n        />\n      </div>\n    </div>\n\n    <p><FormattedMessage id='onboarding.page_two.compose' defaultMessage='Write posts from the compose column. You can upload images, change privacy settings, and add content warnings with the icons below.' /></p>\n  </div>\n);\n\nPageTwo.propTypes = {\n  myAccount: ImmutablePropTypes.map.isRequired,\n};\n\nconst PageThree = ({ myAccount }) => (\n  <div className='onboarding-modal__page onboarding-modal__page-three'>\n    <div className='figure non-interactive'>\n      <Search\n        value=''\n        onChange={noop}\n        onSubmit={noop}\n        onClear={noop}\n        onShow={noop}\n      />\n\n      <div className='pseudo-drawer'>\n        <NavigationBar account={myAccount} />\n      </div>\n    </div>\n\n    <p><FormattedMessage id='onboarding.page_three.search' defaultMessage='Use the search bar to find people and look at hashtags, such as {illustration} and {introductions}. To look for a person who is not on this instance, use their full handle.' values={{ illustration: <Permalink to='/timelines/tag/illustration' href='/tags/illustration'>#illustration</Permalink>, introductions: <Permalink to='/timelines/tag/introductions' href='/tags/introductions'>#introductions</Permalink> }} /></p>\n    <p><FormattedMessage id='onboarding.page_three.profile' defaultMessage='Edit your profile to change your avatar, bio, and display name. There, you will also find other preferences.' /></p>\n  </div>\n);\n\nPageThree.propTypes = {\n  myAccount: ImmutablePropTypes.map.isRequired,\n};\n\nconst PageFour = ({ domain, intl }) => (\n  <div className='onboarding-modal__page onboarding-modal__page-four'>\n    <div className='onboarding-modal__page-four__columns'>\n      <div className='row'>\n        <div>\n          <div className='figure non-interactive'><ColumnHeader icon='home' type={intl.formatMessage(messages.home_title)} /></div>\n          <p><FormattedMessage id='onboarding.page_four.home' defaultMessage='The home timeline shows posts from people you follow.' /></p>\n        </div>\n\n        <div>\n          <div className='figure non-interactive'><ColumnHeader icon='bell' type={intl.formatMessage(messages.notifications_title)} /></div>\n          <p><FormattedMessage id='onboarding.page_four.notifications' defaultMessage='The notifications column shows when someone interacts with you.' /></p>\n        </div>\n      </div>\n\n      <div className='row'>\n        <div>\n          <div className='figure non-interactive' style={{ marginBottom: 0 }}><ColumnHeader icon='users' type={intl.formatMessage(messages.local_title)} /></div>\n        </div>\n\n        <div>\n          <div className='figure non-interactive' style={{ marginBottom: 0 }}><ColumnHeader icon='globe' type={intl.formatMessage(messages.federated_title)} /></div>\n        </div>\n      </div>\n\n      <p><FormattedMessage id='onboarding.page_five.public_timelines' defaultMessage='The local timeline shows public posts from everyone on {domain}. The federated timeline shows public posts from everyone who people on {domain} follow. These are the Public Timelines, a great way to discover new people.' values={{ domain }} /></p>\n    </div>\n  </div>\n);\n\nPageFour.propTypes = {\n  domain: PropTypes.string.isRequired,\n  intl: PropTypes.object.isRequired,\n};\n\nconst PageSix = ({ admin, domain }) => {\n  let adminSection = '';\n\n  if (admin) {\n    adminSection = (\n      <p>\n        <FormattedMessage id='onboarding.page_six.admin' defaultMessage=\"Your instance's admin is {admin}.\" values={{ admin: <Permalink href={admin.get('url')} to={`/accounts/${admin.get('id')}`}>@{admin.get('acct')}</Permalink> }} />\n        <br />\n        <FormattedMessage id='onboarding.page_six.read_guidelines' defaultMessage=\"Please read {domain}'s {guidelines}!\" values={{ domain, guidelines: <a href='/about/more' target='_blank'><FormattedMessage id='onboarding.page_six.guidelines' defaultMessage='community guidelines' /></a> }} />\n      </p>\n    );\n  }\n\n  return (\n    <div className='onboarding-modal__page onboarding-modal__page-six'>\n      <h1><FormattedMessage id='onboarding.page_six.almost_done' defaultMessage='Almost done...' /></h1>\n      {adminSection}\n      <p><FormattedMessage id='onboarding.page_six.github' defaultMessage='Mastodon is free open-source software. You can report bugs, request features, or contribute to the code on {github}.' values={{ github: <a href='https://github.com/tootsuite/mastodon' target='_blank' rel='noopener'>GitHub</a> }} /></p>\n      <p><FormattedMessage id='onboarding.page_six.apps_available' defaultMessage='There are {apps} available for iOS, Android and other platforms.' values={{ apps: <a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/Apps.md' target='_blank' rel='noopener'><FormattedMessage id='onboarding.page_six.various_app' defaultMessage='mobile apps' /></a> }} /></p>\n      <p><em><FormattedMessage id='onboarding.page_six.appetoot' defaultMessage='Bon Appetoot!' /></em></p>\n    </div>\n  );\n};\n\nPageSix.propTypes = {\n  admin: ImmutablePropTypes.map,\n  domain: PropTypes.string.isRequired,\n};\n\nconst mapStateToProps = state => ({\n  myAccount: state.getIn(['accounts', me]),\n  admin: state.getIn(['accounts', state.getIn(['meta', 'admin'])]),\n  domain: state.getIn(['meta', 'domain']),\n});\n\n@connect(mapStateToProps)\n@injectIntl\nexport default class OnboardingModal extends React.PureComponent {\n\n  static propTypes = {\n    onClose: PropTypes.func.isRequired,\n    intl: PropTypes.object.isRequired,\n    myAccount: ImmutablePropTypes.map.isRequired,\n    domain: PropTypes.string.isRequired,\n    admin: ImmutablePropTypes.map,\n  };\n\n  state = {\n    currentIndex: 0,\n  };\n\n  componentWillMount() {\n    const { myAccount, admin, domain, intl } = this.props;\n    this.pages = [\n      <PageOne acct={myAccount.get('acct')} domain={domain} />,\n      <PageTwo myAccount={myAccount} />,\n      <PageThree myAccount={myAccount} />,\n      <PageFour domain={domain} intl={intl} />,\n      <PageSix admin={admin} domain={domain} />,\n    ];\n  };\n\n  componentDidMount() {\n    window.addEventListener('keyup', this.handleKeyUp);\n  }\n\n  componentWillUnmount() {\n    window.addEventListener('keyup', this.handleKeyUp);\n  }\n\n  handleSkip = (e) => {\n    e.preventDefault();\n    this.props.onClose();\n  }\n\n  handleDot = (e) => {\n    const i = Number(e.currentTarget.getAttribute('data-index'));\n    e.preventDefault();\n    this.setState({ currentIndex: i });\n  }\n\n  handlePrev = () => {\n    this.setState(({ currentIndex }) => ({\n      currentIndex: Math.max(0, currentIndex - 1),\n    }));\n  }\n\n  handleNext = () => {\n    const { pages } = this;\n    this.setState(({ currentIndex }) => ({\n      currentIndex: Math.min(currentIndex + 1, pages.length - 1),\n    }));\n  }\n\n  handleSwipe = (index) => {\n    this.setState({ currentIndex: index });\n  }\n\n  handleKeyUp = ({ key }) => {\n    switch (key) {\n    case 'ArrowLeft':\n      this.handlePrev();\n      break;\n    case 'ArrowRight':\n      this.handleNext();\n      break;\n    }\n  }\n\n  handleClose = () => {\n    this.props.onClose();\n  }\n\n  render () {\n    const { pages } = this;\n    const { currentIndex } = this.state;\n    const hasMore = currentIndex < pages.length - 1;\n\n    const nextOrDoneBtn = hasMore ? (\n      <button onClick={this.handleNext} className='onboarding-modal__nav onboarding-modal__next shake-bottom'>\n        <FormattedMessage id='onboarding.next' defaultMessage='Next' /> <i className='fa fa-fw fa-chevron-right' />\n      </button>\n    ) : (\n      <button onClick={this.handleClose} className='onboarding-modal__nav onboarding-modal__done shake-bottom'>\n        <FormattedMessage id='onboarding.done' defaultMessage='Done' /> <i className='fa fa-fw fa-check' />\n      </button>\n    );\n\n    return (\n      <div className='modal-root__modal onboarding-modal'>\n        <ReactSwipeableViews index={currentIndex} onChangeIndex={this.handleSwipe} className='onboarding-modal__pager'>\n          {pages.map((page, i) => {\n            const className = classNames('onboarding-modal__page__wrapper', `onboarding-modal__page__wrapper-${i}`, {\n              'onboarding-modal__page__wrapper--active': i === currentIndex,\n            });\n\n            return (\n              <div key={i} className={className}>{page}</div>\n            );\n          })}\n        </ReactSwipeableViews>\n\n        <div className='onboarding-modal__paginator'>\n          <div>\n            <button\n              onClick={this.handleSkip}\n              className='onboarding-modal__nav onboarding-modal__skip'\n            >\n              <FormattedMessage id='onboarding.skip' defaultMessage='Skip' />\n            </button>\n          </div>\n\n          <div className='onboarding-modal__dots'>\n            {pages.map((_, i) => {\n              const className = classNames('onboarding-modal__dot', {\n                active: i === currentIndex,\n              });\n\n              return (\n                <div\n                  key={`dot-${i}`}\n                  role='button'\n                  tabIndex='0'\n                  data-index={i}\n                  onClick={this.handleDot}\n                  className={className}\n                />\n              );\n            })}\n          </div>\n\n          <div>\n            {nextOrDoneBtn}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n}\n"],"sourceRoot":""}