{"version":3,"file":"component---src-pages-beyond-the-story-design-puppets-js-5cd4cf7f9d958d10e9ff.js","mappings":"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","sources":["webpack://gatsby-starter-default/./src/components/Education/Design/CarouselSection.js","webpack://gatsby-starter-default/./src/pages/beyond-the-story/design/puppets.js"],"sourcesContent":["import React, {Component} from 'react';\nimport styled from 'styled-components'\nimport {media} from \"utils/Media\"\nimport Slider from 'react-slick'\nimport {graphql, StaticQuery} from \"gatsby\";\nimport {GatsbyImage, getImage} from \"gatsby-plugin-image\"\nimport \"slick-carousel/slick/slick.css\"\nimport \"slick-carousel/slick/slick-theme.css\"\nimport arrowRight from '../../../images/carousel-arrow-right.png'\nimport arrowRightXs from '../../../images/arrow-right-xs.svg'\n\nconst Section = styled.div`\n    margin: 0 auto;\n    \n    @media ${media.xl} {\n        margin: 0 auto;\n    }\n    \n    h5 {\n        margin-top: 5rem;\n        padding: 0 15px;\n        \n        @media ${media.sm} {\n            padding: 0;\n        }\n    }\n    \n`\n\nconst PhotoSlider = styled(Slider)`\n    position: relative;\n    z-index: 2;\n    margin: 0 auto;\n    max-width: 580px;\n    \n    @media ${media.lg} {\n        max-width: 800px;\n    }\n    \n    @media ${media.xl} {\n        max-width: 1048px;\n    }\n    \n    h5 {\n        margin-top: 0.5rem;\n        font-size: 0.75rem;\n        line-height: 1rem;\n        margin-bottom: 0;\n        \n        @media ${media.sm} {\n            margin-top: 2rem;\n            font-size: 1rem;\n            line-height: 1.375rem;\n        }\n    }\n    \n    a {\n        text-decoration: underline;\n    }\n    \n    .slick-track {\n        display: flex;\n        align-items: flex-start;\n        flex-wrap: nowrap;\n        justify-content: center;\n    }\n    \n    .slick-slide{\n        padding: 0;\n        transition: all 0.3s ease;\n        height: auto;\n        \n        &.slick-current,\n        &.slick-center {\n          opacity: 1 !important;\n          \n        }\n        opacity: 0.2;\n        \n        &.slick-active {\n            //opacity: 0.2;\n        }\n        \n        &.slick-cloned {\n            //margin-left: -25%;\n        }\n        \n        .img {\n            //display: block;\n            //max-width: 100%;\n            //height: auto;\n        }\n    }\n    \n    .photo-wrapper {\n        position: relative;\n        max-width: 640px;\n        cursor: pointer;\n        \n        @media ${media.xl} {\n            max-width: 1048px;\n        }\n        \n    }\n    \n    .slick-dots {\n        bottom: -25px;\n        z-index: 9;\n        \n        @media ${media.md} {\n            bottom: -35px;\n        } \n        \n        @media ${media.lg} {\n            bottom: -50px;\n        } \n    }\n    \n    .slick-dots li, .slick-dots li button {\n        width: 10px;\n        height: 10px;\n        \n        @media ${media.md} {\n            width: 12px;\n            height: 12px;\n        }\n        \n        @media ${media.lg} {\n            width: 20px;\n            height: 20px;\n        }\n    }\n    \n    .slick-dots li button:before {\n        color: ${props => props.theme.colors.turquoise2};\n        opacity: 1;\n        font-size: 10px;\n        \n        @media ${media.md} {\n            font-size: 12px;\n        }\n        \n        @media ${media.lg} {\n            font-size: 20px;\n        }\n    }\n    \n    .slick-dots li.slick-active button:before {\n        color: transparent;\n        border: 3px solid #63DBE7;\n        border-radius: 5px;\n        top: 4px;\n        left: 5px;\n        width: 10px;\n        height: 10px;\n        \n        @media ${media.md} {\n            top: 3px;\n            border-radius: 6px;\n            width: 12px;\n            height: 12px;\n        }\n        \n        @media ${media.lg} {\n            left: 0;\n            top: -1px;\n            border-radius: 10px;\n            width: 20px;\n            height: 20px;\n        }\n    }\n    .slick-prev, .slick-next {\n        width: 16px;\n        height: 32px;\n        bottom: -50px;\n        top: initial;\n        z-index: 10;\n        \n        @media ${media.md} {\n             width: 50px;\n            height: 50px;\n            top: 175px;\n            bottom: initial;\n        }\n        \n        @media ${media.lg} {\n            top: 50%;    \n        } \n        \n        &:focus {\n            outline: 5px auto -webkit-focus-ring-color !important;\n        }\n    }\n    \n    .slick-next {\n        right: 17px;\n        bottom: -56px;\n        \n        @media ${media.md} {\n            right: -80px;\n            bottom: -50px;\n        }\n        \n        &:before {\n            content: '';\n            background: url(${arrowRightXs}) no-repeat center center;\n            background-size: contain;\n            position: absolute;\n            right: 0;\n            top: 0;\n            width: 100%;\n            height: 100%;\n            \n             @media ${media.md} {\n                background: url(${arrowRight}) no-repeat center center;\n                background-size: contain;\n             }\n        }\n    }\n    \n    .slick-prev {\n        left: 20px;\n        \n        @media ${media.md} {\n            left: -80px;\n        }\n        \n        &:before {\n            content: '';\n            transform: rotate(180deg);\n            background: url(${arrowRightXs}) no-repeat center center;\n            background-size: contain;\n            position: absolute;\n            left: 0;\n            top: 6px;\n            width: 100%;\n            height: 100%;\n            \n            @media ${media.md} {\n                background: url(${arrowRight}) no-repeat center center;\n                background-size: contain;\n                top: 0;\n             }\n        }\n    }\n    \n`\n\nconst Query = (props) => (\n    <StaticQuery\n        query={graphql`\n            query {\n                bgImage: file(relativePath: { eq: \"EducationPage/menu-bg.png\" }) {\n                    childImageSharp {\n                        gatsbyImageData(width: 1920, quality: 100, placeholder: NONE\n                            formats: [AUTO, WEBP])\n                    }\n                }\n            }\n\t\t`}\n        render={data => (\n            <CarouselSection\n                data={data}\n                carouselData={props.carouselData}\n                altText={props.altText}\n                page={props.page}\n            />\n        )}\n    />\n)\n\nclass CarouselSection extends Component {\n    sendTealium = (currentSlide, slideCount, which) => {\n        let sliderId\n\n        if (which === 'right') {\n            this.carousel.slickNext();\n            sliderId = currentSlide + 1\n            if (sliderId === slideCount) {\n                sliderId = 0\n            }\n        } else {\n            this.carousel.slickPrev();\n            sliderId = currentSlide + -1\n\n            if (sliderId < 0) {\n                sliderId = slideCount - 1\n            }\n        }\n\n        if (typeof window !== 'undefined' && typeof window.utag !== 'undefined') {\n            // Tealium\n            let linkData = {\n                siteName: \"frozeneducation\",\n                country: \"uk\",\n                region: \"emea\",\n                actionName: \"navButtonClick\",\n                actionValue1: `${this.props.page} carousel ${sliderId}`\n            }\n            console.log(`${this.props.page} carousel ${sliderId}`)\n            window.utag.link(linkData)\n        }\n    }\n\n    render() {\n        const SlickArrowLeft = ({currentSlide, slideCount, ...props}) => (\n            <button\n                {...props}\n                className={\n                    \"slick-arrow slick-prev\"\n                }\n                aria-hidden=\"false\"\n                aria-disabled={currentSlide === 0}\n                type=\"button\"\n                tabIndex={0}\n                onClick={() => this.sendTealium(currentSlide, slideCount, 'left')}\n            >\n                Previous\n            </button>\n        );\n        const SlickArrowRight = ({currentSlide, slideCount, ...props}) => (\n            <button\n                {...props}\n                className={\n                    \"slick-arrow slick-next\"\n                }\n                aria-hidden=\"false\"\n                aria-disabled={currentSlide === slideCount - 1}\n                type=\"button\"\n                tabIndex={0}\n                onClick={() => this.sendTealium(currentSlide, slideCount, 'right')}\n            >\n                Previous\n            </button>\n        );\n        const settings = {\n            centerMode: true,\n            slidesToShow: 1,\n            centerPadding: '0',\n            dots: true,\n            arrows: true,\n            prevArrow: <SlickArrowLeft/>,\n            nextArrow: <SlickArrowRight/>,\n            cssEase: 'linear',\n            draggable: true,\n            swipe: true,\n            swipeToSlide: true,\n            touchMove: true,\n            accessibility: true,\n            responsive: [\n                {\n                    breakpoint: 991,\n                    settings: {\n                        centerPadding: '0',\n                    }\n                }\n            ]\n        }\n\n        const items = this.props.carouselData;\n        const galleryItems = items.map(({node}, id) => {\n            return (\n                <div\n                    className=\"photo-wrapper\"\n                    key={id}\n                >\n                    <GatsbyImage placeholder=\"none\"\n                        image={getImage(node.image)}\n                        alt=\"\"\n                        title=\"\"\n                        className=\"img\"\n                    />\n\n                    <h5 className=\"font--regular color--navy font-weight-bold narrow mx-auto\" dangerouslySetInnerHTML={{__html: node.copy}}/>\n                </div>\n            )\n\n        })\n        return (\n            <Section bgImage={this.props.bgImage}>\n                <PhotoSlider\n                    {...settings}\n                    className=\"PhotoGallery\"\n                    ref={slider => (this.carousel = slider)}\n                >\n                    {galleryItems}\n                </PhotoSlider>\n\n                <h5 className=\"font--regular color--navy font-weight-bold narrow mx-auto\">{this.props.altText}</h5>\n            </Section>\n\n        );\n    }\n}\n\nexport default Query;","import React, {Component} from \"react\"\nimport SEO from \"utils/Seo\"\nimport Layout from \"components/Layout/Layout\"\nimport MoreTopics from \"../../../components/Education/MoreTopics\"\nimport styled from \"styled-components\";\nimport HeadingSpecial from \"../../../components/shared/HeadingSpecial\";\nimport {Container} from \"reactstrap\";\nimport CarouselSection from \"../../../components/Education/Design/CarouselSection\";\nimport {graphql, StaticQuery} from \"gatsby\";\nimport SnowFlakes from \"../../../components/shared/SnowFlakes\";\n\nconst pageSlug = \"puppets\"\nconst pageTitle = \"Puppets\"\nconst categorySlug = \"design\"\nconst categoryTitle = \"Design\"\n\nconst Content = styled.div`\n    position: relative;\n    \n    text-align: center;\n`\n\nconst Query = (props) => (\n    <StaticQuery\n        query={graphql`\n            query {\n                allPuppetsCarouselJson {\n                    edges {\n                        node {\n                            copy\n                            image {\n                                childImageSharp {\n                                    gatsbyImageData(width: 1048, quality: 100)\n                                }\n                            }\n                        }\n                    }\n                }\n            }\n\t\t`}\n        render={data => (\n            <Puppets data={data}/>\n        )}\n    />\n)\n\nclass Puppets extends Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            clickDisabled: false\n        }\n\n        this.pageData = {\n            pageName: pageSlug,\n            siteName: \"frozeneducation\",\n            country: \"uk\",\n            region: \"emea\"\n        }\n    }\n\n    componentDidMount() {\n        // if (typeof window !== 'undefined' && typeof window.utag !== 'undefined') {\n        //     // Tealium\n        //     window.utag.view(this.pageData)\n        // }\n    }\n\n    resourcesClicked = (e, resource) => {\n        if (this.state.clickDisabled){\n            e.preventDefault()\n            return;\n        }\n\n        if (typeof window !== 'undefined' && typeof window.utag !== 'undefined') {\n            console.log(\"Tag firing\")\n            // Tealium\n            let linkData = {\n                siteName: \"frozeneducation\",\n                country: \"uk\",\n                region: \"emea\",\n                actionName: \"download_materials\",\n                actionValue1: resource\n            }\n            window.utag.link(linkData)\n            this.setState({\n                clickDisabled: true\n            }, () => {\n                setTimeout(function () {\n                        console.log('Now you can click again')\n                        this.setState({\n                            clickDisabled: false\n                        });\n                    }.bind(this), 500\n                );\n            })\n        }\n    }\n\n    render() {\n\n        return (\n            <Layout categorySlug={categorySlug}\n                    category={categoryTitle}\n                    currentPage={pageTitle}\n                    pageName={pageSlug}\n                    mainCategorySlug=\"beyond-the-story\"\n                    enrichmentHeader>\n                <SEO slug={pageSlug} title={pageTitle} description=\"\"/>\n                <SnowFlakes>\n                <Content className=\"enrichment\">\n                        <HeadingSpecial lines={false} headingTag=\"h1\"\n                                        className=\"py-4 py-md-5 font--bigger\"\n                                        title={pageTitle}/>\n\n                        {/*<Container fluid={true}>*/}\n                        {/*    <div className=\"content\">*/}\n                        {/*        <h4 className=\"font--regular font-weight-bold\">Teachers, take your experience further. <a*/}\n                        {/*            onClick={(e)=>this.resourcesClicked(e, \"puppets\")}*/}\n                        {/*            href=\"#\" className=\"no-interstitial-check\">Download&nbsp;this&nbsp;lesson&nbsp;plan</a> exploring the collaborative nature of making art.</h4>*/}\n                        {/*    </div>*/}\n                        {/*</Container>*/}\n                        <Container fluid={true} className=\"no-padding-xs\">\n                            <CarouselSection\n                                page=\"puppets\"\n                                carouselData={this.props.data.allPuppetsCarouselJson.edges}\n                                altText=\"Photographs by Andrew Eccies.\"\n                            />\n                        </Container>\n                </Content>\n                    <div className=\"py-5\">&nbsp;</div>\n                </SnowFlakes>\n                <MoreTopics inspiration adaptation/>\n            </Layout>\n        )\n    }\n}\nexport default Query"],"names":["Section","styled","media","PhotoSlider","Slider","props","theme","colors","turquoise2","arrowRightXs","arrowRight","CarouselSection","sendTealium","currentSlide","slideCount","which","sliderId","carousel","slickNext","slickPrev","window","utag","linkData","siteName","country","region","actionName","actionValue1","page","console","log","link","render","SlickArrowLeft","className","type","tabIndex","onClick","SlickArrowRight","settings","centerMode","slidesToShow","centerPadding","dots","arrows","prevArrow","nextArrow","cssEase","draggable","swipe","swipeToSlide","touchMove","accessibility","responsive","breakpoint","galleryItems","this","carouselData","map","id","node","key","G","placeholder","image","getImage","alt","title","dangerouslySetInnerHTML","__html","copy","bgImage","ref","slider","altText","Component","StaticQuery","query","data","pageSlug","pageTitle","Content","Puppets","resourcesClicked","e","resource","state","clickDisabled","preventDefault","setState","setTimeout","bind","pageData","pageName","componentDidMount","categorySlug","category","currentPage","mainCategorySlug","enrichmentHeader","slug","description","lines","headingTag","fluid","allPuppetsCarouselJson","edges","inspiration","adaptation"],"sourceRoot":""}