refactor: convert refs to prop
Signed-off-by: Varun Patil <radialapps@gmail.com>pull/877/head
Varun Patil
parent
6931f01bfa
commit
395d0506b9
|
|
@ -75,6 +75,12 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
computed: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
recycler: VueRecyclerType;
|
||||
};
|
||||
},
|
||||
|
||||
/** Height of the cluster */
|
||||
height() {
|
||||
if (this.routeIsAlbums) {
|
||||
|
|
@ -129,12 +135,6 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
methods: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
recycler: VueRecyclerType;
|
||||
};
|
||||
},
|
||||
|
||||
click(item: ICluster) {
|
||||
switch (item.cluster_type) {
|
||||
case 'plus':
|
||||
|
|
@ -146,7 +146,7 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
resize() {
|
||||
this.recyclerWidth = this.refs().recycler?.$el.clientWidth;
|
||||
this.recyclerWidth = this.refs.recycler?.$el.clientWidth;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -50,6 +50,12 @@ export default defineComponent({
|
|||
}),
|
||||
|
||||
computed: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
dtm?: InstanceType<typeof DynamicTopMatter>;
|
||||
};
|
||||
},
|
||||
|
||||
noParams() {
|
||||
return !this.$route.params.name && !this.$route.params.user;
|
||||
},
|
||||
|
|
@ -82,19 +88,13 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
methods: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
dtm?: InstanceType<typeof DynamicTopMatter>;
|
||||
};
|
||||
},
|
||||
|
||||
async routeChange() {
|
||||
try {
|
||||
this.items = [];
|
||||
this.loading++;
|
||||
|
||||
await this.$nextTick();
|
||||
await this.refs().dtm?.refresh?.();
|
||||
await this.refs.dtm?.refresh?.();
|
||||
|
||||
if (this.routeIsAlbums) {
|
||||
this.items = await dav.getAlbums(this.config.album_list_sort);
|
||||
|
|
|
|||
|
|
@ -136,6 +136,14 @@ export default defineComponent({
|
|||
}),
|
||||
|
||||
computed: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
scroller?: HTMLDivElement;
|
||||
cursorSt?: HTMLSpanElement;
|
||||
hoverCursor?: HTMLSpanElement;
|
||||
};
|
||||
},
|
||||
|
||||
/** Get the visible ticks */
|
||||
visibleTicks(): ITick[] {
|
||||
let key = 9999999900;
|
||||
|
|
@ -168,14 +176,6 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
methods: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
scroller?: HTMLDivElement;
|
||||
cursorSt?: HTMLSpanElement;
|
||||
hoverCursor?: HTMLSpanElement;
|
||||
};
|
||||
},
|
||||
|
||||
/** Reset state */
|
||||
reset() {
|
||||
this.ticks = [];
|
||||
|
|
@ -237,7 +237,7 @@ export default defineComponent({
|
|||
|
||||
// Move hover cursor to same position unless hovering
|
||||
// Regardless, we need this call because the internal mapping might have changed
|
||||
if (!utils.isMobile() && this.refs().scroller?.matches(':hover')) {
|
||||
if (!utils.isMobile() && this.refs.scroller?.matches(':hover')) {
|
||||
this.moveHoverCursor(this.hoverCursorY);
|
||||
} else {
|
||||
this.moveHoverCursor(rtop);
|
||||
|
|
@ -330,7 +330,7 @@ export default defineComponent({
|
|||
this.dynTopMatterHeight = this.recyclerBefore?.clientHeight ?? 0;
|
||||
|
||||
// Exclude hover cursor height
|
||||
const hoverCursor = this.refs().hoverCursor;
|
||||
const hoverCursor = this.refs.hoverCursor;
|
||||
this.topPadding = hoverCursor?.offsetHeight ?? 0;
|
||||
|
||||
// Add extra padding for any top elements (top matter, mobile header)
|
||||
|
|
@ -386,12 +386,12 @@ export default defineComponent({
|
|||
/** Mark ticks as visible or invisible */
|
||||
computeVisibleTicks() {
|
||||
// Kind of unrelated here, but refresh rect
|
||||
this.scrollerRect = this.refs().scroller!.getBoundingClientRect();
|
||||
this.scrollerRect = this.refs.scroller!.getBoundingClientRect();
|
||||
|
||||
// Do another pass to figure out which points are visible
|
||||
// This is not as bad as it looks, it's actually 12*O(n)
|
||||
// because there are only 12 months in a year
|
||||
const fontSizePx = parseFloat(getComputedStyle(this.refs().cursorSt!).fontSize);
|
||||
const fontSizePx = parseFloat(getComputedStyle(this.refs.cursorSt!).fontSize);
|
||||
const minGap = fontSizePx + (_m.window.innerWidth <= 768 ? 5 : 2);
|
||||
let prevShow = -9999;
|
||||
for (const [idx, tick] of this.ticks.entries()) {
|
||||
|
|
|
|||
|
|
@ -203,6 +203,12 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
computed: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
multiPathModal: InstanceType<typeof MultiPathSelectionModal>;
|
||||
};
|
||||
},
|
||||
|
||||
pathSelTitle(): string {
|
||||
return this.t('memories', 'Choose Timeline Paths');
|
||||
},
|
||||
|
|
@ -227,19 +233,13 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
methods: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
multiPathModal: InstanceType<typeof MultiPathSelectionModal>;
|
||||
};
|
||||
},
|
||||
|
||||
onClose() {
|
||||
this.$emit('update:open', false);
|
||||
},
|
||||
|
||||
// Paths settings
|
||||
async chooseTimelinePath() {
|
||||
this.refs().multiPathModal.open(this.config.timeline_path.split(';'));
|
||||
this.refs.multiPathModal.open(this.config.timeline_path.split(';'));
|
||||
},
|
||||
|
||||
async saveTimelinePath(paths: string[]) {
|
||||
|
|
|
|||
|
|
@ -47,6 +47,12 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
computed: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
metadata?: InstanceType<typeof Metadata>;
|
||||
};
|
||||
},
|
||||
|
||||
native() {
|
||||
return globalThis.OCA?.Files?.Sidebar;
|
||||
},
|
||||
|
|
@ -91,12 +97,6 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
methods: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
metadata?: InstanceType<typeof Metadata>;
|
||||
};
|
||||
},
|
||||
|
||||
async open(photo: IPhoto | number, filename?: string, useNative = false) {
|
||||
if (!this.reducedOpen && this.native && (!photo || useNative)) {
|
||||
// Open native sidebar
|
||||
|
|
@ -108,7 +108,7 @@ export default defineComponent({
|
|||
await this.$nextTick();
|
||||
|
||||
// Update metadata compoenent
|
||||
const info = await this.refs().metadata?.update(photo);
|
||||
const info = await this.refs.metadata?.update(photo);
|
||||
if (!info) return; // failure or state change
|
||||
this.basename = info.basename;
|
||||
this.handleOpen();
|
||||
|
|
|
|||
|
|
@ -52,6 +52,15 @@ export default defineComponent({
|
|||
}),
|
||||
|
||||
computed: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
container?: HTMLDivElement;
|
||||
primary?: HTMLDivElement;
|
||||
separator?: HTMLDivElement;
|
||||
timelineHeader?: HTMLDivElement;
|
||||
};
|
||||
},
|
||||
|
||||
primary() {
|
||||
switch (this.$route.name) {
|
||||
case 'map':
|
||||
|
|
@ -75,7 +84,7 @@ export default defineComponent({
|
|||
|
||||
mounted() {
|
||||
// Set up hammerjs hooks
|
||||
this.hammer = new Hammer(this.refs().timelineHeader!);
|
||||
this.hammer = new Hammer(this.refs.timelineHeader!);
|
||||
this.hammer.get('swipe').set({
|
||||
direction: Hammer.DIRECTION_VERTICAL,
|
||||
threshold: 3,
|
||||
|
|
@ -90,15 +99,6 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
methods: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
container?: HTMLDivElement;
|
||||
primary?: HTMLDivElement;
|
||||
separator?: HTMLDivElement;
|
||||
timelineHeader?: HTMLDivElement;
|
||||
};
|
||||
},
|
||||
|
||||
isVertical() {
|
||||
return false; // for future
|
||||
},
|
||||
|
|
@ -107,11 +107,11 @@ export default defineComponent({
|
|||
this.pointerDown = true;
|
||||
|
||||
// Get position of primary element
|
||||
const rect = this.refs().primary!.getBoundingClientRect();
|
||||
const rect = this.refs.primary!.getBoundingClientRect();
|
||||
this.primaryPos = this.isVertical() ? rect.top : rect.left;
|
||||
|
||||
// Get size of container element
|
||||
const cRect = this.refs().container!.getBoundingClientRect();
|
||||
const cRect = this.refs.container!.getBoundingClientRect();
|
||||
this.containerSize = this.isVertical() ? cRect.height : cRect.width;
|
||||
|
||||
// Let touch handle itself
|
||||
|
|
@ -148,7 +148,7 @@ export default defineComponent({
|
|||
const ref = this.isVertical() ? pos.clientY : pos.clientX;
|
||||
const newSize = Math.max(ref - this.primaryPos, 50);
|
||||
const pctSize = (newSize / this.containerSize) * 100;
|
||||
this.refs().primary!.style.flexBasis = `${pctSize}%`;
|
||||
this.refs.primary!.style.flexBasis = `${pctSize}%`;
|
||||
},
|
||||
|
||||
daysLoaded({ count }: { count: number }) {
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
<div class="mobile-header-top-gap"></div>
|
||||
|
||||
<!-- Route-specific top matter -->
|
||||
<DynamicTopMatter ref="dtm" @load="refs().scrollerManager.adjust()" />
|
||||
<DynamicTopMatter ref="dtm" @load="refs.scrollerManager.adjust()" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
v-if="item.type === 0"
|
||||
:item="item"
|
||||
:monthView="isMonthView"
|
||||
@click="refs().selectionManager.selectHead(item)"
|
||||
@click="refs.selectionManager.selectHead(item)"
|
||||
/>
|
||||
|
||||
<template v-else>
|
||||
|
|
@ -56,11 +56,11 @@
|
|||
}"
|
||||
:data="photo"
|
||||
:day="item.day"
|
||||
@select="refs().selectionManager.clickSelectionIcon(photo, $event, index)"
|
||||
@pointerdown="refs().selectionManager.clickPhoto(photo, $event, index)"
|
||||
@touchstart="refs().selectionManager.touchstartPhoto(photo, $event, index)"
|
||||
@touchend="refs().selectionManager.touchendPhoto(photo, $event, index)"
|
||||
@touchmove="refs().selectionManager.touchmovePhoto(photo, $event, index)"
|
||||
@select="refs.selectionManager.clickSelectionIcon(photo, $event, index)"
|
||||
@pointerdown="refs.selectionManager.clickPhoto(photo, $event, index)"
|
||||
@touchstart="refs.selectionManager.touchstartPhoto(photo, $event, index)"
|
||||
@touchend="refs.selectionManager.touchendPhoto(photo, $event, index)"
|
||||
@touchmove="refs.selectionManager.touchmovePhoto(photo, $event, index)"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
|
|
@ -72,8 +72,8 @@
|
|||
v-show="!showEmpty"
|
||||
:rows="list"
|
||||
:fullHeight="scrollerHeight"
|
||||
:recycler="refs().recycler"
|
||||
:recyclerBefore="refs().recyclerBefore"
|
||||
:recycler="refs.recycler"
|
||||
:recyclerBefore="refs.recyclerBefore"
|
||||
@interactend="loadScrollView()"
|
||||
/>
|
||||
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
:heads="heads"
|
||||
:rows="list"
|
||||
:isreverse="isMonthView"
|
||||
:recycler="refs().recycler?.$el"
|
||||
:recycler="refs.recycler?.$el"
|
||||
@updateLoading="updateLoading"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -217,6 +217,18 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
computed: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
container?: HTMLDivElement;
|
||||
topmatter?: InstanceType<typeof TopMatter>;
|
||||
dtm?: InstanceType<typeof DynamicTopMatter>;
|
||||
recycler?: VueRecyclerType;
|
||||
recyclerBefore?: HTMLDivElement;
|
||||
selectionManager: InstanceType<typeof SelectionManager>;
|
||||
scrollerManager: InstanceType<typeof ScrollerManager>;
|
||||
};
|
||||
},
|
||||
|
||||
routeHasNative(): boolean {
|
||||
return this.routeIsBase && nativex.has();
|
||||
},
|
||||
|
|
@ -242,18 +254,6 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
methods: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
container?: HTMLDivElement;
|
||||
topmatter?: InstanceType<typeof TopMatter>;
|
||||
dtm?: InstanceType<typeof DynamicTopMatter>;
|
||||
recycler?: VueRecyclerType;
|
||||
recyclerBefore?: HTMLDivElement;
|
||||
selectionManager: InstanceType<typeof SelectionManager>;
|
||||
scrollerManager: InstanceType<typeof ScrollerManager>;
|
||||
};
|
||||
},
|
||||
|
||||
async routeChange(to: Route, from?: Route) {
|
||||
// Always do a hard refresh if the path changes
|
||||
if (from?.path !== to.path) {
|
||||
|
|
@ -295,7 +295,7 @@ export default defineComponent({
|
|||
if (!from) {
|
||||
const index = this.list.findIndex((r) => r.day.dayid === dayid && r.photos?.includes(photo));
|
||||
if (index !== -1) {
|
||||
this.refs().recycler?.scrollToItem(index);
|
||||
this.refs.recycler?.scrollToItem(index);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -331,7 +331,7 @@ export default defineComponent({
|
|||
this.recomputeSizes();
|
||||
|
||||
// Timeline recycler init
|
||||
this.refs().recycler?.$el.addEventListener('scroll', this.scrollPositionChange, { passive: true });
|
||||
this.refs.recycler?.$el.addEventListener('scroll', this.scrollPositionChange, { passive: true });
|
||||
|
||||
// Get data
|
||||
await this.fetchDays();
|
||||
|
|
@ -339,8 +339,8 @@ export default defineComponent({
|
|||
|
||||
/** Reset all state */
|
||||
async resetState() {
|
||||
this.refs().selectionManager.clearSelection();
|
||||
this.refs().scrollerManager.reset();
|
||||
this.refs.selectionManager.clearSelection();
|
||||
this.refs.scrollerManager.reset();
|
||||
this.loading = 0;
|
||||
this.list = [];
|
||||
this.dtmContent = false;
|
||||
|
|
@ -375,7 +375,7 @@ export default defineComponent({
|
|||
* Do not pass this function as a callback directly.
|
||||
*/
|
||||
async softRefreshInternal(sync: boolean) {
|
||||
this.refs().selectionManager.clearSelection();
|
||||
this.refs.selectionManager.clearSelection();
|
||||
this.fetchDayQueue = []; // reset queue
|
||||
|
||||
// Fetch days
|
||||
|
|
@ -394,7 +394,7 @@ export default defineComponent({
|
|||
/** Recompute static sizes of containers */
|
||||
recomputeSizes() {
|
||||
// Size of outer container
|
||||
const e = this.refs().container!;
|
||||
const e = this.refs.container!;
|
||||
const height = e.clientHeight;
|
||||
const width = e.clientWidth;
|
||||
this.containerSize = [width, height];
|
||||
|
|
@ -403,11 +403,11 @@ export default defineComponent({
|
|||
this.scrollerHeight = height;
|
||||
|
||||
// Static top matter to exclude from recycler height
|
||||
const topmatter = this.refs().topmatter;
|
||||
const topmatter = this.refs.topmatter;
|
||||
const tmHeight = topmatter?.$el?.clientHeight || 0;
|
||||
|
||||
// Recycler height
|
||||
const recycler = this.refs().recycler!;
|
||||
const recycler = this.refs.recycler!;
|
||||
const targetHeight = height - tmHeight - 4;
|
||||
const targetWidth = this.isMobile() ? width : width - 40;
|
||||
const heightChanged = recycler.$el.clientHeight !== targetHeight;
|
||||
|
|
@ -449,7 +449,7 @@ export default defineComponent({
|
|||
// At this point we're sure the size has changed, so we need
|
||||
// to invalidate everything related to sizes
|
||||
this.sizedDays.clear();
|
||||
this.refs().scrollerManager.adjust();
|
||||
this.refs.scrollerManager.adjust();
|
||||
|
||||
// Explicitly request a scroll event
|
||||
this.loadScrollView();
|
||||
|
|
@ -462,7 +462,7 @@ export default defineComponent({
|
|||
* the pixel position of the recycler has changed.
|
||||
*/
|
||||
scrollPositionChange(event?: Event) {
|
||||
this.refs().scrollerManager.recyclerScrolled(event ?? null);
|
||||
this.refs.scrollerManager.recyclerScrolled(event ?? null);
|
||||
},
|
||||
|
||||
/** Trigger when recycler view changes (for callback) */
|
||||
|
|
@ -508,7 +508,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
// We only need to debounce loads if the user is dragging the scrollbar
|
||||
const scrolling = this.refs().scrollerManager.interacting;
|
||||
const scrolling = this.refs.scrollerManager.interacting;
|
||||
|
||||
// Make sure we don't do this too often
|
||||
this.currentStart = startIndex;
|
||||
|
|
@ -663,7 +663,7 @@ export default defineComponent({
|
|||
try {
|
||||
this.updateLoading(1);
|
||||
const state = this.state;
|
||||
const res = await this.refs().dtm?.refresh();
|
||||
const res = await this.refs.dtm?.refresh();
|
||||
if (this.state !== state) return;
|
||||
this.dtmContent = res ?? false;
|
||||
} finally {
|
||||
|
|
@ -853,7 +853,7 @@ export default defineComponent({
|
|||
});
|
||||
|
||||
// Fix view height variable
|
||||
await this.refs().scrollerManager.reflow();
|
||||
await this.refs.scrollerManager.reflow();
|
||||
this.scrollPositionChange();
|
||||
|
||||
// Trigger a view refresh. This will load any new placeholders too.
|
||||
|
|
@ -1090,7 +1090,7 @@ export default defineComponent({
|
|||
let addedRows: IRow[] = [];
|
||||
|
||||
// Recycler scroll top
|
||||
let scrollTop = this.refs().recycler!.$el.scrollTop;
|
||||
let scrollTop = this.refs.recycler!.$el.scrollTop;
|
||||
let needAdjust = false;
|
||||
|
||||
// Get index and Y position of header in O(n)
|
||||
|
|
@ -1209,7 +1209,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
// Restore selection day
|
||||
this.refs().selectionManager.restoreDay(day);
|
||||
this.refs.selectionManager.restoreDay(day);
|
||||
|
||||
// Rows that were removed
|
||||
const removedRows: IRow[] = [];
|
||||
|
|
@ -1251,14 +1251,14 @@ export default defineComponent({
|
|||
if (headRemoved) {
|
||||
// If the head was removed, we need a reflow,
|
||||
// or adjust isn't going to work right
|
||||
this.refs().scrollerManager.reflow();
|
||||
this.refs.scrollerManager.reflow();
|
||||
} else {
|
||||
// Otherwise just adjust the ticks
|
||||
this.refs().scrollerManager.adjust();
|
||||
this.refs.scrollerManager.adjust();
|
||||
}
|
||||
|
||||
// Scroll to new position
|
||||
this.refs().recycler!.$el.scrollTop = scrollTop;
|
||||
this.refs.recycler!.$el.scrollTop = scrollTop;
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -1311,7 +1311,7 @@ export default defineComponent({
|
|||
await new Promise((resolve) => setTimeout(resolve, 200));
|
||||
|
||||
// clear selection at this point
|
||||
this.refs().selectionManager.clearSelection(delPhotos);
|
||||
this.refs.selectionManager.clearSelection(delPhotos);
|
||||
|
||||
// Reflow all touched days
|
||||
for (const day of updatedDays) {
|
||||
|
|
|
|||
|
|
@ -124,7 +124,7 @@ export default defineComponent({
|
|||
this.faceSrc = null;
|
||||
|
||||
// Setup video hooks
|
||||
const video = this.refs().video;
|
||||
const video = this.refs.video;
|
||||
if (video) {
|
||||
utils.setupLivePhotoHooks(video);
|
||||
}
|
||||
|
|
@ -141,6 +141,13 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
computed: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
ximg?: InstanceType<typeof XImg> & { $el: HTMLImageElement };
|
||||
video?: HTMLVideoElement;
|
||||
};
|
||||
},
|
||||
|
||||
videoDuration(): string | null {
|
||||
if (this.data.video_duration) {
|
||||
return utils.getDurationStr(this.data.video_duration);
|
||||
|
|
@ -171,13 +178,6 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
methods: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
ximg?: InstanceType<typeof XImg> & { $el: HTMLImageElement };
|
||||
video?: HTMLVideoElement;
|
||||
};
|
||||
},
|
||||
|
||||
/** Get url of the photo */
|
||||
url() {
|
||||
let base: 256 | 512 = 256;
|
||||
|
|
@ -202,7 +202,7 @@ export default defineComponent({
|
|||
async addFaceRect() {
|
||||
if (!this.data.facerect || this.faceSrc) return;
|
||||
|
||||
const img = this.refs().ximg?.$el;
|
||||
const img = this.refs.ximg?.$el;
|
||||
if (!img) return;
|
||||
|
||||
// This is a hack to check if img is actually loaded.
|
||||
|
|
@ -255,7 +255,7 @@ export default defineComponent({
|
|||
|
||||
/** Start preview video */
|
||||
playVideo() {
|
||||
const video = this.refs().video;
|
||||
const video = this.refs.video;
|
||||
if (video && !(this.data.flag & this.c.FLAG_SELECTED)) {
|
||||
video.currentTime = 0;
|
||||
video.play();
|
||||
|
|
@ -264,7 +264,7 @@ export default defineComponent({
|
|||
|
||||
/** Stop preview video */
|
||||
stopVideo() {
|
||||
this.refs().video?.pause();
|
||||
this.refs.video?.pause();
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -206,6 +206,12 @@ export default defineComponent({
|
|||
}),
|
||||
|
||||
computed: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
popover?: VueNcPopover;
|
||||
};
|
||||
},
|
||||
|
||||
searchResults(): string[] {
|
||||
return this.currentSearchResults
|
||||
.filter(({ id }) => id !== utils.uid)
|
||||
|
|
@ -243,18 +249,12 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
methods: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
popover?: VueNcPopover;
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* Fetch possible collaborators.
|
||||
*/
|
||||
async searchCollaborators() {
|
||||
if (this.searchText.length >= 1) {
|
||||
this.refs().popover?.$refs.popover.show();
|
||||
this.refs.popover?.$refs.popover.show();
|
||||
}
|
||||
|
||||
try {
|
||||
|
|
@ -405,7 +405,7 @@ export default defineComponent({
|
|||
return;
|
||||
}
|
||||
|
||||
this.refs().popover?.$refs.popover.hide();
|
||||
this.refs.popover?.$refs.popover.hide();
|
||||
this.selectedCollaboratorsKeys.push(collaboratorKey);
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -139,6 +139,12 @@ export default defineComponent({
|
|||
}),
|
||||
|
||||
computed: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
nameInput?: VueHTMLComponent;
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* @return Whether sharing is enabled.
|
||||
*/
|
||||
|
|
@ -164,17 +170,11 @@ export default defineComponent({
|
|||
this.albumLocation = this.album.location;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.refs().nameInput?.$el.getElementsByTagName('input')[0].focus();
|
||||
this.refs.nameInput?.$el.getElementsByTagName('input')[0].focus();
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
nameInput?: VueHTMLComponent;
|
||||
};
|
||||
},
|
||||
|
||||
submit(collaborators: any[] = []) {
|
||||
if (this.albumName === '' || this.loading) {
|
||||
return;
|
||||
|
|
|
|||
|
|
@ -145,6 +145,12 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
computed: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
albumsList?: VueHTMLComponent;
|
||||
};
|
||||
},
|
||||
|
||||
filteredList() {
|
||||
if (!this.albums || !this.search || !this.fuse) return this.albums || [];
|
||||
return this.fuse.search(this.search).map((r) => r.item);
|
||||
|
|
@ -152,12 +158,6 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
methods: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
albumsList?: VueHTMLComponent;
|
||||
};
|
||||
},
|
||||
|
||||
async albumCreatedHandler({ album }: { album: { basename: string } }) {
|
||||
this.showAlbumCreationForm = false;
|
||||
await this.loadAlbums(true);
|
||||
|
|
@ -233,7 +233,7 @@ export default defineComponent({
|
|||
|
||||
forceUpdate() {
|
||||
this.$forceUpdate(); // sets do not trigger reactivity
|
||||
this.refs().albumsList?.$forceUpdate();
|
||||
this.refs.albumsList?.$forceUpdate();
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -93,12 +93,7 @@ export default defineComponent({
|
|||
state: 0,
|
||||
}),
|
||||
|
||||
created() {
|
||||
console.assert(!_m.modals.editMetadata, 'EditMetadataModal created twice');
|
||||
_m.modals.editMetadata = this.open;
|
||||
},
|
||||
|
||||
methods: {
|
||||
computed: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
editDate?: InstanceType<typeof EditDate>;
|
||||
|
|
@ -107,7 +102,14 @@ export default defineComponent({
|
|||
editLocation?: InstanceType<typeof EditLocation>;
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
console.assert(!_m.modals.editMetadata, 'EditMetadataModal created twice');
|
||||
_m.modals.editMetadata = this.open;
|
||||
},
|
||||
|
||||
methods: {
|
||||
async open(photos: IPhoto[], sections: number[] = [1, 2, 3, 4]) {
|
||||
const state = (this.state = Math.random());
|
||||
this.show = true;
|
||||
|
|
@ -159,7 +161,7 @@ export default defineComponent({
|
|||
async save() {
|
||||
// Perform validation
|
||||
try {
|
||||
this.refs().editDate?.validate?.();
|
||||
this.refs.editDate?.validate?.();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
showError(e);
|
||||
|
|
@ -173,14 +175,14 @@ export default defineComponent({
|
|||
|
||||
// Get exif fields diff
|
||||
const exifResult = {
|
||||
...(this.refs().editExif?.result?.() || {}),
|
||||
...(this.refs().editLocation?.result?.() || {}),
|
||||
...(this.refs.editExif?.result?.() || {}),
|
||||
...(this.refs.editLocation?.result?.() || {}),
|
||||
};
|
||||
|
||||
// Tags may be created which might throw
|
||||
let tagsResult: { add: number[]; remove: number[] } | null = null;
|
||||
try {
|
||||
tagsResult = (await this.refs().editTags?.result?.()) ?? null;
|
||||
tagsResult = (await this.refs.editTags?.result?.()) ?? null;
|
||||
} catch (e) {
|
||||
this.processing = false;
|
||||
console.error(e);
|
||||
|
|
@ -195,7 +197,7 @@ export default defineComponent({
|
|||
const raw: IExif = JSON.parse(JSON.stringify(exifResult));
|
||||
|
||||
// Date header
|
||||
const date = this.refs().editDate?.result?.(p);
|
||||
const date = this.refs.editDate?.result?.(p);
|
||||
if (date) {
|
||||
raw.DateTimeOriginal = date;
|
||||
raw.CreateDate = date;
|
||||
|
|
|
|||
|
|
@ -45,17 +45,19 @@ export default defineComponent({
|
|||
newTags: new Map<number, dav.ITag>(),
|
||||
}),
|
||||
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
|
||||
methods: {
|
||||
computed: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
selectTags: VueNcSelectTags;
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
|
||||
methods: {
|
||||
init() {
|
||||
let tagIds: number[] | null = null;
|
||||
|
||||
|
|
@ -99,7 +101,7 @@ export default defineComponent({
|
|||
|
||||
getAvailable(): dav.ITag[] {
|
||||
// FIXME: this is extremely fragile
|
||||
return this.refs().selectTags.availableTags;
|
||||
return this.refs.selectTags.availableTags;
|
||||
},
|
||||
|
||||
handleCreate(newTag: dav.ITag) {
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
<NcActions :inline="isMobile ? 1 : 3">
|
||||
<NcActionButton
|
||||
:aria-label="t('memories', 'Create new album')"
|
||||
@click="refs().createModal.open(false)"
|
||||
@click="refs.createModal.open(false)"
|
||||
close-after-click
|
||||
v-if="isAlbumList"
|
||||
>
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
</NcActionButton>
|
||||
<NcActionButton
|
||||
:aria-label="t('memories', 'Share album')"
|
||||
@click="refs().shareModal.open()"
|
||||
@click="refs.shareModal.open()"
|
||||
close-after-click
|
||||
v-if="canEditAlbum"
|
||||
>
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
</NcActionButton>
|
||||
<NcActionButton
|
||||
:aria-label="t('memories', 'Edit album details')"
|
||||
@click="refs().createModal.open(true)"
|
||||
@click="refs.createModal.open(true)"
|
||||
close-after-click
|
||||
v-if="canEditAlbum"
|
||||
>
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
</NcActionButton>
|
||||
<NcActionButton
|
||||
:aria-label="t('memories', 'Remove album')"
|
||||
@click="refs().deleteModal.open()"
|
||||
@click="refs.deleteModal.open()"
|
||||
close-after-click
|
||||
v-if="!isAlbumList"
|
||||
>
|
||||
|
|
@ -148,6 +148,14 @@ export default defineComponent({
|
|||
mixins: [UserConfig],
|
||||
|
||||
computed: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
createModal: InstanceType<typeof AlbumCreateModal>;
|
||||
deleteModal: InstanceType<typeof AlbumDeleteModal>;
|
||||
shareModal: InstanceType<typeof AlbumShareModal>;
|
||||
};
|
||||
},
|
||||
|
||||
isAlbumList(): boolean {
|
||||
return !this.$route.params.name;
|
||||
},
|
||||
|
|
@ -167,14 +175,6 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
methods: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
createModal: InstanceType<typeof AlbumCreateModal>;
|
||||
deleteModal: InstanceType<typeof AlbumDeleteModal>;
|
||||
shareModal: InstanceType<typeof AlbumShareModal>;
|
||||
};
|
||||
},
|
||||
|
||||
back() {
|
||||
this.$router.go(-1);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -28,6 +28,12 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
computed: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
child?: { refresh?(): Promise<boolean> };
|
||||
};
|
||||
},
|
||||
|
||||
currentmatter(): Component | null {
|
||||
if (this.routeIsFolders) {
|
||||
return FolderDynamicTopMatter;
|
||||
|
|
@ -62,16 +68,10 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
methods: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
child?: { refresh?(): Promise<boolean> };
|
||||
};
|
||||
},
|
||||
|
||||
async refresh(): Promise<boolean> {
|
||||
if (this.currentmatter) {
|
||||
await this.$nextTick();
|
||||
return (await this.refs().child?.refresh?.()) ?? false;
|
||||
return (await this.refs.child?.refresh?.()) ?? false;
|
||||
}
|
||||
|
||||
return false;
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
</NcActionButton>
|
||||
<NcActionButton
|
||||
:aria-label="t('memories', 'Merge with different person')"
|
||||
@click="refs().mergeModal.open()"
|
||||
@click="refs.mergeModal.open()"
|
||||
close-after-click
|
||||
>
|
||||
{{ t('memories', 'Merge with different person') }}
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
</NcActionCheckbox>
|
||||
<NcActionButton
|
||||
:aria-label="t('memories', 'Remove person')"
|
||||
@click="refs().deleteModal.open()"
|
||||
@click="refs.deleteModal.open()"
|
||||
close-after-click
|
||||
>
|
||||
{{ t('memories', 'Remove person') }}
|
||||
|
|
@ -96,6 +96,14 @@ export default defineComponent({
|
|||
mixins: [UserConfig],
|
||||
|
||||
computed: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
editModal: InstanceType<typeof FaceEditModal>;
|
||||
deleteModal: InstanceType<typeof FaceDeleteModal>;
|
||||
mergeModal: InstanceType<typeof FaceMergeModal>;
|
||||
};
|
||||
},
|
||||
|
||||
name() {
|
||||
return this.$route.params.name || '';
|
||||
},
|
||||
|
|
@ -117,20 +125,12 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
methods: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
editModal: InstanceType<typeof FaceEditModal>;
|
||||
deleteModal: InstanceType<typeof FaceDeleteModal>;
|
||||
mergeModal: InstanceType<typeof FaceMergeModal>;
|
||||
};
|
||||
},
|
||||
|
||||
back() {
|
||||
this.$router.go(-1);
|
||||
},
|
||||
|
||||
rename() {
|
||||
if (this.isReal) this.refs().editModal.open();
|
||||
if (this.isReal) this.refs.editModal.open();
|
||||
},
|
||||
|
||||
openUnassigned() {
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@ export default defineComponent({
|
|||
|
||||
mounted() {
|
||||
// Make sure the zoom control doesn't overlap with the navbar
|
||||
this.refs().map.mapObject.zoomControl.setPosition('topright');
|
||||
this.refs.map.mapObject.zoomControl.setPosition('topright');
|
||||
|
||||
// Initialize
|
||||
this.initialize();
|
||||
|
|
@ -108,6 +108,12 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
computed: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
map: LMap;
|
||||
};
|
||||
},
|
||||
|
||||
tileurl() {
|
||||
return OSM_TILE_URL;
|
||||
},
|
||||
|
|
@ -125,12 +131,6 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
methods: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
map: LMap;
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* Get initial coordinates for display and set them.
|
||||
* Then fetch clusters.
|
||||
|
|
@ -154,7 +154,7 @@ export default defineComponent({
|
|||
}>(API.MAP_INIT());
|
||||
|
||||
// Init data contains position information
|
||||
const map = this.refs().map;
|
||||
const map = this.refs.map;
|
||||
const pos = init?.data?.pos;
|
||||
if (!pos?.lat || !pos?.lon) {
|
||||
throw new Error('No position data');
|
||||
|
|
@ -174,7 +174,7 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
async refresh() {
|
||||
const map = this.refs().map;
|
||||
const map = this.refs.map;
|
||||
if (!map || !map.mapObject) return;
|
||||
|
||||
// Get boundaries of the map
|
||||
|
|
@ -275,7 +275,7 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
setBoundsFromQuery() {
|
||||
const map = this.refs().map;
|
||||
const map = this.refs.map;
|
||||
const { minLat, maxLat, minLon, maxLon } = this.boundsFromQuery();
|
||||
map.mapObject.fitBounds([
|
||||
[minLat, minLon],
|
||||
|
|
@ -303,7 +303,7 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
// Zoom in
|
||||
const map = this.refs().map;
|
||||
const map = this.refs.map;
|
||||
const factor = globalThis.innerWidth >= 768 ? 2 : 1;
|
||||
const zoom = map.mapObject.getZoom() + factor;
|
||||
map.mapObject.setView(cluster.center, zoom, { animate: true });
|
||||
|
|
@ -403,7 +403,7 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
handleContainerResize() {
|
||||
this.refs().map?.mapObject?.invalidateSize(true);
|
||||
this.refs.map?.mapObject?.invalidateSize(true);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -71,8 +71,16 @@ export default defineComponent({
|
|||
resizeObserver: null! as ResizeObserver,
|
||||
}),
|
||||
|
||||
computed: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
inner?: HTMLDivElement;
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
const inner = this.refs().inner!;
|
||||
const inner = this.refs.inner!;
|
||||
|
||||
inner.addEventListener('scroll', this.onScroll.bind(this), {
|
||||
passive: true,
|
||||
|
|
@ -89,12 +97,6 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
methods: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
inner?: HTMLDivElement;
|
||||
};
|
||||
},
|
||||
|
||||
onload() {
|
||||
this.$emit('load');
|
||||
},
|
||||
|
|
@ -174,12 +176,12 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
moveLeft() {
|
||||
const inner = this.refs().inner!;
|
||||
const inner = this.refs.inner!;
|
||||
inner.scrollBy(-(this.scrollStack.pop() || inner.clientWidth), 0);
|
||||
},
|
||||
|
||||
moveRight() {
|
||||
const inner = this.refs().inner!;
|
||||
const inner = this.refs.inner!;
|
||||
const innerRect = inner.getBoundingClientRect();
|
||||
const nextChild = Array.from(inner.children)
|
||||
.map((c) => c.getBoundingClientRect())
|
||||
|
|
@ -192,7 +194,7 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
onScroll() {
|
||||
const inner = this.refs().inner;
|
||||
const inner = this.refs.inner;
|
||||
if (!inner) return;
|
||||
this.hasLeft = inner.scrollLeft > 0;
|
||||
this.hasRight = inner.clientWidth + inner.scrollLeft < inner.scrollWidth - 20;
|
||||
|
|
|
|||
|
|
@ -54,6 +54,12 @@ export default defineComponent({
|
|||
}),
|
||||
|
||||
computed: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
editor?: HTMLDivElement;
|
||||
};
|
||||
},
|
||||
|
||||
config(): FilerobotImageEditorConfig & { theme: any } {
|
||||
return {
|
||||
source:
|
||||
|
|
@ -173,7 +179,7 @@ export default defineComponent({
|
|||
async mounted() {
|
||||
await loadFilerobot();
|
||||
|
||||
const div = this.refs().editor!;
|
||||
const div = this.refs.editor!;
|
||||
console.assert(div, 'ImageEditor container not found');
|
||||
|
||||
// Directly use an HTML element to make sure the resolution
|
||||
|
|
@ -197,12 +203,6 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
methods: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
editor?: HTMLDivElement;
|
||||
};
|
||||
},
|
||||
|
||||
async getImage(): Promise<HTMLImageElement> {
|
||||
const img = new Image();
|
||||
img.name = this.defaultSavedImageName;
|
||||
|
|
|
|||
|
|
@ -308,6 +308,12 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
computed: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
inner: HTMLDivElement;
|
||||
};
|
||||
},
|
||||
|
||||
/** Number of buttons to show inline */
|
||||
numInlineActions(): number {
|
||||
let base = 3;
|
||||
|
|
@ -388,12 +394,6 @@ export default defineComponent({
|
|||
},
|
||||
|
||||
methods: {
|
||||
refs() {
|
||||
return this.$refs as {
|
||||
inner: HTMLDivElement;
|
||||
};
|
||||
},
|
||||
|
||||
fetchDay(dayId: number) {
|
||||
utils.bus.emit('memories:timeline:fetch-day', dayId);
|
||||
},
|
||||
|
|
@ -462,7 +462,7 @@ export default defineComponent({
|
|||
loop: false,
|
||||
wheelToZoom: true,
|
||||
bgOpacity: 1,
|
||||
appendToEl: this.refs().inner!,
|
||||
appendToEl: this.refs.inner!,
|
||||
preload: [2, 2],
|
||||
bgClickAction: 'toggle-controls',
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue