RPJosh
/
memories
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Allow more component reuse

pull/62/head
Varun Patil 2022-09-14 20:52:58 -07:00
parent 8c9f52c4e2
commit 788662c676
6 changed files with 48 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/memories-main.js
View File

File diff suppressed because one or more lines are too long

2
js/memories-main.js.map
View File

File diff suppressed because one or more lines are too long

27
src/components/Photo.vue
View File

@ -18,20 +18,19 @@
<div class="img-outer" :style="{
width: rowHeight + 'px',
height: rowHeight + 'px',
}">
}"
@click="click"
@contextmenu="contextmenu"
@touchstart="touchstart"
@touchmove="touchend"
@touchend="touchend"
@touchcancel="touchend" >
<img
:src="getSrc()"
:src="src()"
:key="data.fileid"
@click="click"
@error="error"
@load="load"
@contextmenu="contextmenu"
@touchstart="touchstart"
@touchmove="touchend"
@touchend="touchend"
@touchcancel="touchend" />
@load="load" />
</div>
</div>
</template>
@ -58,7 +57,7 @@ export default class Photo extends Mixins(GlobalMixin) {
@Emit('clickImg') emitClickImg(component: any) {}
/** Get src for image to show */
getSrc() {
src() {
if (this.data.flag & this.c.FLAG_PLACEHOLDER) {
return undefined;
} else if (this.data.flag & this.c.FLAG_LOAD_FAIL) {
@ -67,13 +66,13 @@ export default class Photo extends Mixins(GlobalMixin) {
this.data.flag &= ~this.c.FLAG_FORCE_RELOAD;
return undefined;
} else {
return this.getUrl();
return this.url;
}
}
/** Get url of the photo */
getUrl() {
return getPreviewUrl(this.data.fileid, this.data.etag);
get url() {
return getPreviewUrl(this.data.fileid, this.data.etag)
}
/** Image loaded successfully */

35
src/components/Timeline.vue
View File

@ -2,27 +2,29 @@
<div class="container" ref="container" :class="{ 'icon-loading': loading }">
<!-- Main recycler view for rows -->
<RecycleScroller
:key="state"
ref="recycler"
class="recycler"
:key="state"
:items="list"
size-field="size"
key-field="id"
v-slot="{ item }"
:emit-update="true"
key-field="id"
size-field="size"
type-field="type"
v-slot="{ item }"
@update="scrollChange"
@resize="handleResizeWithDelay"
>
<h1 v-if="item.head" class="head-row" :class="{ 'first': item.id === 1 }">
{{ getHeadName(item) }}
<h1 v-if="item.type === 0" class="head-row"
:class="{ 'first': item.id === 1 }">
{{ item.name || getHeadName(item) }}
</h1>
<div v-else
class="photo-row"
:style="{ height: rowHeight + 'px' }">
<div class="photo" v-for="photo of item.photos" :key="photo.fileid">
<Folder v-if="photo.isfolder"
<div class="photo" v-for="(photo, index) in item.photos" :key="index">
<Folder v-if="photo.flag & c.FLAG_IS_FOLDER"
:data="photo"
:rowHeight="rowHeight" />
<Photo v-else
@ -96,7 +98,7 @@
<script lang="ts">
import { Component, Watch, Mixins } from 'vue-property-decorator';
import { IDay, IPhoto, IRow, ITick } from "../types";
import { IDay, IPhoto, IRow, IRowType, ITick } from "../types";
import { NcActions, NcActionButton, NcButton } from '@nextcloud/vue';
import { generateUrl } from '@nextcloud/router'
import GlobalMixin from '../mixins/GlobalMixin';
@ -275,7 +277,7 @@ export default class Timeline extends Mixins(GlobalMixin) {
this.rowHeight = Math.floor(width / this.numCols);
// Set heights of rows
this.list.filter(r => !r.head).forEach(row => {
this.list.filter(r => r.type === IRowType.PHOTOS).forEach(row => {
row.size = this.rowHeight;
});
this.reflowTimeline(true);
@ -473,7 +475,7 @@ export default class Timeline extends Mixins(GlobalMixin) {
const head = {
id: ++this.numRows,
size: 40,
head: true,
type: IRowType.HEAD,
dayId: day.dayid,
day: day,
};
@ -693,7 +695,7 @@ export default class Timeline extends Mixins(GlobalMixin) {
let dataIdx = 0;
while (dataIdx < data.length) {
// Check if we ran out of rows
if (rowIdx >= this.list.length || this.list[rowIdx].head) {
if (rowIdx >= this.list.length || this.list[rowIdx].type === IRowType.HEAD) {
addedRow = true;
this.list.splice(rowIdx, 0, this.getBlankRow(day));
}
@ -722,6 +724,10 @@ export default class Timeline extends Mixins(GlobalMixin) {
photo.flag |= this.c.FLAG_IS_FAVORITE;
delete photo.isfavorite;
}
if (photo.isfolder) {
photo.flag |= this.c.FLAG_IS_FOLDER;
delete photo.isfolder;
}
this.list[rowIdx].photos.push(photo);
dataIdx++;
@ -739,7 +745,7 @@ export default class Timeline extends Mixins(GlobalMixin) {
// Get rid of any extra rows
let spliceCount = 0;
for (let i = rowIdx + 1; i < this.list.length && !this.list[i].head; i++) {
for (let i = rowIdx + 1; i < this.list.length && this.list[i].type !== IRowType.HEAD; i++) {
spliceCount++;
}
if (spliceCount > 0) {
@ -754,11 +760,12 @@ export default class Timeline extends Mixins(GlobalMixin) {
}
}
/** Get a new blank row */
/** Get a new blank photos row */
getBlankRow(day: IDay): IRow {
return {
id: ++this.numRows,
photos: [],
type: IRowType.PHOTOS,
size: this.rowHeight,
dayId: day.dayid,
day: day,

11
src/mixins/GlobalMixin.ts
View File

@ -12,10 +12,11 @@ export default class GlobalMixin extends Vue {
FLAG_LOAD_FAIL: 1 << 2,
FLAG_IS_VIDEO: 1 << 3,
FLAG_IS_FAVORITE: 1 << 4,
FLAG_SELECTED: 1 << 5,
FLAG_LEAVING: 1 << 6,
FLAG_EXIT_LEFT: 1 << 7,
FLAG_ENTER_RIGHT: 1 << 8,
FLAG_FORCE_RELOAD: 1 << 9,
FLAG_IS_FOLDER: 1 << 5,
FLAG_SELECTED: 1 << 6,
FLAG_LEAVING: 1 << 7,
FLAG_EXIT_LEFT: 1 << 8,
FLAG_ENTER_RIGHT: 1 << 9,
FLAG_FORCE_RELOAD: 1 << 10,
}
}

6
src/types.ts
View File

@ -55,7 +55,7 @@ export type IRow = {
/** Refrence to day object */
day: IDay;
/** Whether this is a head row */
head?: boolean;
type: IRowType;
/** [Head only] Title of the header */
name?: string;
/** Main list of photo items */
@ -65,6 +65,10 @@ export type IRow = {
/** Count of placeholders to create */
pct?: number;
}
export enum IRowType {
HEAD = 0,
PHOTOS = 1,
}
export type ITick = {
/** Day ID */