{"version":3,"file":"SubscribeButtons-BfydFYd3.mjs","names":[],"sources":["../src/components/display/sharing/SubscribeButtons.vue","../src/components/display/sharing/SubscribeButtons.vue"],"sourcesContent":["<template>\n    <div\n        v-if=\"subscriptionsDisplay.length || rssUrl\"\n        class=\"subscribe-buttons-container\"\n        :class=\"{ 'justify-center': justifyCenter }\"\n    >\n        <div ref=\"subscribeButtonsContainer\">\n            <a\n                v-for=\"(sub, index) in shownLinks\"\n                :id=\"'subLink' + sub.name\"\n                :key=\"sub.name\"\n                rel=\"noreferrer noopener\"\n                target=\"_blank\"\n                :class=\"{\n                    first: 0 === index,\n                    last: subscriptionsDisplay.length - 1 === index,\n                    mono,\n                    small\n                }\"\n                class=\"btn share-btn\"\n                :href=\"sub.url\"\n                :title=\"t('New window', {text: sub.title})\"\n            >\n                <component\n                    :is=\"sub.icon\"\n                    :fill-color=\"fillColor(sub)\"\n                    :size=\"iconSize\"\n                    non-decorative\n                />\n            </a>\n        </div>\n        <a\n            v-if=\"!noRss\"\n            id=\"rss-suscribe-button\"\n            rel=\"noreferrer noopener\"\n            target=\"_blank\"\n            class=\"btn share-btn\"\n            :class=\"{ mono, small }\"\n            :href=\"rssUrl\"\n            :title=\"t('New window', {text: t('Rss feed')})\"\n        >\n            <RssIcon :fill-color=\"fillColor()\" :size=\"iconSize\" />\n        </a>\n\n        <button\n            v-if=\"limit === undefined\"\n            v-show=\"hiddenLinks.length\"\n            id=\"subscribe-buttons-dropdown\"\n            class=\"btn share-btn mx-2\"\n            :title=\"t('See more')\"\n        >\n            <PlusIcon />\n        </button>\n        <ClassicPopover\n            target=\"subscribe-buttons-dropdown\"\n            popover-class=\"popover-z-index\"\n            :only-click=\"true\"\n            :left-pos=\"true\"\n        >\n            <a\n                v-for=\"link in hiddenLinks\"\n                :key=\"link.name\"\n                rel=\"noreferrer noopener\"\n                target=\"_blank\"\n                class=\"octopus-dropdown-item justify-content-start d-flex align-items-center realLink\"\n                :href=\"link.url\"\n                :title=\"t('New window', {text: link.title})\"\n            >\n                <component\n                    :is=\"link.icon\"\n                    :fill-color=\"fillColor(link)\"\n                    class=\"me-1\"\n                />\n                {{ link.title }}\n            </a>\n        </ClassicPopover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlusIcon from \"vue-material-design-icons/Plus.vue\";\nimport RssIcon from \"vue-material-design-icons/Rss.vue\";\nimport { useApiStore } from \"../../../stores/ApiStore\";\nimport ClassicPopover from \"../../misc/ClassicPopover.vue\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport { type Component, computed, onMounted } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nimport { Playlist } from \"../../../stores/class/general/playlist\";\nimport { useSharePlatforms } from \"../../composable/share/useSharePlatforms\";\nimport { useResizePhone } from \"../../composable/useResizePhone\";\n\ntype Link = {\n    name: string;\n    icon: Component;\n    title: string;\n    color?: string;\n    url: string | undefined;\n};\n\n//Props \nconst props = withDefaults(defineProps<{\n    content: Emission|Playlist;\n    windowWidth?: number;\n    justifyCenter?: boolean;\n    /** Display the icons with just the octopus primary color */\n    mono?: boolean;\n    /** If set, limit the number of icons (will not display plus button) */\n    limit?: number;\n    /** Disable the RSS icon */\n    noRss?: boolean;\n    /** Smaller icons */\n    small?: boolean;\n}>(), {\n    windowWidth: 0,\n    justifyCenter: true,\n    mono: false,\n    limit: undefined,\n    noRss: false,\n    small: false\n});\n\n//Composables\nconst { t } = useI18n();\nconst apiStore = useApiStore();\nconst { getPlatformsWithLinks, initPlatforms } = useSharePlatforms();\nconst { isPhone } = useResizePhone();\n\n//Computed\nconst maxElements = computed((): number => {\n    let number = 5;\n    if (isPhone.value) {\n        number = 3;\n    }\n\n    if (props.noRss) {\n        number += 1;\n    }\n    if (subscriptionsDisplay.value.length <= number + 1) {\n        number = subscriptionsDisplay.value.length;\n    }\n\n    if (props.limit !== undefined) {\n        return Math.min(number, props.limit);\n    } else {\n        return number;\n    }\n});\n\nconst subscriptionsDisplay = computed(() => {\n    return getPlatformsWithLinks(props.content.annotations);\n});\n\nconst shownLinks = computed((): Array<Link> => {\n    return subscriptionsDisplay.value.slice(0, maxElements.value);\n});\n\nconst hiddenLinks = computed((): Array<Link> => {\n    return subscriptionsDisplay.value.slice(maxElements.value);\n});\n\nconst rssUrl = computed(() => {\n    const api = apiStore.apiUrl + \"rss/\";\n    if ((props.content as Emission).emissionId) {\n        return api + \"emission/\" + (props.content as Emission).emissionId + \".rss\";\n    }\n    if ((props.content as Playlist).playlistId) {\n        return api + \"playlist/\" + (props.content as Playlist).playlistId + \".rss\";\n    }\n    return undefined;\n});\n\nconst iconSize = computed((): number => {\n    return props.small ? 20 : 24;\n});\n\nonMounted(() => {\n    const orga = 'orga' in props.content ? props.content.orga : props.content.organisation;\n    initPlatforms(orga.id);\n});\n\nfunction fillColor(link?: Link): string|undefined {\n    if (props.mono === true) {\n        return 'white';\n    } else {\n        return link?.color;\n    }\n}\n</script>\n\n<style scoped lang=\"scss\">\n.subscribe-buttons-container {\n    align-self: center;\n    display: inline-flex;\n    width: 100%;\n\n    &.justify-center {\n        justify-content: center;\n    }\n\n    & > div {\n        display: inline-flex;\n        justify-content: flex-start;\n        overflow: hidden;\n        width: fit-content;\n    }\n\n    @media (width <= 960px) {\n        margin-top: 0.8rem;\n    }\n}\n\n.share-btn {\n  margin-right: .5rem;\n  margin-left: .5rem;\n\n  &.mono {\n    background-color: var(--octopus-primary);\n  }\n\n  &.small {\n    height: 1.8rem !important;\n    width: 1.8rem !important;\n    margin-right: .2rem;\n    margin-left: .2rem;\n  }\n}\n</style>\n","<template>\n    <div\n        v-if=\"subscriptionsDisplay.length || rssUrl\"\n        class=\"subscribe-buttons-container\"\n        :class=\"{ 'justify-center': justifyCenter }\"\n    >\n        <div ref=\"subscribeButtonsContainer\">\n            <a\n                v-for=\"(sub, index) in shownLinks\"\n                :id=\"'subLink' + sub.name\"\n                :key=\"sub.name\"\n                rel=\"noreferrer noopener\"\n                target=\"_blank\"\n                :class=\"{\n                    first: 0 === index,\n                    last: subscriptionsDisplay.length - 1 === index,\n                    mono,\n                    small\n                }\"\n                class=\"btn share-btn\"\n                :href=\"sub.url\"\n                :title=\"t('New window', {text: sub.title})\"\n            >\n                <component\n                    :is=\"sub.icon\"\n                    :fill-color=\"fillColor(sub)\"\n                    :size=\"iconSize\"\n                    non-decorative\n                />\n            </a>\n        </div>\n        <a\n            v-if=\"!noRss\"\n            id=\"rss-suscribe-button\"\n            rel=\"noreferrer noopener\"\n            target=\"_blank\"\n            class=\"btn share-btn\"\n            :class=\"{ mono, small }\"\n            :href=\"rssUrl\"\n            :title=\"t('New window', {text: t('Rss feed')})\"\n        >\n            <RssIcon :fill-color=\"fillColor()\" :size=\"iconSize\" />\n        </a>\n\n        <button\n            v-if=\"limit === undefined\"\n            v-show=\"hiddenLinks.length\"\n            id=\"subscribe-buttons-dropdown\"\n            class=\"btn share-btn mx-2\"\n            :title=\"t('See more')\"\n        >\n            <PlusIcon />\n        </button>\n        <ClassicPopover\n            target=\"subscribe-buttons-dropdown\"\n            popover-class=\"popover-z-index\"\n            :only-click=\"true\"\n            :left-pos=\"true\"\n        >\n            <a\n                v-for=\"link in hiddenLinks\"\n                :key=\"link.name\"\n                rel=\"noreferrer noopener\"\n                target=\"_blank\"\n                class=\"octopus-dropdown-item justify-content-start d-flex align-items-center realLink\"\n                :href=\"link.url\"\n                :title=\"t('New window', {text: link.title})\"\n            >\n                <component\n                    :is=\"link.icon\"\n                    :fill-color=\"fillColor(link)\"\n                    class=\"me-1\"\n                />\n                {{ link.title }}\n            </a>\n        </ClassicPopover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlusIcon from \"vue-material-design-icons/Plus.vue\";\nimport RssIcon from \"vue-material-design-icons/Rss.vue\";\nimport { useApiStore } from \"../../../stores/ApiStore\";\nimport ClassicPopover from \"../../misc/ClassicPopover.vue\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport { type Component, computed, onMounted } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nimport { Playlist } from \"../../../stores/class/general/playlist\";\nimport { useSharePlatforms } from \"../../composable/share/useSharePlatforms\";\nimport { useResizePhone } from \"../../composable/useResizePhone\";\n\ntype Link = {\n    name: string;\n    icon: Component;\n    title: string;\n    color?: string;\n    url: string | undefined;\n};\n\n//Props \nconst props = withDefaults(defineProps<{\n    content: Emission|Playlist;\n    windowWidth?: number;\n    justifyCenter?: boolean;\n    /** Display the icons with just the octopus primary color */\n    mono?: boolean;\n    /** If set, limit the number of icons (will not display plus button) */\n    limit?: number;\n    /** Disable the RSS icon */\n    noRss?: boolean;\n    /** Smaller icons */\n    small?: boolean;\n}>(), {\n    windowWidth: 0,\n    justifyCenter: true,\n    mono: false,\n    limit: undefined,\n    noRss: false,\n    small: false\n});\n\n//Composables\nconst { t } = useI18n();\nconst apiStore = useApiStore();\nconst { getPlatformsWithLinks, initPlatforms } = useSharePlatforms();\nconst { isPhone } = useResizePhone();\n\n//Computed\nconst maxElements = computed((): number => {\n    let number = 5;\n    if (isPhone.value) {\n        number = 3;\n    }\n\n    if (props.noRss) {\n        number += 1;\n    }\n    if (subscriptionsDisplay.value.length <= number + 1) {\n        number = subscriptionsDisplay.value.length;\n    }\n\n    if (props.limit !== undefined) {\n        return Math.min(number, props.limit);\n    } else {\n        return number;\n    }\n});\n\nconst subscriptionsDisplay = computed(() => {\n    return getPlatformsWithLinks(props.content.annotations);\n});\n\nconst shownLinks = computed((): Array<Link> => {\n    return subscriptionsDisplay.value.slice(0, maxElements.value);\n});\n\nconst hiddenLinks = computed((): Array<Link> => {\n    return subscriptionsDisplay.value.slice(maxElements.value);\n});\n\nconst rssUrl = computed(() => {\n    const api = apiStore.apiUrl + \"rss/\";\n    if ((props.content as Emission).emissionId) {\n        return api + \"emission/\" + (props.content as Emission).emissionId + \".rss\";\n    }\n    if ((props.content as Playlist).playlistId) {\n        return api + \"playlist/\" + (props.content as Playlist).playlistId + \".rss\";\n    }\n    return undefined;\n});\n\nconst iconSize = computed((): number => {\n    return props.small ? 20 : 24;\n});\n\nonMounted(() => {\n    const orga = 'orga' in props.content ? props.content.orga : props.content.organisation;\n    initPlatforms(orga.id);\n});\n\nfunction fillColor(link?: Link): string|undefined {\n    if (props.mono === true) {\n        return 'white';\n    } else {\n        return link?.color;\n    }\n}\n</script>\n\n<style scoped lang=\"scss\">\n.subscribe-buttons-container {\n    align-self: center;\n    display: inline-flex;\n    width: 100%;\n\n    &.justify-center {\n        justify-content: center;\n    }\n\n    & > div {\n        display: inline-flex;\n        justify-content: flex-start;\n        overflow: hidden;\n        width: fit-content;\n    }\n\n    @media (width <= 960px) {\n        margin-top: 0.8rem;\n    }\n}\n\n.share-btn {\n  margin-right: .5rem;\n  margin-left: .5rem;\n\n  &.mono {\n    background-color: var(--octopus-primary);\n  }\n\n  &.small {\n    height: 1.8rem !important;\n    width: 1.8rem !important;\n    margin-right: .2rem;\n    margin-left: .2rem;\n  }\n}\n</style>\n"],"mappings":"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"}