PronounsPage/components/AdPlaceholder.vue

<template>
    <div v-if="config.ads && config.ads.enabled && active"
         :class="[adPlaceholdersVisible ? 'ad-placeholder-preview' : '']"
         :style="adConfig?.sticky ? 'height: 100%' : null"
    >
        <div v-if="adPlaceholdersVisible" :class="[adConfig?.sticky ? 'wrapper-sticky' : '']">
            <p class="text-center h5">{{currentKey}}</p>
            <Debug :v="adConfig"/>
        </div>
        <div v-else-if="adConfig.fuse" :class="['adsbypublift', adConfig?.sticky ? 'wrapper-sticky' : '']" :data-fuse="adConfig.fuse"></div>
        <div v-else-if="adConfig.waldo" :class="['adsbynewor', adConfig.video ? 'waldo-video-tag' : '']" :id="'waldo-tag-' + adConfig.slotId"></div>
        <ins v-else-if="adConfig.adsense" class="adsbygoogle"
             style="display:block;margin-block: 1em;"
             data-ad-client="ca-pub-8518361481036191"
             :data-ad-slot="adConfig.slotId"
             :data-ad-format="adConfig.adFormat"
             :data-ad-layout="adConfig.adLayout"
             :data-full-width-responsive="adConfig.responsive ? 'true' : ''"
             role="alert"
             :data-label="$t('support.ad')"></ins>
        <div v-else
             :class="['adsinternal', 'text-center', 'py-3', adConfig.display]"
             :data-label="$t('support.ad')">
            <a :href="adConfig.link" target="_blank" rel="noopener">
                <img :src="`/banners/${adConfig.image}`" class="border shadow" :alt="adConfig.alt" style="max-width: 100%"/>
            </a>
        </div>
    </div>
</template>

<script>
import adPlaceholders from "../src/adPlaceholders";
import { adsInternalPerPlaceholder } from "../src/adsInternal";
import {mapState} from "vuex";
import {randomItem} from "../src/helpers";

const MOBILE_BREAKPOINT = 992;

export default {
    props: {
        phkey: {required: true},
    },
    data() {
        return {
            isMobile: undefined,
        }
    },
    mounted() {
        if (!process.client) { return; }
        (window.adsbygoogle = window.adsbygoogle || []).push({});
        this.handleResize();
        window.addEventListener('resize', this.handleResize);
    },
    beforeUnmount() {
        window.removeEventListener('resize', this.handleResize);
    },
    methods: {
        handleResize() {
            this.isMobile = window.innerWidth < MOBILE_BREAKPOINT;
        },
    },
    computed: {
        currentKey() {
            if (!Array.isArray(this.phkey)) {
                return this.phkey;
            }
            return this.phkey[this.isMobile ? 1 : 0];
        },
        active() {
            return this.isMobile !== undefined && this.currentKey
                && (adsInternalPerPlaceholder[this.currentKey] || adPlaceholders[this.currentKey]);
        },
        adConfig() {
            if (!this.active) { return {}; }

            if (adsInternalPerPlaceholder[this.currentKey]) {
                return randomItem(adsInternalPerPlaceholder[this.currentKey]);
            }

            const {slotId, adFormat, adLayout = null, responsive = false, video = false, sticky = false} = adPlaceholders[this.currentKey];
            return {
                fuse: true,
                slotId,
                adFormat,
                adLayout,
                responsive,
                video,
                sticky,
            }
        },
        // adPlaceholdersVisible: () => true,
        ...mapState([
            'adPlaceholdersVisible',
        ]),
    },
}
</script>

<style lang="scss">
.ad-placeholder-preview {
    background-color: #b2caec;
    width: 100%;
    height: 200px;
    padding: 1em;
}

.adsbygoogle:not(:empty), .adsinternal:not(:empty), .adsbynewor:not(:empty), .adsbypublift:not(:empty) {
    text-decoration: none;
    &:before {
        content: attr(data-label);
        display: block;
        font-size: 0.7rem;
    }
}
.wrapper-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}
</style>