backup/pywb
1
0
Fork 0
mirror of https://github.com/webrecorder/pywb.git synced 2025-03-15 00:03:28 +01:00
Code Issues Projects Releases Activity

vue app init: simplified logic in order to facilitate loader/progress UI and loader simulator to test various scenarios

Browse Source 
update:
1. use ONE method to set current replay/snapshot (do NOT use a second way: e.g. config.initialView to set initial replay! BAD!)
2. use ONE method to set app data AND current snapshot (regardless of whether it's from a URL re-load, from an iframe bubble-URL change load)
3. make init app method deal ONLY with app init and move data-setter into another (see 2.)
4. on VUE APP INIT: add specific data-set method
This commit is contained in:
Ivan Velev 2022-02-05 17:08:03 -08:00
parent 291766d2c2
commit 0ff8df44cb
2 changed files with 30 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
pywb/vueui/src/App.vue
View File

@ -67,7 +67,7 @@ export default {
currentPeriod: null,
currentSnapshot: null,
msgs: [],
showFullView: false,
showFullView: true,
showTimelineView: true,
maxTimelineZoomLevel: PywbPeriod.Type.day,
config: {
@ -79,7 +79,6 @@ export default {
},
components: {Timeline, TimelineBreadcrumbs, CalendarYear},
mounted: function() {
this.init();
},
computed: {
sessionStorageUrlKey() {
@ -133,21 +132,15 @@ export default {
window.location.href = this.config.prefix + "*/" + newUrl;
}
},
init() {
this.config.url = this.config.initialView.url;
if (this.config.initialView.title) {
this.config.title = this.config.initialView.title;
}
if (this.config.initialView.timestamp === undefined) {
this.showFullView = true;
this.showTimelineView = true;
} else {
this.showFullView = false;
this.showTimelineView = true;
if (this.currentPeriod.children.length) {
this.setSnapshot(this.config.initialView);
}
}
setData(/** @type {PywbData} data */ data) {
// mark app as DONE loading (i.e. NOT loading)
this.isLoading = false;
// data-set will usually happen at App INIT (from parent caller)
this.$set(this, "snapshots", data.snapshots);
this.$set(this, "currentPeriod", data.timeline);
// get last-saved current period from previous page/app refresh (if there was such)
if (window.sessionStorage) {
const currentPeriodId = window.sessionStorage.getItem(this.sessionStorageUrlKey);
if (currentPeriodId) {
@ -159,10 +152,16 @@ export default {
}
},
setSnapshot(view) {
// convert to snapshot objec to support proper rendering of time/date
// turn off calendar (aka full) view
this.showFullView = false;
// convert to snapshot object to support proper rendering of time/date
const snapshot = new PywbSnapshot(view, 0);
// set config current URL and title
this.config.url = view.url;
this.config.title = view.title;
this.gotoSnapshot(snapshot);
}
}

31
pywb/vueui/src/index.js
View File

@ -43,23 +43,17 @@ class CDXLoader {
throw new Error("No query URL specified");
}
this.opts.initialView = {url, timestamp};
this.opts.logoImg = this.staticPrefix + "/" + (this.logoUrl ? this.logoUrl : "pywb-logo-sm.png");
const logoImg = this.staticPrefix + "/" + (this.logoUrl ? this.logoUrl : "pywb-logo-sm.png");
this.app = this.initApp({logoImg, url});
this.loadCDX(queryURL).then((cdxList) => {
this.app = this.initApp(cdxList, this.opts, (snapshot) => this.loadSnapshot(snapshot));
this.setAppData(cdxList, timestamp ? {url, timestamp}:null);
});
}
initApp(data, config = {}, loadCallback = null) {
initApp(config = {}) {
const app = new Vue(appData);
const pywbData = new PywbData(data);
app.$set(app, "snapshots", pywbData.snapshots);
app.$set(app, "currentPeriod", pywbData.timeline);
app.$set(app, "config", {...app.config, ...config, prefix: this.prefix});
app.$mount("#app");
@ -75,9 +69,8 @@ class CDXLoader {
// };
// }
// });
if (loadCallback) {
app.$on("show-snapshot", loadCallback);
}
app.$on("show-snapshot", this.loadSnapshot.bind(this));
return app;
}
@ -90,13 +83,15 @@ class CDXLoader {
const cdxList = await this.loadCDX(queryURL);
const pywbData = new PywbData(cdxList);
this.setAppData(cdxList, {url, timestamp});
}
const app = this.app;
app.$set(app, "snapshots", pywbData.snapshots);
app.$set(app, "currentPeriod", pywbData.timeline);
setAppData(cdxList, snapshot=null) {
this.app.setData(new PywbData(cdxList));
app.setSnapshot({url, timestamp});
if (snapshot) {
this.app.setSnapshot(snapshot);
}
}
async loadCDX(queryURL) {