HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

refactor: ✨ Swiper, no swiping! :fox:

Browse source 
Swiper everywhere, attempt to sync to header bar
This commit is contained in:
ThatOneCalculator 2022-09-05 18:13:17 -07:00
parent 37b7c4485c
commit e4861bcf0b
2 changed files with 16 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "calckey", "name": "calckey",
"version": "12.118.1-calc.2-beta.2-rc.5", "version": "12.118.1-calc.2-beta.2-rc.6",
"codename": "aqua", "codename": "aqua",
"repository": { "repository": {
"type": "git", "type": "git",

23
packages/client/src/pages/timeline.vue
View file

@ -25,7 +25,7 @@
{{ i18n.ts.newNoteRecived }} {{ i18n.ts.newNoteRecived }}
</button> </button>
</div> </div>
<div v-if="!isMobile" class="tl _block"> <!-- <div v-if="!isMobile" class="tl _block">
<XTimeline <XTimeline
ref="tl" ref="tl"
:key="src" :key="src"
@ -34,13 +34,14 @@
:sound="true" :sound="true"
@queue="queueUpdated" @queue="queueUpdated"
/> />
</div> </div> *v-else on next div* -->
<div v-else class="tl _block"> <div class="tl _block">
<swiper <swiper
:modules="[Pagination, Virtual]" :modules="[Pagination, Virtual]"
:space-between="20" :space-between="20"
:virtual="true" :virtual="true"
@swiper="setSwiperRef" @swiper="setSwiperRef"
@slide-change="onSlideChange"
> >
<swiper-slide <swiper-slide
v-for="index in timelines" v-for="index in timelines"
@ -79,7 +80,7 @@ import { definePageMetadata } from '@/scripts/page-metadata';
import { deviceKind } from '@/scripts/device-kind'; import { deviceKind } from '@/scripts/device-kind';
import 'swiper/scss'; import 'swiper/scss';
import 'swiper/scss/pagination'; import 'swiper/scss/pagination';
import 'swiper/css/virtual'; import 'swiper/scss/virtual';
const XTutorial = defineAsyncComponent(() => import('./timeline.tutorial.vue')); const XTutorial = defineAsyncComponent(() => import('./timeline.tutorial.vue'));
@ -148,7 +149,7 @@ async function chooseAntenna(ev: MouseEvent): Promise<void> {
} }
function saveSrc( function saveSrc(
newSrc: 'home' | 'local' | 'recommended' | 'social' | 'global' newSrc: 'home' | 'local' | 'recommended' | 'social' | 'global',
): void { ): void {
defaultStore.set('tl', { defaultStore.set('tl', {
...defaultStore.state.tl, ...defaultStore.state.tl,
@ -271,13 +272,17 @@ if (isGlobalTimelineAvailable) {
let swiperRef = null; let swiperRef = null;
const setSwiperRef = (swiper) => { function setSwiperRef(swiper) {
swiperRef = swiper; swiperRef = swiper;
}; }
const slideTo = (index) => { function onSlideChange() {
if (swiperRef) {
const index = swiperRef.activeIndex;
saveSrc(timelines[swiperRef.activeIndex]);
swiperRef.slideTo(index - 1, 0); swiperRef.slideTo(index - 1, 0);
}; }
}
</script> </script>