105 lines
2.9 KiB
Vue
105 lines
2.9 KiB
Vue
<template>
|
|
<span v-if="flag"
|
|
:class="['logo-wrapper rounded-circle d-inline-flex justify-content-center align-items-center', forceShowFlag || forceShowFlagDyn ? 'logo-flag-forced' : '', flagName ? 'logo-has-flag' : '']"
|
|
:style="flagName ? `--flag: url('/flags/${flagName}.png')` : ''">
|
|
<span class="logo" v-html="svg"/>
|
|
</span>
|
|
<span v-else class="logo" v-html="svg"/>
|
|
</template>
|
|
|
|
<script>
|
|
import {Day} from "@/src/calendar/helpers";
|
|
import { calendar } from '../src/calendar/calendar';
|
|
import { ImmutableArray } from '../src/helpers';
|
|
|
|
export default {
|
|
props: {
|
|
flag: { type: Boolean },
|
|
forceShowFlag: { type: Boolean },
|
|
day: { 'default': () => Day.today() },
|
|
},
|
|
data() {
|
|
return {
|
|
svg: process.env.LOGO,
|
|
flagName: this.selectFlag(),
|
|
d: this.day,
|
|
forceShowFlagDyn: false,
|
|
};
|
|
},
|
|
mounted() {
|
|
this.$eventHub.$on('calendar-select', (d) => {
|
|
this.forceShowFlagDyn = !!d;
|
|
this.d = d;
|
|
this.flagName = this.selectFlag();
|
|
})
|
|
},
|
|
methods: {
|
|
selectFlag() {
|
|
const events = calendar.getCurrentYear().eventsByDate[(this.d || this.day).toString()];
|
|
if (!events) { return null; }
|
|
return new ImmutableArray(...events)
|
|
.filter(e => e.flag && !e.flag.startsWith('_'))
|
|
.sorted((a, b) => b.level - a.level)
|
|
.groupBy(e => e.level)
|
|
.indexOrFallback(0, [0, new ImmutableArray()])[1]
|
|
.map(e => e.flag)
|
|
.randomElement();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.logo-wrapper {
|
|
width: 1.3em;
|
|
height: 1.3em;
|
|
position: relative;
|
|
overflow: hidden;
|
|
&:before {
|
|
content: ' ';
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: var(--flag);
|
|
background-position: center;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
z-index: -5;
|
|
|
|
opacity: 0;
|
|
transition: all .25s ease-in-out;
|
|
}
|
|
}
|
|
|
|
.logo {
|
|
height: 1em;
|
|
width: 1em;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
svg {
|
|
vertical-align: baseline !important;
|
|
}
|
|
}
|
|
|
|
.logo-wrapper.logo-flag-forced.logo-has-flag, h1:hover .logo-wrapper.logo-has-flag {
|
|
svg path {
|
|
stroke: white;
|
|
stroke-width: 10;
|
|
}
|
|
&:before {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
body[data-theme="dark"] {
|
|
.logo-wrapper.logo-flag-forced.logo-has-flag, h1:hover .logo-wrapper.logo-has-flag {
|
|
svg path {
|
|
stroke: black;
|
|
}
|
|
}
|
|
}
|
|
</style>
|