From 3f51cfd506a24936550c10d706f4a58591fea58f Mon Sep 17 00:00:00 2001 From: andrewpowell Date: Wed, 23 Jul 2014 15:34:29 -0400 Subject: [PATCH 1/3] adding .gitignore --- .gitignore | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..e3d1f6bf --- /dev/null +++ b/.gitignore @@ -0,0 +1,32 @@ +# Created by .gitignore support plugin (hsz.mobi) + +### JetBrains template +# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm + +## Directory-based project format +.idea/ +# if you remove the above rule, at least ignore user-specific stuff: +# .idea/workspace.xml +# .idea/tasks.xml +# and these sensitive or high-churn files: +# .idea/dataSources.ids +# .idea/dataSources.xml +# .idea/sqlDataSources.xml +# .idea/dynamic.xml + +## File-based project format +*.ipr +*.iml +*.iws + +## Additional for IntelliJ +out/ + +# generated by mpeltonen/sbt-idea plugin +.idea_modules/ + +# generated by JIRA plugin +atlassian-ide-plugin.xml + +# generated by Crashlytics plugin (for Android Studio and Intellij) +com_crashlytics_export_strings.xml From ab284f0ceea3330c24727b5af0098e188593d8e6 Mon Sep 17 00:00:00 2001 From: andrewpowell Date: Wed, 23 Jul 2014 16:53:18 -0400 Subject: [PATCH 2/3] adding the ability to render multiple pages --- ng-pdfviewer.js | 309 +++++++++++++++++++++++++----------------------- 1 file changed, 163 insertions(+), 146 deletions(-) diff --git a/ng-pdfviewer.js b/ng-pdfviewer.js index 098b2ee3..e8bb88f4 100644 --- a/ng-pdfviewer.js +++ b/ng-pdfviewer.js @@ -1,154 +1,171 @@ /** * @preserve AngularJS PDF viewer directive using pdf.js. * - * https://github.com/akrennmair/ng-pdfviewer + * https://github.com/akrennmair/ng-pdfviewer * * MIT license */ angular.module('ngPDFViewer', []). -directive('pdfviewer', [ '$parse', function($parse) { - var canvas = null; - var instance_id = null; - - return { - restrict: "E", - template: '', - scope: { - onPageLoad: '&', - loadProgress: '&', - src: '@', - id: '=' - }, - controller: [ '$scope', function($scope) { - $scope.pageNum = 1; - $scope.pdfDoc = null; - $scope.scale = 1.0; - - $scope.documentProgress = function(progressData) { - if ($scope.loadProgress) { - $scope.loadProgress({state: "loading", loaded: progressData.loaded, total: progressData.total}); - } - }; - - $scope.loadPDF = function(path) { - console.log('loadPDF ', path); - PDFJS.getDocument(path, null, null, $scope.documentProgress).then(function(_pdfDoc) { - $scope.pdfDoc = _pdfDoc; - $scope.renderPage($scope.pageNum, function(success) { - if ($scope.loadProgress) { - $scope.loadProgress({state: "finished", loaded: 0, total: 0}); - } - }); - }, function(message, exception) { - console.log("PDF load error: " + message); - if ($scope.loadProgress) { - $scope.loadProgress({state: "error", loaded: 0, total: 0}); - } - }); - }; - - $scope.renderPage = function(num, callback) { - console.log('renderPage ', num); - $scope.pdfDoc.getPage(num).then(function(page) { - var viewport = page.getViewport($scope.scale); - var ctx = canvas.getContext('2d'); - - canvas.height = viewport.height; - canvas.width = viewport.width; - - page.render({ canvasContext: ctx, viewport: viewport }).promise.then( - function() { - if (callback) { - callback(true); - } - $scope.$apply(function() { - $scope.onPageLoad({ page: $scope.pageNum, total: $scope.pdfDoc.numPages }); - }); - }, - function() { - if (callback) { - callback(false); - } - console.log('page.render failed'); - } - ); - }); - }; - - $scope.$on('pdfviewer.nextPage', function(evt, id) { - if (id !== instance_id) { - return; - } - - if ($scope.pageNum < $scope.pdfDoc.numPages) { - $scope.pageNum++; - $scope.renderPage($scope.pageNum); - } - }); - - $scope.$on('pdfviewer.prevPage', function(evt, id) { - if (id !== instance_id) { - return; - } - - if ($scope.pageNum > 1) { - $scope.pageNum--; - $scope.renderPage($scope.pageNum); - } - }); - - $scope.$on('pdfviewer.gotoPage', function(evt, id, page) { - if (id !== instance_id) { - return; - } - - if (page >= 1 && page <= $scope.pdfDoc.numPages) { - $scope.pageNum = page; - $scope.renderPage($scope.pageNum); - } - }); - } ], - link: function(scope, iElement, iAttr) { - canvas = iElement.find('canvas')[0]; - instance_id = iAttr.id; - - iAttr.$observe('src', function(v) { - console.log('src attribute changed, new value is', v); - if (v !== undefined && v !== null && v !== '') { - scope.pageNum = 1; - scope.loadPDF(scope.src); - } - }); - } - }; -}]). -service("PDFViewerService", [ '$rootScope', function($rootScope) { - - var svc = { }; - svc.nextPage = function() { - $rootScope.$broadcast('pdfviewer.nextPage'); - }; - - svc.prevPage = function() { - $rootScope.$broadcast('pdfviewer.prevPage'); - }; - - svc.Instance = function(id) { - var instance_id = id; - - return { - prevPage: function() { - $rootScope.$broadcast('pdfviewer.prevPage', instance_id); - }, - nextPage: function() { - $rootScope.$broadcast('pdfviewer.nextPage', instance_id); - }, - gotoPage: function(page) { - $rootScope.$broadcast('pdfviewer.gotoPage', instance_id, page); - } - }; - }; - - return svc; -}]); + directive('pdfviewer', [ '$parse', function($parse) { + var canvas = null; + var instance_id = null; + + return { + restrict: "E", + template: '', + scope: { + onPageLoad: '&', + loadProgress: '&', + displayAll: '@', + src: '@', + id: '=' + }, + controller: [ '$scope', function($scope) { + $scope.pageNum = 1; + $scope.pdfDoc = null; + $scope.scale = 1.0; + + $scope.documentProgress = function(progressData) { + if ($scope.loadProgress) { + $scope.loadProgress({state: "loading", loaded: progressData.loaded, total: progressData.total}); + } + }; + + $scope.loadPDF = function(path) { + console.log('loadPDF ', path); + PDFJS.getDocument(path, null, null, $scope.documentProgress).then(function(_pdfDoc) { + $scope.pdfDoc = _pdfDoc; + $scope.numPages = $scope.pdfDoc.numPages; + if($scope.displayAll == "true"){ + $scope.pdfDoc.getPage($scope.pageNum).then($scope.renderAll) + }else{ + $scope.renderPage($scope.pageNum, function(success) { + if ($scope.loadProgress) { + $scope.loadProgress({state: "finished", loaded: 0, total: 0}); + } + }); + } + }, function(message, exception) { + console.log("PDF load error: " + message); + if ($scope.loadProgress) { + $scope.loadProgress({state: "error", loaded: 0, total: 0}); + } + }); + }; + + $scope.renderAll=function(page){ + $scope.renderPage($scope.pageNum); + //Move to next page + $scope.pageNum++; + if ( $scope.pdfDoc !== null && $scope.pageNum <= $scope.numPages ) + { + $scope.pdfDoc.getPage( $scope.pageNum ).then( $scope.renderAll ); + } + }; + + $scope.renderPage = function(num, callback) { + console.log('renderPage ', num); + $scope.pdfDoc.getPage(num).then(function(page) { + var viewport = page.getViewport($scope.scale); + + var ctx = canvas.getContext('2d'); + + canvas.height = viewport.height; + canvas.width = viewport.width; + + page.render({ canvasContext: ctx, viewport: viewport }).then( + function() { + if (callback) { + callback(true); + } + $scope.$apply(function() { + $scope.onPageLoad({ page: $scope.pageNum, total: $scope.pdfDoc.numPages }); + }); + }, + function() { + if (callback) { + callback(false); + } + console.log('page.render failed'); + } + ); + }); + }; + + $scope.$on('pdfviewer.nextPage', function(evt, id) { + if (id !== instance_id) { + return; + } + + if ($scope.pageNum < $scope.pdfDoc.numPages) { + $scope.pageNum++; + $scope.renderPage($scope.pageNum); + } + }); + + $scope.$on('pdfviewer.prevPage', function(evt, id) { + if (id !== instance_id) { + return; + } + + if ($scope.pageNum > 1) { + $scope.pageNum--; + $scope.renderPage($scope.pageNum); + } + }); + + $scope.$on('pdfviewer.gotoPage', function(evt, id, page) { + if (id !== instance_id) { + return; + } + + if (page >= 1 && page <= $scope.pdfDoc.numPages) { + $scope.pageNum = page; + $scope.renderPage($scope.pageNum); + } + }); + } ], + link: function(scope, iElement, iAttr) { + div = iElement.find('canvas')[0]; + instance_id = iAttr.id; + + iAttr.$observe('src', function(v) { + console.log('src attribute changed, new value is', v); + if (v !== undefined && v !== null && v !== '') { + scope.pageNum = 1; + scope.loadPDF(scope.src); + } + }); + } + }; + }]). + service("PDFViewerService", [ '$rootScope', function($rootScope) { + + var svc = { }; + svc.nextPage = function() { + $rootScope.$broadcast('pdfviewer.nextPage'); + }; + + svc.prevPage = function() { + $rootScope.$broadcast('pdfviewer.prevPage'); + }; + + svc.Instance = function(id) { + var instance_id = id; + + return { + prevPage: function() { + $rootScope.$broadcast('pdfviewer.prevPage', instance_id); + }, + nextPage: function() { + $rootScope.$broadcast('pdfviewer.nextPage', instance_id); + }, + gotoPage: function(page) { + $rootScope.$broadcast('pdfviewer.gotoPage', instance_id, page); + } + }; + }; + + return svc; + }]); From 60f7cd2b2784a7baf0c439d06fe9bade92de4939 Mon Sep 17 00:00:00 2001 From: andrewpowell Date: Wed, 23 Jul 2014 17:00:42 -0400 Subject: [PATCH 3/3] adding containter for multiple canvases to render all pages --- ng-pdfviewer.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/ng-pdfviewer.js b/ng-pdfviewer.js index e8bb88f4..275133d6 100644 --- a/ng-pdfviewer.js +++ b/ng-pdfviewer.js @@ -8,12 +8,12 @@ angular.module('ngPDFViewer', []). directive('pdfviewer', [ '$parse', function($parse) { - var canvas = null; + var div = null; var instance_id = null; return { restrict: "E", - template: '', + template: '
', scope: { onPageLoad: '&', loadProgress: '&', @@ -69,11 +69,16 @@ angular.module('ngPDFViewer', []). $scope.pdfDoc.getPage(num).then(function(page) { var viewport = page.getViewport($scope.scale); + var canvas = document.createElement("canvas"); + canvas.style.display = "block"; + var ctx = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; + div.appendChild(canvas); + page.render({ canvasContext: ctx, viewport: viewport }).then( function() { if (callback) { @@ -127,7 +132,7 @@ angular.module('ngPDFViewer', []). }); } ], link: function(scope, iElement, iAttr) { - div = iElement.find('canvas')[0]; + div = iElement.find('div')[0]; instance_id = iAttr.id; iAttr.$observe('src', function(v) {