-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path5adfd937054d18aa90c3653907d1d43da6549296-7d05b8a84b55ef03564f.js.map
1 lines (1 loc) · 22.2 KB
/
5adfd937054d18aa90c3653907d1d43da6549296-7d05b8a84b55ef03564f.js.map
1
{"version":3,"sources":["webpack:///./node_modules/@narative/gatsby-theme-novela/src/components/Navigation/Navigation.Paginator.tsx","webpack:///./node_modules/@narative/gatsby-theme-novela/src/sections/articles/Articles.List.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","ArticlesList","articles","alwaysShowAllDetails","hasOnlyOneArticle","useContext","GridLayoutContext","gridLayout","hasSetGridLayout","getGridLayout","articlePairs","reduce","result","value","array","useEffect","ArticlesListContainer","ap","isEven","isOdd","List","reverse","ListItem","article","narrow","hasOverflow","title","imageSource","hero","regular","hasHeroImage","Object","keys","constructor","ArticleLink","slug","data-a11y","Item","ImageContainer","src","Title","dark","Excerpt","excerpt","MetaData","date","timeToRead","limitToTwoLines","phablet","showDetails","listTile","wide","desktop_medium","listItemRow","desktop","card","listItemTile","listRow","Headings","h2","fonts","serif","grey","accent"],"mappings":"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","file":"5adfd937054d18aa90c3653907d1d43da6549296-7d05b8a84b55ef03564f.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> 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","import React, { useContext, useEffect } from 'react';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/core';\nimport { Link } from 'gatsby';\n\nimport Headings from '@components/Headings';\nimport Image, { ImagePlaceholder } from '@components/Image';\n\nimport mediaqueries from '@styles/media';\nimport { IArticle } from '@types';\n\nimport { GridLayoutContext } from './Articles.List.Context';\n\n/**\n * Tiles\n * [LONG], [SHORT]\n * [SHORT], [LONG]\n * [SHORT], [LONG]\n *\n * or ------------\n *\n * Rows\n * [LONG]\n * [LONG]\n * [LONG]\n */\n\ninterface ArticlesListProps {\n articles: IArticle[];\n alwaysShowAllDetails?: boolean;\n}\n\ninterface ArticlesListItemProps {\n article: IArticle;\n narrow?: boolean;\n}\n\nconst ArticlesList: React.FC<ArticlesListProps> = ({\n articles,\n alwaysShowAllDetails,\n}) => {\n if (!articles) return null;\n\n const hasOnlyOneArticle = articles.length === 1;\n const { gridLayout = 'tiles', hasSetGridLayout, getGridLayout } = useContext(\n GridLayoutContext,\n );\n\n /**\n * We're taking the flat array of articles [{}, {}, {}...]\n * and turning it into an array of pairs of articles [[{}, {}], [{}, {}], [{}, {}]...]\n * This makes it simpler to create the grid we want\n */\n const articlePairs = articles.reduce((result, value, index, array) => {\n if (index % 2 === 0) {\n result.push(array.slice(index, index + 2));\n }\n return result;\n }, []);\n\n useEffect(() => getGridLayout(), []);\n\n return (\n <ArticlesListContainer\n style={{ opacity: hasSetGridLayout ? 1 : 0 }}\n alwaysShowAllDetails={alwaysShowAllDetails}\n >\n {articlePairs.map((ap, index) => {\n const isEven = index % 2 !== 0;\n const isOdd = index % 2 !== 1;\n\n return (\n <List\n key={index}\n gridLayout={gridLayout}\n hasOnlyOneArticle={hasOnlyOneArticle}\n reverse={isEven}\n >\n <ListItem article={ap[0]} narrow={isEven} />\n <ListItem article={ap[1]} narrow={isOdd} />\n </List>\n );\n })}\n </ArticlesListContainer>\n );\n};\n\nexport default ArticlesList;\n\nconst ListItem: React.FC<ArticlesListItemProps> = ({ article, narrow }) => {\n if (!article) return null;\n\n const { gridLayout } = useContext(GridLayoutContext);\n const hasOverflow = narrow && article.title.length > 35;\n const imageSource = narrow ? article.hero.narrow : article.hero.regular;\n const hasHeroImage =\n imageSource &&\n Object.keys(imageSource).length !== 0 &&\n imageSource.constructor === Object;\n\n return (\n <ArticleLink to={article.slug} data-a11y=\"false\">\n <Item gridLayout={gridLayout}>\n <ImageContainer narrow={narrow} gridLayout={gridLayout}>\n {hasHeroImage ? <Image src={imageSource} /> : <ImagePlaceholder />}\n </ImageContainer>\n <div>\n <Title dark hasOverflow={hasOverflow} gridLayout={gridLayout}>\n {article.title}\n </Title>\n <Excerpt\n narrow={narrow}\n hasOverflow={hasOverflow}\n gridLayout={gridLayout}\n >\n {article.excerpt}\n </Excerpt>\n <MetaData>\n {article.date} · {article.timeToRead} min read\n </MetaData>\n </div>\n </Item>\n </ArticleLink>\n );\n};\n\nconst wide = '1fr';\nconst narrow = '457px';\n\nconst limitToTwoLines = css`\n text-overflow: ellipsis;\n overflow-wrap: normal;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n white-space: normal;\n overflow: hidden;\n\n ${mediaqueries.phablet`\n -webkit-line-clamp: 3;\n `}\n`;\n\nconst showDetails = css`\n p {\n display: -webkit-box;\n }\n\n h2 {\n margin-bottom: 10px;\n }\n`;\n\nconst ArticlesListContainer = styled.div<{ alwaysShowAllDetails?: boolean }>`\n transition: opacity 0.25s;\n ${p => p.alwaysShowAllDetails && showDetails}\n`;\n\nconst listTile = p => css`\n position: relative;\n display: grid;\n grid-template-columns: ${p.reverse\n ? `${narrow} ${wide}`\n : `${wide} ${narrow}`};\n grid-template-rows: 2;\n column-gap: 30px;\n\n &:not(:last-child) {\n margin-bottom: 75px;\n }\n\n ${mediaqueries.desktop_medium`\n grid-template-columns: 1fr 1fr;\n `}\n\n ${mediaqueries.tablet`\n grid-template-columns: 1fr;\n \n &:not(:last-child) {\n margin-bottom: 0;\n }\n `}\n`;\n\nconst listItemRow = p => css`\n display: grid;\n grid-template-rows: 1fr;\n grid-template-columns: 1fr 488px;\n grid-column-gap: 96px;\n grid-template-rows: 1;\n align-items: center;\n position: relative;\n margin-bottom: 50px;\n\n ${mediaqueries.desktop`\n grid-column-gap: 24px;\n grid-template-columns: 1fr 380px;\n `}\n\n ${mediaqueries.tablet`\n grid-template-columns: 1fr;\n `}\n\n @media (max-width: 540px) {\n background: ${p.theme.colors.card};\n }\n\n ${mediaqueries.phablet`\n box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.2);\n border-bottom-right-radius: 5px;\n border-bottom-left-radius: 5px;\n `}\n`;\n\nconst listItemTile = p => css`\n position: relative;\n\n ${mediaqueries.tablet`\n margin-bottom: 60px;\n `}\n\n @media (max-width: 540px) {\n background: ${p.theme.colors.card};\n }\n\n ${mediaqueries.phablet`\n margin-bottom: 40px;\n box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.2);\n border-bottom-right-radius: 5px;\n border-bottom-left-radius: 5px;\n `}\n`;\n\n// If only 1 article, dont create 2 rows.\nconst listRow = p => css`\n display: grid;\n grid-template-rows: ${p.hasOnlyOneArticle ? '1fr' : '1fr 1fr'};\n`;\n\nconst List = styled.div<{\n reverse: boolean;\n gridLayout: string;\n hasOnlyOneArticle: boolean;\n}>`\n ${p => (p.gridLayout === 'tiles' ? listTile : listRow)}\n`;\n\nconst Item = styled.div<{ gridLayout: string }>`\n ${p => (p.gridLayout === 'rows' ? listItemRow : listItemTile)}\n`;\n\nconst ImageContainer = styled.div<{ narrow: boolean; gridLayout: string }>`\n position: relative;\n height: ${p => (p.gridLayout === 'tiles' ? '280px' : '220px')};\n box-shadow: 0 30px 60px -10px rgba(0, 0, 0, ${p => (p.narrow ? 0.22 : 0.3)}),\n 0 18px 36px -18px rgba(0, 0, 0, ${p => (p.narrow ? 0.25 : 0.33)});\n margin-bottom: ${p => (p.gridLayout === 'tiles' ? '30px' : 0)};\n transition: transform 0.3s var(--ease-out-quad),\n box-shadow 0.3s var(--ease-out-quad);\n\n & > div {\n height: 100%;\n }\n\n ${mediaqueries.tablet`\n height: 200px;\n margin-bottom: 35px;\n `}\n\n ${mediaqueries.phablet`\n overflow: hidden;\n margin-bottom: 0;\n box-shadow: none;\n border-top-right-radius: 5px;\n border-top-left-radius: 5px;\n `}\n`;\n\nconst Title = styled(Headings.h2)`\n font-size: 21px;\n font-family: ${p => p.theme.fonts.serif};\n margin-bottom: ${p =>\n p.hasOverflow && p.gridLayout === 'tiles' ? '35px' : '10px'};\n transition: color 0.3s ease-in-out;\n ${limitToTwoLines};\n\n ${mediaqueries.desktop`\n margin-bottom: 15px;\n `}\n\n ${mediaqueries.tablet`\n font-size: 24px; \n `}\n\n ${mediaqueries.phablet`\n font-size: 22px; \n padding: 30px 20px 0;\n margin-bottom: 10px;\n -webkit-line-clamp: 3;\n `}\n`;\n\nconst Excerpt = styled.p<{\n hasOverflow: boolean;\n narrow: boolean;\n gridLayout: string;\n}>`\n ${limitToTwoLines};\n font-size: 16px;\n margin-bottom: 10px;\n color: ${p => p.theme.colors.grey};\n display: ${p => (p.hasOverflow && p.gridLayout === 'tiles' ? 'none' : 'box')};\n max-width: ${p => (p.narrow ? '415px' : '515px')};\n\n ${mediaqueries.desktop`\n display: -webkit-box;\n `}\n\n ${mediaqueries.phablet`\n margin-bottom; 15px;\n `}\n\n ${mediaqueries.phablet`\n max-width: 100%;\n padding: 0 20px;\n margin-bottom: 20px;\n -webkit-line-clamp: 3;\n `}\n`;\n\nconst MetaData = styled.div`\n font-weight: 600;\n font-size: 16px;\n color: ${p => p.theme.colors.grey};\n opacity: 0.33;\n\n ${mediaqueries.phablet`\n max-width: 100%;\n padding: 0 20px 30px;\n `}\n`;\n\nconst ArticleLink = styled(Link)`\n position: relative;\n display: block;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n border-radius: 5px;\n z-index: 1;\n transition: transform 0.33s var(--ease-out-quart);\n -webkit-tap-highlight-color: rgba(255, 255, 255, 0);\n\n &:hover ${ImageContainer}, &:focus ${ImageContainer} {\n transform: translateY(-1px);\n box-shadow: 0 50px 80px -20px rgba(0, 0, 0, 0.27),\n 0 30px 50px -30px rgba(0, 0, 0, 0.3);\n }\n\n &:hover h2,\n &:focus h2 {\n color: ${p => p.theme.colors.accent};\n }\n\n &[data-a11y='true']:focus::after {\n content: '';\n position: absolute;\n left: -1.5%;\n top: -2%;\n width: 103%;\n height: 104%;\n border: 3px solid ${p => p.theme.colors.accent};\n background: rgba(255, 255, 255, 0.01);\n border-radius: 5px;\n }\n\n ${mediaqueries.phablet`\n &:hover ${ImageContainer} {\n transform: none;\n box-shadow: initial;\n }\n\n &:active {\n transform: scale(0.97) translateY(3px);\n }\n `}\n`;\n"],"sourceRoot":""}