fix(pdf-viewer): #MAG-190 added responsive for pdf + added filename

OPEN-ENT-NG · Sep 29, 2023 · 3eb896a · 3eb896a
1 parent b65bc95
commit 3eb896a
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 33 deletions.
diff --git a/src/main/resources/public/sass/global/components/directives/_pdf-viewer.scss b/src/main/resources/public/sass/global/components/directives/_pdf-viewer.scss
@@ -1,23 +1,41 @@
 .pdf-viewer{
-  &-pagination-area{
-    &-pagination {
-      display: flex;
+  &-header {
+    display: flex;
+    margin-bottom: 6px;
+
+    &-pagination-area{
+
+      flex: auto;
       justify-content: center;
-      align-items: center;
 
-      &-numPage {
-        font-size: 14px;
-      }
+      &-pagination {
+        display: flex;
+        justify-content: center;
+        align-items: center;
 
-      &-input {
-        font-size: 14px;
-        margin: 0;
-        flex: 1;
-        width: 3em;
+        &-numPage {
+          font-size: 14px;
+        }
+
+        &-input {
+          font-size: 14px;
+          margin: 0;
+          flex: 1;
+          width: 3em;
+        }
       }
-    }
-    &-file-controls{
+      &-file-controls{
         padding: 0 1em;
       }
+    }
+
+    &-title {
+      color: $magneto-light-grey;
+    }
+  }
+
+  .render {
+    max-width: 100%;
+    border: 1px solid $magneto-light-grey;
   }
-}
+}
diff --git a/src/main/resources/public/ts/directives/card-list/card-preview-image.html b/src/main/resources/public/ts/directives/card-list/card-preview-image.html
@@ -6,7 +6,9 @@
     <img ng-if="vm.card.isType(vm.RESOURCE_TYPES.FILE) && !(vm.getExtension() === vm.RESOURCE_TYPES.PDF)" class="cardDirective-preview-image-icons"
          ng-click="vm.downloadFile()"
          data-ng-src="/magneto/public/img/extension/[[vm.getExtension()]].svg">
-    <pdf-viewer ng-if=" vm.getExtension() === vm.RESOURCE_TYPES.PDF " ng-src="[[vm.getWorkspaceUrl()]]" >
+    <pdf-viewer ng-if=" vm.getExtension() === vm.RESOURCE_TYPES.PDF "
+                ng-src="[[vm.getWorkspaceUrl()]]"
+                title="vm.card._metadata.filename">
     </pdf-viewer>
     <a ng-href="[[vm.card.resourceUrl]]" target="_blank" ng-if="vm.card.isType(vm.RESOURCE_TYPES.LINK)">
         <img class="cardDirective-preview-image-icons" data-ng-src="/magneto/public/img/extension/link.svg">

diff --git a/src/main/resources/public/ts/directives/pdf-viewer/pdf-viewer.directive.ts b/src/main/resources/public/ts/directives/pdf-viewer/pdf-viewer.directive.ts
@@ -22,6 +22,7 @@ interface IViewModel extends ng.IController {
 
 interface IPdfViewerProps {
     ngSrc: string ;
+    title?: string;
 }
 
 interface IPdfViewerScope extends IViewModel, IPdfViewerProps {
@@ -58,7 +59,7 @@ class Controller implements IViewModel {
     }
 
     openPage = (): void => {
-        var pageNumber = parseInt(this.pageIndex);
+        let pageNumber: number = parseInt(this.pageIndex);
         if (!pageNumber) {
             return;
         }
@@ -77,8 +78,7 @@ class Controller implements IViewModel {
             this.openPage();
         }
     }
-    keyNav = function(e)
-    {
+    keyNav = (e: JQueryKeyEventObject): void => {
         switch(e.keyCode)
         {
             case 37: this.previousPage(); break;
@@ -104,7 +104,8 @@ function directive() {
         restrict: 'E',
         templateUrl: `${RootsConst.directive}pdf-viewer/pdf-viewer.html`,
         scope: {
-                ngSrc: '='
+                ngSrc: '=',
+                title: '='
         },
         controllerAs: 'vm',
         bindToController: true,
@@ -117,7 +118,7 @@ function directive() {
             this.element = angular.element(element);
             document.addEventListener("keydown", this.keyNav);
 
-            var canvas = document.createElement('canvas');
+            let canvas: HTMLCanvasElement = document.createElement('canvas');
             $(canvas).addClass('render');
             this.element.append(canvas);
             $scope.vm.loadPdfJs().then(() => {
@@ -140,21 +141,21 @@ function directive() {
 
             (vm.reloadPdf as Observable<number>).debounceTime(100).subscribe(pageNumber=>{
                 vm.pdf.getPage(pageNumber).then(function (page) {
-                    var viewport;
+                    let viewport;
                     if (!$(canvas).hasClass('fullscreen')) {
                         viewport = page.getViewport(1);
-                        var scale = element.width() / viewport.width;
+                        let scale: number = element.width() / viewport.width;
                         viewport = page.getViewport(scale);
                     }
                     else {
                         viewport = page.getViewport(2);
                     }
 
-                    var context = canvas.getContext('2d');
+                    let context: CanvasRenderingContext2D = canvas.getContext('2d');
                     canvas.height = viewport.height;
                     canvas.width = viewport.width;
 
-                    var renderContext = {
+                    let renderContext = {
                         canvasContext: context,
                         viewport: viewport
                     };
@@ -165,4 +166,4 @@ function directive() {
     }
 }
 
-export const pdfViewerNew = ng.directive('pdfViewer', directive)
+export const pdfViewerNew = ng.directive('pdfViewer', directive)
diff --git a/src/main/resources/public/ts/directives/pdf-viewer/pdf-viewer.html b/src/main/resources/public/ts/directives/pdf-viewer/pdf-viewer.html
@@ -1,12 +1,19 @@
 <div class="pdf-viewer" id="pdf-viewer" >
-    <div class="pdf-viewer-pagination-area pagination__area  flex-row align-center justify-center">
-        <div class="pdf-viewer-pagination-area-file-control-left file-controls left" ng-click="vm.previousPage()"><i class="left"></i></div>
-        <div class="pdf-viewer-pagination-area-pagination">
-            <input class="pdf-viewer-pagination-area-pagination-input" type="text" ng-model="vm.pageIndex" ng-change="vm.openPage()"/>
-            <span class="pdf-viewer-pagination-area-pagination-numPage">/ [[vm.numPages]]</span>
+    <div class="pdf-viewer-header">
+        <div class="pdf-viewer-header-title">
+            [[vm.title]]
+        </div>
+        <div class="pdf-viewer-header-pagination-area pagination__area  flex-row align-center justify-center">
+            <div class="pdf-viewer-header-pagination-area-file-control-left file-controls left" ng-click="vm.previousPage()"><i class="left"></i></div>
+            <div class="pdf-viewer-header-pagination-area-pagination">
+                <input class="pdf-viewer-header-pagination-area-pagination-input" type="text" ng-model="vm.pageIndex" ng-change="vm.openPage()"/>
+                <span class="pdf-viewer-header-pagination-area-pagination-numPage">/ [[vm.numPages]]</span>
+            </div>
+            <div class="pdf-viewer-header-pagination-area-file-controls right" ng-click="vm.nextPage()"><i class="right"></i></div>
         </div>
-        <div class="pdf-viewer-pagination-area-file-controls right" ng-click="vm.nextPage()"><i class="right"></i></div>
     </div>
+
+
     <p ng-if="vm.loading" class="pdf-viewer-loading-area top-spacing-four flex-row align-start justify-center centered-text">
         <i18n>magneto.loading</i18n>&nbsp;<i class="loading"></i></p>
-</div>
+</div>