popupy

src/App.vue

@@ -34,11 +34,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, watch } from 'vue';
+import { defineComponent } from 'vue';
 import axios from 'axios';
 import { version } from '.././package.json';
 
 import { useMainStore } from './store/mainStore';
+import popupMixin from './mixins/popupMixin';
 
 import Clock from './components/App/Clock.vue';
 import StatusIndicator from './components/App/StatusIndicator.vue';
@@ -48,7 +49,6 @@ import StorageManager from './managers/storageManager';
 import PopUp from './components/PopUp/PopUp.vue';
 import { useApiStore } from './store/apiStore';
 import { Status } from './typings/common';
-import { usePopupStore } from './store/popupStore';
 
 const STORAGE_VERSION_KEY = 'app_version';
 
@@ -61,11 +61,12 @@ export default defineComponent({
     PopUp
   },
 
+  mixins: [popupMixin],
+
   data: () => ({
     VERSION: version,
     store: useMainStore(),
     apiStore: useApiStore(),
-    popupStore: usePopupStore(),
 
     currentLang: 'pl',
     releaseURL: '',
@@ -83,33 +84,7 @@ export default defineComponent({
       this.apiStore.fetchActiveData();
     });
 
-    // popup handling
-    window.addEventListener('mousemove', (e: MouseEvent) => {
-      const targetEl = e
-        .composedPath()
-        .find((p) => p instanceof HTMLElement && p.getAttribute('data-popup-key'));
-
-      if (!targetEl || !(targetEl instanceof HTMLElement)) {
-        if (this.popupStore.currentPopupComponent != null) this.popupStore.onPopUpHide();
-
-        return;
-      }
-
-      const popupComponentKey = targetEl.getAttribute('data-popup-key');
-      const popupContent = targetEl.getAttribute('data-popup-content');
-
-      if (popupComponentKey && popupContent)
-        this.popupStore.onPopUpShow(e, popupComponentKey, popupContent);
-      else if (this.popupStore.currentPopupComponent != null) this.popupStore.onPopUpHide();
-    });
-
-    watch(
-      () => this.store.blockScroll,
-      (value) => {
-        if (value) document.body.classList.add('no-scroll');
-        else document.body.classList.remove('no-scroll');
-      }
-    );
+    window.addEventListener('mousemove', (e: MouseEvent) => this.handlePopUpEvents(e));
   },
 
   methods: {
@@ -162,6 +137,27 @@ export default defineComponent({
       this.apiStore.connectToAPI();
     },
 
+    handlePopUpEvents(e: MouseEvent) {
+      const targetEl = e
+        .composedPath()
+        .find((p) => p instanceof HTMLElement && p.getAttribute('data-popup-key'));
+
+      if (!targetEl || !(targetEl instanceof HTMLElement)) {
+        if (this.store.popUpData.key != null) this.hidePopUp();
+
+        return;
+      }
+
+      const popupComponentKey = targetEl.getAttribute('data-popup-key');
+      const popupContent = targetEl.getAttribute('data-popup-content');
+
+      if (popupComponentKey && popupContent) this.showPopUp(e, popupComponentKey, popupContent);
+      else if (this.store.popUpData.key != null) this.hidePopUp();
+
+      this.store.mousePos.x = e.pageX;
+      this.store.mousePos.y = e.pageY;
+    },
+
     changeLang(lang: string) {
       this.$i18n.locale = lang;
       this.currentLang = lang;
@@ -241,7 +237,7 @@ export default defineComponent({
   grid-template-columns: 100%;
 
   min-height: 100vh;
-  position: relative;
+  overflow: hidden;
 }
 
 .app_main {

src/components/PopUp/DonatorPopUp.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="popup-content">
     <img src="/images/icon-diamond.svg" alt="" />
-    <span>{{ popupStore.currentPopupContent }}</span>
+    <span>{{ store.popUpData.content }}</span>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { usePopupStore } from '../../store/popupStore';
+import { useMainStore } from '../../store/mainStore';
 
 export default defineComponent({
   data() {
     return {
-      popupStore: usePopupStore()
+      store: useMainStore()
     };
   }
 });

src/components/PopUp/PopUp.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="popup" v-show="popupStore.currentPopupComponent" ref="preview">
-    <component v-if="popupStore.currentPopupComponent" :is="popupStore.currentPopupComponent" />
+  <div class="popup" v-show="store.popUpData.key" ref="preview">
+    <component v-if="store.popUpData.key" :is="store.popUpData.key" />
   </div>
 </template>
 
@@ -9,47 +9,48 @@ import { defineComponent } from 'vue';
 import DonatorPopUp from './DonatorPopUp.vue';
 import TrainCommentsPopUp from './TrainCommentsPopUp.vue';
 import VehiclePreviewPopUp from './VehiclePreviewPopUp.vue';
-import { usePopupStore } from '../../store/popupStore';
+import { useMainStore } from '../../store/mainStore';
 
 export default defineComponent({
   components: { DonatorPopUp, TrainCommentsPopUp, VehiclePreviewPopUp },
 
   data() {
     return {
-      popupStore: usePopupStore()
+      store: useMainStore()
     };
   },
 
   watch: {
-    'popupStore.popupPosition': {
+    'store.mousePos': {
       deep: true,
-      handler(val: typeof this.popupStore.popupPosition) {
-        const previewEl = this.$refs['preview'] as HTMLElement;
-        const clientWidth = document.body.clientWidth;
-        const boxWidth = previewEl.getBoundingClientRect().width;
-
-        let translateX = '0px',
-          translateY = '30px';
-
-        if (clientWidth < 500) {
-          previewEl.style.left = '50%';
-          translateX = '-50%';
-        } else if (val.x <= boxWidth / 2) {
-          previewEl.style.left = '0';
-          translateX = '0px';
-        } else if (val.x >= clientWidth - boxWidth / 2) {
-          previewEl.style.left = '100%';
-          translateX = '-100%';
-        } else {
-          previewEl.style.left = `${val.x}px`;
-          translateX = '-50%';
-        }
-
-        previewEl.style.top = `${val.y}px`;
-
+      handler(val: typeof this.store.mousePos) {
         this.$nextTick(() => {
+          const previewEl = this.$refs['preview'] as HTMLElement;
+          const clientWidth = document.body.clientWidth;
+          const boxWidth = previewEl.getBoundingClientRect().width;
+
+          let translateX = '0px',
+            translateY = '30px';
+
+          if (clientWidth < 500) {
+            previewEl.style.left = '50%';
+            translateX = '-50%';
+          } else if (val.x <= boxWidth / 2) {
+            previewEl.style.left = '0';
+            translateX = '0px';
+          } else if (val.x >= clientWidth - boxWidth / 2) {
+            previewEl.style.left = '100%';
+            translateX = '-100%';
+          } else {
+            previewEl.style.left = `${val.x}px`;
+            translateX = '-50%';
+          }
+
+          previewEl.style.top = `${val.y}px`;
+
           const isOutside =
-            val.y + previewEl.getBoundingClientRect().height >= window.innerHeight + window.scrollY;
+            val.y + previewEl.getBoundingClientRect().height + 30 >=
+            window.innerHeight + window.scrollY;
 
           if (isOutside) translateY = 'calc(-100% - 30px)';
           previewEl.style.transform = `translate(${translateX}, ${translateY})`;

src/components/PopUp/TrainCommentsPopUp.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="popup-content">
-    <span>{{ popupStore.currentPopupContent }}</span>
+    <span>{{ store.popUpData.content }}</span>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { usePopupStore } from '../../store/popupStore';
+import { useMainStore } from '../../store/mainStore';
 
 export default defineComponent({
   data() {
     return {
-      popupStore: usePopupStore()
+      store: useMainStore()
     };
   }
 });

src/components/PopUp/VehiclePreviewPopUp.vue

@@ -7,29 +7,29 @@
     <div v-if="imageState == 'error'">{{ $t('vehicle-preview.error') }}</div>
 
     <img
-      v-if="popupStore.currentPopupContent"
+      v-if="store.popUpData.key"
       @load="onImageLoad"
       @error="onImageError"
       width="300"
       height="176"
       class="rounded-md w-full h-auto"
-      :src="`https://static.spythere.eu/images/${popupStore.currentPopupContent}--300px.jpg`"
+      :src="`https://static.spythere.eu/images/${store.popUpData.content}--300px.jpg`"
     />
 
     <div class="vehicle-name" v-if="imageState != 'error'">
-      {{ popupStore.currentPopupContent.replace(/_/g, ' ') }}
+      {{ store.popUpData.content.replace(/_/g, ' ') }}
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { usePopupStore } from '../../store/popupStore';
+import { useMainStore } from '../../store/mainStore';
 
 export default defineComponent({
   data() {
     return {
-      popupStore: usePopupStore(),
+      store: useMainStore(),
       imageState: 'loading'
     };
   },

src/components/StationsView/StationTable.vue

@@ -312,7 +312,7 @@ import { HeadIdsTypes, headIconsIds, headIds } from '../../scripts/data/stationH
 import StationStatusBadge from '../Global/StationStatusBadge.vue';
 import { Status } from '../../typings/common';
 import { useApiStore } from '../../store/apiStore';
-import { usePopupStore } from '../../store/popupStore';
+import popupMixin from '../../mixins/popupMixin';
 
 export default defineComponent({
   props: {
@@ -324,7 +324,7 @@ export default defineComponent({
 
   emits: ['toggleDonationModal'],
   components: { Loading, StationStatusBadge },
-  mixins: [styleMixin, dateMixin, stationInfoMixin],
+  mixins: [styleMixin, dateMixin, stationInfoMixin, popupMixin],
 
   data: () => ({
     headIconsIds,
@@ -341,7 +341,6 @@ export default defineComponent({
   setup() {
     const mainStore = useMainStore();
     const apiStore = useApiStore();
-    const popupStore = usePopupStore();
 
     const stationFiltersStore = useStationFiltersStore();
 
@@ -349,8 +348,7 @@ export default defineComponent({
       Status: Status.Data,
       stationFiltersStore,
       mainStore,
-      apiStore,
-      popupStore
+      apiStore
     };
   },
 
@@ -373,7 +371,7 @@ export default defineComponent({
     openDonationModal(e: Event) {
       this.$emit('toggleDonationModal', true);
       this.mainStore.modalLastClickedTarget = e.target;
-      this.popupStore.currentPopupComponent = null;
+      this.hidePopUp();
     },
 
     openForumSite(e: Event, url: string | undefined) {

src/components/TrainsView/TrainInfo.vue

@@ -163,7 +163,6 @@ import ProgressBar from '../Global/ProgressBar.vue';
 import { useMainStore } from '../../store/mainStore';
 import { useApiStore } from '../../store/apiStore';
 import StockList from '../Global/StockList.vue';
-import { usePopupStore } from '../../store/popupStore';
 import modalTrainMixin from '../../mixins/modalTrainMixin';
 
 export default defineComponent({
@@ -183,8 +182,7 @@ export default defineComponent({
   data() {
     return {
       store: useMainStore(),
-      apiStore: useApiStore(),
-      popupStore: usePopupStore()
+      apiStore: useApiStore()
     };
   },
 

src/mixins/modalTrainMixin.ts

@@ -1,12 +1,10 @@
 import { defineComponent } from 'vue';
 import { useMainStore } from '../store/mainStore';
-import { usePopupStore } from '../store/popupStore';
 
 export default defineComponent({
   data() {
     return {
-      store: useMainStore(),
-      popupStore: usePopupStore()
+      store: useMainStore()
     };
   },
 
@@ -25,7 +23,7 @@ export default defineComponent({
 
     closeModal() {
       this.store.chosenModalTrainId = undefined;
-      this.popupStore.currentPopupComponent = null;
+      this.store.popUpData.key = null;
 
       setTimeout(() => {
         (this.store.modalLastClickedTarget as any)?.focus();

src/mixins/popupMixin.ts

@@ -0,0 +1,27 @@
+import { defineComponent } from 'vue';
+import { useMainStore } from '../store/mainStore';
+import { PopUpType, popupKeys } from '../store/typings';
+
+const isPopUp = (v: any): v is PopUpType => popupKeys.includes(v);
+
+export default defineComponent({
+  data() {
+    return {
+      store: useMainStore()
+    };
+  },
+
+  methods: {
+    showPopUp(e: MouseEvent, componentKey: string, value?: string) {
+      if (!isPopUp(componentKey)) return;
+
+      this.store.popUpData['key'] = componentKey;
+      this.store.popUpData['content'] = value ?? '';
+    },
+
+    hidePopUp() {
+      this.store.popUpData['key'] = null;
+      this.store.popUpData['content'] = '';
+    }
+  }
+});

src/store/mainStore.ts

@@ -26,8 +26,10 @@ export const useMainStore = defineStore('store', {
 
       chosenModalTrainId: undefined,
 
-      blockScroll: false,
-      modalLastClickedTarget: null
+      modalLastClickedTarget: null,
+
+      mousePos: { x: 0, y: 0 },
+      popUpData: { key: null, content: '' }
     }) as StoreState,
 
   getters: {

src/store/popupStore.ts

@@ -1,37 +0,0 @@
-import { defineStore } from 'pinia';
-
-export const popupKeys = ['DonatorPopUp', 'TrainCommentsPopUp', 'VehiclePreviewPopUp'] as const;
-export type PopUp = (typeof popupKeys)[number];
-
-const isPopUp = (v: any): v is PopUp => popupKeys.includes(v);
-
-export const usePopupStore = defineStore('popupStore', {
-  state: () => ({
-    popupPosition: { x: 0, y: 0 },
-    currentPopupComponent: null as PopUp | null,
-    currentPopupContent: '',
-    donatorPopupVisible: false
-  }),
-
-  actions: {
-    onPopUpShow(e: MouseEvent, componentKey: string, value?: string) {
-      if (!isPopUp(componentKey)) return;
-
-      this.popupPosition.x = e.pageX;
-      this.popupPosition.y = e.pageY;
-
-      this.currentPopupComponent = componentKey;
-      this.currentPopupContent = value ?? '';
-    },
-
-    onPopUpMove(e: MouseEvent) {
-      this.popupPosition.x = e.pageX;
-      this.popupPosition.y = e.pageY;
-    },
-
-    onPopUpHide() {
-      this.currentPopupComponent = null;
-      this.currentPopupContent = '';
-    }
-  }
-});

src/store/typings.ts

@@ -1,7 +1,9 @@
 import { API } from '../typings/api';
 import { Status } from '../typings/common';
 
+export const popupKeys = ['DonatorPopUp', 'TrainCommentsPopUp', 'VehiclePreviewPopUp'] as const;
 export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
+export type PopUpType = (typeof popupKeys)[number];
 
 export interface RegionCounters {
   stationCount: number;
@@ -19,8 +21,9 @@ export interface StoreState {
   driverStatsData?: API.DriverStats.Response;
   driverStatsStatus: Status.Data;
   chosenModalTrainId?: string;
-  blockScroll: boolean;
   modalLastClickedTarget: EventTarget | null;
+  mousePos: { x: number; y: number };
+  popUpData: { key: PopUpType | null; content: string };
 }
 
 export interface StationRoutesInfo {

src/styles/global.scss

@@ -55,6 +55,8 @@ body {
   -webkit-font-smoothing: antialiased !important;
 
   overflow-y: scroll;
+  overflow-x: hidden;
+  position: relative;
 
   &.no-scroll {
     overflow-y: hidden;