diff --git a/src/components/tabs/WikiListTab.vue b/src/components/tabs/WikiListTab.vue index 09a95fe..29b2c0c 100644 --- a/src/components/tabs/WikiListTab.vue +++ b/src/components/tabs/WikiListTab.vue @@ -45,42 +45,37 @@ - + {{ vehicle.type }} - + {{ $t(`wiki.${vehicle.group}`) }} {{ $t(`wiki.${vehicle.group}`) }} {{ vehicle.constructionType }} - {{ vehicle.length }}m - {{ (vehicle.weight / 1000).toFixed(1) }}t - {{ vehicle.maxSpeed }}km/h + {{ vehicle.length }} + {{ (vehicle.weight / 1000).toFixed(1) }} + {{ vehicle.maxSpeed }} - {{ !isLocomotive(vehicle) ? vehicle.cargoTypes.length : '---' }} + {{ !isTractionUnit(vehicle) ? vehicle.cargoTypes.length : '---' }} - {{ isLocomotive(vehicle) ? (vehicle.coldStart ? `✓` : '✗') : '---' }} + {{ isTractionUnit(vehicle) ? (vehicle.coldStart ? `✓` : '✗') : '---' }} @@ -121,6 +116,7 @@ interface IWikiHeader { interface IWikiRow { vehicle: IVehicle; show: boolean; + showImage: boolean; } const headers: IWikiHeader[] = [ @@ -141,6 +137,7 @@ export default defineComponent({ data() { return { store: useStore(), + observer: null as IntersectionObserver | null, headers, scrollTop: 0, @@ -156,6 +153,10 @@ export default defineComponent({ }; }, + mounted() { + this.mountObserver(); + }, + activated() { const tableWrapperRef = this.$refs['table-wrapper'] as HTMLElement; @@ -165,10 +166,38 @@ export default defineComponent({ }, methods: { - isLocomotive: isTractionUnit, + isTractionUnit, + + mountObserver() { + if (this.observer) return; + + this.observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (entry.intersectionRatio > 0) { + entry.target + .querySelector('td:first-child > img')! + .setAttribute( + 'src', + entry.target.querySelector('td:first-child > img')!.getAttribute('data-src')! + ); + // your observer logic + console.log(entry.target.textContent, ':D'); + } else { + console.log(entry.target.textContent, ':('); + } + }); + }); + + (this.$refs['itemRefs'] as HTMLElement[]).forEach((el) => this.observer?.observe(el)); + }, toggleFilter(name: typeof this.currentFilterMode) { this.currentFilterMode = this.currentFilterMode == name ? 'all' : name; + const tableWrapperRef = this.$refs['table-wrapper'] as HTMLElement; + + tableWrapperRef.scrollTo({ + top: this.scrollTop, + }); }, toggleSorter(header: IWikiHeader) { @@ -226,6 +255,7 @@ export default defineComponent({ return this.store.vehicleDataList .map((vehicle) => ({ vehicle, + showImage: false, show: new RegExp(`${this.searchedVehicleTypeName.trim()}`, 'i').test(vehicle.type) && (this.currentFilterMode == 'all' || @@ -319,12 +349,16 @@ export default defineComponent({ td { text-align: center; - height: 70px; padding: 0.25em; + height: 75px; &[data-sponsoronly='true'] { color: salmon; } + + img { + vertical-align: middle; + } } }