{"version":3,"file":"catalog.3c0aad6e.js","sources":["../../../resources/js/common/components/PublicCatalog/SelectCategories.vue","../../../resources/js/common/components/PublicCatalog/CategorySearch.vue","../../../resources/js/modules/Landing/catalog.js"],"sourcesContent":["<template>\n    <div class=\"select-categories\">\n        <vue-simplebar class=\"select-categories__scroll\">\n            <div class=\"select-categories__list\">\n                <div\n                    class=\"select-categories__list_item\"\n                    v-for=\"category in categories\"\n                    :key=\"category.id\"\n                    :class=\"{ active: selected.find(item => item.id === category.id) }\"\n                    @click=\"toggleCategory(category)\"\n                >\n                    {{ category.title }}\n                </div>\n            </div>\n        </vue-simplebar>\n        <button @click=\"selectCategories\">{{ t(\"catalog.select_category\") }}</button>\n    </div>\n</template>\n\n<script>\nimport { VueSimplebar } from \"vue-simplebar\"\nimport keyTranslator from \"@mixins/keyTranslator\"\n\nexport default {\n    name: \"SelectCategories\",\n    props: {\n        categories: [Object, Array],\n        selectedCategories: [Object, Array],\n        langsKeys: [Object, Array]\n    },\n    mixins: [keyTranslator],\n    data() {\n        return {\n            selected: []\n        }\n    },\n    components: {\n        VueSimplebar\n    },\n    methods: {\n        toggleCategory(category) {\n            if (this.selected.find(item => item.id === category.id)) {\n                this.selected = this.selected.filter(item => item.id !== category.id)\n            } else {\n                this.selected.push(category)\n            }\n        },\n        selectCategories() {\n            this.$emit(\"select\", this.selected)\n        }\n    },\n    created() {\n        this.selected = [...this.selectedCategories]\n    }\n}\n</script>\n\n<style lang=\"sass\" scoped>\n.select-categories\n    position: absolute\n    width: 400px\n    box-shadow: 0px 4px 10px rgba(128, 158, 191, 0.15)\n    border-radius: 10px\n    background: #fff\n    padding: 10px\n    z-index: 2\n    @media screen and (max-width: 320px)\n        width: 290px\n\n    &__scroll\n        height: 500px\n        @media screen and (max-width: 320px)\n            height: 350px\n    &__list\n        &_item\n            font-family: 'Lato'\n            font-style: normal\n            font-weight: 400\n            font-size: 13px\n            line-height: 130%\n            color: #52565C\n            padding: 10px 35px\n            border-radius: 5px\n            margin-bottom: 2px\n            cursor: pointer\n            text-align: left\n            @media screen and (max-width: 320px)\n                padding: 10px 15px\n            &:hover\n                background: #F2F7FF\n\n            &.active\n                background: #F2F7FF\n                color: #151515\n\n    button\n        padding: 10px\n        width: 100%\n        font-family: 'Ubuntu'\n        font-style: normal\n        font-weight: 500\n        font-size: 15px\n        line-height: 150%\n        color: #FFFFFF\n        background: #30C58F\n        border-radius: 7px\n        margin-top: 10px\n</style>\n","<template>\n    <div>\n        <div class=\"catalog-search-bar\">\n            <div class=\"catalog-filter\" v-click-outside=\"hideCategory\">\n                <span @click=\"showCategory = !showCategory\" :class=\"{ active: showCategory }\"\n                    >{{ t(\"catalog.select_category\") }} <DropdownChevronIcon\n                /></span>\n                <div class=\"show-category\" v-if=\"showCategory\">\n                    <SelectCategories\n                        :langsKeys=\"langsKeys\"\n                        :categories=\"categories\"\n                        :selectedCategories=\"selectedCategories\"\n                        @select=\"selectCategories\"\n                    />\n                </div>\n            </div>\n            <div class=\"catalog-search\">\n                <div class=\"catalog-search__input\">\n                    <input type=\"text\" :placeholder=\"t('catalog.find_text')\" v-model=\"searchText\" />\n                    <CloseIcon\n                        v-show=\"searchText\"\n                        class=\"catalog-search__input-cross\"\n                        :fill=\"`#151515`\"\n                        @click.native=\"clearText\"\n                    />\n                </div>\n                <button class=\"catalog-search__button\" @click=\"redirect()\">{{ t(\"catalog.find\") }}</button>\n            </div>\n        </div>\n        <div class=\"selected_categories\" v-if=\"selectedCategories.length > 0\">\n            <div class=\"selected_categories_catalog\">\n                <a href=\"/\" title=\"Каталог\">{{ t(\"catalog.catalog\") }} →</a>\n            </div>\n            <div class=\"selected_categories_item\" v-for=\"item in selectedCategories\" :key=\"`category-${item.id}`\">\n                {{ item.title }} <span @click=\"removeCategory(item.id)\"><CloseIcon /></span>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script>\nimport CloseIcon from \"@icons/CloseIcon\"\nimport DropdownChevronIcon from \"@icons/DropdownChevronIcon\"\nimport ClickOutside from \"vue-click-outside\"\nimport SelectCategories from \"./SelectCategories\"\nimport keyTranslator from \"@mixins/keyTranslator\"\nimport axios from \"axios\"\n\nexport default {\n    name: \"CategorySearch\",\n    components: {\n        CloseIcon,\n        DropdownChevronIcon,\n        SelectCategories\n    },\n    mixins: [keyTranslator],\n    props: {\n        categories: {\n            type: [Object, Array]\n        },\n        categoryFromPage: {\n            type: [Object, Array]\n        }\n    },\n    data() {\n        return {\n            searchText: \"\",\n            showCategory: false,\n            selectedCategories: [],\n            langsKeys: null\n        }\n    },\n    directives: {\n        ClickOutside\n    },\n    methods: {\n        clearText() {\n            this.searchText = \"\"\n            if (window.location.pathname === \"/search\") {\n                this.redirect()\n            }\n        },\n        hideCategory() {\n            this.showCategory = false\n        },\n        selectCategories(categories) {\n            this.selectedCategories = categories\n            this.showCategory = false\n            this.redirect()\n        },\n        removeCategory(id) {\n            this.selectedCategories = this.selectedCategories.filter(item => {\n                return item.id !== id\n            })\n            this.redirect()\n        },\n        redirect() {\n            let query = \"\"\n            let search = \"\"\n            let categories = \"\"\n            let and = \"\"\n            if (this.selectedCategories.length > 0) {\n                categories = this.selectedCategories.reduce((accumulator, currentValue, index) => {\n                    accumulator += index === 0 ? `category[]=${currentValue.slug}` : `&category[]=${currentValue.slug}`\n\n                    return accumulator\n                }, \"\")\n            }\n            if (this.searchText) {\n                search = `q=${this.searchText}`\n                if (categories) {\n                    and = \"&\"\n                }\n            }\n            if (search || categories) {\n                query = `?${search}${and}${categories}`\n            }\n            if (this.selectedCategories.length === 1 && !this.searchText) {\n                document.location.href = this.selectedCategories[0].unlock_link\n                return\n            }\n            document.location.href = `/search${query}`\n        },\n        getInfoFromQueryParams() {\n            let uri = window.location.search\n            let params = new URLSearchParams(uri)\n            if (params.get(\"q\")) {\n                this.searchText = params.get(\"q\")\n            }\n        },\n        getLangs() {\n            axios\n                .get(window.cached_routes[\"translation-groups\"], {\n                    params: {\n                        groups: \"catalog\",\n                        lang: window.app_current_locale\n                    },\n                    headers: { \"X-Language\": window.app_current_locale }\n                })\n                .then(response => {\n                    this.langsKeys = response.data\n                })\n        }\n    },\n    created() {\n        this.getLangs()\n        this.getInfoFromQueryParams()\n        this.selectedCategories = this.categoryFromPage\n    }\n}\n</script>\n\n<style lang=\"sass\" scoped>\n.catalog-search-bar\n    display: flex\n    align-items: center\n    justify-content: center\n    @media screen and (max-width: 960px)\n        flex-direction: column-reverse\n        align-items: flex-start\n.catalog-filter\n    position: relative\n    @media screen and (max-width: 960px)\n        margin-top: 20px\n    span\n        display: flex\n        position: relative\n        color: #474747\n        align-items: center\n        margin-right: 20px\n        cursor: pointer\n        &.active\n            color: #3965FF\n            svg\n                transform: rotate(180deg)\n                &::v-deep\n                    path\n                        fill: #3965FF\n        svg\n            margin-left: 10px\n            &::v-deep\n                path\n                    fill: #474747\n.catalog-search\n    display: flex\n    align-items: center\n    @media screen and (max-width: 960px)\n        width: 100%\n\n    &__input\n        width: 700px\n        position: relative\n        @media screen and (max-width: 940px)\n            width: 100%\n        &-cross\n            position: absolute\n            top: 50%\n            right: 20px\n            transform: translateY(-50%)\n            cursor: pointer\n            &:hover\n                fill: #DD4141\n        input\n            width: 100%\n            height: 50px\n            padding: 0 50px\n            background: url('@images/portal/search.svg') no-repeat 17px center\n            box-shadow: 0px 2px 5px rgba(128, 158, 191, 0.25)\n            border-radius: 100px 0px 0px 100px\n            @media screen and (max-width: 320px)\n                border-radius: 100px\n    &__button\n        font-family: 'Lato'\n        font-style: normal\n        font-weight: 600\n        font-size: 18px\n        line-height: 22px\n        color: #3965FF\n        box-shadow: 0px 2px 5px rgba(128, 158, 191, 0.25)\n        border-radius: 0px 100px 100px 0px\n        padding: 0 40px\n        margin-left: 10px\n        height: 50px\n        border: 1px solid transparent\n        @media screen and (max-width: 480px)\n            font-size: 14px\n        @media screen and (max-width: 320px)\n            display: none\n\n        &:hover\n            border-color: #3965FF\n.selected_categories\n    margin: 15px auto\n    display: flex\n    gap: 10px\n    align-items: center\n    flex-wrap: wrap\n    width: 1030px\n    padding-left: 180px\n    @media screen and (max-width: 960px)\n        padding-left: 0\n        width: 100%\n    &_item\n        font-family: 'Lato'\n        font-style: normal\n        font-weight: 500\n        font-size: 14px\n        line-height: 150%\n        text-align: center\n        color: #52565C\n        background: #FFFFFF\n        box-shadow: 2px 2px 10px rgba(128, 158, 191, 0.15)\n        border-radius: 100px\n        padding: 5px 7px 5px 15px\n        display: flex\n        span\n            margin-left: 7px\n            cursor: pointer\n            display: flex\n            align-items: center\n            justify-content: center\n            border-radius: 100%\n            width: 24px\n            height: 24px\n            &:hover\n                background: #F6F9FC\n            svg\n                fill: #3965FF\n\n    &_catalog\n        color: #3965FF\n        border-bottom: 1px solid\n        &:hover\n            border-color: transparent\n</style>\n","import CategorySearch from \"@components/PublicCatalog/CategorySearch\"\nimport Vue from \"vue\"\nimport PortalVue from \"portal-vue\"\n\nVue.use(PortalVue)\nlet showMoreButtons = document.querySelectorAll(\".catalog_page__items__course__body__tags .more\")\n\nfor (let i = 0; i < showMoreButtons.length; i++) {\n    let item = showMoreButtons[i]\n\n    item.addEventListener(\"click\", e => {\n        const tagsHeight = e.target.parentElement.offsetHeight\n        if (e.target.parentElement.parentElement.hasAttribute(\"style\")) {\n            e.target.parentElement.parentElement.removeAttribute(\"style\")\n        } else {\n            e.target.parentElement.parentElement.setAttribute(\"style\", `padding-bottom: ${tagsHeight}px`)\n        }\n        e.target.parentElement.classList.toggle(\"catalog_page__items__course__body__tags__show-all\")\n    })\n}\n\nif (document.getElementById(\"catalogSearch\")) {\n    new Vue({\n        el: \"#catalogSearch\",\n        components: {\n            CategorySearch\n        }\n    })\n}\n\ndocument.querySelector(\".catalog_page__seo__btn\").addEventListener(\"click\", e => {\n    e.target.parentElement.classList.toggle(\"open\")\n})\n"],"names":["_sfc_main","keyTranslator","VueSimplebar","category","item","CloseIcon","DropdownChevronIcon","SelectCategories","ClickOutside","categories","id","query","search","and","accumulator","currentValue","index","uri","params","axios","response","Vue","PortalVue","showMoreButtons","i","e","tagsHeight","CategorySearch"],"mappings":"kMAuBA,MAAAA,EAAA,CACA,KAAA,mBACA,MAAA,CACA,WAAA,CAAA,OAAA,KAAA,EACA,mBAAA,CAAA,OAAA,KAAA,EACA,UAAA,CAAA,OAAA,KAAA,CACA,EACA,OAAA,CAAAC,CAAA,EACA,MAAA,CACA,MAAA,CACA,SAAA,CAAA,CACA,CACA,EACA,WAAA,CACA,aAAAC,CACA,EACA,QAAA,CACA,eAAAC,EAAA,CACA,KAAA,SAAA,KAAAC,GAAAA,EAAA,KAAAD,EAAA,EAAA,EACA,KAAA,SAAA,KAAA,SAAA,OAAAC,GAAAA,EAAA,KAAAD,EAAA,EAAA,EAEA,KAAA,SAAA,KAAAA,CAAA,CAEA,EACA,kBAAA,CACA,KAAA,MAAA,SAAA,KAAA,QAAA,CACA,CACA,EACA,SAAA,CACA,KAAA,SAAA,CAAA,GAAA,KAAA,kBAAA,CACA,CACA,klBCNA,MAAAH,EAAA,CACA,KAAA,iBACA,WAAA,CACA,UAAAK,EACA,oBAAAC,EACA,iBAAAC,CACA,EACA,OAAA,CAAAN,CAAA,EACA,MAAA,CACA,WAAA,CACA,KAAA,CAAA,OAAA,KAAA,CACA,EACA,iBAAA,CACA,KAAA,CAAA,OAAA,KAAA,CACA,CACA,EACA,MAAA,CACA,MAAA,CACA,WAAA,GACA,aAAA,GACA,mBAAA,CAAA,EACA,UAAA,IACA,CACA,EACA,WAAA,CACA,aAAAO,CACA,EACA,QAAA,CACA,WAAA,CACA,KAAA,WAAA,GACA,OAAA,SAAA,WAAA,WACA,KAAA,SAAA,CAEA,EACA,cAAA,CACA,KAAA,aAAA,EACA,EACA,iBAAAC,EAAA,CACA,KAAA,mBAAAA,EACA,KAAA,aAAA,GACA,KAAA,SAAA,CACA,EACA,eAAAC,EAAA,CACA,KAAA,mBAAA,KAAA,mBAAA,OAAAN,GACAA,EAAA,KAAAM,CACA,EACA,KAAA,SAAA,CACA,EACA,UAAA,CACA,IAAAC,EAAA,GACAC,EAAA,GACAH,EAAA,GACAI,EAAA,GAiBA,GAhBA,KAAA,mBAAA,OAAA,IACAJ,EAAA,KAAA,mBAAA,OAAA,CAAAK,EAAAC,EAAAC,KACAF,GAAAE,IAAA,EAAA,cAAAD,EAAA,IAAA,GAAA,eAAAA,EAAA,IAAA,GAEAD,GACA,EAAA,GAEA,KAAA,aACAF,EAAA,KAAA,KAAA,UAAA,GACAH,IACAI,EAAA,OAGAD,GAAAH,KACAE,EAAA,IAAAC,CAAA,GAAAC,CAAA,GAAAJ,CAAA,IAEA,KAAA,mBAAA,SAAA,GAAA,CAAA,KAAA,WAAA,CACA,SAAA,SAAA,KAAA,KAAA,mBAAA,CAAA,EAAA,YACA,MACA,CACA,SAAA,SAAA,KAAA,UAAAE,CAAA,EACA,EACA,wBAAA,CACA,IAAAM,EAAA,OAAA,SAAA,OACAC,EAAA,IAAA,gBAAAD,CAAA,EACAC,EAAA,IAAA,GAAA,IACA,KAAA,WAAAA,EAAA,IAAA,GAAA,EAEA,EACA,UAAA,CACAC,EACA,IAAA,OAAA,cAAA,oBAAA,EAAA,CACA,OAAA,CACA,OAAA,UACA,KAAA,OAAA,kBACA,EACA,QAAA,CAAA,aAAA,OAAA,kBAAA,CACA,CAAA,EACA,KAAAC,GAAA,CACA,KAAA,UAAAA,EAAA,IACA,CAAA,CACA,CACA,EACA,SAAA,CACA,KAAA,SAAA,EACA,KAAA,uBAAA,EACA,KAAA,mBAAA,KAAA,gBACA,CACA,s2DCjJAC,EAAA,IAAAC,CAAA,EACA,IAAAC,EAAA,SAAA,iBAAA,gDAAA,EAEA,QAAAC,EAAA,EAAAA,EAAAD,EAAA,OAAAC,IACAD,EAAAC,CAAA,EAEA,iBAAA,QAAAC,GAAA,CACA,MAAAC,EAAAD,EAAA,OAAA,cAAA,aACAA,EAAA,OAAA,cAAA,cAAA,aAAA,OAAA,EACAA,EAAA,OAAA,cAAA,cAAA,gBAAA,OAAA,EAEAA,EAAA,OAAA,cAAA,cAAA,aAAA,QAAA,mBAAAC,CAAA,IAAA,EAEAD,EAAA,OAAA,cAAA,UAAA,OAAA,mDAAA,CACA,CAAA,EAGA,SAAA,eAAA,eAAA,GACA,IAAAJ,EAAA,CACA,GAAA,iBACA,WAAA,CACA,eAAAM,CACA,CACA,CAAA,EAGA,SAAA,cAAA,yBAAA,EAAA,iBAAA,QAAAF,GAAA,CACAA,EAAA,OAAA,cAAA,UAAA,OAAA,MAAA,CACA,CAAA"}