traxxx/assets/components/tags/tag.vue

<template>
	<div
		v-if="tag"
		class="tag content"
	>
		<div class="header">
			<h2 class="title">
				<Icon icon="price-tag4" />
				{{ tag.name }}
			</h2>
		</div>

		<div
			class="content-inner"
			@scroll="events.emit('scroll', $event)"
		>
			<div
				v-if="description"
				class="description header-description"
				v-html="description"
			/>

			<Scroll
				v-if="hasMedia"
				v-slot="scroll"
				class="scroll-dark"
			>
				<Photos
					:tag="tag"
					:class="{ expanded }"
					@load="scroll.loaded"
				/>
			</Scroll>

			<button
				v-if="tag.photos && tag.photos.length > 2"
				class="album-toggle"
				@click="$router.push({ hash: '#album' })"
			><Icon icon="grid3" />View album</button>

			<Album
				v-if="showAlbum"
				:items="[tag.poster, ...tag.photos]"
				:title="tag.name"
				:local="true"
				class="portrait"
				@close="$router.replace({ hash: undefined })"
			/>

			<div class="campaign-container">
				<a
					v-if="campaign"
					:href="campaign.affiliate.url"
					target="_blank"
					class="campaign"
				>
					<img
						v-if="campaign.banner.entity.type === 'network'"
						:src="`/img/banners/${campaign.banner.entity.slug}/${campaign.banner.id}.jpeg`"
						class="campaign-banner"
					>

					<img
						v-if="campaign.banner.entity.type === 'channel' && campaign.banner.entity.parent?.type === 'network'"
						:src="`/img/banners/${campaign.banner.entity.parent.slug}/${campaign.banner.entity.slug}/${campaign.banner.id}.jpeg`"
						class="campaign-banner"
					>
				</a>
			</div>

			<FilterBar
				ref="filter"
				:fetch-releases="fetchReleases"
			/>

			<Releases :releases="releases" />

			<Pagination
				:items-total="totalCount"
				:items-per-page="limit"
				class="pagination-bottom"
			/>

			<Footer />
		</div>
	</div>
</template>

<script>
import { Converter } from 'showdown';

import escapeHtml from '../../../src/utils/escape-html';

import FilterBar from '../filters/filter-bar.vue';
import Photos from './photos.vue';
import Album from '../album/album.vue';
import Releases from '../releases/releases.vue';
import Pagination from '../pagination/pagination.vue';
import Scroll from '../scroll/scroll.vue';

const converter = new Converter();

async function fetchReleases(scroll = true) {
	const { tag, releases, totalCount } = await this.$store.dispatch('fetchTagBySlug', {
		tagSlug: this.$route.params.tagSlug,
		pageNumber: Number(this.$route.params.pageNumber),
		limit: this.limit,
		range: this.$route.params.range,
	});

	this.tag = tag;
	this.releases = releases;
	this.totalCount = totalCount;

	this.hasMedia = this.tag.poster || this.tag.photos.length > 0;
	this.description = this.tag.description && converter.makeHtml(escapeHtml(this.tag.description));

	if (tag.banners.length > 0) {
		const banner = tag.banners[Math.floor(Math.random() * tag.banners.length)];

		this.campaign = {
			...banner.campaigns[Math.floor(Math.random() * banner.campaigns.length)],
			banner,
		};
	}

	if (scroll && this.$refs.filter) {
		this.$refs.filter.$el.scrollIntoView();
	}
}

function showAlbum() {
	return this.tag.photos?.length > 0 && this.$route.hash === '#album';
}

async function watchRoute(to, from) {
	if (to.hash !== '#album' && from.hash !== '#album') {
		await this.fetchReleases();
	}
}

async function mounted() {
	await this.fetchReleases();
	this.pageTitle = this.tag.name;
}

export default {
	components: {
		FilterBar,
		Releases,
		Album,
		Photos,
		Pagination,
		Scroll,
	},
	data() {
		return {
			tag: null,
			description: null,
			releases: null,
			totalCount: 0,
			limit: 20,
			pageTitle: null,
			hasMedia: false,
			expanded: false,
			campaign: null,
		};
	},
	computed: {
		showAlbum,
	},
	watch: {
		$route: watchRoute,
		'$store.state.ui.tagFilter': fetchReleases,
	},
	mounted,
	methods: {
		fetchReleases,
	},
};
</script>

<style lang="scss">
@import 'theme';

.description a {
    color: var(--link);
    text-decoration: inherit;

    &:hover {
        color: var(--primary);
    }
}

.description,
.description p {
    padding: 0;
    margin: 0;
}
</style>

<style lang="scss" scoped>
@import 'theme';

.header {
	display: flex;
    background: var(--profile);
    color: var(--text-light);
    justify-content: space-between;
}

.title {
	display: inline-block;
    padding: .5rem 1rem;
    margin: 0;
    flex-shrink: 0;
    text-transform: capitalize;

    .icon {
        fill: var(--text-light);
        width: 1.25rem;
        height: 1.25rem;
    }
}

.description {
	padding: 0 1rem .5rem 1rem;
    line-height: 1.5;
	color: var(--text-light);
	background: var(--profile);
}

.scroll {
	background: var(--background-dim);
}

.campaign-container {
	max-height: 90px;
	padding: .5rem 1rem 0 1rem;
	background: var(--background-dim);
	text-align: center;
}

.campaign {
	display: inline-block;
	height: 100%;

	.campaign-banner {
		max-height: 100%;
		max-width: 100%;
	}
}
</style>