ui: add fullscreen button

inveniosoftware · May 10, 2024 · 8b93c69 · 8b93c69
1 parent b44df19
commit 8b93c69
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 1 deletion.
diff --git a/invenio_previewer/extensions/pdfjs.py b/invenio_previewer/extensions/pdfjs.py
@@ -27,5 +27,5 @@ def preview(file):
         file=file,
         html_tags='dir="ltr" mozdisallowselectionprint moznomarginboxes',
         css_bundles=[],
-        js_bundles=[],
+        js_bundles=["fullscreen_js.js"],
     )
diff --git a/invenio_previewer/static/css/pdfjs/viewer.css b/invenio_previewer/static/css/pdfjs/viewer.css
@@ -2060,6 +2060,7 @@
   --toolbarButton-zoomOut-icon: url(/static/js/pdfjs/images/toolbarButton-zoomOut.svg);
   --toolbarButton-zoomIn-icon: url(/static/js/pdfjs/images/toolbarButton-zoomIn.svg);
   --toolbarButton-presentationMode-icon: url(/static/js/pdfjs/images/toolbarButton-presentationMode.svg);
+  --toolbarButton-fullscreen-icon: url(/static/js/pdfjs/images/toolbarButton-fullscreen.svg);
   --toolbarButton-print-icon: url(/static/js/pdfjs/images/toolbarButton-print.svg);
   --toolbarButton-openFile-icon: url(/static/js/pdfjs/images/toolbarButton-openFile.svg);
   --toolbarButton-download-icon: url(/static/js/pdfjs/images/toolbarButton-download.svg);
@@ -2877,6 +2878,12 @@ body {
           mask-image: var(--toolbarButton-editorStamp-icon);
 }
 
+#fullScreenMode::before,
+#secondaryFullScreenMode::before {
+  -webkit-mask-image: var(--toolbarButton-fullscreen-icon);
+          mask-image: var(--toolbarButton-fullscreen-icon);
+}
+
 #print::before,
 #secondaryPrint::before {
   -webkit-mask-image: var(--toolbarButton-print-icon);

diff --git a/invenio_previewer/static/js/pdfjs/images/toolbarButton-fullscreen.svg b/invenio_previewer/static/js/pdfjs/images/toolbarButton-fullscreen.svg
diff --git a/invenio_previewer/templates/semantic-ui/invenio_previewer/pdfjs.html b/invenio_previewer/templates/semantic-ui/invenio_previewer/pdfjs.html
@@ -159,6 +159,10 @@
           <span data-l10n-id="open_file_label">Open</span>
         </button>
 
+        <button id="secondaryFullScreenMode" class="secondaryToolbarButton fullScreenMode visibleLargeView" title="{{_('Switch to Full Screen Mode')}}" tabindex="51" data-l10n-id="fullscreen">
+          <span data-l10n-id="fullscreen_label">Full Screen Mode</span>
+        </button>
+
         <button id="secondaryPrint" class="secondaryToolbarButton visibleMediumView" title="Print" tabindex="52" data-l10n-id="print">
           <span data-l10n-id="print_label">Print</span>
         </button>
@@ -273,6 +277,10 @@
               <span data-l10n-id="open_file_label">Open</span>
             </button>
 
+            <button id="fullScreenMode" class="toolbarButton hiddenLargeView" title="{{_('Switch to Full Screen Mode')}}" tabindex="31" data-l10n-id="fullscreen">
+              <span data-l10n-id="fullscreen_label">Full Screen Mode</span>
+            </button>
+
             <button id="print" class="toolbarButton hiddenMediumView" title="Print" tabindex="32" data-l10n-id="print">
               <span data-l10n-id="print_label">Print</span>
             </button>