Closes #194: PDF viewer

docs-web/src/main/webapp/src/app/docs/controller/document/FileModalView.js

@@ -3,58 +3,77 @@
 /**
  * File modal view controller.
  */
-angular.module('docs').controller('FileModalView', function($uibModalInstance, $scope, $state, $stateParams, Restangular, $transitions) {
+angular.module('docs').controller('FileModalView', function ($uibModalInstance, $scope, $state, $stateParams, $sce, Restangular, $transitions) {
   // Load files
-  Restangular.one('file/list').get({ id: $stateParams.id }).then(function(data) {
+  Restangular.one('file/list').get({ id: $stateParams.id }).then(function (data) {
     $scope.files = data.files;
 
     // Search current file
-    _.each($scope.files, function(value) {
+    _.each($scope.files, function (value) {
       if (value.id === $stateParams.fileId) {
         $scope.file = value;
+        $scope.trustedFileUrl = $sce.trustAsResourceUrl('../api/file/' + $stateParams.fileId + '/data');
       }
     });
   });
 
+  /**
+   * Return the next file.
+   */
+  $scope.nextFile = function () {
+    var next = undefined;
+    _.each($scope.files, function (value, key) {
+      if (value.id === $stateParams.fileId) {
+        next = $scope.files[key + 1];
+      }
+    });
+    return next;
+  };
+
+  /**
+   * Return the previous file.
+   */
+  $scope.previousFile = function () {
+    var previous = undefined;
+    _.each($scope.files, function (value, key) {
+      if (value.id === $stateParams.fileId) {
+        previous = $scope.files[key - 1];
+      }
+    });
+    return previous;
+  };
+
   /**
    * Navigate to the next file.
    */
-  $scope.nextFile = function() {
-    _.each($scope.files, function(value, key) {
-      if (value.id === $stateParams.fileId) {
-        var next = $scope.files[key + 1];
+  $scope.goNextFile = function () {
+    var next = $scope.nextFile();
     if (next) {
       $state.go('^.file', { id: $stateParams.id, fileId: next.id });
     }
-      }
-    });
   };
 
   /**
    * Navigate to the previous file.
    */
-  $scope.previousFile = function() {
-    _.each($scope.files, function(value, key) {
-      if (value.id === $stateParams.fileId) {
-        var previous = $scope.files[key - 1];
+  $scope.goPreviousFile = function () {
+    var previous = $scope.previousFile();
     if (previous) {
       $state.go('^.file', { id: $stateParams.id, fileId: previous.id });
     }
-      }
-    });
   };
 
   /**
    * Open the file in a new window.
    */
-  $scope.openFile = function() {
+  $scope.openFile = function () {
     window.open('../api/file/' + $stateParams.fileId + '/data');
   };
 
   /**
    * Print the file.
    */
-  $scope.printFile = function() {
+  $scope.printFile = function () {
     var popup = window.open('../api/file/' + $stateParams.fileId + '/data', '_blank');
     popup.onload = function () {
       popup.print();
@@ -80,4 +99,11 @@ angular.module('docs').controller('FileModalView', function($uibModalInstance, $
     }
     off();
   });
+
+  /**
+   * Return true if we can display the preview image.
+   */
+  $scope.canDisplayPreview = function () {
+    return $scope.file && $scope.file.mimetype !== 'application/pdf';
+  };
 });

docs-web/src/main/webapp/src/partial/docs/file.view.html

@@ -6,8 +6,19 @@
   </div>
 
   <div class="btn-group">
-    <button type="button" class="btn btn-default" ng-click="previousFile()">{{ 'file.view.previous' | translate }}</button>
-    <button type="button" class="btn btn-default" ng-click="nextFile()">{{ 'file.view.next' | translate }}</button>
+    <button type="button" class="btn btn-default"
+            ng-style="{ 'visibility': previousFile() ? 'visible' : 'hidden' }"
+            ng-click="goPreviousFile()">
+      {{ 'file.view.previous' | translate }}
+    </button>
+    <button type="button" class="btn btn-default"
+            ng-style="{ 'visibility': nextFile() ? 'visible' : 'hidden' }"
+            ng-click="goNextFile()">
+      {{ 'file.view.next' | translate }}
+    </button>
+    <button type="button" class="btn btn-placeholder" style="visibility: hidden">
+      &nbsp;
+    </button>
   </div>
   
   <div class="btn-group pull-right">
@@ -21,16 +32,24 @@
 </div>
 
 <div class="text-center" style="position: relative;" ng-if="$stateParams.fileId">
+  <!-- Standard preview -->
   <img ng-src="../api/file/{{ $stateParams.fileId }}/data?size=web"
        ng-init="error = false"
        img-error="error = true"
-       ng-show="!error" />
-  <a href class="video-overlay" ng-if="file.mimetype.substring(0, 6) == 'video/'"
+       ng-show="!error && canDisplayPreview()" />
+
+  <!-- Video player -->
+  <a href class="video-overlay" ng-if="!error && file.mimetype.substring(0, 6) == 'video/'"
      ng-init="videoPlayer = false" ng-click="videoPlayer = true">
     <span class="fas fa-play-circle" ng-if="!videoPlayer"></span>
     <video ng-if="videoPlayer" autoplay="autoplay" loop="loop"
            controls="controls" ng-src="../api/file/{{ $stateParams.fileId }}/data"></video>
   </a>
+
+  <!-- PDF viewer -->
+  <iframe ng-src="{{ trustedFileUrl }}" class="pdf-viewer" scrolling="yes" ng-if="!error && file.mimetype == 'application/pdf'"></iframe>
+
+  <!-- File not found -->
   <p class="well-lg" ng-show="error">
     <span class="fas fa-exclamation-triangle"></span>
     {{ 'file.view.not_found' | translate }}

docs-web/src/main/webapp/src/style/main.less

@@ -422,6 +422,18 @@ input[readonly].share-link {
   }
 }
 
+// PDF viewer
+.pdf-viewer {
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 80vh;
+}
+
 // Vertical alignment
 .vertical-center {
   min-height: 100vh;
@@ -619,3 +631,11 @@ input[readonly].share-link {
   padding-left: 0;
   padding-right: 0;
 }
+
+// Button placeholder
+.btn-placeholder {
+  visibility: hidden;
+  width: 0;
+  padding-left: 0;
+  padding-right: 0;
+}