{"version":3,"sources":["webpack:///./Avensia.Common/Features/Magazine/MagazinePageList.tsx"],"names":["props","ref","createRef","showMore","this","currentlyReloading","hasMore","currentMagazineCount","magazineList","length","newCount","magazinesPerPage","skip","reloadPage","merge","currentPage","newMagazinePage","unbindInfiniteScroll","current","componentWillUnmount","totalMagazineCount","count","loadOptions","url","searchParams","set","String","hiddenParams","render","appearance","Narrow","for","page","mainContent","component","Title","elementRef","Grid","map","item","Col","key","MagazinePageLink","to","Teaser","src","imageUrl","alt","title","ratio","SixteenToNine","preset","Small","TeaserHeader","TeaserText","preamble","Pagination","css","marginBottom","ShowAll","variant","Large","Secondary","onClick","Component","div","margin","top","bottom","x","width","display","flexWrap","justifyContent","flexBasis","maxWidth","textDecoration","color","height","flexDirection","padding","xy","fontSize","letterSpacing","y","textTransform","lineHeight","overflow","alignItems"],"mappings":"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","file":"assets/54.chunk.265ef033ae2e65d6c412.js","sourcesContent":["/**\r\n * @ComponentFor MagazineListPageViewModel\r\n */\r\nimport React from 'react';\r\nimport { styled } from '@glitz/react';\r\nimport { currentUrl, translate, replaceState, HistoryOptions } from '@avensia/scope';\r\nimport { EpiProperty } from '@avensia/scope-episerver';\r\nimport { Main, Appearance } from 'Shared/PageLayout';\r\nimport Image, { Ratio as ImageRatio, Preset as ImagePreset } from 'Shared/Image/Ratio';\r\nimport { bindInfiniteScroll } from 'Shared/infinite-scroll';\r\nimport { Part } from 'Shared/PageLayout';\r\nimport Button, { Variant as ButtonVariant, Appearance as ButtonAppearance } from 'Shared/Button';\r\nimport {\r\n  pixelsToUnit,\r\n  minTinyMediaQuery,\r\n  minSmallMediaQuery,\r\n  minMediumMediaQuery,\r\n  minLargeMediaQuery,\r\n  minHugeMediaQuery,\r\n  sigma,\r\n  epsilon,\r\n  delison,\r\n  delta,\r\n  gamma,\r\n  beta,\r\n} from 'Shared/Style';\r\nimport Link from 'Shared/Link';\r\nimport MagazineListPageType from './MagazineListPageViewModel.type';\r\n\r\ntype PropType = MagazineListPageType;\r\n\r\nexport default class MagazineListPage extends React.Component<PropType> {\r\n  currentlyReloading: boolean;\r\n  unbindInfiniteScroll: () => void;\r\n  ref = React.createRef<HTMLDivElement>();\r\n\r\n  constructor(props: PropType) {\r\n    super(props);\r\n    this.currentlyReloading = false;\r\n  }\r\n\r\n  componentWillUnmount() {\r\n    if (this.unbindInfiniteScroll) {\r\n      this.unbindInfiniteScroll();\r\n    }\r\n  }\r\n\r\n  hasMore() {\r\n    return this.props.totalMagazineCount > this.props.magazineList.length;\r\n  }\r\n\r\n  reloadPage(count: number, skip: number, loadOptions?: HistoryOptions) {\r\n    const url = currentUrl();\r\n    url.searchParams.set('count', String(count));\r\n    url.hiddenParams.set('skip', String(skip));\r\n    return replaceState(url, loadOptions);\r\n  }\r\n\r\n  showMore = async () => {\r\n    if (!this.currentlyReloading) {\r\n      if (this.hasMore()) {\r\n        this.currentlyReloading = true;\r\n        const currentMagazineCount = this.props.magazineList.length;\r\n        const newCount = currentMagazineCount + this.props.magazinesPerPage;\r\n        const skip = currentMagazineCount / this.props.magazinesPerPage;\r\n        try {\r\n          await this.reloadPage(newCount, skip, {\r\n            merge: (currentPage: MagazineListPageType, newMagazinePage: MagazineListPageType) => {\r\n              return { ...currentPage, magazineList: newMagazinePage.magazineList };\r\n            },\r\n          });\r\n          this.currentlyReloading = false;\r\n        } catch (e) {\r\n          this.currentlyReloading = false;\r\n        }\r\n      } else {\r\n        if (this.unbindInfiniteScroll) {\r\n          this.unbindInfiniteScroll();\r\n        }\r\n      }\r\n    }\r\n    this.unbindInfiniteScroll = bindInfiniteScroll(this.ref.current, () => this.showMore());\r\n  };\r\n\r\n  render() {\r\n    const { magazineList = [] } = this.props;\r\n    return (\r\n      <Main appearance={Appearance.Narrow}>\r\n        <EpiProperty for={this.props.page.mainContent} component={(props) => <Title {...props} />} />\r\n        <Part elementRef={this.ref}>\r\n          <Grid>\r\n            {!!magazineList.length &&\r\n              magazineList.map((item) => (\r\n                <Col key={item.url}>\r\n                  <MagazinePageLink to={item.url}>\r\n                    <Teaser>\r\n                      <Image\r\n                        src={item.imageUrl.url}\r\n                        alt={item.title}\r\n                        ratio={ImageRatio.SixteenToNine}\r\n                        preset={ImagePreset.Small}\r\n                      />\r\n                      <TeaserHeader>{item.title}</TeaserHeader>\r\n                      <TeaserText>{item.preamble}</TeaserText>\r\n                    </Teaser>\r\n                  </MagazinePageLink>\r\n                </Col>\r\n              ))}\r\n          </Grid>\r\n        </Part>\r\n        <Pagination css={this.hasMore() && { marginBottom: pixelsToUnit(317) }}>\r\n          {this.hasMore() && (\r\n            <ShowAll variant={ButtonVariant.Large} appearance={ButtonAppearance.Secondary} onClick={this.showMore}>\r\n              {translate('/Magazine/ShowAll')}\r\n            </ShowAll>\r\n          )}\r\n        </Pagination>\r\n      </Main>\r\n    );\r\n  }\r\n}\r\n\r\nconst Title = styled.div({\r\n  margin: {\r\n    top: pixelsToUnit(-25),\r\n    bottom: pixelsToUnit(15),\r\n    x: 'auto',\r\n  },\r\n  width: '100%',\r\n});\r\n\r\nconst Grid = styled.div({\r\n  display: 'flex',\r\n  flexWrap: 'wrap',\r\n  justifyContent: 'center',\r\n});\r\n\r\nconst Col = styled.div({\r\n  flexBasis: '100%',\r\n  maxWidth: pixelsToUnit(506),\r\n  [minTinyMediaQuery]: {\r\n    flexBasis: '50%',\r\n  },\r\n  [minSmallMediaQuery]: {\r\n    flexBasis: '33.33%',\r\n  },\r\n});\r\n\r\nconst MagazinePageLink = styled(Link, {\r\n  textDecoration: 'inherit',\r\n  color: 'inherit',\r\n  height: '100%',\r\n  display: 'block',\r\n});\r\n\r\nconst Teaser = styled.div({\r\n  display: 'flex',\r\n  flexDirection: 'column',\r\n  padding: {\r\n    xy: pixelsToUnit(5),\r\n  },\r\n  [minMediumMediaQuery]: {\r\n    padding: {\r\n      xy: pixelsToUnit(12.5),\r\n    },\r\n  },\r\n});\r\n\r\nconst TeaserHeader = styled.div({\r\n  fontSize: epsilon,\r\n  letterSpacing: pixelsToUnit(1.5),\r\n  padding: {\r\n    y: pixelsToUnit(5),\r\n  },\r\n  textTransform: 'uppercase',\r\n  [minMediumMediaQuery]: {\r\n    fontSize: delta,\r\n  },\r\n  [minLargeMediaQuery]: {\r\n    fontSize: gamma,\r\n    letterSpacing: pixelsToUnit(2),\r\n  },\r\n  [minHugeMediaQuery]: {\r\n    fontSize: beta,\r\n    lineHeight: 'normal',\r\n    letterSpacing: pixelsToUnit(3),\r\n    overflow: 'hidden',\r\n  },\r\n});\r\n\r\nconst TeaserText = styled.div({\r\n  fontSize: sigma,\r\n  lineHeight: pixelsToUnit(20),\r\n  overflow: 'hidden',\r\n  padding: {\r\n    y: pixelsToUnit(5),\r\n  },\r\n  [minTinyMediaQuery]: {\r\n    fontSize: sigma,\r\n    lineHeight: pixelsToUnit(20),\r\n  },\r\n  [minMediumMediaQuery]: {\r\n    fontSize: epsilon,\r\n    lineHeight: pixelsToUnit(24),\r\n  },\r\n  [minHugeMediaQuery]: {\r\n    fontSize: delison,\r\n    lineHeight: pixelsToUnit(27),\r\n  },\r\n});\r\n\r\nconst Pagination = styled(Part, {\r\n  alignItems: 'center',\r\n  display: 'flex',\r\n  flexDirection: 'column',\r\n  margin: {\r\n    y: pixelsToUnit(50),\r\n    x: 0,\r\n  },\r\n  [minTinyMediaQuery]: {\r\n    margin: {\r\n      y: pixelsToUnit(100),\r\n    },\r\n  },\r\n});\r\n\r\nconst ShowAll = styled(Button, {\r\n  fontSize: epsilon,\r\n  padding: {\r\n    y: 0,\r\n    x: pixelsToUnit(30),\r\n  },\r\n});\r\n"],"sourceRoot":""}