From 3eb39c0c91cd01b74f982e5943dea1fcd61030a3 Mon Sep 17 00:00:00 2001 From: Edoardo Tenani Date: Sat, 9 Sep 2017 14:52:28 +0200 Subject: [PATCH 01/24] add NgPdfFactory --- src/angular-pdf.factory.js | 18 ++++++++++++++++++ src/angular-pdf.module.js | 2 ++ 2 files changed, 20 insertions(+) create mode 100644 src/angular-pdf.factory.js diff --git a/src/angular-pdf.factory.js b/src/angular-pdf.factory.js new file mode 100644 index 0000000..cbe74c8 --- /dev/null +++ b/src/angular-pdf.factory.js @@ -0,0 +1,18 @@ +export const NgPdfFactory = function () { + 'ngInject'; + + const defaultOptions = { + currentPage: 1, + fitToPage: false, + httpHeaders: null, + url: null, + scale: 1, + useCredentials: false, + rotation: 0, + pageCount: null, + }; + + return function (opts) { + this.options = Object.assign({}, defaultOptions, opts); + }; +} diff --git a/src/angular-pdf.module.js b/src/angular-pdf.module.js index 3932137..3a8d1ad 100644 --- a/src/angular-pdf.module.js +++ b/src/angular-pdf.module.js @@ -1,9 +1,11 @@ import angular from 'angular'; import { NgPdf } from './angular-pdf.directive' +import { NgPdfFactory } from './angular-pdf.factory' export const Pdf = angular .module('pdf', []) .directive('ngPdf', NgPdf) + .factory('NgPdfFactory', NgPdfFactory) .name; export default Pdf; From 0abc968d62ebac7e455c239fbd0e92a3b75b1874 Mon Sep 17 00:00:00 2001 From: Edoardo Tenani Date: Sat, 9 Sep 2017 14:57:08 +0200 Subject: [PATCH 02/24] start isolating directive scope --- example/js/controllers/docCtrl.js | 6 +++++- src/angular-pdf.directive.js | 24 ++++++++++++++++-------- 2 files changed, 21 insertions(+), 9 deletions(-) diff --git a/example/js/controllers/docCtrl.js b/example/js/controllers/docCtrl.js index 4e2df4c..4dc19c3 100644 --- a/example/js/controllers/docCtrl.js +++ b/example/js/controllers/docCtrl.js @@ -1,10 +1,14 @@ -app.controller('DocCtrl', function($scope) { +app.controller('DocCtrl', function($scope, NgPdfFactory) { $scope.pdfName = 'Relativity: The Special and General Theory by Albert Einstein'; $scope.pdfUrl = 'pdf/relativity.pdf'; $scope.pdfPassword = 'test'; $scope.scroll = 0; $scope.loading = 'loading'; + + $scope.pdfConfig = new NgPdfFactory({ + url: 'pdf/relativity.pdf', + }); $scope.getNavStyle = function(scroll) { if(scroll > 100) return 'pdf-controls fixed'; diff --git a/src/angular-pdf.directive.js b/src/angular-pdf.directive.js index 077266c..acf94f7 100644 --- a/src/angular-pdf.directive.js +++ b/src/angular-pdf.directive.js @@ -33,20 +33,25 @@ export const NgPdf = ($window, $document, $log) => { templateUrl(element, attr) { return attr.templateUrl ? attr.templateUrl : 'partials/viewer.html'; }, + scope: { + pdf: '=' + }, link(scope, element, attrs) { let renderTask = null; let pdfLoaderTask = null; let debug = false; - let url = scope.pdfUrl; - let httpHeaders = scope.httpHeaders; - let pdfDoc = null; - let pageToDisplay = isFinite(attrs.page) ? parseInt(attrs.page) : 1; - let pageFit = attrs.scale === 'page-fit'; + let url = scope.pdf.options.url; + let httpHeaders = scope.pdf.options.httpHeaders; let limitHeight = attrs.limitcanvasheight === '1'; - let scale = attrs.scale > 0 ? attrs.scale : 1; + let pdfDoc = null; + // let pageToDisplay = isFinite(attrs.page) ? parseInt(attrs.page) : 1; + let pageToDisplay = scope.pdf.options.currentPage; + let pageFit = scope.pdf.options.scale === 'page-fit'; + // let scale = attrs.scale > 0 ? attrs.scale : 1; + let scale = scope.pdf.options.scale; let canvas = $document[0].createElement('canvas'); initCanvas(element, canvas); - let creds = attrs.usecredentials; + let creds = scope.pdf.options.useCredentials; debug = attrs.hasOwnProperty('debug') ? attrs.debug : false; let ctx = canvas.getContext('2d'); @@ -62,6 +67,8 @@ export const NgPdf = ($window, $document, $log) => { PDFJS.disableWorker = true; scope.pageNum = pageToDisplay; + + renderPDF() scope.renderPage = num => { if (renderTask) { @@ -186,6 +193,7 @@ export const NgPdf = ($window, $document, $log) => { scope.$apply(() => { scope.pageCount = _pdfDoc.numPages; + scope.pdf.options.pageCount = _pdfDoc.numPages; }); }, error => { if (error) { @@ -198,7 +206,7 @@ export const NgPdf = ($window, $document, $log) => { } } - scope.$watch('pageNum', newVal => { + scope.$watch(() => { return scope.pdf.options.currentPage }, (newVal) => { scope.pageToDisplay = parseInt(newVal); if (pdfDoc !== null) { scope.renderPage(scope.pageToDisplay); From e173b53c07892a19f5d2860de0d54b5a63bcea14 Mon Sep 17 00:00:00 2001 From: Edoardo Tenani Date: Sat, 9 Sep 2017 14:59:24 +0200 Subject: [PATCH 03/24] move template out of directive --- example/index.html | 3 ++- src/angular-pdf.directive.js | 3 --- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/example/index.html b/example/index.html index a98ac58..9f1d275 100644 --- a/example/index.html +++ b/example/index.html @@ -10,7 +10,8 @@

{{pdfName}}

- + +
Fork me on GitHub diff --git a/src/angular-pdf.directive.js b/src/angular-pdf.directive.js index acf94f7..6bd7f1b 100644 --- a/src/angular-pdf.directive.js +++ b/src/angular-pdf.directive.js @@ -30,9 +30,6 @@ export const NgPdf = ($window, $document, $log) => { return { restrict: 'E', - templateUrl(element, attr) { - return attr.templateUrl ? attr.templateUrl : 'partials/viewer.html'; - }, scope: { pdf: '=' }, From 16795911f6745e7affcefe5a32f52febf3a1c168 Mon Sep 17 00:00:00 2001 From: Edoardo Tenani Date: Sat, 9 Sep 2017 15:00:09 +0200 Subject: [PATCH 04/24] move page next-prev to factory --- example/partials/viewer.html | 4 ++-- src/angular-pdf.directive.js | 19 +------------------ src/angular-pdf.factory.js | 14 ++++++++++++++ 3 files changed, 17 insertions(+), 20 deletions(-) diff --git a/example/partials/viewer.html b/example/partials/viewer.html index d28859a..d04d446 100644 --- a/example/partials/viewer.html +++ b/example/partials/viewer.html @@ -1,6 +1,6 @@
diff --git a/src/angular-pdf.directive.js b/src/angular-pdf.directive.js index b9909de..9935979 100644 --- a/src/angular-pdf.directive.js +++ b/src/angular-pdf.directive.js @@ -60,6 +60,11 @@ export const NgPdf = ($window, $document, $log) => { PDFJS.disableWorker = true; renderPDF() + scope.$watch(() => scope.pdf, (newVal, oldVal) => { + if (newVal !== oldVal) { + renderPDF(); + } + }); const renderPage = num => { if (pdfDoc === null) { From 74040961e0fdcf03ab6b362737d61a17851dd5d3 Mon Sep 17 00:00:00 2001 From: Edoardo Tenani Date: Sun, 10 Sep 2017 00:18:22 +0200 Subject: [PATCH 20/24] refactor directive hooks --- example/index.html | 6 +++++- example/js/controllers/docCtrl.js | 16 ++++++++-------- src/angular-pdf.directive.js | 27 ++++++++++++++++++--------- 3 files changed, 31 insertions(+), 18 deletions(-) diff --git a/example/index.html b/example/index.html index b1d0759..d650e38 100644 --- a/example/index.html +++ b/example/index.html @@ -11,7 +11,11 @@

{{pdfName}}

- + +
Fork me on GitHub diff --git a/example/js/controllers/docCtrl.js b/example/js/controllers/docCtrl.js index 9936700..a814f4d 100644 --- a/example/js/controllers/docCtrl.js +++ b/example/js/controllers/docCtrl.js @@ -34,16 +34,16 @@ app.controller('DocCtrl', function($scope, NgPdfFactory) { else return 'pdf-controls'; } - $scope.onError = function(error) { - console.log(error); - } + $scope.onPdfLoadingSuccess = function() { + console.log('pdf loaded') + }; - $scope.onLoad = function() { - $scope.loading = ''; - } + $scope.onPdfLoadingProgress = function (progressData) { + console.log('pdf loading on progress', progressData); + }; - $scope.onProgress = function (progressData) { - console.log(progressData); + $scope.onPdfLoadingError = function(error) { + console.log('pdf loading error', error); }; $scope.onPassword = function (updatePasswordFn, passwordResponse) { diff --git a/src/angular-pdf.directive.js b/src/angular-pdf.directive.js index 9935979..6bbaf80 100644 --- a/src/angular-pdf.directive.js +++ b/src/angular-pdf.directive.js @@ -31,7 +31,10 @@ export const NgPdf = ($window, $document, $log) => { return { restrict: 'E', scope: { - pdf: '=' + pdf: '=', + onError: '&', + onProgress: '&', + onSuccess: '&', }, link(scope, element, attrs) { let renderTask = null; @@ -133,9 +136,7 @@ export const NgPdf = ($window, $document, $log) => { pdfLoaderTask.onPassword = scope.onPassword; pdfLoaderTask.then( _pdfDoc => { - if (angular.isFunction(scope.onLoad)) { - scope.onLoad(); - } + run_success_hook() pdfDoc = _pdfDoc; renderPage(scope.pdf.currentPage); @@ -144,11 +145,7 @@ export const NgPdf = ($window, $document, $log) => { scope.pdf.pageCount = _pdfDoc.numPages; }); }, error => { - if (error) { - if (angular.isFunction(scope.onError)) { - scope.onError(error); - } - } + run_error_hook(error) } ); } @@ -171,6 +168,18 @@ export const NgPdf = ($window, $document, $log) => { scope.$watch(() => { return scope.pdf.rotation }, (newVal) => { canvas.setAttribute('class', 'rotate'+parseInt(newVal)); }) + + const run_success_hook = () => { + if (angular.isFunction(scope.onSuccess)) { + scope.onSuccess(); + } + }; + + const run_error_hook = (error) => { + if (angular.isFunction(scope.onError)) { + scope.onError(error); + } + }; } } } From fa999c7e6cb6198f49cba79ad27430f4df70b184 Mon Sep 17 00:00:00 2001 From: Edoardo Tenani Date: Sun, 10 Sep 2017 00:18:50 +0200 Subject: [PATCH 21/24] disable not implemented features --- src/angular-pdf.directive.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/angular-pdf.directive.js b/src/angular-pdf.directive.js index 6bbaf80..b5cdc15 100644 --- a/src/angular-pdf.directive.js +++ b/src/angular-pdf.directive.js @@ -126,14 +126,14 @@ export const NgPdf = ($window, $document, $log) => { 'withCredentials': creds }; - if (httpHeaders) { - params.httpHeaders = httpHeaders; - } + // if (httpHeaders) { + // params.httpHeaders = httpHeaders; + // } if (scope.pdf.url && scope.pdf.url.length) { pdfLoaderTask = PDFJS.getDocument(params); pdfLoaderTask.onProgress = scope.onProgress; - pdfLoaderTask.onPassword = scope.onPassword; + // pdfLoaderTask.onPassword = scope.onPassword; pdfLoaderTask.then( _pdfDoc => { run_success_hook() From a50d845deb380bf798647a370e7883013afcfb2d Mon Sep 17 00:00:00 2001 From: Edoardo Tenani Date: Mon, 11 Sep 2017 20:06:36 +0200 Subject: [PATCH 22/24] implement password callback in directive --- example/js/controllers/docCtrl.js | 7 ------- src/angular-pdf.directive.js | 17 ++++++++++++++--- src/angular-pdf.factory.js | 1 + 3 files changed, 15 insertions(+), 10 deletions(-) diff --git a/example/js/controllers/docCtrl.js b/example/js/controllers/docCtrl.js index a814f4d..3a3717d 100644 --- a/example/js/controllers/docCtrl.js +++ b/example/js/controllers/docCtrl.js @@ -46,12 +46,5 @@ app.controller('DocCtrl', function($scope, NgPdfFactory) { console.log('pdf loading error', error); }; - $scope.onPassword = function (updatePasswordFn, passwordResponse) { - if (passwordResponse === PDFJS.PasswordResponses.NEED_PASSWORD) { - updatePasswordFn($scope.pdfPassword); - } else if (passwordResponse === PDFJS.PasswordResponses.INCORRECT_PASSWORD) { - console.log('Incorrect password') - } - }; }); diff --git a/src/angular-pdf.directive.js b/src/angular-pdf.directive.js index b5cdc15..23f3f93 100644 --- a/src/angular-pdf.directive.js +++ b/src/angular-pdf.directive.js @@ -28,6 +28,18 @@ export const NgPdf = ($window, $document, $log) => { element.append(canvas); }; + const onPassword = function (password) { + return function (updatePasswordFn, passwordResponse) { + switch (passwordResponse) { + case PDFJS.PasswordResponses.NEED_PASSWORD: + updatePasswordFn(password); + break; + case PDFJS.PasswordResponses.INCORRECT_PASSWORD: + break; + } + }; + }; + return { restrict: 'E', scope: { @@ -46,7 +58,6 @@ export const NgPdf = ($window, $document, $log) => { let pageToDisplay = scope.pdf.currentPage; let canvas = $document[0].createElement('canvas'); initCanvas(element, canvas); - let creds = scope.pdf.useCredentials; debug = attrs.hasOwnProperty('debug') ? attrs.debug : false; let ctx = canvas.getContext('2d'); @@ -123,7 +134,7 @@ export const NgPdf = ($window, $document, $log) => { let params = { 'url': scope.pdf.url, - 'withCredentials': creds + 'withCredentials': scope.pdf.useCredentials }; // if (httpHeaders) { @@ -133,7 +144,7 @@ export const NgPdf = ($window, $document, $log) => { if (scope.pdf.url && scope.pdf.url.length) { pdfLoaderTask = PDFJS.getDocument(params); pdfLoaderTask.onProgress = scope.onProgress; - // pdfLoaderTask.onPassword = scope.onPassword; + pdfLoaderTask.onPassword = onPassword(scope.pdf.password); pdfLoaderTask.then( _pdfDoc => { run_success_hook() diff --git a/src/angular-pdf.factory.js b/src/angular-pdf.factory.js index 48e1cfb..7ebcfef 100644 --- a/src/angular-pdf.factory.js +++ b/src/angular-pdf.factory.js @@ -7,6 +7,7 @@ export const NgPdfFactory = function () { httpHeaders: null, scale: 1, useCredentials: false, + password: null, rotation: 0, pageCount: null, }; From 7d6944d25221829f5ca58eca7366f0681d78000a Mon Sep 17 00:00:00 2001 From: Edoardo Tenani Date: Mon, 11 Sep 2017 20:08:45 +0200 Subject: [PATCH 23/24] implement password callback for controller --- example/index.html | 3 ++- example/js/controllers/docCtrl.js | 3 +++ src/angular-pdf.directive.js | 6 ++++-- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/example/index.html b/example/index.html index d650e38..70cf85a 100644 --- a/example/index.html +++ b/example/index.html @@ -14,7 +14,8 @@

{{pdfName}}

+ on-success="onPdfLoadingSuccess()" + on-incorrect-password="onIncorrectPdfPassword()"> diff --git a/example/js/controllers/docCtrl.js b/example/js/controllers/docCtrl.js index 3a3717d..aeb30a0 100644 --- a/example/js/controllers/docCtrl.js +++ b/example/js/controllers/docCtrl.js @@ -46,5 +46,8 @@ app.controller('DocCtrl', function($scope, NgPdfFactory) { console.log('pdf loading error', error); }; + $scope.onIncorrectPdfPassword = function () { + console.error('password is wrong!'); + }; }); diff --git a/src/angular-pdf.directive.js b/src/angular-pdf.directive.js index 23f3f93..1f8683f 100644 --- a/src/angular-pdf.directive.js +++ b/src/angular-pdf.directive.js @@ -28,13 +28,14 @@ export const NgPdf = ($window, $document, $log) => { element.append(canvas); }; - const onPassword = function (password) { + const onPassword = function (password, incorrectPasswordCallback) { return function (updatePasswordFn, passwordResponse) { switch (passwordResponse) { case PDFJS.PasswordResponses.NEED_PASSWORD: updatePasswordFn(password); break; case PDFJS.PasswordResponses.INCORRECT_PASSWORD: + incorrectPasswordCallback(); break; } }; @@ -47,6 +48,7 @@ export const NgPdf = ($window, $document, $log) => { onError: '&', onProgress: '&', onSuccess: '&', + onIncorrectPassword: '&' }, link(scope, element, attrs) { let renderTask = null; @@ -144,7 +146,7 @@ export const NgPdf = ($window, $document, $log) => { if (scope.pdf.url && scope.pdf.url.length) { pdfLoaderTask = PDFJS.getDocument(params); pdfLoaderTask.onProgress = scope.onProgress; - pdfLoaderTask.onPassword = onPassword(scope.pdf.password); + pdfLoaderTask.onPassword = onPassword(scope.pdf.password, scope.onIncorrectPassword); pdfLoaderTask.then( _pdfDoc => { run_success_hook() From 6f33d725bf7d48588ff2eaace695a49f94f188d8 Mon Sep 17 00:00:00 2001 From: Edoardo Tenani Date: Mon, 11 Sep 2017 20:12:32 +0200 Subject: [PATCH 24/24] add example for protected pdf --- example/js/controllers/docCtrl.js | 7 ++----- example/partials/viewer.html | 3 +-- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/example/js/controllers/docCtrl.js b/example/js/controllers/docCtrl.js index aeb30a0..a6fba77 100644 --- a/example/js/controllers/docCtrl.js +++ b/example/js/controllers/docCtrl.js @@ -1,13 +1,12 @@ app.controller('DocCtrl', function($scope, NgPdfFactory) { $scope.pdfName = 'Relativity: The Special and General Theory by Albert Einstein'; - $scope.pdfUrl = 'pdf/relativity.pdf'; - $scope.pdfPassword = 'test'; $scope.scroll = 0; $scope.loading = 'loading'; $scope.changePdfPage = 1; - $scope.pdfConfig = new NgPdfFactory($scope.pdfUrl, { fitToPage: true }); + $scope.pdfConfig = new NgPdfFactory('pdf/relativity.pdf', { fitToPage: true }); + $scope.protectedPdfConfig = new NgPdfFactory('pdf/relativity.protected.pdf', { fitToPage: true, useCredentials: true, password: 'test' }); $scope.$watch('pdfUrl', (newVal, oldVal) => { if (newVal !== '' && newVal !== oldVal) { @@ -27,8 +26,6 @@ app.controller('DocCtrl', function($scope, NgPdfFactory) { } }); - - $scope.getNavStyle = function(scroll) { if(scroll > 100) return 'pdf-controls fixed'; else return 'pdf-controls'; diff --git a/example/partials/viewer.html b/example/partials/viewer.html index f905c21..e0617aa 100644 --- a/example/partials/viewer.html +++ b/example/partials/viewer.html @@ -14,8 +14,7 @@ / {{pdfConfig.pageCount}}    - Document URL: - + Document URL: {{pdfConfig.url}}