reafactor: out scroller
Varun Patil
parent
8ae1ed1e4f
commit
b088730507
|
|
@ -0,0 +1,415 @@
|
|||
<template>
|
||||
<div class="scroller"
|
||||
v-bind:class="{
|
||||
'scrolling-recycler': scrollingRecycler,
|
||||
'scrolling': scrolling,
|
||||
}"
|
||||
@mousemove="mousemove"
|
||||
@touchmove="touchmove"
|
||||
@mouseleave="mouseleave"
|
||||
@mousedown="mousedown">
|
||||
|
||||
<span class="cursor st" ref="cursorSt"
|
||||
:style="{ transform: `translateY(${cursorY}px)` }">
|
||||
</span>
|
||||
|
||||
<span class="cursor hv"
|
||||
:style="{ transform: `translateY(${hoverCursorY}px)` }">
|
||||
<div class="text"> {{ hoverCursorText }} </div>
|
||||
<div class="icon"> <ScrollIcon :size="20" /> </div>
|
||||
</span>
|
||||
|
||||
<div v-for="tick of visibleTicks" :key="tick.dayId"
|
||||
class="tick"
|
||||
:class="{ 'dash': !tick.text }"
|
||||
:style="{ top: tick.topC + 'px' }">
|
||||
|
||||
<span v-if="tick.text">{{ tick.text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Mixins, Prop } from 'vue-property-decorator';
|
||||
import { IDay, IHeadRow, ITick } from '../types';
|
||||
import GlobalMixin from '../mixins/GlobalMixin';
|
||||
import ScrollIcon from 'vue-material-design-icons/UnfoldMoreHorizontal.vue';
|
||||
|
||||
import * as utils from "../services/Utils";
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
ScrollIcon,
|
||||
},
|
||||
})
|
||||
export default class ScrollerManager extends Mixins(GlobalMixin) {
|
||||
/** Days from Timeline */
|
||||
@Prop() days!: IDay[];
|
||||
/** Heads from Timeline */
|
||||
@Prop() heads!: { [dayid: number]: IHeadRow };
|
||||
/** Total height */
|
||||
@Prop() height!: number;
|
||||
/** Height of a row */
|
||||
@Prop() rowHeight!: number;
|
||||
/** Actual recycler component */
|
||||
@Prop() recycler!: any;
|
||||
/** Recycler before slot component */
|
||||
@Prop() recyclerBefore!: any;
|
||||
|
||||
/** Height of the entire photo view */
|
||||
private recyclerHeight!: number;
|
||||
/** Computed ticks */
|
||||
private ticks: ITick[] = [];
|
||||
/** Computed cursor top */
|
||||
private cursorY = 0;
|
||||
/** Hover cursor top */
|
||||
private hoverCursorY = -5;
|
||||
/** Hover cursor text */
|
||||
private hoverCursorText = "";
|
||||
/** Scrolling currently */
|
||||
private scrolling = false;
|
||||
/** Scrolling timer */
|
||||
private scrollingTimer = null as number | null;
|
||||
/** Scrolling recycler currently */
|
||||
private scrollingRecycler = false;
|
||||
/** Scrolling recycler timer */
|
||||
private scrollingRecyclerTimer = null as number | null;
|
||||
/** View size reflow timer */
|
||||
private reflowRequest = false;
|
||||
|
||||
/** Get the visible ticks */
|
||||
get visibleTicks() {
|
||||
return this.ticks.filter(tick => tick.s);
|
||||
}
|
||||
|
||||
/** Reset state */
|
||||
public reset() {
|
||||
this.ticks = [];
|
||||
this.cursorY = 0;
|
||||
this.hoverCursorY = -5;
|
||||
this.hoverCursorText = "";
|
||||
this.scrolling = false;
|
||||
this.scrollingTimer = null;
|
||||
this.reflowRequest = false;
|
||||
}
|
||||
|
||||
/** Recycler scroll event, must be called by timeline */
|
||||
public recyclerScrolled(event?: any) {
|
||||
this.cursorY = event ? event.target.scrollTop * this.height / this.recyclerHeight : 0;
|
||||
this.moveHoverCursor(this.cursorY);
|
||||
|
||||
if (this.scrollingRecyclerTimer) window.clearTimeout(this.scrollingRecyclerTimer);
|
||||
this.scrollingRecycler = true;
|
||||
this.scrollingRecyclerTimer = window.setTimeout(() => {
|
||||
this.scrollingRecycler = false;
|
||||
this.scrollingRecyclerTimer = null;
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
/** Re-create tick data in the next frame */
|
||||
public async reflow(orderOnly = false) {
|
||||
if (this.reflowRequest) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.reflowRequest = true;
|
||||
await this.$nextTick();
|
||||
this.reflowNow(orderOnly);
|
||||
this.reflowRequest = false;
|
||||
}
|
||||
|
||||
/** Re-create tick data */
|
||||
private reflowNow(orderOnly = false) {
|
||||
if (!orderOnly) {
|
||||
this.recreate();
|
||||
}
|
||||
|
||||
this.recyclerHeight = this.recycler.$refs.wrapper.clientHeight;
|
||||
|
||||
// Static extra height at top
|
||||
const rb = this.recyclerBefore as Element;
|
||||
const extraHeight = rb?.clientHeight || 0;
|
||||
|
||||
// Compute tick positions
|
||||
for (const tick of this.ticks) {
|
||||
tick.topC = (extraHeight + tick.topS + tick.top * this.rowHeight) * this.height / this.recyclerHeight;
|
||||
}
|
||||
|
||||
// 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 as any).fontSize);
|
||||
const minGap = fontSizePx + (window.innerWidth <= 768 ? 5 : 2);
|
||||
let prevShow = -9999;
|
||||
for (const [idx, tick] of this.ticks.entries()) {
|
||||
// You can't see these anyway, why bother?
|
||||
if (tick.topC < minGap || tick.topC > this.height - minGap) {
|
||||
tick.s = false;
|
||||
continue;
|
||||
}
|
||||
|
||||
// Will overlap with the previous tick. Skip anyway.
|
||||
if (tick.topC - prevShow < minGap) {
|
||||
tick.s = false;
|
||||
continue;
|
||||
}
|
||||
|
||||
// This is a labelled tick then show it anyway for the sake of best effort
|
||||
if (tick.text) {
|
||||
tick.s = true;
|
||||
prevShow = tick.topC;
|
||||
continue;
|
||||
}
|
||||
|
||||
// Lookahead for next labelled tick
|
||||
// If showing this tick would overlap the next one, don't show this one
|
||||
let i = idx + 1;
|
||||
while(i < this.ticks.length) {
|
||||
if (this.ticks[i].text) {
|
||||
break;
|
||||
}
|
||||
i++;
|
||||
}
|
||||
if (i < this.ticks.length) {
|
||||
// A labelled tick was found
|
||||
const nextLabelledTick = this.ticks[i];
|
||||
if (tick.topC + minGap > nextLabelledTick.topC &&
|
||||
nextLabelledTick.topC < this.height - minGap) { // make sure this will be shown
|
||||
tick.s = false;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
// Show this tick
|
||||
tick.s = true;
|
||||
prevShow = tick.topC;
|
||||
}
|
||||
}
|
||||
|
||||
/** Recreate from scratch */
|
||||
private recreate() {
|
||||
// Clear
|
||||
this.ticks = [];
|
||||
|
||||
// Ticks
|
||||
let currTopRow = 0;
|
||||
let currTopStatic = 0;
|
||||
let prevYear = 9999;
|
||||
let prevMonth = 0;
|
||||
const thisYear = new Date().getFullYear();
|
||||
|
||||
// Get a new tick
|
||||
const getTick = (day: IDay, text?: string | number): ITick => {
|
||||
return {
|
||||
dayId: day.dayid,
|
||||
top: currTopRow,
|
||||
topS: currTopStatic,
|
||||
topC: 0,
|
||||
text: text,
|
||||
};
|
||||
}
|
||||
|
||||
// Itearte over days
|
||||
for (const day of this.days) {
|
||||
if (day.count === 0) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (Object.values(this.TagDayID).includes(day.dayid)) {
|
||||
// Blank dash ticks only
|
||||
this.ticks.push(getTick(day));
|
||||
} else {
|
||||
// Make date string
|
||||
const dateTaken = utils.dayIdToDate(day.dayid);
|
||||
|
||||
// Create tick if month changed
|
||||
const dtYear = dateTaken.getUTCFullYear();
|
||||
const dtMonth = dateTaken.getUTCMonth()
|
||||
if (Number.isInteger(day.dayid) && (dtMonth !== prevMonth || dtYear !== prevYear)) {
|
||||
this.ticks.push(getTick(day, (dtYear === prevYear || dtYear === thisYear) ? undefined : dtYear));
|
||||
}
|
||||
prevMonth = dtMonth;
|
||||
prevYear = dtYear;
|
||||
}
|
||||
|
||||
currTopStatic += this.heads[day.dayid].size;
|
||||
currTopRow += day.rows.size;
|
||||
}
|
||||
}
|
||||
|
||||
/** Change actual position of the hover cursor */
|
||||
private moveHoverCursor(y: number) {
|
||||
this.hoverCursorY = y;
|
||||
|
||||
// Get index of previous tick
|
||||
let idx = this.ticks.findIndex(t => t.topC > y);
|
||||
if (idx >= 1) {
|
||||
idx = idx - 1;
|
||||
} else if (idx === -1 && this.ticks.length > 0) {
|
||||
idx = this.ticks.length - 1;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
|
||||
// DayId of current hover
|
||||
const dayId = this.ticks[idx].dayId
|
||||
|
||||
// Special days
|
||||
if (Object.values(this.TagDayID).includes(dayId)) {
|
||||
this.hoverCursorText = "";
|
||||
return;
|
||||
}
|
||||
|
||||
const date = utils.dayIdToDate(dayId);
|
||||
this.hoverCursorText = utils.getShortDateStr(date);
|
||||
}
|
||||
|
||||
/** Handle mouse hover */
|
||||
private mousemove(event: MouseEvent) {
|
||||
if (event.buttons) {
|
||||
this.mousedown(event);
|
||||
}
|
||||
this.moveHoverCursor(event.offsetY);
|
||||
}
|
||||
|
||||
/** Handle mouse leave */
|
||||
private mouseleave() {
|
||||
this.moveHoverCursor(this.cursorY);
|
||||
}
|
||||
|
||||
/** Handle mouse click */
|
||||
private mousedown(event: MouseEvent) {
|
||||
this.recycler.scrollToPosition(this.getRecyclerY(event.offsetY));
|
||||
this.handleScroll();
|
||||
}
|
||||
|
||||
/** Handle touch */
|
||||
private touchmove(event: any) {
|
||||
const rect = event.target.getBoundingClientRect();
|
||||
const y = event.targetTouches[0].pageY - rect.top;
|
||||
this.recycler.scrollToPosition(this.getRecyclerY(y));
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
this.handleScroll();
|
||||
}
|
||||
|
||||
/** Update this is being used to scroll recycler */
|
||||
private handleScroll() {
|
||||
if (this.scrollingTimer) window.clearTimeout(this.scrollingTimer);
|
||||
this.scrolling = true;
|
||||
this.scrollingTimer = window.setTimeout(() => {
|
||||
this.scrolling = false;
|
||||
this.scrollingTimer = null;
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
/** Get recycler equivalent position from event */
|
||||
private getRecyclerY(y: number) {
|
||||
const tH = this.recyclerHeight;
|
||||
const maxH = this.height;
|
||||
return y * tH / maxH;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@mixin phone {
|
||||
@media (max-width: 768px) { @content; }
|
||||
}
|
||||
|
||||
.scroller {
|
||||
overflow-y: clip;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 36px;
|
||||
top: 0; right: 0;
|
||||
cursor: ns-resize;
|
||||
opacity: 0;
|
||||
transition: opacity .2s ease-in-out;
|
||||
|
||||
// Show on hover or scroll of main window
|
||||
&:hover, &.scrolling-recycler {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Hide ticks on mobile unless hovering
|
||||
@include phone {
|
||||
&:not(.scrolling) {
|
||||
.cursor.hv {
|
||||
left: 12px;
|
||||
border: none;
|
||||
box-shadow: 0 0 5px -3px #000;
|
||||
height: 30px;
|
||||
border-radius: 15px;
|
||||
> .text { display: none; }
|
||||
> .icon { display: block; }
|
||||
}
|
||||
> .tick { opacity: 0; }
|
||||
}
|
||||
.cursor.st { display: none; }
|
||||
}
|
||||
|
||||
> .tick {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
font-size: 0.75em;
|
||||
line-height: 0.75em;
|
||||
font-weight: 600;
|
||||
opacity: 0.95;
|
||||
right: 9px;
|
||||
transform: translateY(-50%);
|
||||
z-index: 1;
|
||||
|
||||
&.dash {
|
||||
height: 4px;
|
||||
width: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color-main-text);
|
||||
opacity: 0.15;
|
||||
display: block;
|
||||
@include phone { display: none; }
|
||||
}
|
||||
|
||||
@include phone {
|
||||
background-color: var(--color-main-background);
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
> .cursor {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
right: 0;
|
||||
background-color: var(--color-primary);
|
||||
min-width: 100%;
|
||||
min-height: 1.5px;
|
||||
will-change: transform;
|
||||
|
||||
&.st {
|
||||
font-size: 0.75em;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.hv {
|
||||
background-color: var(--color-main-background);
|
||||
padding: 2px 5px;
|
||||
border-top: 2px solid var(--color-primary);
|
||||
border-radius: 2px;
|
||||
width: auto;
|
||||
white-space: nowrap;
|
||||
z-index: 100;
|
||||
font-size: 0.95em;
|
||||
font-weight: 600;
|
||||
|
||||
> .icon {
|
||||
display: none;
|
||||
transform: translate(-4px, 2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover > .cursor.st {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -28,7 +28,8 @@
|
|||
>
|
||||
<template #before>
|
||||
<!-- Show dynamic top matter, name of the view -->
|
||||
<div class="recycler-before" ref="recyclerbefore" v-if="!$refs.topmatter.type && list.length > 0">
|
||||
<div class="recycler-before" ref="recyclerBefore"
|
||||
v-show="!$refs.topmatter.type && list.length > 0">
|
||||
{{ getViewName() }}
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -40,13 +41,9 @@
|
|||
<div class="super" v-if="item.super !== undefined">
|
||||
{{ item.super }}
|
||||
</div>
|
||||
<div class="main">
|
||||
<CheckCircle :size="18" class="select" @click="selectionManager.selectHead(item)" />
|
||||
|
||||
<span class="name"
|
||||
@click="selectionManager.selectHead(item)">
|
||||
{{ item.name || getHeadName(item) }}
|
||||
</span>
|
||||
<div class="main" @click="selectionManager.selectHead(item)">
|
||||
<CheckCircle :size="18" class="select" />
|
||||
<span class="name" > {{ item.name || getHeadName(item) }} </span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -77,34 +74,14 @@
|
|||
</template>
|
||||
</RecycleScroller>
|
||||
|
||||
<!-- Timeline scroller -->
|
||||
<div ref="timelineScroll" class="timeline-scroll"
|
||||
v-bind:class="{
|
||||
'scrolling-recycler': scrollingRecycler,
|
||||
'scrolling-timeline': scrollingTimeline,
|
||||
}"
|
||||
@mousemove="timelineHover"
|
||||
@touchmove="timelineTouch"
|
||||
@mouseleave="timelineLeave"
|
||||
@mousedown="timelineClick">
|
||||
<span class="cursor st" ref="cursorSt"
|
||||
:style="{ transform: `translateY(${timelineCursorY}px)` }"></span>
|
||||
<span class="cursor hv"
|
||||
:style="{ transform: `translateY(${timelineHoverCursorY}px)` }">
|
||||
<div class="text"> {{ timelineHoverCursorText }} </div>
|
||||
<div class="icon"> <ScrollIcon :size="20" /> </div>
|
||||
</span>
|
||||
|
||||
<div v-for="tick of visibleTimelineTicks" :key="tick.dayId"
|
||||
class="tick"
|
||||
:class="{ 'dash': !tick.text }"
|
||||
:style="{ top: tick.topC + 'px' }">
|
||||
|
||||
<span v-if="tick.text">{{ tick.text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Managers -->
|
||||
<ScrollerManager ref="scrollerManager"
|
||||
:days="days" :heads="heads"
|
||||
:height="scrollerHeight"
|
||||
:rowHeight="rowHeight"
|
||||
:recycler="$refs.recycler"
|
||||
:recyclerBefore="$refs.recyclerBefore" />
|
||||
|
||||
<SelectionManager ref="selectionManager"
|
||||
:selection="selection" :heads="heads"
|
||||
@refresh="refresh"
|
||||
|
|
@ -131,28 +108,18 @@ import Tag from "./frame/Tag.vue";
|
|||
import Photo from "./frame/Photo.vue";
|
||||
import TopMatter from "./top-matter/TopMatter.vue";
|
||||
import SelectionManager from './SelectionManager.vue';
|
||||
import ScrollerManager from './ScrollerManager.vue';
|
||||
import UserConfig from "../mixins/UserConfig";
|
||||
|
||||
import ArchiveIcon from 'vue-material-design-icons/PackageDown.vue';
|
||||
import CheckCircle from 'vue-material-design-icons/CheckCircle.vue';
|
||||
import PeopleIcon from 'vue-material-design-icons/AccountMultiple.vue';
|
||||
import ImageMultipleIcon from 'vue-material-design-icons/ImageMultiple.vue';
|
||||
import CloseIcon from 'vue-material-design-icons/Close.vue';
|
||||
import ScrollIcon from 'vue-material-design-icons/UnfoldMoreHorizontal.vue';
|
||||
|
||||
const SCROLL_LOAD_DELAY = 100; // Delay in loading data when scrolling
|
||||
const MAX_PHOTO_WIDTH = 175; // Max width of a photo
|
||||
const MIN_COLS = 3; // Min number of columns (on phone, e.g.)
|
||||
|
||||
// Define API routes
|
||||
const API_ROUTES = {
|
||||
DAYS: 'days',
|
||||
DAY: 'days/{dayId}',
|
||||
};
|
||||
for (const [key, value] of Object.entries(API_ROUTES)) {
|
||||
API_ROUTES[key] = '/apps/memories/api/' + value;
|
||||
}
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
Folder,
|
||||
|
|
@ -160,14 +127,13 @@ for (const [key, value] of Object.entries(API_ROUTES)) {
|
|||
Photo,
|
||||
TopMatter,
|
||||
SelectionManager,
|
||||
ScrollerManager,
|
||||
NcEmptyContent,
|
||||
|
||||
CheckCircle,
|
||||
ArchiveIcon,
|
||||
PeopleIcon,
|
||||
ImageMultipleIcon,
|
||||
CloseIcon,
|
||||
ScrollIcon,
|
||||
}
|
||||
})
|
||||
export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
|
||||
|
|
@ -186,37 +152,15 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
|
|||
|
||||
/** Computed row height */
|
||||
private rowHeight = 100;
|
||||
/** Total height of recycler */
|
||||
private viewHeight = 1000;
|
||||
/** Total height of timeline */
|
||||
private timelineHeight = 100;
|
||||
/** Computed timeline ticks */
|
||||
private timelineTicks: ITick[] = [];
|
||||
/** Computed timeline cursor top */
|
||||
private timelineCursorY = 0;
|
||||
/** Timeline hover cursor top */
|
||||
private timelineHoverCursorY = -5;
|
||||
/** Timeline hover cursor text */
|
||||
private timelineHoverCursorText = "";
|
||||
|
||||
/** Current start index */
|
||||
private currentStart = 0;
|
||||
/** Current end index */
|
||||
private currentEnd = 0;
|
||||
/** Scrolling recycler currently */
|
||||
private scrollingRecycler = false;
|
||||
/** Scrolling recycler timer */
|
||||
private scrollingRecyclerTimer = null as number | null;
|
||||
/** Scrolling using the timeline currently */
|
||||
private scrollingTimeline = false;
|
||||
/** Scrolling timeline timer */
|
||||
private scrollingTimelineTimer = null as number | null;
|
||||
/** Resizing timer */
|
||||
private resizeTimer = null as number | null;
|
||||
/** View size reflow timer */
|
||||
private reflowTimelineReq = false;
|
||||
/** Is mobile layout */
|
||||
private isMobile = false;
|
||||
/** Height of the scroller */
|
||||
private scrollerHeight = 100;
|
||||
|
||||
/** Set of dayIds for which images loaded */
|
||||
private loadedDays = new Set<number>();
|
||||
|
|
@ -227,10 +171,13 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
|
|||
private state = Math.random();
|
||||
|
||||
/** Selection manager component */
|
||||
private selectionManager!: SelectionManager;
|
||||
private selectionManager!: SelectionManager & any;
|
||||
/** Scroller manager component */
|
||||
private scrollerManager!: ScrollerManager & any;
|
||||
|
||||
mounted() {
|
||||
this.selectionManager = this.$refs.selectionManager as SelectionManager;
|
||||
this.selectionManager = this.$refs.selectionManager;
|
||||
this.scrollerManager = this.$refs.scrollerManager;
|
||||
this.createState();
|
||||
}
|
||||
|
||||
|
|
@ -273,7 +220,7 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
|
|||
|
||||
/** Reset all state */
|
||||
async resetState() {
|
||||
(this.selectionManager as any).clearSelection();
|
||||
this.selectionManager.clearSelection();
|
||||
this.loading = 0;
|
||||
this.list = [];
|
||||
this.numRows = 0;
|
||||
|
|
@ -281,25 +228,11 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
|
|||
this.days = [];
|
||||
this.currentStart = 0;
|
||||
this.currentEnd = 0;
|
||||
this.timelineTicks = [];
|
||||
this.scrollerManager.reset();
|
||||
this.state = Math.random();
|
||||
this.loadedDays.clear();
|
||||
}
|
||||
|
||||
/** Get view name for dynamic top matter */
|
||||
getViewName() {
|
||||
switch (this.$route.name) {
|
||||
case 'timeline': return this.t('memories', 'Your Timeline');
|
||||
case 'favorites': return this.t('memories', 'Favorites');
|
||||
case 'people': return this.t('memories', 'People');
|
||||
case 'videos': return this.t('memories', 'Videos');
|
||||
case 'archive': return this.t('memories', 'Archive');
|
||||
case 'thisday': return this.t('memories', 'On this day');
|
||||
case 'tags': return this.t('memories', 'Tags');
|
||||
default: return '';
|
||||
}
|
||||
}
|
||||
|
||||
/** Recreate everything */
|
||||
async refresh(preservePosition = false) {
|
||||
// Get current scroll position
|
||||
|
|
@ -331,17 +264,14 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
|
|||
const e = this.$refs.container as Element;
|
||||
let height = e.clientHeight;
|
||||
let width = e.clientWidth;
|
||||
this.timelineHeight = height;
|
||||
this.scrollerHeight = height;
|
||||
|
||||
const recycler = this.$refs.recycler as any;
|
||||
recycler.$el.style.height = (height - 4) + 'px';
|
||||
|
||||
// Mobile devices
|
||||
if (window.innerWidth <= 768) {
|
||||
this.isMobile = true;
|
||||
} else {
|
||||
// Desktop scroller width
|
||||
if (window.innerWidth > 768) {
|
||||
width -= 40;
|
||||
this.isMobile = false;
|
||||
}
|
||||
|
||||
if (this.days.length === 0) {
|
||||
|
|
@ -355,7 +285,7 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
|
|||
this.list.filter(r => r.type !== IRowType.HEAD).forEach(row => {
|
||||
row.size = this.rowHeight;
|
||||
});
|
||||
this.reflowTimeline(true);
|
||||
this.scrollerManager.reflow(true);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -364,15 +294,7 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
|
|||
* the pixel position of the recycler has changed.
|
||||
*/
|
||||
scrollPositionChange(event?: any) {
|
||||
this.timelineCursorY = event ? event.target.scrollTop * this.timelineHeight / this.viewHeight : 0;
|
||||
this.timelineMoveHoverCursor(this.timelineCursorY);
|
||||
|
||||
if (this.scrollingRecyclerTimer) window.clearTimeout(this.scrollingRecyclerTimer);
|
||||
this.scrollingRecycler = true;
|
||||
this.scrollingRecyclerTimer = window.setTimeout(() => {
|
||||
this.scrollingRecycler = false;
|
||||
this.scrollingRecyclerTimer = null;
|
||||
}, 1500);
|
||||
this.scrollerManager.recyclerScrolled(event)
|
||||
}
|
||||
|
||||
/** Trigger when recycler view changes */
|
||||
|
|
@ -488,6 +410,20 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
|
|||
return url;
|
||||
}
|
||||
|
||||
/** Get view name for dynamic top matter */
|
||||
getViewName() {
|
||||
switch (this.$route.name) {
|
||||
case 'timeline': return this.t('memories', 'Your Timeline');
|
||||
case 'favorites': return this.t('memories', 'Favorites');
|
||||
case 'people': return this.t('memories', 'People');
|
||||
case 'videos': return this.t('memories', 'Videos');
|
||||
case 'archive': return this.t('memories', 'Archive');
|
||||
case 'thisday': return this.t('memories', 'On this day');
|
||||
case 'tags': return this.t('memories', 'Tags');
|
||||
default: return '';
|
||||
}
|
||||
}
|
||||
|
||||
/** Get name of header */
|
||||
getHeadName(head: IHeadRow) {
|
||||
// Check cache
|
||||
|
|
@ -515,7 +451,7 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
|
|||
|
||||
/** Fetch timeline main call */
|
||||
async fetchDays() {
|
||||
let url = API_ROUTES.DAYS;
|
||||
let url = '/apps/memories/api/days';
|
||||
let params: any = {};
|
||||
|
||||
try {
|
||||
|
|
@ -634,12 +570,12 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
|
|||
}
|
||||
|
||||
// Fix view height variable
|
||||
await this.reflowTimeline();
|
||||
await this.scrollerManager.reflow();
|
||||
}
|
||||
|
||||
/** Fetch image data for one dayId */
|
||||
async fetchDay(dayId: number) {
|
||||
let url = API_ROUTES.DAY;
|
||||
let url = '/apps/memories/api/days/{dayId}';
|
||||
const params: any = { dayId };
|
||||
|
||||
// Do this in advance to prevent duplicate requests
|
||||
|
|
@ -661,140 +597,6 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
|
|||
}
|
||||
}
|
||||
|
||||
/** Re-create timeline tick data in the next frame */
|
||||
async reflowTimeline(orderOnly = false) {
|
||||
if (this.reflowTimelineReq) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.reflowTimelineReq = true;
|
||||
await this.$nextTick();
|
||||
this.reflowTimelineNow(orderOnly);
|
||||
this.reflowTimelineReq = false;
|
||||
}
|
||||
|
||||
/** Re-create timeline tick data */
|
||||
reflowTimelineNow(orderOnly = false) {
|
||||
if (!orderOnly) {
|
||||
this.recreateTimeline();
|
||||
}
|
||||
|
||||
const recycler: any = this.$refs.recycler;
|
||||
this.viewHeight = recycler.$refs.wrapper.clientHeight;
|
||||
|
||||
// Static extra height at top
|
||||
const rb = this.$refs.recyclerbefore as Element;
|
||||
const extraHeight = rb?.clientHeight || 0;
|
||||
|
||||
// Compute timeline tick positions
|
||||
for (const tick of this.timelineTicks) {
|
||||
tick.topC = (extraHeight + tick.topS + tick.top * this.rowHeight) * this.timelineHeight / this.viewHeight;
|
||||
}
|
||||
|
||||
// Do another pass to figure out which timeline 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 as any).fontSize);
|
||||
const minGap = fontSizePx + (this.isMobile ? 5 : 2);
|
||||
let prevShow = -9999;
|
||||
for (const [idx, tick] of this.timelineTicks.entries()) {
|
||||
// You can't see these anyway, why bother?
|
||||
if (tick.topC < minGap || tick.topC > this.timelineHeight - minGap) {
|
||||
tick.s = false;
|
||||
continue;
|
||||
}
|
||||
|
||||
// Will overlap with the previous tick. Skip anyway.
|
||||
if (tick.topC - prevShow < minGap) {
|
||||
tick.s = false;
|
||||
continue;
|
||||
}
|
||||
|
||||
// This is a labelled tick then show it anyway for the sake of best effort
|
||||
if (tick.text) {
|
||||
tick.s = true;
|
||||
prevShow = tick.topC;
|
||||
continue;
|
||||
}
|
||||
|
||||
// Lookahead for next labelled tick
|
||||
// If showing this tick would overlap the next one, don't show this one
|
||||
let i = idx + 1;
|
||||
while(i < this.timelineTicks.length) {
|
||||
if (this.timelineTicks[i].text) {
|
||||
break;
|
||||
}
|
||||
i++;
|
||||
}
|
||||
if (i < this.timelineTicks.length) {
|
||||
// A labelled tick was found
|
||||
const nextLabelledTick = this.timelineTicks[i];
|
||||
if (tick.topC + minGap > nextLabelledTick.topC &&
|
||||
nextLabelledTick.topC < this.timelineHeight - minGap) { // make sure this will be shown
|
||||
tick.s = false;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
// Show this tick
|
||||
tick.s = true;
|
||||
prevShow = tick.topC;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Recreate the timeline from scratch
|
||||
*/
|
||||
recreateTimeline() {
|
||||
// Clear timeline
|
||||
this.timelineTicks = [];
|
||||
|
||||
// Ticks
|
||||
let currTopRow = 0;
|
||||
let currTopStatic = 0;
|
||||
let prevYear = 9999;
|
||||
let prevMonth = 0;
|
||||
const thisYear = new Date().getFullYear();
|
||||
|
||||
// Get a new tick
|
||||
const getTick = (day: IDay, text?: string | number): ITick => {
|
||||
return {
|
||||
dayId: day.dayid,
|
||||
top: currTopRow,
|
||||
topS: currTopStatic,
|
||||
topC: 0,
|
||||
text: text,
|
||||
};
|
||||
}
|
||||
|
||||
// Itearte over days
|
||||
for (const day of this.days) {
|
||||
if (day.count === 0) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (Object.values(this.TagDayID).includes(day.dayid)) {
|
||||
// Blank dash ticks only
|
||||
this.timelineTicks.push(getTick(day));
|
||||
} else {
|
||||
// Make date string
|
||||
const dateTaken = utils.dayIdToDate(day.dayid);
|
||||
|
||||
// Create tick if month changed
|
||||
const dtYear = dateTaken.getUTCFullYear();
|
||||
const dtMonth = dateTaken.getUTCMonth()
|
||||
if (Number.isInteger(day.dayid) && (dtMonth !== prevMonth || dtYear !== prevYear)) {
|
||||
this.timelineTicks.push(getTick(day, (dtYear === prevYear || dtYear === thisYear) ? undefined : dtYear));
|
||||
}
|
||||
prevMonth = dtMonth;
|
||||
prevYear = dtYear;
|
||||
}
|
||||
|
||||
currTopStatic += this.heads[day.dayid].size;
|
||||
currTopRow += day.rows.size;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Process items from day response.
|
||||
*
|
||||
|
|
@ -905,7 +707,7 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
|
|||
// because one row is always removed in that case
|
||||
// So just reflow the timeline here
|
||||
if (addedRow || spliceCount > 0) {
|
||||
this.reflowTimeline();
|
||||
this.scrollerManager.reflow();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -926,85 +728,6 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
|
|||
};
|
||||
}
|
||||
|
||||
/** Get the visible timeline ticks */
|
||||
get visibleTimelineTicks() {
|
||||
return this.timelineTicks.filter(tick => tick.s);
|
||||
}
|
||||
|
||||
timelineMoveHoverCursor(y: number) {
|
||||
this.timelineHoverCursorY = y;
|
||||
|
||||
// Get index of previous tick
|
||||
let idx = this.timelineTicks.findIndex(t => t.topC > y);
|
||||
if (idx >= 1) {
|
||||
idx = idx - 1;
|
||||
} else if (idx === -1 && this.timelineTicks.length > 0) {
|
||||
idx = this.timelineTicks.length - 1;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
|
||||
// DayId of current hover
|
||||
const dayId = this.timelineTicks[idx].dayId
|
||||
|
||||
// Special days
|
||||
if (Object.values(this.TagDayID).includes(dayId)) {
|
||||
this.timelineHoverCursorText = this.getHeadName(this.heads[dayId]);
|
||||
return;
|
||||
}
|
||||
|
||||
const date = utils.dayIdToDate(dayId);
|
||||
this.timelineHoverCursorText = utils.getShortDateStr(date);
|
||||
}
|
||||
|
||||
/** Handle mouse hover on right timeline */
|
||||
timelineHover(event: MouseEvent) {
|
||||
if (event.buttons) {
|
||||
this.timelineClick(event);
|
||||
}
|
||||
this.timelineMoveHoverCursor(event.offsetY);
|
||||
}
|
||||
|
||||
/** Handle mouse leave on right timeline */
|
||||
timelineLeave() {
|
||||
this.timelineMoveHoverCursor(this.timelineCursorY);
|
||||
}
|
||||
|
||||
/** Handle mouse click on right timeline */
|
||||
timelineClick(event: MouseEvent) {
|
||||
const recycler: any = this.$refs.recycler;
|
||||
recycler.scrollToPosition(this.getTimelinePosition(event.offsetY));
|
||||
this.handleTimelineScroll();
|
||||
}
|
||||
|
||||
/** Handle touch on right timeline */
|
||||
timelineTouch(event: any) {
|
||||
const rect = event.target.getBoundingClientRect();
|
||||
const y = event.targetTouches[0].pageY - rect.top;
|
||||
const recycler: any = this.$refs.recycler;
|
||||
recycler.scrollToPosition(this.getTimelinePosition(y));
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
this.handleTimelineScroll();
|
||||
}
|
||||
|
||||
/** Update that timeline is being used to scroll recycler */
|
||||
handleTimelineScroll() {
|
||||
if (this.scrollingTimelineTimer) window.clearTimeout(this.scrollingTimelineTimer);
|
||||
this.scrollingTimeline = true;
|
||||
this.scrollingTimelineTimer = window.setTimeout(() => {
|
||||
this.scrollingTimeline = false;
|
||||
this.scrollingTimelineTimer = null;
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
/** Get recycler equivalent position from event */
|
||||
getTimelinePosition(y: number) {
|
||||
const tH = this.viewHeight;
|
||||
const maxH = this.timelineHeight;
|
||||
return y * tH / maxH;
|
||||
}
|
||||
|
||||
/** Clicking on photo */
|
||||
clickPhoto(photoComponent: any) {
|
||||
if (this.selection.size > 0) { // selection mode
|
||||
|
|
@ -1014,8 +737,6 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Delete elements from main view with some animation
|
||||
* This function looks horribly slow, probably isn't that bad
|
||||
|
|
@ -1045,7 +766,7 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
|
|||
await new Promise(resolve => setTimeout(resolve, 200));
|
||||
|
||||
// clear selection at this point
|
||||
(this.selectionManager as any).clearSelection(delPhotos);
|
||||
this.selectionManager.clearSelection(delPhotos);
|
||||
|
||||
// Speculate day reflow for animation
|
||||
const exitedLeft = new Set<IPhoto>();
|
||||
|
|
@ -1088,13 +809,12 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
|
|||
});
|
||||
|
||||
// Reflow timeline
|
||||
this.reflowTimeline();
|
||||
this.scrollerManager.reflow();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@mixin phone {
|
||||
@media (max-width: 768px) { @content; }
|
||||
}
|
||||
|
|
@ -1169,103 +889,6 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
|
|||
@include phone { transform: translateX(8px); }
|
||||
}
|
||||
|
||||
/** Timeline */
|
||||
.timeline-scroll {
|
||||
overflow-y: clip;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 36px;
|
||||
top: 0; right: 0;
|
||||
cursor: ns-resize;
|
||||
opacity: 0;
|
||||
transition: opacity .2s ease-in-out;
|
||||
|
||||
// Show timeline on hover or scroll of main window
|
||||
&:hover, &.scrolling-recycler {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Hide ticks on mobile unless hovering
|
||||
@include phone {
|
||||
&:not(.scrolling-timeline) {
|
||||
.cursor.hv {
|
||||
left: 12px;
|
||||
border: none;
|
||||
box-shadow: 0 0 5px -3px #000;
|
||||
height: 30px;
|
||||
border-radius: 15px;
|
||||
> .text { display: none; }
|
||||
> .icon { display: block; }
|
||||
}
|
||||
> .tick { opacity: 0; }
|
||||
}
|
||||
.cursor.st { display: none; }
|
||||
}
|
||||
|
||||
> .tick {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
font-size: 0.75em;
|
||||
line-height: 0.75em;
|
||||
font-weight: 600;
|
||||
opacity: 0.95;
|
||||
right: 9px;
|
||||
transform: translateY(-50%);
|
||||
z-index: 1;
|
||||
|
||||
&.dash {
|
||||
height: 4px;
|
||||
width: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color-main-text);
|
||||
opacity: 0.15;
|
||||
display: block;
|
||||
@include phone { display: none; }
|
||||
}
|
||||
|
||||
@include phone {
|
||||
background-color: var(--color-main-background);
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
> .cursor {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
right: 0;
|
||||
background-color: var(--color-primary);
|
||||
min-width: 100%;
|
||||
min-height: 1.5px;
|
||||
will-change: transform;
|
||||
|
||||
&.st {
|
||||
font-size: 0.75em;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.hv {
|
||||
background-color: var(--color-main-background);
|
||||
padding: 2px 5px;
|
||||
border-top: 2px solid var(--color-primary);
|
||||
border-radius: 2px;
|
||||
width: auto;
|
||||
white-space: nowrap;
|
||||
z-index: 100;
|
||||
font-size: 0.95em;
|
||||
font-weight: 600;
|
||||
|
||||
> .icon {
|
||||
display: none;
|
||||
transform: translate(-4px, 2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover > .cursor.st {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/** Static and dynamic top matter */
|
||||
.top-matter {
|
||||
padding-top: 4px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue