This is a simple directive implementation in AngularJS where the left half of the screen can be used as a Document viewer supporting all image formats with PanZoom API integration and pdf support with Object Tag. If you prefer PDFJS for your pdf support since object tag relies on browser pdf plugin to be able to render and does not work in IE11, then take a look at part II of this post where the object tag is swapped with an angular-pdf directive implementing some basic functionalities of PDFJS.
<split-screen masterid="leftone"></split-screen>
The masterid attribute is used to uniquely name the elements in the template if the directive is used multiple times in the same view (in different tabs or wizard steps for example).
Angular PanZoom Library :- https://github.com/mvindahl/angular-pan-zoom
A little bit of context for the below example. This directive is used in multiple views so that the user can at anytime load and view related documents on the left-hand side of the screen and do the corresponding data-entry on the right-hand side of the screen. For example :- Each document or real-life form can correspond to a view in the application. On view rendering, all the documents related to the application are shown in a drop-down and on selection, the actual document is fetched.
Notes :-
- "ng-attr-data" is used in object tag so that the browser does not make requests for the unevaluated AngularJS string "{{scope.pdfData}}.
- Parent div of the object tag or the object tag itself needs an ng-show="pdfData" to render properly once the data is loaded into the pdfData variable.
- You need to bower install jquery.panzoom and jquery.mousewheel in order to make the images pannable and zoomable.
- The raw query parameter is passed in resource calls to make the "Content-Disposition" header from the server "Inline" instead of "attachment".
- All server side responses for document serving is base64 encoded.
Directive Code :-
SplitScreenDirective: function (resourceFactory, routeParams, $rootScope, http) {
return {
restrict: 'EA',
scope: {masterid: '@'},
link: {
pre: function (scope, element, attrs) {
scope.application = {};
scope.application.doc = {};
$rootScope.doc = {};
resourceFactory.loanAppRefDocumentResource.getAllAppRefDocuments({
applicationRefId: routeParams.id, anotherresource: "documents"}, function (data) {
scope.application.existingdocs = data;
});
},
post: function(scope, element, attrs) {
}
},
controller: function($scope, $element) {
$scope.fetchPdf = function(id) {
http({
method: 'GET',
url: resourceFactory.baseUrl + '/LOANAPPLICATIONREFERENCE/' + routeParams.id + '/documents/' + id + '/attachment?raw=true&base64=true';
}).then(function (pdfData) {
$scope.pdfData = "data:application/pdf;base64," + pdfData.data;
});
};
$scope.fetchImage = function(id) {
var uri = resourceFactory.baseUrl + '/LOANAPPLICATIONREFERENCE/' + routeParams.id + '/documents/';
$scope.application.doc.link = uri + id + '/attachment?raw=true;
$rootScope.doc.link = $scope.application.doc.link;
var $section = $('#focal' + $scope.masterid);
var $panzoom = $section.find('.panzoom' + $scope.masterid).panzoom();
$panzoom.parent().on('mousewheel.focal', function( e ) {
e.preventDefault();
var delta = e.delta || e.originalEvent.wheelDelta;
var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
$panzoom.panzoom('zoom', zoomOut, {
increment: 0.1,
animate: false,
focal: e
});
});
};
$scope.fetchDocument = function() {
if($scope.application.doc.type == "application/pdf")
$scope.fetchPdf($scope.application.doc.id);
else
$scope.fetchImage($scope.application.doc.id);
};
},
template: '<div class="col-sm-6 panel-left">' +
'<div class="col-sm-6">' +
'<select id="productdocs" name="productdocs" ng-model="application.doc" class="form-control"' +
'ng-options="appdoc as appdoc.name+ \' - \' + appdoc.description for appdoc in application.existingdocs"' +
'ng-change="fetchDocument()">' +
'<option value="">---{{"label.heading.seldocument" | translate}}---</option>' +
'</select>' +
'</div>' +
'<div style="border: 1px solid #cccccc; overflow: auto" class="col-sm-12">' +
'<div ng-if="application.doc.type != \'application/pdf\'">' +
'<section id="focal{{masterid}}" style="margin-top:0px; height:500px;">' +
'<div class="panzoom{{masterid}}">' +
'<img class="img-responsive" ng-src="{{application.doc.link}}" style="border: 1px solid #000000;"/>' +
'</div></section>' +
'</div>' +
'<div class="wrapper" ng-if="application.doc.type == \'application/pdf\'" ng-show="pdfData">' +
'<object type="application/pdf" width="100%" height="600px" ng-attr-data="{{pdfData}}"></object>' +
'</div>' +
'</div>' +
'</div>'
};
}
