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 ui: integrated vanilla js loading spinner (turned off vue-spinner as it was starting "loading" too late, when some data might have already loaded); moved vueui bootstrapping to "bottom" aka body of frame_insert.html (it was getting bootstrapped into the head of the rendered HTML)

Browse Source
This commit is contained in:
Ivan Velev 2022-02-06 03:00:42 -08:00
parent 27d4d0a62d
commit af04deabe6
6 changed files with 35 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

9
pywb/templates/banner.html
View File

@ -32,15 +32,10 @@ window.banner_info = {
{% else %}
{% if ui.vue_timeline_banner %}
<div id="app" style="width: 100%; height: 200px"></div>
{% endif %}
<script src="{{ static_prefix }}/loading-spinner/loading-spinner.js"></script>
<link rel='stylesheet' href='{{ static_prefix }}/vue_banner.css'/>
<script src="{{ static_prefix }}/vue/vueui.js"></script>
<script>
VueUI.main("{{ static_prefix }}", "{{ url }}", "{{ wb_prefix }}", "{{ timestamp }}", "{{ ui.logo }}");
</script>
{% endif %}
{% endif %}

7
pywb/templates/frame_insert.html
View File

@ -21,6 +21,13 @@ html, body
</head>
<body style="margin: 0px; padding: 0px;">
{% if ui.vue_timeline_banner %}
<div id="app" style="width: 100%; height: 200px"></div>
<script>
VueUI.main("{{ static_prefix }}", "{{ url }}", "{{ wb_prefix }}", "{{ timestamp }}", "{{ ui.logo }}");
</script>
{% endif %}
<div id="wb_iframe_div">
<iframe id="replay_iframe" frameborder="0" seamless="seamless" scrolling="yes" class="wb_iframe" allow="autoplay; fullscreen"></iframe>
</div>

1
pywb/templates/query.html
View File

@ -13,6 +13,7 @@
<script src="{{ static_prefix }}/query.js"></script>
{% else %}
<script src="{{ static_prefix }}/loading-spinner/loading-spinner.js"></script>
<script src="{{ static_prefix }}/vue/vueui.js"></script>
{% endif %}

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

@ -1,6 +1,5 @@
<template>
<div class="app" :class="{expanded: showTimelineView}" data-app="webrecorder-replay-app">
<LoadingSpinner :text="'Loading...'" :is-loading="isLoading"/>
<div class="banner">
<div class="line">
<div class="logo"><a href="/"><img :src="config.logoImg" style="max-width: 80px" /></a></div>
@ -58,7 +57,6 @@ import TimelineBreadcrumbs from "./components/TimelineBreadcrumbs.vue";
import CalendarYear from "./components/CalendarYear.vue";
import { PywbSnapshot, PywbPeriod } from "./model.js";
import LoadingSpinner from "./components/LoadingSpinner.vue";
export default {
name: "PywbReplayApp",
@ -76,11 +74,10 @@ export default {
title: "",
initialView: {}
},
isLoading: true, // initially data is loading
timelineHighlight: false
};
},
components: {LoadingSpinner, Timeline, TimelineBreadcrumbs, CalendarYear},
components: {Timeline, TimelineBreadcrumbs, CalendarYear},
mounted: function() {
},
computed: {
@ -136,8 +133,6 @@ export default {
}
},
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);
@ -153,6 +148,11 @@ export default {
}
}
}
// signal app is DONE setting and rendering data; ON NEXT TICK
this.$nextTick(function isDone() {
this.$emit('data-set-and-render-completed');
}.bind(this));
},
setSnapshot(view) {
// turn off calendar (aka full) view

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

@ -7,12 +7,14 @@ import Vue from "vue/dist/vue.esm.browser";
// ===========================================================================
export function main(staticPrefix, url, prefix, timestamp, logoUrl) {
new CDXLoader(staticPrefix, url, prefix, timestamp, logoUrl);
const loadingSpinner = new LoadingSpinner(); // bootstrap loading-spinner EARLY ON
new CDXLoader(staticPrefix, url, prefix, timestamp, logoUrl, loadingSpinner);
}
// ===========================================================================
class CDXLoader {
constructor(staticPrefix, url, prefix, timestamp, logoUrl) {
constructor(staticPrefix, url, prefix, timestamp, logoUrl, loadingSpinner) {
this.loadingSpinner = loadingSpinner;
this.opts = {};
this.prefix = prefix;
this.staticPrefix = staticPrefix;
@ -71,6 +73,7 @@ class CDXLoader {
// });
app.$on("show-snapshot", this.loadSnapshot.bind(this));
app.$on("data-set-and-render-completed", () => this.loadingSpinner.setOff()); // only turn off loading-spinner AFTER app has told us it is DONE DONE
return app;
}
@ -95,6 +98,7 @@ class CDXLoader {
}
async loadCDX(queryURL) {
this.loadingSpinner.setOn(); // start loading-spinner when CDX loading begins
const queryWorker = new Worker(this.staticPrefix + "/queryWorker.js");
const p = new Promise((resolve) => {