{"version":3,"file":"component---src-pages-story-js-823f342eea91c476b829.js","mappings":"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","sources":["webpack://be-landing/./src/components/story-components/story-components.styled.js","webpack://be-landing/./src/components/story-components/story.js","webpack://be-landing/./src/pages/story.js"],"sourcesContent":["import {\n  GatsbyImage,\n} from \"gatsby-plugin-image\";\nimport {\n  ZWrapper,\n} from '../../ui-components';\nimport styled, { css } from \"styled-components\";\n\n\nconst cutSize = 4;\nconst btnSize = 32;\n\nexport const StoryWrap = styled.div`\ndisplay: table;\nwidth: 100%;\nmargin-bottom: 1px;\ntext-align: left;\n\n@media ${({theme}) => theme.device.mobile}{\n  display: block;\n}\n`;\n\nexport const StoryWrapCell = styled.div`\ndisplay: table-cell;\nvertical-align: top;\n\n@media ${({theme}) => theme.device.mobile}{\n  display: block;\n}\n\n${props => props.date && css`\n  position: relative;\n  text-align: center;\n  width: 140px;\n  padding-top: 18px;\n  font-family: \"Quantico\", sans-serif;\n  font-size: 18px;\n  text-transform: uppercase;\n  line-height: 21px;\n  color: ${({theme}) => theme.text.primary};\n\n  @media ${({theme}) => theme.device.mobile}{\n    width: 100%;\n    padding-bottom: 16px;\n  }\n`}\n\n${props => props.text && css`\n  padding: 0 10px;\n`}\n`;\n\nexport const StoryBlock = styled.div`\ndisplay: table;\nwidth: 100%;\nmargin-top: -7px;\nmargin-left: 7px;\nmargin-bottom: -7px;\n\n@media only screen and (max-width: 620px){\n  display: flex;\n  flex-direction: column-reverse;\n  align-content: center;\n  align-items: center;\n  width: auto;\n  margin: auto;\n  margin-left: -4px;\n  margin-top: -4px;\n  /* \n  margin-right: -7px; */\n}\n`;\n\nexport const StoryBlockCell = styled.div`\ndisplay: table-cell;\nvertical-align: top;\n\n@media only screen and (max-width: 620px){\n  text-align: center;\n  display: block;\n}\n\n${props => props.image && css`\n  width: 240px;\n\n  @media only screen and (max-width: 620px){\n    width: 100%;\n    text-align: center;\n    margin-bottom: 16px;\n  }\n`}\n\n${props => props.text && css`\n  padding: 8px 24px 16px 0px;\n\n  @media only screen and (max-width: 620px){\n    background-color: white;\n    padding: 0;\n    margin: 8px\n    margin-top: 16px;\n\n  }\n`}\n`;\n\nexport const StoryText = styled.div`\n> p, ul, ol{\n  margin: 0;\n  margin-bottom: 10px;\n  font-size: 16px;\n  color: ${({theme}) => theme.text.primary};\n\n  @media only screen and (max-width: 620px){\n    line-height: 21px;\n  }\n}\n`;\nexport const cutSize2 = 4;\n\n\n\n\nexport const StoryImageHover = styled.div`\n  display: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: ${btnSize - cutSize2 * 2}px;\n  height: ${btnSize}px;\n  margin-top: -${btnSize / 2}px;\n  margin-left: -${btnSize / 2 - cutSize}px;\n  text-align: center;\n  z-index: 1;\n  background-color: ${({theme}) => theme.thirdiary.main};\n\n  &::before {\n    content: ' ';\n    position: absolute;\n    top: 0;\n    right: -${cutSize}px;\n    bottom: 0;\n    border-top: ${cutSize}px solid transparent;\n    border-left: ${cutSize}px solid ${({theme}) => theme.thirdiary.main};\n    border-bottom: ${cutSize}px solid transparent;\n  }\n\n  &::after {\n    content: ' ';\n    position: absolute;\n    top: 0;\n    left: -${cutSize}px;\n    bottom: 0;\n    border-top: ${cutSize}px solid transparent;\n    border-right: ${cutSize}px solid ${({theme}) => theme.thirdiary.main};\n    border-bottom: ${cutSize}px solid transparent;\n  }\n\n  svg{\n    margin-top: 3px;\n    fill: #fff;\n  }\n`;\n\n\nexport const StoryImageFrame = styled.button`\nposition: relative;\ndisplay: block;\nline-height: 0;\nz-index: 1;\nbackground: transparent;\npadding: 0;\nmargin: 0;\nborder: 0;\ncursor: pointer;\n\n&:hover{\n    ${StoryImageHover}{\n      display: block;\n    }\n    img{\n      filter: brightness(60%);\n    }\n  }\n\n&::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  border-top: ${cutSize2}px solid white;\n  border-left: ${cutSize2}px solid transparent;\n  border-bottom: ${cutSize2}px solid white;\n  z-index: 100;\n}\n\n&::after {\n  content: ' ';\n  position: absolute;\n  top: 0;\n  left:0;\n  bottom: 0;\n  border-top: ${cutSize2}px solid white;\n  border-right: ${cutSize2}px solid transparent;\n  border-bottom: ${cutSize2}px solid white;\n  z-index: 1;\n}\n`;\n\nexport const StoryImage = styled(GatsbyImage)`\nwidth: 240px;\nmin-height: 180px;\n\n@media only screen and (max-width: 620px){\n  width: 260px;\n  height: auto;\n  margin: auto;\n  \n}\n`\n\nexport const StoryImageCount = styled.div`\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 16px;\n`\n\nexport const StoryImageCountDot = styled.div`\n  width: 6px;\n  height: 6px;\n  border-radius: 3px;\n  margin: 0 2px;\n  background: #fff;\n  display: inline-block;\n\n  &:first-child{\n    background: ${({theme}) => theme.thirdiary.main};\n  }\n\n`\n\n\nexport const Date = styled.div`\nposition: relative;\ndisplay: inline-block;\npadding: 4px;\nbackground-color: ${({theme}) => theme.background.default};\nz-index: 4;\n`\n\nexport const Dots = styled.div`\nposition: absolute;\ntop: 4px;\nbottom: 0;\nleft: 50%;\nborder-left: 4px dotted rgba(0,0,0,0.1);\n`;\n\nexport const StoryWrapper = styled(ZWrapper)`\n  @media only screen and (max-width: 620px){\n    max-width: 268px;\n    margin: auto;\n  }\n`;\n","import React from \"react\";\nimport {\n  Icon,\n} from '../../ui-components';\nimport {\n  StoryBlock,\n  StoryBlockCell,\n  StoryImage,\n  StoryImageFrame,\n  StoryImageCount,\n  StoryImageCountDot,\n  StoryImageHover,\n  StoryText,\n  StoryWrap,\n  StoryWrapCell,\n  StoryWrapper,\n  Date,\n  Dots,\n} from './story-components.styled'\n\n\n\nconst Story = ({ story, onGalleryPress }) => {\n  const data = story.frontmatter || {}\n  const html = story.html;\n  const gallery = data.gallery || [];\n  \n  const previewImage = gallery.length > 0 ? gallery[0] : null;\n\n  return (\n    <StoryWrap>\n      <StoryWrapCell date>\n        {data.show_date\n          ? <Date>{data.date}</Date>\n          : ''\n        }\n        <Dots />\n      </StoryWrapCell>\n      <StoryWrapCell text>\n        <StoryWrapper>\n          <StoryBlock>\n            <StoryBlockCell text>\n              <StoryText dangerouslySetInnerHTML={{ __html: html }} />\n            </StoryBlockCell>\n            <StoryBlockCell image>\n              {previewImage ?\n                <StoryImageFrame onClick={() => { onGalleryPress(gallery) }}>\n                  <StoryImage\n                    image={previewImage.image.childImageSharp.thumb}\n                    alt={data.date}\n                  />\n                  <StoryImageHover>\n                    <Icon\n                      name=\"search-outline\"\n                      width={24}\n                      height={24}\n                      noFill\n                    />\n                  </StoryImageHover>\n                  <StoryImageCount>\n                    {gallery.length > 1 && gallery.map((data, index) => (\n                      <StoryImageCountDot key={index} />\n                    ))}\n                  </StoryImageCount>\n                </StoryImageFrame>\n                : null}\n            </StoryBlockCell>\n          </StoryBlock>\n        </StoryWrapper>\n      </StoryWrapCell>\n    </StoryWrap>\n  )\n\n}\n\nexport default Story;\n","import React, { useState } from \"react\";\nimport { graphql } from \"gatsby\";\nimport {\n  SEO,\n} from '../components';\nimport {\n  Layout,\n  LayoutHeader,\n  LayoutFooter,\n  LayoutMain,\n  Header,\n  Footer,\n  PageTitle,\n  PageHTML,\n} from '../ui-components';\nimport Story from \"../components/story-components/story\";\nimport GalleryFullScreen from \"../components/gallery/gallery-fullscreen\";\n\n\nconst StoryPage = ({ data, location }) => {\n  const [fullScreenArray, setFullScreenArray] = useState([]);\n  const [currentIndex, setCurrentIndex] = useState(0);\n  const content = data.content.frontmatter || {};\n  const html = data.content.html;\n  const story = data.story.edges.map(element => element.node.childMarkdownRemark);\n\n  const enterFullScreen = (payload) => {\n    setCurrentIndex(0);\n    setFullScreenArray(payload);\n  }\n\n  const handleNext = (event) => {\n    event.preventDefault();\n    const next = currentIndex + 1 >= fullScreenArray.length ? 0 : currentIndex + 1;\n    setCurrentIndex(next);\n  }\n\n  const handlePrev = (event) => {\n    event.preventDefault();\n    const prev = currentIndex <= 0 ? fullScreenArray.length - 1 : currentIndex - 1;\n    setCurrentIndex(prev);\n  }\n\n  const handleClose = (event) => {\n    event.preventDefault();\n    setFullScreenArray([]);\n    setCurrentIndex(0);\n  }\n\n  return (\n    <>\n      {fullScreenArray.length > 0\n        ? (\n          <GalleryFullScreen\n            data={{\n              type: fullScreenArray[currentIndex].type,\n              image: fullScreenArray[currentIndex].image.childImageSharp.fullscreen,\n              youtube: fullScreenArray[currentIndex].youtube,\n            }}\n            onNext={handleNext}\n            onPrev={handlePrev}\n            onClose={handleClose}\n            disableNavigation={fullScreenArray.length === 1}\n          />\n        )\n        : ''}\n      <SEO\n        canonical=\"/story/\"\n        title={content.title}\n      />\n      <Layout id=\"layout\" layout=\"simple\">\n        <LayoutHeader>\n          <Header />\n        </LayoutHeader>\n        <LayoutMain>\n\n          <PageTitle>{content.title}</PageTitle>\n          <br />\n          <PageHTML center dangerouslySetInnerHTML={{ __html: html }} />\n          <br />\n          <div>\n            {story.map((story, index) => (\n              <Story\n                key={index}\n                story={story}\n                onGalleryPress={enterFullScreen}\n              />\n            )\n            )}\n          </div>\n\n        </LayoutMain>\n        <LayoutFooter>\n          <Footer />\n        </LayoutFooter>\n      </Layout>\n\n    </>\n  );\n}\nexport default StoryPage;\n\n\nexport const pageQuery = graphql`\nquery {\n  site {\n    siteMetadata {\n      title\n    }\n  }\n  content: markdownRemark(fileAbsolutePath: {regex: \"/content/pages/story.md/\"}) {\n    frontmatter {\n      title\n    }\n    html\n  }\n  story: allFile(filter: {absolutePath: {regex: \"/content/story//\"}, childMarkdownRemark: {frontmatter: {is_visible: {eq: true}}}}, sort: {fields: childrenMarkdownRemark___frontmatter___date, order: DESC}) {\n    edges {\n      node {\n        childMarkdownRemark {\n          frontmatter {\n            date\n            show_date\n            gallery {\n              type\n              image{ \n                childImageSharp {\n                  thumb: gatsbyImageData(\n                    width: 187\n                    height: 140\n                    placeholder: BLURRED\n                    formats: [WEBP]\n                  )\n                  fullscreen: gatsbyImageData(\n                    placeholder: BLURRED\n                    formats: [WEBP]\n                  )\n                }\n              }\n            }            \n          }\n          html\n        }\n      }\n    }\n  }\n}  \n`;\n\n"],"names":["StoryWrap","styled","displayName","componentId","_ref","theme","device","mobile","StoryWrapCell","_ref2","props","date","css","_ref3","text","primary","_ref4","StoryBlock","StoryBlockCell","image","StoryText","_ref5","StoryImageHover","btnSize","_ref6","thirdiary","main","_ref7","_ref8","StoryImageFrame","StoryImage","GatsbyImage","withConfig","StoryImageCount","StoryImageCountDot","_ref9","Date","_ref10","background","default","Dots","StoryWrapper","ZWrapper","story","onGalleryPress","data","frontmatter","html","gallery","previewImage","length","React","show_date","dangerouslySetInnerHTML","__html","onClick","childImageSharp","thumb","alt","Icon","name","width","height","noFill","map","index","key","location","fullScreenArray","setFullScreenArray","useState","currentIndex","setCurrentIndex","content","edges","element","node","childMarkdownRemark","enterFullScreen","payload","GalleryFullScreen","type","fullscreen","youtube","onNext","event","preventDefault","next","onPrev","prev","onClose","disableNavigation","SEO","canonical","title","Layout","id","layout","LayoutHeader","Header","LayoutMain","PageTitle","PageHTML","center","Story","LayoutFooter","Footer"],"sourceRoot":""}