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

Prevent flashing content and unnecessary iframe reload

Browse Source 
Connected to https://github.com/webrecorder/pywb/issues/717

When a user navigated to a new URL by clicking on a link in the
replay iframe, the new Vue app was unnecessarily triggering a
reload, causing what looks like a flash of the page content. This
commit modifies the Vue app to only reload the iframe if a user
selected a new snapshot from the calendar or timeline.
This commit is contained in:
Tessa Walsh 2022-07-25 12:02:05 -04:00
parent 19032e4512
commit 5e2f47a049
3 changed files with 156 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
pywb/static/vue/vueui.js
View File

File diff suppressed because one or more lines are too long

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

@ -106,7 +106,7 @@ export default {
} }
// only go to snapshot if caller did not request to zoom only // only go to snapshot if caller did not request to zoom only
if (newPeriod.snapshot && !onlyZoomToPeriod) { if (newPeriod.snapshot && !onlyZoomToPeriod) {
this.gotoSnapshot(newPeriod.snapshot, newPeriod); this.gotoSnapshot(newPeriod.snapshot, newPeriod, true /* reloadIFrame */);
} else { } else {
// save current period (aka zoom) // save current period (aka zoom)
// use sessionStorage (not localStorage), as we want this to be a very temporary memory for current page tab/window and no longer; NOTE: it serves when navigating from an "*" query to a specific capture and subsequent reloads // use sessionStorage (not localStorage), as we want this to be a very temporary memory for current page tab/window and no longer; NOTE: it serves when navigating from an "*" query to a specific capture and subsequent reloads
@ -121,10 +121,10 @@ export default {
} }
} }
}, },
gotoSnapshot(snapshot, fromPeriod) { gotoSnapshot(snapshot, fromPeriod, reloadIFrame=false) {
this.currentSnapshot = snapshot; this.currentSnapshot = snapshot;
// if the current period is not matching the current snapshot, updated it! // if the current period doesn't match the current snapshot, update it
if (fromPeriod && !this.currentPeriod.contains(fromPeriod)) { if (fromPeriod && !this.currentPeriod.contains(fromPeriod)) {
const fromPeriodAtMaxZoomLevel = fromPeriod.get(this.maxTimelineZoomLevel); const fromPeriodAtMaxZoomLevel = fromPeriod.get(this.maxTimelineZoomLevel);
if (fromPeriodAtMaxZoomLevel !== this.currentPeriod) { if (fromPeriodAtMaxZoomLevel !== this.currentPeriod) {
@ -132,8 +132,12 @@ export default {
} }
} }
// COMMUNICATE TO ContentFrame // update iframe only if the snapshot was selected from the calendar/timeline.
// if the change originated from a user clicking a link in the iframe, emitting
// snow-shapshot will only cause a flash of content
if (reloadIFrame !== false) {
this.$emit("show-snapshot", snapshot); this.$emit("show-snapshot", snapshot);
}
this.showFullView = false; this.showFullView = false;
}, },
gotoUrl(event) { gotoUrl(event) {

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

@ -145,11 +145,11 @@ class CDXLoader {
return results; return results;
} }
loadSnapshot(snapshot) { loadSnapshot(snapshot, reloadIFrame=true) {
if (!this.isReplay) { if (!this.isReplay) {
window.location.href = this.prefix + snapshot.id + "/" + snapshot.url; window.location.href = this.prefix + snapshot.id + "/" + snapshot.url;
} else if (window.cframe) { } else if (window.cframe) {
window.cframe.load_url(snapshot.url, snapshot.id + ""); window.cframe.load_url(snapshot.url, snapshot.id + "", reloadIFrame);
} }
} }
} }