{"version":3,"file":"component---src-pages-teacher-library-js-33a61ed9ac4bbe4999f5.js","mappings":"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","sources":["webpack://gatsby-starter-default/./src/components/Cards/CardItemNew.js","webpack://gatsby-starter-default/./src/components/shared/VideoModal.js","webpack://gatsby-starter-default/./src/components/ResourceList/ResourceListNew.js","webpack://gatsby-starter-default/./src/pages/teacher-library.js","webpack://gatsby-starter-default/./src/images/icons/checkbox-active.svg","webpack://gatsby-starter-default/./src/images/icons/checkbox-inactive.svg","webpack://gatsby-starter-default/./src/images/icons/icon-filter.svg"],"sourcesContent":["import React, {Component} from 'react';\nimport styled from \"styled-components\";\nimport VideoModal from \"components/shared/VideoModal\"\nimport KalturaModal from \"components/shared/KalturaModal\"\nimport IconDownload from 'images/icons/icon-download.svg'\nimport IconDownloadWhite from 'images/icons/icon-download-white.svg'\nimport IconPlay from 'images/icons/icon-play.svg'\nimport IconPlayWhite from 'images/icons/icon-play-white.svg'\nimport IconArrow from 'images/icons/icon-arrow.svg'\nimport IconArrowWhite from 'images/icons/icon-arrow-white.svg'\nimport {media} from \"utils/Media\"\nimport cardTopBlue from \"images/Resources/card-top-blue.jpg\"\nimport cardTopGreen from \"images/Resources/card-top-green.jpg\"\nimport cardTopOrange from \"images/Resources/card-top-orange.jpg\"\nimport cardTopPurple from \"images/Resources/card-top-purple.jpg\"\nimport cardTopYellow from \"images/Resources/card-top-yellow.jpg\"\n\nconst Card = styled.div`\n    width: 200px;\n    height: 275px;\n    position: relative;\n    margin: 1rem 0.5rem 1rem;\n    padding: calc(25px + 1rem) 1rem 1rem;\n    box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.15);\n    transition: transform 200ms ease-in-out;\n    display: inline-block;\n    \n    &:hover {\n        transform: scale(1.05);\n    }\n    \n    .card-header {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 25px;\n        background: url(${cardTopOrange}) no-repeat center center;\n        background-size: 100%;\n    }\n    \n    &.orange {\n        .card-header {\n            background: url(${cardTopOrange}) no-repeat center center;\n            background-size: 100%;\n        }\n    }\n    \n    &.blue {\n        .card-header {\n            background: url(${cardTopBlue}) no-repeat center center;\n            background-size: 100%;\n        }\n    }\n    \n    &.green {\n        .card-header {\n            background: url(${cardTopGreen}) no-repeat center center;\n            background-size: 100%;\n        }\n    }\n    \n    &.purple {\n        .card-header {\n            background: url(${cardTopPurple}) no-repeat center center;\n            background-size: 100%;\n        }\n    }\n    \n    &.yellow {\n        .card-header {\n            background: url(${cardTopYellow}) no-repeat center center;\n            background-size: 100%;\n        }\n    }\n    \n    .card-body {\n        padding: 0 !important;\n    }\n    \n    .card-footer {\n        background: none !important;\n        border-top: 0;\n    }\n    \n    h4 {\n        font-size: 1.125rem;\n        padding-left: 0 !important;\n    }\n    \n    p {\n        font-size: 0.875rem;\n    }\n    \n    a {\n        text-decoration: underline;\n        \n        &:hover {\n            color: ${props => props.theme.colors.red};\n        }\n    }\n`\n\nconst DownloadButton = styled.a`\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 200px;\n    height: 50px;\n    font-style: normal;\n    font-weight: normal;\n    font-size: 1rem;\n    line-height: 200%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n    border: none;\n    color: ${props => props.theme.colors.white} !important;\n    transition: all 150ms ease-in-out;\n    cursor: pointer;\n    text-decoration: none !important;\n    \n    &.orange {\n        background-color: ${props => props.theme.colors.orange};\n    }\n    \n    &.blue {\n        background-color: ${props => props.theme.colors.blue};\n    }\n    \n    &.green {\n        background-color: ${props => props.theme.colors.green};\n    }\n    \n    &.purple {\n        background-color: ${props => props.theme.colors.purple};\n    }\n    \n    &.yellow {\n        background-color: ${props => props.theme.colors.yellow};\n        color: ${props => props.theme.colors.black} !important;\n    }\n    \n    img {\n        padding-left: 1rem;\n    }\n    \n    .hover {\n        display: none;\n    }\n    \n    &:hover {\n        color: ${props => props.theme.colors.white} !important;\n        background-color: ${props => props.theme.colors.black};\n        \n        .non-hover {\n            display: none;\n        }\n        \n        .hover {\n            display: inline-block;\n        }\n    }\n    \n    @media ${media.lg} {\n        width: 200px;\n    }\n    \n    img {\n        margin-left: 10px;\n    }\n`\n\nclass CardItemNew extends Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            modalOpen: false,\n        }\n    }\n\n    toggleModal = (e, src) => {\n        e.preventDefault();\n\n        this.setState({\n            src: src,\n            modalOpen: !this.state.modalOpen\n        });\n    }\n\n    toggleKalturaModal = (e, src) => {\n        e.preventDefault();\n\n        this.setState({\n            src: src,\n            kalturaModalOpen: !this.state.kalturaModalOpen,\n        });\n    }\n\n    render() {\n        let card = this.props.card\n\n        return (\n            <Card key={this.props.card.id} className={`${this.props.card.slug} ${this.props.color}`}>\n                <div className=\"card-header\">\n                </div>\n                <div className=\"card-body d-flex flex-column\">\n                    <h4 dangerouslySetInnerHTML={{__html: this.props.card.title }}/>\n                    <p>{card.body}</p>\n                </div>\n                <div className=\"card-footer\">\n                    {card.selector === 'pdf' &&\n                    <DownloadButton download target=\"_blank\" href={card.link} className={this.props.color}>Download PDF\n                        {this.props.color === 'yellow' ?\n                            <>\n                                <img className=\"non-hover\" src={IconDownload} alt=\"\" />\n                                <img className=\"hover\" src={IconDownloadWhite} alt=\"\" />\n                            </>\n                            :\n                                <img src={IconDownloadWhite} alt=\"\" />\n                        }\n                    </DownloadButton>\n                    }\n                    {card.selector === 'video' &&\n                    <DownloadButton onClick={(e) => this.toggleKalturaModal(e, card.link)} aria-label=\"Open video\" className={this.props.color}>Watch videos\n                        {this.props.color === 'yellow' ?\n                            <>\n                                <img className=\"non-hover\" src={IconPlay} alt=\"\" />\n                                <img className=\"hover\" src={IconPlayWhite} alt=\"\" />\n                            </>\n                            :\n                                <img src={IconPlayWhite} alt=\"\" />\n                        }\n                    </DownloadButton>\n                    }\n                    {card.selector === 'url' &&\n                    <DownloadButton target={!card.link.includes(\"lionkingeducation.co.uk\") ? '_blank' : '_self'} href={card.link} download={!card.link.includes(\"lionkingeducation.co.uk\")} className={this.props.color}>Find out more\n                        {this.props.color === 'yellow' ?\n                            <>\n                                <img className=\"non-hover\" src={IconArrow} alt=\"\" />\n                                <img className=\"hover\" src={IconArrowWhite} alt=\"\" />\n                            </>\n                            :\n                                <img src={IconArrowWhite} alt=\"\" />\n                        }\n                    </DownloadButton>\n                    }\n                </div>\n                <VideoModal toggleModal={this.toggleModal} src={this.state.src} modalOpen={this.state.modalOpen}/>\n                <KalturaModal toggleModal={this.toggleKalturaModal} src={this.state.src} modalOpen={this.state.kalturaModalOpen}/>\n            </Card>\n        );\n    }\n}\n\nexport default CardItemNew;","import React, {Component} from 'react';\nimport {Modal, ModalBody} from \"reactstrap\"\nimport styled from \"styled-components\"\nimport ButtonClose from 'components/shared/ButtonClose'\n\nconst VModal = styled(Modal)`\n    max-width: 1400px;\n    padding: 0;\n    border: 0;\n\n    .modal-content {\n        border: 0;\n        position: relative;\n    }\n\n    .modal-body {\n        padding: 0;\n        border: 0;\n    }\n    \n    .video-wrapper {\n        position: relative;\n        padding-bottom: 56.25%; /* 16:9 aspect ratio */\n        padding-top: 0; // height of controls\n        height: 0;\n    \n        iframe {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n        }\n    }\n`\n\nclass VideoModal extends Component {\n    render() {\n        return (\n            <VModal isOpen={this.props.modalOpen} toggle={this.props.toggleModal} centered={true}>\n                <ButtonClose onClick={this.props.toggleModal}>\n                    <span className=\"sr-only\">Close</span>\n                </ButtonClose>\n                <ModalBody>\n                    <div className=\"video-wrapper\">\n                        <iframe src={`https://player.vimeo.com/video/${this.props.src}`} width=\"640\" height=\"360\" frameBorder=\"0\"\n                                allow=\"autoplay; fullscreen\" allowFullScreen/>\n                    </div>\n                </ModalBody>\n            </VModal>\n        );\n    }\n}\n\nexport default VideoModal;","import React, {Component} from 'react';\nimport styled from \"styled-components\";\nimport CardItemNew from 'components/Cards/CardItemNew'\n\nconst Resources = styled.div`\n  margin-bottom: 1rem;\n\n  .card-deck {\n    display: flex;\n    flex-flow: row wrap;\n    justify-content: left;\n  }\n\n  h2 {\n    padding-left: 0.5rem;\n  }\n`\n\nclass ResourceListNew extends Component {\n    listResources = (tag, color) => {\n        let totalTags = 0;\n        let count = 0;\n        const getResources = this.props.resources.map((resource) => {\n            let catArray = []\n            resource.node.categories.map((cat, k) => {\n                catArray.push(cat)\n            })\n\n            let currentTag = resource.node.tag\n\n            let checkIfCategory = (arr, target) => target.every(v => arr.includes(v));\n            // console.log(catArray, this.props.categories)\n\n            if (currentTag === tag) {\n                count ++;\n                if (checkIfCategory(catArray, this.props.categories)) {\n                    totalTags++\n                    return (\n                        <CardItemNew key={resource.node.id} color={color} card={resource.node}/>\n                    )\n                } else {\n                    return false\n                }\n            }\n        })\n        if (totalTags > 0) {\n            return (\n                <Resources>\n                    {tag === 'primary' &&\n                        <h2><strong>Primary School Lesson Plans</strong> with Accompanying Activity Sheets</h2>\n                    }\n                    {tag === 'secondary' &&\n                        <h2><strong>Secondary School Lesson Plans</strong> with Accompanying Activity Sheets</h2>\n                    }\n                    {tag === 'behind' &&\n                        <h2><strong>Behind-The-Scenes Videos</strong></h2>\n                    }\n                    {tag === 'backstage' &&\n                        <h2><strong>Backstage Careers Documentary</strong> - Getting Ready to Roar</h2>\n                    }\n                    {tag === 'citizenship' &&\n                        <h2><strong>Community and Citizenship Projects</strong></h2>\n                    }\n                    {tag === 'background' &&\n                        <h2><strong>Background Reading</strong></h2>\n                    }\n                    {tag === 'video-questionnaires' &&\n                        <h2><strong>Video Hub Questionnaires</strong></h2>\n                    }\n                    <div className=\"card-deck-wrapper\">\n                        <div className=\"card-deck\">\n                            {getResources}\n                        </div>\n                    </div>\n                </Resources>\n            )\n        }\n    }\n\n    render() {\n        return (\n            <div>\n                {this.listResources('primary', 'orange')}\n                {this.listResources('secondary', 'blue')}\n                {this.listResources('behind', 'yellow')}\n                {this.listResources('backstage', 'yellow')}\n                {this.listResources('citizenship', 'purple')}\n                {this.listResources('background', 'green')}\n                {this.listResources('video-questionnaires', 'yellow')}\n            </div>\n        );\n    }\n}\n\nexport default ResourceListNew;","import React, {Component} from 'react';\nimport {graphql, StaticQuery} from \"gatsby\";\nimport styled from \"styled-components\";\nimport {Container} from \"reactstrap\";\nimport Layout from \"components/Layout/Layout\"\nimport checkboxActive from 'images/icons/checkbox-active.svg'\nimport checkboxInactive from 'images/icons/checkbox-inactive.svg'\nimport ResourceListNew from 'components/ResourceList/ResourceListNew'\nimport HeaderCopy from \"components/shared/HeaderCopy\"\nimport {media} from \"utils/Media\"\nimport iconFilter from \"images/icons/icon-filter.svg\"\nimport IconClose from \"images/icons/icon-close.svg\"\n\nconst Flex = styled.div`\n    display: flex;\n    flex-flow: row wrap;\n    align-content: space-between;\n    justify-content: space-between;\n`\n\nconst CategoryPanel = styled.div`\n    width: 220px;\n    \n    .title {\n        font-size: 1.125rem;\n        margin-bottom: 0.5rem;   \n    }\n    \n    .sticky {\n        border-right: 1px solid ${props => props.theme.colors.lightGrey};\n        border-bottom: 1px solid ${props => props.theme.colors.lightGrey};\n        padding-bottom: 1rem !important;\n    }\n    \n    .sticky.active {\n        position: fixed;\n        width: 100%;\n        z-index: 501;\n        bottom: 0;\n        height: 58px;\n        overflow: hidden;\n        background: white;\n        left: 0;\n        padding: 1rem;\n        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);\n        \n        &.open {\n            height: 100%;\n        }\n        \n        @media ${media.md} {\n            box-shadow: none;   \n            padding: 0;\n            left: initial;\n            width: 220px;\n            height: initial;\n            overflow: auto;\n            bottom: initial;    \n            z-index: 1;\n            top: 65px;\n            max-height: calc(100% - 175px);\n        }\n    }\n`\n\nconst Filter = styled.div`\n    display: flex;\n    align-items: center;\n    margin-bottom: 2rem;\n    cursor: pointer;\n    \n    @media ${media.md} {\n        cursor: normal;\n    }\n    \n    &.open {\n        flex-flow: row wrap;\n        align-content: space-between;\n        justify-content: space-between;\n    }\n    \n    p {\n        padding-left: 1rem;\n        margin-bottom: 0 !important;\n        \n        @media ${media.md} {\n            padding-left: 0;\n        }\n    }\n`\n\nconst Content = styled.div`\n    height: 100%;\n    width: 100%;\n    \n    @media ${media.md} {\n        width: calc(100% - 240px);\n    }\n`\n\nconst CategoryList = styled.ul`\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    \n    strong {\n        font-family: \"Proxima Nova W05 Light\", Arial, sans-serif;\n    }\n     \n    li {\n        font-size: 1rem;\n        margin-bottom: 0.5rem;\n        cursor: pointer;\n    }\n`\n\nconst ClearSelection = styled.button`\n    font-family: ${props => props.theme.font.family.light};\n    text-decoration: underline;\n    font-size: 0.8125rem;\n    background: transparent;\n    border: 0;\n    text-align: left;\n    padding: 8px 0;\n    width: 100%;\n`\n\n\n\nconst Query = () => (\n    <StaticQuery\n        query={graphql`\n            query {\n                allCategoriesJson {\n                    edges {\n                        node {\n                            parentDatabaseId\n                            databaseId\n                            slug\n                            name\n                        }\n                    }\n                }\n              allTeacherLibraryJson {\n                edges {\n                  node {\n                    id\n                    tag\n                    slug\n                    title\n                    body\n                    selector\n                    link\n                    categories\n                  }\n                }\n              }\n             \n            }\n\n\t\t`}\n        render={data => (\n            <ResourcePage data={data}/>\n        )}\n    />\n)\n\nclass ResourcePage extends Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            selectedCategories: [],\n            sticky: false,\n            filterOpen: false\n        }\n    }\n\n    componentDidMount() {\n        const width = window.innerWidth;\n\n        if (width < 768) {\n            this.setState({\n                sticky: true\n            })\n        }\n\n        window.addEventListener('scroll', this.handleScroll, true)\n        window.addEventListener('resize', this.handleScroll, true)\n    }\n\n    componentWillUnmount() {\n        window.removeEventListener('scroll', this.handleScroll, true)\n        window.removeEventListener('resize', this.handleScroll, true)\n    }\n\n    handleScroll = () => {\n        let scrollPosition = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop)\n\n        const width = window.innerWidth;\n\n        if (width > 767) {\n            let sticky = scrollPosition < 156 ? false : true\n\n            this.setState({\n                sticky\n            })\n        } else {\n            this.setState({\n                sticky: true\n            })\n        }\n    }\n\n    selectCategory = (category, e) => {\n\n        if (e.key === \" \" || e.keyCode === undefined) {\n            console.log(category, this.state.selectedCategories)\n        \n            let selectedCategories = this.state.selectedCategories\n\n            if (selectedCategories.includes(category)) {\n                const index = selectedCategories.indexOf(category);\n                selectedCategories.splice(index, 1);\n            } else {\n                selectedCategories.push(category)\n            }\n\n            this.setState({selectedCategories})\n\n        }\n    }\n\n    toggleFilter = () => {\n        const filterOpen = !this.state.filterOpen;\n\n        this.setState({\n            filterOpen\n        })\n    }\n\n    clearCategories = () => {\n        this.setState({\n            selectedCategories: []\n        })\n    }\n\n    render() {\n        const categories = this.props.data.allCategoriesJson.edges.map((cat, id) => {\n            if (cat.node.slug !== 'uncategorized') {\n                let databaseId = parseInt(cat.node.databaseId)\n                if (cat.node.parentDatabaseId === \"0\") {\n                    return (\n                        <li key={id} role=\"label\" className={`${cat.node.slug} mt-4`}><strong dangerouslySetInnerHTML={{__html: cat.node.name }} /></li>\n                    )\n                } else {\n                    return (\n                        <li key={id} role=\"checkbox\" aria-checked={this.state.selectedCategories.includes(databaseId)} tabIndex=\"0\" className={`${cat.node.slug}`} onKeyPress={(e) => this.selectCategory(databaseId, e)} onClick={(e) => this.selectCategory(databaseId, e)}>\n                            <span dangerouslySetInnerHTML={{__html: cat.node.name }} />\n                            {this.state.selectedCategories.includes(databaseId) ?\n                                <img style={{float: 'right', paddingRight: '1rem'}} src={checkboxActive} alt=\"\"/>\n                            :\n                                <img style={{float: 'right', paddingRight: '1rem'}} src={checkboxInactive} alt=\"\"/>\n                            }\n\n                        </li>\n                    )\n                }\n            }\n        })\n\n        return (\n            <Layout slug=\"teacher-library\" title=\"Teacher Resource Library\">\n                <HeaderCopy title=\"Teacher Resource Library\"/>\n                <Container fluid={true} className=\"my-4\">\n                    <Container>\n                        <Flex>\n                            <CategoryPanel aria-controls=\"Filter\">\n                                <div className={`sticky ${this.state.sticky && 'active'} ${this.state.filterOpen && 'open'}`}>\n                                    <Filter className={this.state.filterOpen && 'open'}>\n                                        {this.state.filterOpen ?\n                                            <>\n                                                <img onClick={this.toggleFilter} src={IconClose} alt=\"\" className=\"d-md-none\"/>\n                                                <ClearSelection role=\"button\" tabIndex=\"0\" onClick={this.clearCategories}>Clear Selection</ClearSelection>\n                                            </>\n                                        :\n                                            <>\n                                                <img onClick={this.toggleFilter} src={iconFilter} alt=\"\" className=\"d-md-none\"/>\n                                                <p className=\"title\" onClick={this.toggleFilter} >Filter</p>\n                                            </>\n                                        }\n                                    </Filter>\n                                    <CategoryList>\n                                        {categories}\n                                        <li tabIndex=\"0\">\n                                            <ClearSelection role=\"button\" tabIndex=\"0\" onClick={this.clearCategories}>Clear Selection</ClearSelection>\n                                        </li>\n                                    </CategoryList>\n                                </div>\n                            </CategoryPanel>\n                            <Content>\n                                <ResourceListNew resources={this.props.data.allTeacherLibraryJson.edges} categories={this.state.selectedCategories}/>\n                            </Content>\n                        </Flex>\n                    </Container>\n                </Container>\n            </Layout>\n        );\n    }\n}\n\nexport default Query;","export default \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1IDBIMFYxNUgxNVYwWiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wIDBIMTVWMTVIMFYwWk0xIDFWMTRIMTRWMUgxWiIgZmlsbD0iI0MxMjUxOCIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEyLjAzNTMgNS4wMjUyMkw2LjEwNTU0IDExLjA3MDdMMy40NjQ4NCA4LjM4Mjc5TDQuNTM0ODUgNy4zMzE1Nkw2LjEwNDY3IDguOTI5NDJMMTAuOTY0NCAzLjk3NDg1TDEyLjAzNTMgNS4wMjUyMloiIGZpbGw9IiNDMTI1MTgiLz4KPC9zdmc+Cg==\"","export default \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMC41IiB5PSIwLjUiIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgZmlsbD0id2hpdGUiIHN0cm9rZT0iI0NDQ0NDQyIvPgo8L3N2Zz4K\"","export default \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyNSAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjI1IiBoZWlnaHQ9IjIiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjQiIHk9IjciIHdpZHRoPSIxNyIgaGVpZ2h0PSIyIiBmaWxsPSJibGFjayIvPgo8cmVjdCB4PSI4IiB5PSIxNCIgd2lkdGg9IjkiIGhlaWdodD0iMiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==\""],"names":["Card","styled","displayName","componentId","cardTopOrange","cardTopBlue","cardTopGreen","cardTopPurple","cardTopYellow","props","theme","colors","red","DownloadButton","white","orange","blue","green","purple","yellow","black","media","CardItemNew","_Component","_this","call","toggleModal","e","src","preventDefault","setState","modalOpen","state","toggleKalturaModal","kalturaModalOpen","_inheritsLoose","prototype","render","_this2","card","this","React","key","id","className","slug","color","dangerouslySetInnerHTML","__html","title","body","selector","download","target","href","link","IconDownload","alt","IconDownloadWhite","onClick","IconPlay","IconPlayWhite","includes","IconArrow","IconArrowWhite","VideoModal","KalturaModal","Component","VModal","Modal","withConfig","apply","arguments","isOpen","toggle","centered","ButtonClose","ModalBody","width","height","frameBorder","allow","allowFullScreen","Resources","ResourceListNew","_len","length","args","Array","_key","concat","listResources","tag","totalTags","getResources","resources","map","resource","catArray","node","categories","cat","k","push","arr","every","v","Flex","CategoryPanel","lightGrey","Filter","Content","CategoryList","ClearSelection","font","family","light","ResourcePage","handleScroll","scrollPosition","Math","max","window","pageYOffset","document","documentElement","scrollTop","innerWidth","sticky","selectCategory","category","undefined","keyCode","console","log","selectedCategories","index","indexOf","splice","toggleFilter","filterOpen","clearCategories","_proto","componentDidMount","addEventListener","componentWillUnmount","removeEventListener","data","allCategoriesJson","edges","databaseId","parseInt","parentDatabaseId","role","name","tabIndex","onKeyPress","style","float","paddingRight","Layout","HeaderCopy","Container","fluid","IconClose","iconFilter","allTeacherLibraryJson","StaticQuery","query"],"sourceRoot":""}