traxxx/assets/components/entities/entity.vue

344 lines
6.1 KiB
Vue
Raw Normal View History

2020-06-27 02:50:13 +00:00
<template>
<div
v-if="entity"
class="entity content"
>
<div class="info">
2020-06-30 22:25:27 +00:00
<a
:href="entityUrl"
2020-06-30 22:25:27 +00:00
target="_blank"
rel="noopener"
class="link link-child"
>
<template v-if="entity.hasLogo">
<img
v-if="$route.name === 'network'"
class="logo logo-child"
:src="`/img/logos/${entity.slug}/thumbs/network.png`"
>
<img
v-else-if="entity.parent && !entity.independent"
2020-06-30 22:25:27 +00:00
class="logo logo-child"
:src="`/img/logos/${entity.parent.slug}/thumbs/${entity.slug}.png`"
>
<img
v-else
class="logo logo-child"
:src="`/img/logos/${entity.slug}/thumbs/${entity.slug}.png`"
>
</template>
2020-06-30 22:25:27 +00:00
<h2
v-else
2020-06-30 22:25:27 +00:00
class="name"
>{{ entity.name }}</h2>
2020-07-23 16:27:49 +00:00
<Icon
v-if="entity.url"
icon="share2"
/>
2020-06-30 22:25:27 +00:00
</a>
<ul
v-if="entity.tags.length > 0"
class="tags"
>
<li
v-for="tag in entity.tags"
:key="`tag-${tag.slug}`"
>{{ tag.name }}</li>
</ul>
<RouterLink
2020-06-27 02:50:13 +00:00
v-if="entity.parent"
:to="`/${entity.parent.type}/${entity.parent.slug}`"
2020-06-30 22:25:27 +00:00
class="link link-parent"
2020-06-27 02:50:13 +00:00
>
<img
v-if="entity.parent.hasLogo"
class="logo logo-parent"
2020-06-27 02:50:13 +00:00
:src="`/img/logos/${entity.parent.slug}/thumbs/network.png`"
>
<img
v-if="entity.parent.hasLogo"
class="favicon"
:src="`/img/logos/${entity.parent.slug}/favicon.png`"
>
<h3
v-else
class="name parent-name"
>{{ entity.parent.name }}</h3>
<Icon icon="device_hub" />
</RouterLink>
2020-06-27 02:50:13 +00:00
</div>
<div
class="content-inner"
@scroll="events.emit('scroll', $event)"
>
2020-06-29 23:07:48 +00:00
<Scroll
v-if="entity.children.length > 0"
2020-12-30 01:23:43 +00:00
v-slot="scroll"
:expandable="true"
:expanded="expanded"
2021-01-14 00:37:50 +00:00
class="scroll-light"
@expand="(state) => expanded = state"
2020-06-29 23:07:48 +00:00
>
<Children
:entity="entity"
:class="{ expanded }"
2020-12-30 01:23:43 +00:00
@load="scroll.loaded"
/>
</Scroll>
2020-06-27 02:50:13 +00:00
2023-07-02 03:13:40 +00:00
<div
v-if="config.campaigns.entity"
class="campaign-container"
>
<Campaign
:entity="entity"
:min-ratio="3"
/>
</div>
2020-06-27 02:50:13 +00:00
<FilterBar
2021-01-17 20:24:20 +00:00
ref="filter"
2020-06-27 02:50:13 +00:00
:fetch-releases="fetchEntity"
:items-total="totalCount"
:items-per-page="limit"
:available-tags="entity.tags"
2020-06-27 02:50:13 +00:00
/>
<div class="releases">
<Releases
:releases="entity.releases"
2023-07-02 03:07:38 +00:00
:entity="entity"
:done="done"
/>
<Pagination
:items-total="totalCount"
:items-per-page="limit"
class="pagination-top"
/>
2020-06-27 02:50:13 +00:00
</div>
2020-08-15 17:04:33 +00:00
<Footer />
2020-06-27 02:50:13 +00:00
</div>
</div>
</template>
<script>
2020-07-20 02:20:33 +00:00
import FilterBar from '../filters/filter-bar.vue';
import Pagination from '../pagination/pagination.vue';
2020-06-27 02:50:13 +00:00
import Releases from '../releases/releases.vue';
import Children from './children.vue';
import Scroll from '../scroll/scroll.vue';
import Campaign from '../campaigns/campaign.vue';
2020-06-27 02:50:13 +00:00
async function fetchEntity(scroll = true) {
this.done = false;
this.entityUrl = null;
2020-06-27 02:50:13 +00:00
const { entity, totalCount } = await this.$store.dispatch('fetchEntityBySlugAndType', {
entitySlug: this.$route.params.entitySlug,
entityType: this.$route.name,
limit: this.limit,
range: this.$route.params.range,
pageNumber: Number(this.$route.params.pageNumber),
});
this.entity = entity;
this.totalCount = totalCount;
this.pageTitle = entity.name;
const campaign = entity.campaigns.find((campaignX) => !campaignX.banner)
|| entity.parent?.campaigns.find((campaignX) => !campaignX.banner);
2021-07-11 23:41:18 +00:00
2023-07-02 03:07:38 +00:00
if (entity.url) {
const { searchParams, pathname, origin } = new URL(entity.url);
const affiliateParams = new URLSearchParams({
...(entity.url && Object.fromEntries(searchParams)), // preserve any query in entity URL, e.g. ?siteId=5
...(campaign?.affiliate?.parameters && Object.fromEntries(new URLSearchParams(campaign.affiliate.parameters))), // append affiliate parameters
}).toString();
2023-07-02 03:07:38 +00:00
this.entityUrl = campaign?.url || campaign?.affiliate?.url || `${origin}${pathname}${campaign?.affiliate?.parameters ? `?${affiliateParams}` : ''}`;
}
2021-07-11 23:41:18 +00:00
this.done = true;
2021-05-08 22:23:10 +00:00
if (scroll && this.$refs.filter?.$el) {
this.$refs.filter.$el.scrollIntoView();
}
}
2020-06-27 02:50:13 +00:00
async function mounted() {
await this.fetchEntity();
}
2021-05-08 22:23:10 +00:00
async function route(to) {
if (to.name === 'channel' || to.name === 'network' || to.name === 'studio') {
await this.fetchEntity();
this.expanded = false;
}
2020-06-27 02:50:13 +00:00
}
export default {
components: {
FilterBar,
Pagination,
Children,
2020-06-27 02:50:13 +00:00
Releases,
Scroll,
Campaign,
2020-06-27 02:50:13 +00:00
},
data() {
return {
entity: null,
2020-09-03 20:22:12 +00:00
pageTitle: null,
2020-06-27 02:50:13 +00:00
totalCount: null,
done: false,
limit: Number(this.$route.query.limit) || 20,
expanded: false,
entityUrl: null,
2020-06-27 02:50:13 +00:00
};
},
watch: {
$route: route,
'$store.state.ui.tagFilter': fetchEntity,
2020-06-27 02:50:13 +00:00
},
mounted,
methods: {
fetchEntity,
},
};
</script>
<style lang="scss" scoped>
2020-07-05 02:40:57 +00:00
@import 'breakpoints';
2020-06-27 02:50:13 +00:00
.info {
display: flex;
justify-content: space-between;
background: var(--profile);
border-bottom: solid 1px var(--lighten-hint);
}
.link {
max-width: 15rem;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 1rem;
text-decoration: none;
}
2020-06-30 22:25:27 +00:00
.link-child {
flex-shrink: 0;
.icon {
fill: var(--lighten);
margin: 0 0 0 1rem;
2020-06-30 22:25:27 +00:00
}
&:hover .icon {
fill: var(--text-light);
}
2020-06-27 02:50:13 +00:00
}
.link-parent {
flex-direction: row-reverse;
flex-shrink: 0;
margin: 0 0 0 3rem;
.icon {
width: 1.25rem;
height: 1.25rem;
fill: var(--lighten);
margin: 0 .5rem 0 0;
}
}
2020-06-27 02:50:13 +00:00
.logo {
height: 100%;
max-width: 100%;
2020-06-27 02:50:13 +00:00
object-fit: contain;
}
.logo-child {
height: 3rem;
}
.logo-parent {
height: 1.5rem;
}
.favicon {
height: 1rem;
flex-shrink: 0;
}
2020-08-19 19:48:55 +00:00
.content-inner {
display: flex;
flex-direction: column;
}
2020-12-30 01:23:43 +00:00
.scroll {
background: var(--profile);
}
.campaign-container {
2023-06-24 15:16:06 +00:00
max-height: 150px;
background: var(--background-dim);
text-align: center;
padding: .5rem;
}
2020-08-19 19:48:55 +00:00
.releases {
flex-grow: 1;
}
.name {
color: var(--text-light);
display: flex;
align-items: center;
padding: 0;
margin: 0;
2020-06-30 22:25:27 +00:00
white-space: nowrap;
font-size: 1.5rem;
}
.favicon {
display: none;
}
@media(max-width: $breakpoint) {
.tags {
display: none;
}
}
2020-07-05 02:40:57 +00:00
@media(max-width: $breakpoint-micro) {
.logo-parent {
display: none;
}
.favicon {
display: inline-block;
}
2020-06-27 02:50:13 +00:00
}
@media(max-width: $breakpoint-nano) {
.link-child .icon {
display: none;
}
}
2020-06-27 02:50:13 +00:00
</style>