mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 13:28:11 +00:00
scroller sponsorów projektu w modalu
This commit is contained in:
@@ -1,129 +1,157 @@
|
||||
<template>
|
||||
<div class="donation-modal" @keydown.esc="toggleModal(false)">
|
||||
<button
|
||||
class="btn-toggle btn--image"
|
||||
ref="btn"
|
||||
@click="toggleModal(true)"
|
||||
@focus="toggleModal(false)"
|
||||
>
|
||||
<img src="/images/icon-dollar.svg" alt="dollar donation icon" />
|
||||
<span>{{ $t('donations.button-title') }}</span>
|
||||
</button>
|
||||
<AnimatedModal
|
||||
class="donation-modal"
|
||||
:isOpen="isModalOpen"
|
||||
@toggleModal="toggleModal"
|
||||
@keydown.esc="toggleModal(false)"
|
||||
>
|
||||
<div class="modal_content">
|
||||
<div class="modal_main">
|
||||
<h1 v-html="$t('donations.header')"></h1>
|
||||
<div class="donators-slider" v-if="donatorList.length != 0">
|
||||
<span v-html="$t('donations.donator-title', { count: donatorList.length })"></span>
|
||||
|
||||
<AnimatedModal :isOpen="isModalOpen" @toggleModal="toggleModal">
|
||||
<div class="modal_content">
|
||||
<div class="modal_main">
|
||||
<h1 v-html="$t('donations.header')"></h1>
|
||||
<br />
|
||||
<p v-html="$t('donations.p1')"></p>
|
||||
<br />
|
||||
<i18n-t keypath="donations.p2" tag="p">
|
||||
<template v-slot:b1>
|
||||
<b>{{ $t('donations.p2-b1') }}</b>
|
||||
</template>
|
||||
<template v-slot:b2>
|
||||
<b>{{ $t('donations.p2-b2') }}</b>
|
||||
</template>
|
||||
<template v-slot:b3>
|
||||
<b>{{ $t('donations.p2-b3') }}</b>
|
||||
</template>
|
||||
<template v-slot:link>
|
||||
<a class="discord" href="https://discord.gg/x2mpNN3svk" target="_blank">
|
||||
{{ $t('donations.p2-a1') }}
|
||||
</a>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<br />
|
||||
<p v-html="$t('donations.p3')"></p>
|
||||
<br />
|
||||
<i18n-t keypath="donations.p4" tag="p">
|
||||
<template v-slot:img>
|
||||
<transition mode="out-in" name="slider-anim" class="current-name">
|
||||
<span :key="displayingName">
|
||||
<img src="/images/icon-diamond.svg" alt="donator diamond icon" />
|
||||
</template>
|
||||
|
||||
<template v-slot:b1>
|
||||
<b>{{ $t('donations.p4-b1') }}</b>
|
||||
</template>
|
||||
|
||||
<template v-slot:b2>
|
||||
<b>{{ $t('donations.p4-b2') }}</b>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<br />
|
||||
<i
|
||||
v-html="$t('donations.p5')"
|
||||
style="display: flex; justify-content: flex-end; text-align: right"
|
||||
>
|
||||
</i>
|
||||
{{ displayingName }}
|
||||
</span>
|
||||
</transition>
|
||||
</div>
|
||||
<br />
|
||||
<p v-html="$t('donations.p1')"></p>
|
||||
<br />
|
||||
<i18n-t keypath="donations.p2" tag="p">
|
||||
<template v-slot:b1>
|
||||
<b>{{ $t('donations.p2-b1') }}</b>
|
||||
</template>
|
||||
<template v-slot:b2>
|
||||
<b>{{ $t('donations.p2-b2') }}</b>
|
||||
</template>
|
||||
<template v-slot:b3>
|
||||
<b>{{ $t('donations.p2-b3') }}</b>
|
||||
</template>
|
||||
<template v-slot:link>
|
||||
<a class="discord" href="https://discord.gg/x2mpNN3svk" target="_blank">
|
||||
{{ $t('donations.p2-a1') }}
|
||||
</a>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<br />
|
||||
<p v-html="$t('donations.p3')"></p>
|
||||
<br />
|
||||
<i18n-t keypath="donations.p4" tag="p">
|
||||
<template v-slot:img>
|
||||
<img src="/images/icon-diamond.svg" alt="donator diamond icon" />
|
||||
</template>
|
||||
|
||||
<div class="modal_actions">
|
||||
<a
|
||||
class="modal-action a-button btn--image coffee"
|
||||
href="https://buycoffee.to/spythere"
|
||||
target="_blank"
|
||||
>
|
||||
<img src="/images/icon-coffee.png" width="20" alt="buycoffee.to donation" />
|
||||
{{ $t('donations.action-buycoffee') }}
|
||||
</a>
|
||||
<template v-slot:b1>
|
||||
<b>{{ $t('donations.p4-b1') }}</b>
|
||||
</template>
|
||||
|
||||
<a
|
||||
class="modal-action a-button btn--image paypal"
|
||||
href="https://www.paypal.com/donate/?hosted_button_id=EDB3SKFAHXFTW"
|
||||
target="_blank"
|
||||
>
|
||||
<img src="/images/icon-dollar.svg" alt="paypal donation" />
|
||||
{{ $t('donations.action-paypal') }}
|
||||
</a>
|
||||
|
||||
<button class="modal-action btn--image exit" @click="toggleModal(false)">
|
||||
<img src="/images/icon-exit.svg" alt="dollar donation icon" />
|
||||
{{ $t('donations.action-exit') }}
|
||||
</button>
|
||||
</div>
|
||||
<template v-slot:b2>
|
||||
<b>{{ $t('donations.p4-b2') }}</b>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<br />
|
||||
<i
|
||||
v-html="$t('donations.p5')"
|
||||
style="display: flex; justify-content: flex-end; text-align: right"
|
||||
>
|
||||
</i>
|
||||
</div>
|
||||
</AnimatedModal>
|
||||
</div>
|
||||
|
||||
<div class="modal_actions">
|
||||
<a
|
||||
class="modal-action a-button btn--image coffee"
|
||||
href="https://buycoffee.to/spythere"
|
||||
target="_blank"
|
||||
>
|
||||
<img src="/images/icon-coffee.png" width="20" alt="buycoffee.to donation" />
|
||||
{{ $t('donations.action-buycoffee') }}
|
||||
</a>
|
||||
|
||||
<a
|
||||
class="modal-action a-button btn--image paypal"
|
||||
href="https://www.paypal.com/donate/?hosted_button_id=EDB3SKFAHXFTW"
|
||||
target="_blank"
|
||||
>
|
||||
<img src="/images/icon-dollar.svg" alt="paypal donation" />
|
||||
{{ $t('donations.action-paypal') }}
|
||||
</a>
|
||||
|
||||
<button class="modal-action btn--image exit" @click="toggleModal(false)">
|
||||
<img src="/images/icon-exit.svg" alt="dollar donation icon" />
|
||||
{{ $t('donations.action-exit') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</AnimatedModal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import AnimatedModal from './AnimatedModal.vue';
|
||||
import { useApiStore } from '../../store/apiStore';
|
||||
|
||||
export default defineComponent({
|
||||
components: { AnimatedModal },
|
||||
props: {
|
||||
isModalOpen: Boolean
|
||||
},
|
||||
|
||||
emits: ['toggleModal'],
|
||||
|
||||
watch: {
|
||||
isModalOpen(b: boolean) {
|
||||
this.running = b;
|
||||
this.lastUpdate = Date.now();
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.runUpdate();
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
apiStore: useApiStore(),
|
||||
displayingIndex: 0,
|
||||
lastUpdate: 0,
|
||||
running: false
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
displayingName() {
|
||||
return this.donatorList[this.displayingIndex];
|
||||
},
|
||||
|
||||
donatorList() {
|
||||
return this.apiStore.donatorsData.slice().sort(() => Math.sign(Math.random() * -2 + 1));
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggleModal(value: boolean) {
|
||||
this.$emit('toggleModal', value);
|
||||
},
|
||||
|
||||
runUpdate() {
|
||||
if (Date.now() >= this.lastUpdate + 2000 && this.running) {
|
||||
this.displayingIndex = (this.displayingIndex + 1) % this.donatorList.length;
|
||||
this.lastUpdate = Date.now();
|
||||
}
|
||||
|
||||
window.requestAnimationFrame(this.runUpdate);
|
||||
}
|
||||
},
|
||||
components: { AnimatedModal }
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../styles/responsive.scss';
|
||||
|
||||
button.btn-toggle {
|
||||
$btnColor: #254069;
|
||||
|
||||
background-color: $btnColor;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($btnColor, 5%);
|
||||
}
|
||||
|
||||
@include smallScreen {
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal_content {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
@@ -151,6 +179,7 @@ button.btn-toggle {
|
||||
|
||||
.modal_main {
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
img {
|
||||
max-height: 20px;
|
||||
@@ -198,4 +227,30 @@ button.btn-toggle {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.donators-slider {
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
|
||||
.current-name {
|
||||
backface-visibility: hidden;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
word-wrap: break-word;
|
||||
color: var(--clr-donator);
|
||||
}
|
||||
}
|
||||
|
||||
.slider-anim {
|
||||
&-move,
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: all 150ms ease-in-out;
|
||||
}
|
||||
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -59,8 +59,6 @@ export default defineComponent({
|
||||
'store.region.id': {
|
||||
handler(regionId) {
|
||||
this.selectedItemIndex = this.regionList.findIndex((reg) => reg.id == regionId);
|
||||
|
||||
console.log('region id', regionId);
|
||||
}
|
||||
},
|
||||
'$route.query.region': {
|
||||
|
||||
@@ -98,8 +98,6 @@ export default defineComponent({
|
||||
fallbackName += isCarPassenger ? 'passenger' : 'cargo';
|
||||
}
|
||||
|
||||
console.log(stockName, fallbackName);
|
||||
|
||||
(event.target as HTMLImageElement).src = `/images/icon-${fallbackName}.png`;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -256,8 +256,6 @@ export default defineComponent({
|
||||
},
|
||||
|
||||
handleAuthorsInput() {
|
||||
console.log(this.authorsInputValue);
|
||||
|
||||
this.filterStore.changeFilterValue('authors', this.authorsInputValue);
|
||||
|
||||
if (this.saveOptions) StorageManager.setStringValue('authors', this.authorsInputValue);
|
||||
|
||||
Reference in New Issue
Block a user