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

Fix on window resize

pull/37/head
Varun Patil 2022-09-13 00:35:35 -07:00
parent 149ce2ad12
commit b48d00e93e
4 changed files with 66 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/custom-icons.scss
View File

@ -26,3 +26,7 @@
}
@include icon-black-white('yourmemories', 'memories', 1);
body {
overflow: hidden;
}

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

99
src/components/Timeline.vue
View File

@ -198,6 +198,14 @@ export default class Timeline extends Mixins(GlobalMixin) {
this.resetState();
}
created() {
window.addEventListener("resize", this.handleResizeWithDelay);
}
destroyed() {
window.removeEventListener("resize", this.handleResizeWithDelay);
}
/** Create new state */
async createState() {
// Wait for one tick before doing anything
@ -270,7 +278,7 @@ export default class Timeline extends Mixins(GlobalMixin) {
this.list.filter(r => !r.head).forEach(row => {
row.size = this.rowHeight;
});
this.reflowTimeline();
this.reflowTimeline(true);
}
/**
@ -529,56 +537,21 @@ export default class Timeline extends Mixins(GlobalMixin) {
}
/** Re-create timeline tick data in the next frame */
async reflowTimeline() {
async reflowTimeline(orderOnly = false) {
if (this.reflowTimelineReq) {
return;
}
this.reflowTimelineReq = true;
await this.$nextTick();
this.reflowTimelineNow();
this.reflowTimelineNow(orderOnly);
this.reflowTimelineReq = false;
}
/** Re-create timeline tick data */
reflowTimelineNow() {
// Clear timeline
this.timelineTicks = [];
// Ticks
let currTopRow = 0;
let currTopStatic = 0;
let prevYear = 9999;
let prevMonth = 0;
const thisYear = new Date().getFullYear();
// Itearte over days
for (const day of this.days) {
if (day.count === 0) {
continue;
}
// 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)) {
// Create tick
this.timelineTicks.push({
dayId: day.dayid,
top: currTopRow,
topS: currTopStatic,
topC: 0,
text: (dtYear === prevYear || dtYear === thisYear) ? undefined : dtYear,
});
}
prevMonth = dtMonth;
prevYear = dtYear;
currTopStatic += this.heads[day.dayid].size;
currTopRow += day.rows.size;
reflowTimelineNow(orderOnly = false) {
if (!orderOnly) {
this.recreateTimeline();
}
const recycler: any = this.$refs.recycler;
@ -640,6 +613,50 @@ export default class Timeline extends Mixins(GlobalMixin) {
}
}
/**
* 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();
// Itearte over days
for (const day of this.days) {
if (day.count === 0) {
continue;
}
// 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)) {
// Create tick
this.timelineTicks.push({
dayId: day.dayid,
top: currTopRow,
topS: currTopStatic,
topC: 0,
text: (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.
*