5adfd937054d18aa90c3653907d1d43da6549296-0fc58975f36d55fac8f3.js.map

{"version":3,"sources":["webpack:///./node_modules/@narative/gatsby-theme-novela/src/components/Navigation/Navigation.Paginator.tsx"],"names":["Paginator","maxPages","count","props","pageCount","current","index","pageRoot","pathPrefix","getFullPath","n","render","this","previousPath","nextPath","hasNext","hasPrevious","rel","href","Frame","PageButton","to","getPageLinks","MobileReference","aria-hidden","previousPage","pagesRange","range","truncatedRange","slice","unshift","splice","length","push","Set","map","page","i","Spacer","key","PageNumberBUtton","style","opacity","className","Component","paginationItemMixin","p","css","theme","colors","primary","mediaqueries","desktop_up","Link","tablet"],"mappings":"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","file":"5adfd937054d18aa90c3653907d1d43da6549296-0fc58975f36d55fac8f3.js","sourcesContent":["import React, { Component } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { css } from \"@emotion/core\";\nimport { Link } from \"gatsby\";\nimport { Helmet } from \"react-helmet\";\n\nimport mediaqueries from \"@styles/media\";\nimport { range } from \"@utils\";\n\nimport { IPaginator } from \"@types\";\n\n/**\n * <Paginator />\n *\n * 1 2 3 ... final page NEXT\n * Component to navigate between different pages on a series of blog post, for example.\n *\n * We're using a <nav> element here so make sure to put the pagination component\n * INSIDE of a section to make sure the markup stays contextually relevant\n *\n * Receives the gatsby-paginator props\n */\n\nclass Paginator extends Component<IPaginator, {}> {\n  maxPages = 3;\n  count = this.props.pageCount;\n  current = this.props.index;\n  pageRoot = this.props.pathPrefix;\n\n  get nextPath() {\n    return this.getFullPath(this.current + 1);\n  }\n\n  get previousPath() {\n    return this.getFullPath(this.current - 1);\n  }\n\n  /**\n   * Utility function to return a 1 ... 5 6 7 ... 10 style pagination\n   */\n  get getPageLinks() {\n    const current = this.current;\n    const count = this.count;\n    const maxPages = this.maxPages;\n\n    // Current is the page we're on\n    // We want to show current - 1, current, current + 1\n    // Of course if we're on page 1, we don't want a page 0\n    const previousPage = current === 1 ? current : current - 1;\n\n    // Now create a range of numbers from the previousPage to the total pages (count)\n    const pagesRange = range(previousPage, count + 1 - previousPage);\n\n    // We might need to truncate that pagesRange if it's\n    // more than the max pages we wish to display (3)\n    const truncatedRange: Array<number | null> = pagesRange.slice(0, maxPages);\n\n    // Throughout this function we might add a null to our pages range.\n    // When it comes to rendering our range if we find a null we'll add a spacer.\n\n    // We might need a spacer at the start of the pagination e.g. 1 ... 3 4 5 etc.\n    // If we're after the second page, we need a ... spacer (3 and up)\n    if (pagesRange[0] > 2) {\n      truncatedRange.unshift(null);\n    }\n    // If we're after the first page, we need page 1 to appear (2 and up)\n    if (pagesRange[0] > 1) {\n      truncatedRange.unshift(1);\n    }\n\n    // If we're on the final page, then there won't be a \"next\" page and\n    // the pagination will end up looking a bit short (e.g. on 8 pages ... 7, 8)\n    // Push to the end an extra page maxPages from the end\n    if (pagesRange[0] + 1 === count && pagesRange[0] - 1 > 0) {\n      truncatedRange.splice(\n        pagesRange.length - 1 - maxPages,\n        0,\n        pagesRange[0] - 1,\n      );\n    }\n\n    // We might need a spacer at the end of the pagination e.g. 4 5 6 ... 8\n    // If we're before the penultimate page, we need a ... spacer\n    if (pagesRange[0] + maxPages < count) {\n      truncatedRange.push(null);\n    }\n\n    // If we're before the last page, we need page <last> to appear\n    if (pagesRange[0] + maxPages - 1 < count) {\n      truncatedRange.push(count);\n    }\n\n    return [...new Set(truncatedRange)].map((page: number | null, i) =>\n      page === null ? (\n        // If you find a null in the truncated array then add a spacer\n        <Spacer key={`PaginatorPage_spacer_${i}`} aria-hidden={true} />\n      ) : (\n        // Otherwise render a PageButton\n        <PageNumberBUtton\n          key={`PaginatorPage_${page}`}\n          to={this.getFullPath(page)}\n          style={{ opacity: current === page ? 1 : 0.3 }}\n          className=\"Paginator__pageLink\"\n        >\n          {page}\n        </PageNumberBUtton>\n      ),\n    );\n  }\n\n  /**\n   * Utility to turn an index in to a page path.\n   * All it really does is glue the page path to the front,\n   * but note there's special behaviour for page 1 where the URL should be / not /page/1\n   */\n  getFullPath = (n: number) => {\n    if (this.pageRoot === \"/\") {\n      return n === 1 ? this.pageRoot : this.pageRoot + \"page/\" + n;\n    } else {\n      return n === 1 ? this.pageRoot : this.pageRoot + \"/page/\" + n;\n    }\n  };\n\n  render() {\n    const count = this.count;\n    const current = this.current;\n\n    if (count <= 1) return null;\n\n    const previousPath = this.previousPath;\n    const nextPath = this.nextPath;\n    const hasNext = this.current < this.count;\n    const hasPrevious = this.current > 1;\n\n    return (\n      <>\n        <Helmet>\n          {hasPrevious && <link rel=\"prev\" href={previousPath} />}\n          {hasNext && <link rel=\"next\" href={nextPath} />}\n        </Helmet>\n        <Frame>\n          {hasPrevious && <PageButton to={previousPath}>Prev</PageButton>}\n          {this.getPageLinks}\n          <MobileReference aria-hidden=\"true\">\n            <em>{current}</em>&nbsp;of {count}\n          </MobileReference>\n          {hasNext && <PageButton to={nextPath}>Next</PageButton>}\n        </Frame>\n      </>\n    );\n  }\n}\n\nexport default Paginator;\n\nconst paginationItemMixin = p => css`\n  line-height: 1;\n  color: ${p.theme.colors.primary};\n  padding: 0;\n  width: 6.8rem;\n  height: 6.8rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-variant-numeric: tabular-nums;\n\n  ${mediaqueries.desktop_up`\n    display: block;\n    width: auto;\n    height: auto;\n    padding: 2rem;\n\n    &:first-of-type {\n      padding-left: 0;\n    }\n\n    &:last-child {\n      padding-right: 0;\n    }\n  `}\n`;\n\nconst PageButton = styled(Link)`\n  font-weight: 600;\n  font-size: 18px;\n  text-decoration: none;\n  color: ${p => p.theme.colors.primary};\n  ${paginationItemMixin}\n\n  &:hover,\n  &:focus {\n    opacity: 1;\n    text-decoration: underline;\n  }\n`;\n\nconst PageNumberBUtton = styled(Link)`\n  font-weight: 400;\n  font-size: 18px;\n  text-decoration: none;\n  color: ${p => p.theme.colors.primary};\n  ${paginationItemMixin}\n\n  &:hover,\n  &:focus {\n    opacity: 1;\n    text-decoration: underline;\n  }\n`;\n\nconst Spacer = styled.span`\n  opacity: 0.3;\n  ${paginationItemMixin}\n  &::before {\n    content: \"...\";\n  }\n`;\n\nconst MobileReference = styled.span`\n  font-weight: 400;\n  ${paginationItemMixin}\n  color: ${p => p.theme.colors.primary};\n\n  em {\n    font-style: normal;\n    color: ${p => p.theme.colors.primary};\n  }\n`;\n\nconst Frame = styled.nav`\n  position: relative;\n  z-index: 1;\n  display: inline-flex;\n  justify-content: space-between;\n  align-items: center;\n\n  ${mediaqueries.tablet`\n    .Paginator__pageLink, ${Spacer} { display: none; }\n    left: -15px;\n  `}\n\n  ${mediaqueries.desktop_up`\n    justify-content: flex-start;\n    ${MobileReference} { display: none; }\n  `}\n`;\n"],"sourceRoot":""}