mirror of
https://github.com/sismics/docs.git
synced 2024-11-25 15:17:57 +01:00
Closes #194: PDF viewer
This commit is contained in:
parent
6f27b9c13f
commit
63c7e9710b
@ -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');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Navigate to the next file.
|
||||
* Return the next file.
|
||||
*/
|
||||
$scope.nextFile = function() {
|
||||
_.each($scope.files, function(value, key) {
|
||||
$scope.nextFile = function () {
|
||||
var next = undefined;
|
||||
_.each($scope.files, function (value, key) {
|
||||
if (value.id === $stateParams.fileId) {
|
||||
var next = $scope.files[key + 1];
|
||||
if (next) {
|
||||
$state.go('^.file', { id: $stateParams.id, fileId: next.id });
|
||||
}
|
||||
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.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];
|
||||
if (previous) {
|
||||
$state.go('^.file', { id: $stateParams.id, fileId: previous.id });
|
||||
}
|
||||
}
|
||||
});
|
||||
$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';
|
||||
};
|
||||
});
|
@ -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">
|
||||
|
||||
</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 }}
|
||||
|
@ -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;
|
||||
@ -618,4 +630,12 @@ input[readonly].share-link {
|
||||
.widgets .col-md-12 {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
// Button placeholder
|
||||
.btn-placeholder {
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
Loading…
Reference in New Issue
Block a user