template fixes: fix comment in head, footer, header templates

vueui fixes: - fix error if no urls found on calendar page - convert url to text box to allow enter new urls - fix suport for logo, have logo link to home page
webrecorder · Jan 25, 2022 · 581e460 · 581e460
1 parent 6137543
commit 581e460
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 25 deletions.
diff --git a/pywb/static/vue/vueui.js b/pywb/static/vue/vueui.js
diff --git a/pywb/templates/banner.html b/pywb/templates/banner.html
@@ -34,7 +34,7 @@
 <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 }}");
+  VueUI.main("{{ static_prefix }}", "{{ url }}", "{{ wb_prefix }}", "{{ timestamp }}", "{{ ui.logo }}");
 </script>
 
 {% if ui.vue_timeline_banner %}

diff --git a/pywb/templates/footer.html b/pywb/templates/footer.html
@@ -1,2 +1,2 @@
-## place content to be added at the very end of the <body> tag here
+{# place content to be added at the very end of the <body> tag in this file below #}
 
diff --git a/pywb/templates/head.html b/pywb/templates/head.html
@@ -1 +1 @@
-## place optional content to be injected into the <head> of every page here
+{# place optional content to be injected into the <head> of every page in this file below #}
diff --git a/pywb/templates/header.html b/pywb/templates/header.html
@@ -1,4 +1,4 @@
-## place content to be added at the very beginning of the <body> tag here
+{# place content to be added at the very beginning of the <body> tag in this file below #}
 <header>
    {% if not err_msg and locales|length > 1 %}
     <div class="language-select">

diff --git a/pywb/templates/query.html b/pywb/templates/query.html
@@ -66,7 +66,7 @@ <h4 class="display-4 text-center text-sm-left p-0">{{ _('Search Results') }}</h4
   renderCal.init();
 
 {% else %}
-  VueUI.main("{{ static_prefix }}", "{{ url }}", "{{ prefix }}", "{{ ui.logo }}");
+  VueUI.main("{{ static_prefix }}", "{{ url }}", "{{ prefix }}", undefined, "{{ ui.logo }}");
 
 {% endif %}
 

diff --git a/pywb/vueui/src/App.vue b/pywb/vueui/src/App.vue
@@ -2,7 +2,7 @@
   <div class="app" :class="{expanded: showTimelineView}" data-app="webrecorder-replay-app">
     <div class="banner">
       <div class="line">
-        <div class="logo"><a href="/"><img :src="config.logoImg" /></a></div>
+        <div class="logo"><a href="/"><img :src="config.logoImg" style="max-width: 80px" /></a></div>
         <div class="timeline-wrap">
           <div class="line">
             <div class="breadcrumbs-wrap">
@@ -35,13 +35,15 @@
       </div>
     </div>
     <div class="snapshot-title">
-      <div>{{ config.url }}</div>
+      <form @submit="gotoUrl">
+        <input id="theurl" type="text" :value="config.url"></input>
+      </form>
       <div v-if="currentSnapshot && !showFullView">
         <span v-if="config.title">{{ config.title }}</span>
         Current capture: {{currentSnapshot.getTimeDateFormatted()}}
       </div>
     </div>
-    <CalendarYear v-if="showFullView"
+    <CalendarYear v-if="showFullView && currentPeriod && currentPeriod.children.length"
                   :period="currentPeriod"
                   :current-snapshot="currentSnapshot"
                    @goto-period="gotoPeriod">
@@ -124,6 +126,13 @@ export default {
       this.$emit("show-snapshot", snapshot);
       this.showFullView = false;
     },
+    gotoUrl(event) {
+      event.preventDefault();
+      const newUrl = document.querySelector("#theurl").value;
+      if (newUrl !== this.url) {
+        window.location.href = this.config.prefix + "*/" + newUrl;
+      }
+    },
     init() {
       this.config.url = this.config.initialView.url;
       if (this.config.initialView.title) {
@@ -134,8 +143,10 @@ export default {
         this.showTimelineView = true;
       } else {
         this.showFullView = false;
-        this.showFullView = true;
-        this.setSnapshot(this.config.initialView);
+        this.showTimelineView = true;
+        if (this.currentPeriod.children.length) {
+          this.setSnapshot(this.config.initialView);
+        }
       }
       if (window.sessionStorage) {
         const currentPeriodId = window.sessionStorage.getItem(this.sessionStorageUrlKey);
@@ -242,4 +253,7 @@ export default {
     font-weight: bold;
     font-size: 16px;
   }
+  #theurl {
+    width: 400px;
+  }
 </style>
diff --git a/pywb/vueui/src/index.js b/pywb/vueui/src/index.js
@@ -45,7 +45,7 @@ class CDXLoader {
 
     this.opts.initialView = {url, timestamp};
 
-    this.opts.logoImg = this.staticPrefix + (this.logoUrl ? this.logoUrl : "/pywb-logo-sm.png");
+    this.opts.logoImg = this.staticPrefix + "/" + (this.logoUrl ? this.logoUrl : "pywb-logo-sm.png");
 
     this.loadCDX(queryURL).then((cdxList) => {
       this.app = this.initApp(cdxList, this.opts, (snapshot) => this.loadSnapshot(snapshot));
@@ -60,7 +60,7 @@ class CDXLoader {
     app.$set(app, "snapshots", pywbData.snapshots);
     app.$set(app, "currentPeriod", pywbData.timeline);
 
-    app.$set(app, "config", {...app.config, ...config});
+    app.$set(app, "config", {...app.config, ...config, prefix: this.prefix});
 
     app.$mount("#app");