example

sayanee · Jan 15, 2014 · 929d4a2 · 929d4a2
1 parent e3312e6
commit 929d4a2
Show file tree

Hide file tree

Showing 9 changed files with 47,353 additions and 0 deletions.
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <title>AngularJS PDFJS Directive</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body ng-app="App">
+
+<div class="wrapper" ng-controller="DocCtrl">
+  <h1>{{pdfName}}</h1>
+  <ng-pdf template-url="/partials/viewer.html"></ng-pdf>
+</div>
+
+<script src="js/lib/pdf.js"></script>
+
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
+
+<script src="js/app.js"></script>
+<script src="js/controllers/docCtrl.js"></script>
+<script src="js/directives/angular-pdf.js"></script>
+
+</body>
+</html>
diff --git a/example/js/app.js b/example/js/app.js
@@ -0,0 +1,2 @@
+var app = angular.module('App', []);
+
diff --git a/example/js/controllers/docCtrl.js b/example/js/controllers/docCtrl.js
@@ -0,0 +1,8 @@
+app.controller('DocCtrl', function($scope) {
+
+  $scope.pdfName = 'Relativity: The Special and General Theory by Albert Einstein';
+  $scope.pdfUrl = '/pdf/relativity.pdf';
+  $scope.template = 'partials/viewer.html';
+  $scope.scroll = 0;
+
+});
diff --git a/example/js/directives/angular-pdf.js b/example/js/directives/angular-pdf.js
@@ -0,0 +1,105 @@
+(function () {
+
+  'use strict';
+
+  app.directive('ngPdf', function($window) {
+    return {
+      restrict: 'E',
+      templateUrl: function(element, attr) {
+        return attr.templateUrl ? attr.templateUrl : 'partials/viewer.html'
+      },
+      link: function (scope) {
+        var url = scope.pdfUrl,
+          pdfDoc = null,
+          pageNum = 1,
+          scale = 1,
+          canvas = document.getElementById('pdf-canvas'),
+          ctx = canvas.getContext('2d'),
+          windowEl = angular.element($window);
+
+        windowEl.on('scroll', function() {
+          scope.$apply(function() {
+            scope.scroll = windowEl.scrollTop();
+            console.log('helloooooooooo')
+            console.log(scope.sroll);
+          });
+        });
+
+        PDFJS.disableWorker = true;
+        scope.pageNum = pageNum;
+
+        scope.renderPage = function(num) {
+
+          pdfDoc.getPage(num).then(function(page) {
+            var viewport = page.getViewport(scale);
+            canvas.height = viewport.height;
+            canvas.width = viewport.width;
+
+            var renderContext = {
+              canvasContext: ctx,
+              viewport: viewport
+            };
+
+            page.render(renderContext);
+
+          });
+
+          scope.pageCount = pdfDoc.numPages;
+        };
+
+        scope.goPrevious = function() {
+          if (scope.pageNum <= 1)
+            return;
+          scope.pageNum = parseInt(scope.pageNum, 10) - 1;
+        };
+
+        scope.goNext = function() {
+          if (scope.pageNum >= pdfDoc.numPages)
+            return;
+          scope.pageNum = parseInt(scope.pageNum, 10) + 1;
+        };
+
+        scope.zoomIn = function() {
+          scale += 0.2;
+          scope.renderPage(scope.pageNum);
+          return scale;
+        };
+
+        scope.zoomOut = function() {
+          scale -= 0.2;
+          scope.renderPage(scope.pageNum);
+          return scale;
+        };
+
+        scope.changePage = function() {
+          scope.renderPage(scope.pageNum);
+        };
+
+        scope.rotate = function() {
+          if (canvas.getAttribute('class') === 'rotate0') {
+            canvas.setAttribute('class', 'rotate90');
+          } else if (canvas.getAttribute('class') === 'rotate90') {
+            canvas.setAttribute('class', 'rotate180');
+          } else if (canvas.getAttribute('class') === 'rotate180') {
+            canvas.setAttribute('class', 'rotate270');
+          } else {
+            canvas.setAttribute('class', 'rotate0');
+          }
+        };
+
+        PDFJS.getDocument(url).then(function (_pdfDoc) {
+          scope.pageCount = _pdfDoc.numPages;
+          pdfDoc = _pdfDoc;
+          scope.renderPage(scope.pageNum);
+        });
+
+        scope.$watch('pageNum', function (newVal) {
+          if (pdfDoc !== null)
+            scope.renderPage(newVal);
+        });
+
+      }
+    };
+  });
+
+})();