traxxx/assets/components/campaigns/campaign.vue

145 lines
2.9 KiB
Vue
Raw Normal View History

<template>
<a
v-if="campaign"
:href="campaign.url"
target="_blank"
class="campaign"
>
<img
v-if="campaign.banner.entity.type === 'network'"
:src="`/img/banners/${campaign.banner.entity.slug}/${campaign.banner.id}.${campaign.banner.type || 'jpg'}`"
:width="campaign.banner.width"
:height="campaign.banner.height"
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}.${campaign.banner.type || 'jpg'}`"
:width="campaign.banner.width"
:height="campaign.banner.height"
class="campaign-banner"
>
</a>
</template>
<script>
function ratioFilter(banner) {
if (!banner) {
return false;
}
if (this.minHeight && banner.height < this.minHeight) {
return false;
}
if (this.maxHeight && banner.height > this.minHeight) {
return false;
}
if (this.minRatio && banner.ratio < this.minRatio) {
return false;
}
if (this.maxRatio && banner.ratio > this.maxRatio) {
return false;
}
return true;
}
function entityCampaign() {
const bannerCampaigns = this.entity.campaigns
.concat(this.entity.children?.flatMap(child => child.campaigns))
.concat(this.entity.parent?.campaigns)
.filter(campaignX => campaignX && this.ratioFilter(campaignX.banner));
if (bannerCampaigns.length > 0) {
const randomCampaign = bannerCampaigns[Math.floor(Math.random() * bannerCampaigns.length)];
this.$emit('campaign', randomCampaign);
return randomCampaign;
}
this.$emit('campaign', null);
return null;
}
function tagCampaign() {
const campaignBanners = this.tag.banners.filter(banner => banner.campaigns.length > 0 && this.ratioFilter(banner));
const banner = campaignBanners[Math.floor(Math.random() * campaignBanners.length)];
if (banner?.campaigns.length > 0) {
const randomCampaign = {
...banner.campaigns[Math.floor(Math.random() * banner.campaigns.length)],
banner,
};
this.$emit('campaign', randomCampaign);
return randomCampaign;
}
this.$emit('campaign', null);
return null;
}
function campaign() {
if (this.entity) {
return this.entityCampaign();
}
if (this.tag) {
return this.tagCampaign();
}
this.$emit('campaign', null); // allow parent to toggle campaigns depending on availability
return null;
}
export default {
props: {
entity: {
type: Object,
default: null,
},
tag: {
type: Object,
default: null,
},
minRatio: {
type: Number,
default: null,
},
maxRatio: {
type: Number,
default: null,
},
},
emits: ['campaign'],
computed: {
campaign,
},
methods: {
entityCampaign,
ratioFilter,
tagCampaign,
},
};
</script>
<style lang="scss" scoped>
.campaign {
height: 100%;
display: inline-flex;
flex-grow: 1;
align-items: center;
justify-content: center;
}
.campaign-banner {
height: auto;
max-height: 100%;
max-width: 100%;
}
</style>