Add config.yaml UI option to disable printing from replay banner (#815)

* Add UI option to disable printing * Initialize VueUI.main with config dict
webrecorder · Mar 27, 2023 · 83b2113 · 83b2113
1 parent ed36830
commit 83b2113
Show file tree

Hide file tree

Showing 8 changed files with 118 additions and 56 deletions.
diff --git a/.gitignore b/.gitignore
@@ -53,3 +53,7 @@ git_hash.py
 
 # Sphinx documentation
 docs/_build/*
+
+# virtualenvs
+env/
+venv/
diff --git a/config.yaml b/config.yaml
@@ -10,6 +10,7 @@ debug: true
   # navbar_background_hex: 0c49b0
   # navbar_color_hex: fff
   # navbar_light_buttons: true
+  # disable_printing: true
 
 collections:
     all: $all

diff --git a/docs/manual/vue-ui.rst b/docs/manual/vue-ui.rst
@@ -68,6 +68,21 @@ For example, to have the logo redirect to ``https://example.com/web-archive-land
     logo_home_url: https://example.com/web-archive-landing-page
 
 
+Printing
+^^^^^^^^
+
+As of pywb 2.8, the replay header includes a print button that prints the contents of the replay iframe.
+
+This button can be disabled by setting ``ui.disable_printing`` in ``config.yaml`` to any value.
+
+For example:
+
+.. code:: yaml
+
+  ui:
+    disable_printing: true
+
+
 Banner Colors
 ^^^^^^^^^^^^^
 

diff --git a/pywb/static/vue/vueui.js b/pywb/static/vue/vueui.js
diff --git a/pywb/templates/frame_insert.html b/pywb/templates/frame_insert.html
@@ -25,8 +25,21 @@
 
 <div id="app" style="width: 100%; height: 200px"></div>
 <script>
-    VueUI.main("{{ static_prefix }}", "{{ url }}", "{{ wb_prefix }}", "{{ timestamp }}", "{{ ui.logo }}", "{{ ui.navbar_background_hex | default('f8f9fa') }}", "{{ ui.navbar_color_hex | default('212529') }}", "{{ ui.navbar_light_buttons }}", "{{ env.pywb_lang | default('en') }}",
-      allLocales, i18nStrings, "{{ ui.logo_home_url }}");
+  VueUI.main({
+      staticPrefix: "{{ static_prefix }}",
+      url: "{{ url }}",
+      prefix: "{{ wb_prefix }}",
+      timestamp: "{{ timestamp }}",
+      logoUrl: "{{ ui.logo }}",
+      navbarBackground: "{{ ui.navbar_background_hex | default('f8f9fa') }}",
+      navbarColor: "{{ ui.navbar_color_hex | default('212529') }}",
+      navbarLightButtons: "{{ ui.navbar_light_buttons }}",
+      logoHomeUrl: "{{ ui.logo_home_url }}",
+      disablePrinting: "{{ ui.disable_printing }}",
+      allLocales: allLocales
+    },
+    "{{ env.pywb_lang | default('en') }}",
+    i18nStrings);
 </script>
 
 <div id="wb_iframe_div">

diff --git a/pywb/templates/query.html b/pywb/templates/query.html
@@ -94,8 +94,21 @@ <h4 class="display-4 text-center text-sm-left p-0">{{ _('Search Results') }}</h4
 <div id="app" style="width: 100%; height: 100%"></div>
 
 <script>
-  VueUI.main("{{ static_prefix }}", "{{ url }}", "{{ prefix }}", undefined, "{{ ui.logo }}", "{{ ui.navbar_background_hex | default('f8f9fa') }}", "{{ ui.navbar_color_hex | default('212529') }}", "{{ ui.navbar_light_buttons }}", "{{ env.pywb_lang | default('en') }}",
-      allLocales, i18nStrings, "{{ ui.logo_home_url }}");
+  VueUI.main({
+      staticPrefix: "{{ static_prefix }}",
+      url: "{{ url }}",
+      prefix: "{{ prefix }}",
+      timestamp: undefined,
+      logoUrl: "{{ ui.logo }}",
+      navbarBackground: "{{ ui.navbar_background_hex | default('f8f9fa') }}",
+      navbarColor: "{{ ui.navbar_color_hex | default('212529') }}",
+      navbarLightButtons: "{{ ui.navbar_light_buttons }}",
+      logoHomeUrl: "{{ ui.logo_home_url }}",
+      disablePrinting: "{{ ui.disable_printing }}",
+      allLocales: allLocales
+    },
+    "{{ env.pywb_lang | default('en') }}",
+    i18nStrings);
 </script>
 
 {% endif %}

diff --git a/pywb/vueui/src/App.vue b/pywb/vueui/src/App.vue
@@ -83,7 +83,7 @@
               :class="{'btn-outline-light': lightButtons, 'btn-outline-dark': !lightButtons}"
               :aria-pressed="printReplayFrame"
               @click="printReplayFrame"
-              v-if="hasReplayFrame()"
+              v-if="printingEnabled && hasReplayFrame()"
               :title="_('Print')">
               <i class="fas fa-print"></i>
             </button>
@@ -227,6 +227,9 @@ export default {
     lightButtons() {
       return !!this.config.navbarLightButtons;
     },
+    printingEnabled() {
+      return !this.config.disablePrinting;
+    },
     previousSnapshot() {
       if (!this.currentSnapshotIndex) {
         return null;

diff --git a/pywb/vueui/src/index.js b/pywb/vueui/src/index.js
@@ -7,64 +7,69 @@ import Vue from "vue/dist/vue.esm.browser";
 
 
 // ===========================================================================
-export function main(staticPrefix, url, prefix, timestamp, logoUrl, navbarBackground, navbarColor, navbarLightButtons, locale, allLocales, i18nStrings, logoHomeUrl) {
+export function main(config, locale, i18nStrings) {
   PywbI18N.init(locale, i18nStrings);
-  new CDXLoader(staticPrefix, url, prefix, timestamp, logoUrl, navbarBackground, navbarColor, navbarLightButtons, allLocales, logoHomeUrl);
+  new CDXLoader(config);
 }
 
 // ===========================================================================
 class CDXLoader {
-  constructor(staticPrefix, url, prefix, timestamp, logoUrl, navbarBackground, navbarColor, navbarLightButtons, allLocales, logoHomeUrl) {
+  constructor(config) {
     this.loadingSpinner = null;
     this.loaded = false;
     this.opts = {};
-    this.prefix = prefix;
-    this.staticPrefix = staticPrefix;
-    this.logoUrl = logoUrl;
-    this.logoHomeUrl = logoHomeUrl;
-    this.navbarBackground = navbarBackground;
-    this.navbarColor = navbarColor;
-    this.navbarLightButtons = navbarLightButtons;
-    this.timestamp = timestamp;
+    this.url = config.url;
+    this.prefix = config.prefix;
+    this.staticPrefix = config.staticPrefix;
+    this.logoUrl = config.logoUrl;
+    this.logoHomeUrl = config.logoHomeUrl;
+    this.navbarBackground = config.navbarBackground;
+    this.navbarColor = config.navbarColor;
+    this.navbarLightButtons = config.navbarLightButtons;
+    this.disablePrinting = config.disablePrinting;
+
+    this.timestamp = config.timestamp;
 
-    this.isReplay = (timestamp !== undefined);
+    this.isReplay = (config.timestamp !== undefined);
 
     setTimeout(() => {
       if (!this.loaded) {
-        this.loadingSpinner = new LoadingSpinner({text: PywbI18N.instance?.getText('Loading...'), isSmall: !!timestamp}); // bootstrap loading-spinner EARLY ON
+        this.loadingSpinner = new LoadingSpinner({text: PywbI18N.instance?.getText('Loading...'), isSmall: !!this.timestamp}); // bootstrap loading-spinner EARLY ON
         this.loadingSpinner.setOn();
       }
     }, 500);
 
     if (this.isReplay) {
-      window.WBBanner = new VueBannerWrapper(this, url, timestamp);
+      window.WBBanner = new VueBannerWrapper(this, this.url, this.timestamp);
     }
 
     let queryURL;
+    let url;
 
     // query form *?=url...
     if (window.location.href.indexOf("*?") > 0) {
       queryURL = window.location.href.replace("*?", "cdx?") + "&output=json";
       url = new URL(queryURL).searchParams.get("url");
 
     // otherwise, traditional calendar form /*/<url>
-    } else if (url) {
+    } else if (this.url) {
+      url = this.url
       const params = new URLSearchParams();
       params.set("url", url);
       params.set("output", "json");
-      queryURL = prefix + "cdx?" + params.toString();
+      queryURL = this.prefix + "cdx?" + params.toString();
 
     // otherwise, an error since no URL
     } else {
       throw new Error("No query URL specified");
     }
 
-    const logoImg = this.staticPrefix + "/" + (this.logoUrl ? this.logoUrl : "pywb-logo-sm.png");
+    config.logoImg = this.staticPrefix + "/" + (!!this.logoUrl ? this.logoUrl : "pywb-logo-sm.png");
 
-    this.app = this.initApp({logoImg, logoHomeUrl, navbarBackground, navbarColor, navbarLightButtons, url, allLocales, timestamp});
+    this.app = this.initApp(config);
 
     this.loadCDX(queryURL).then((cdxList) => {
-      this.setAppData(cdxList, url, this.timestamp);
+      this.setAppData(cdxList, url, config.timestamp);
     });
   }