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 %} {% else %}
{% if ui.vue_timeline_banner %} {% if ui.vue_timeline_banner %}
<div id="app" style="width: 100%; height: 200px"></div> <script src="{{ static_prefix }}/loading-spinner/loading-spinner.js"></script>
{% endif %}
<link rel='stylesheet' href='{{ static_prefix }}/vue_banner.css'/> <link rel='stylesheet' href='{{ static_prefix }}/vue_banner.css'/>
<script src="{{ static_prefix }}/vue/vueui.js"></script> <script src="{{ static_prefix }}/vue/vueui.js"></script>
<script> {% endif %}
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> </head>
<body style="margin: 0px; padding: 0px;"> <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"> <div id="wb_iframe_div">
<iframe id="replay_iframe" frameborder="0" seamless="seamless" scrolling="yes" class="wb_iframe" allow="autoplay; fullscreen"></iframe> <iframe id="replay_iframe" frameborder="0" seamless="seamless" scrolling="yes" class="wb_iframe" allow="autoplay; fullscreen"></iframe>
</div> </div>

1
pywb/templates/query.html
View File

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

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

@ -1,6 +1,5 @@
<template> <template>
<div class="app" :class="{expanded: showTimelineView}" data-app="webrecorder-replay-app"> <div class="app" :class="{expanded: showTimelineView}" data-app="webrecorder-replay-app">
<LoadingSpinner :text="'Loading...'" :is-loading="isLoading"/>
<div class="banner"> <div class="banner">
<div class="line"> <div class="line">
<div class="logo"><a href="/"><img :src="config.logoImg" style="max-width: 80px" /></a></div> <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 CalendarYear from "./components/CalendarYear.vue";
import { PywbSnapshot, PywbPeriod } from "./model.js"; import { PywbSnapshot, PywbPeriod } from "./model.js";
import LoadingSpinner from "./components/LoadingSpinner.vue";
export default { export default {
name: "PywbReplayApp", name: "PywbReplayApp",
@ -76,11 +74,10 @@ export default {
title: "", title: "",
initialView: {} initialView: {}
}, },
isLoading: true, // initially data is loading
timelineHighlight: false timelineHighlight: false
}; };
}, },
components: {LoadingSpinner, Timeline, TimelineBreadcrumbs, CalendarYear}, components: {Timeline, TimelineBreadcrumbs, CalendarYear},
mounted: function() { mounted: function() {
}, },
computed: { computed: {
@ -136,8 +133,6 @@ export default {
} }
}, },
setData(/** @type {PywbData} data */ data) { 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) // data-set will usually happen at App INIT (from parent caller)
this.$set(this, "snapshots", data.snapshots); 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) { setSnapshot(view) {
// turn off calendar (aka full) 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) { 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 { class CDXLoader {
constructor(staticPrefix, url, prefix, timestamp, logoUrl) { constructor(staticPrefix, url, prefix, timestamp, logoUrl, loadingSpinner) {
this.loadingSpinner = loadingSpinner;
this.opts = {}; this.opts = {};
this.prefix = prefix; this.prefix = prefix;
this.staticPrefix = staticPrefix; this.staticPrefix = staticPrefix;
@ -71,6 +73,7 @@ class CDXLoader {
// }); // });
app.$on("show-snapshot", this.loadSnapshot.bind(this)); 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; return app;
} }
@ -95,6 +98,7 @@ class CDXLoader {
} }
async loadCDX(queryURL) { async loadCDX(queryURL) {
this.loadingSpinner.setOn(); // start loading-spinner when CDX loading begins
const queryWorker = new Worker(this.staticPrefix + "/queryWorker.js"); const queryWorker = new Worker(this.staticPrefix + "/queryWorker.js");
const p = new Promise((resolve) => { const p = new Promise((resolve) => {