Merge pull request #3 from winkerVSbecks/feature-replace-pdf-file

Feature replace pdf file

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-pdf-viewer",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "An AngularJS directive to display PDFs",
   "main": "./dist/angular-pdf-viewer.min.js",
   "license": "MIT",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-pdf-viewer",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "author": "Varun Vachhar",
   "description": "An AngularJS directive to display PDFs",
   "repository": {

readme.md

@@ -1,4 +1,4 @@
-# Angular PDF Viewer (0.1.0)
+# Angular PDF Viewer (0.2.0)
 
 An AngularJS directive to display PDFs. [DEMO](http://codepen.io/winkerVSbecks/full/50010e383d0f80deab97858571400d86/)
 
@@ -22,7 +22,7 @@ An AngularJS directive to display PDFs. [DEMO](http://codepen.io/winkerVSbecks/f
 
 3. Include the lib as a dependency in your angular app:
 
-```
+``` js
 var app = angular.module('App', ['pdf']);
 ```
 
@@ -31,9 +31,9 @@ var app = angular.module('App', ['pdf']);
 
 The URL, scale and delegate-handle can be set using the attributes:
 
-```
+``` html
 <pdf-viewer
-    delegate-handle="relativity-special-general-theory"
+    delegate-handle="my-pdf-container"
     url="pdfUrl"
     scale="1"
     show-nav="true"></pdf-viewer>
@@ -46,8 +46,8 @@ The pdfDelegate service allows you to access and control individual instances of
 
 Inject the `pdfDelegate` service into your controller. You can then fetch an instance using it's delegate handle and call methods on it:
 
-```
-pdfDelegate.$getByHandle('relativity-special-general-theory').zoomIn();
+``` js
+pdfDelegate.$getByHandle('my-pdf-container').zoomIn();
 ```
 
 The following methods are available to the delegate:
@@ -59,6 +59,23 @@ The following methods are available to the delegate:
 - getPageCount
 - getCurrentPage
 - goToPage(pageNumber)
+- load
+
+
+## Change the PDF File
+
+In order to replace the active PDF with another one, you can call the `load` method of the delegate. For example:
+
+``` js
+pdfDelegate
+    .$getByHandle('my-pdf-container')
+    .load('url-of-the-new-file.pdf');
+```
+
+
+## Example
+
+Run `npm install && bower install` to install all dependencies. And then `gulp dev` to start a local server. The example will now be available at [localhost:3000/src](http://localhost:3000/src)
 
 
 ## Toolbar
@@ -73,4 +90,4 @@ The default toolbar can be shown or hidden using the `show-toolbar` attribute. S
 
 ## Credit
 
-PDF example used is [Relativity: The Special and General Theory by Albert Einstein](http://www.gutenberg.org/ebooks/30155) as kindly organized and made available free by [Project Gutenberg](http://www.gutenberg.org/wiki/Main_Page).
+PDF examples used are [Relativity: The Special and General Theory by Albert Einstein](http://www.gutenberg.org/ebooks/30155) as kindly organized and made available free by [Project Gutenberg](http://www.gutenberg.org/wiki/Main_Page). And the [This is Material Design](http://static.googleusercontent.com/media/www.google.com/en//design/material-design.pdf) by Google.

src/index.html

@@ -21,10 +21,28 @@ <h1 class="h0 mt0 mb0 white inline">AngularJS PDF Viewer</h1>
       </header>
 
       <pdf-viewer
-        delegate-handle="relativity-special-general-theory"
+        delegate-handle="my-pdf-container"
         url="pdfUrl"
         scale="1"
         show-toolbar="true"></pdf-viewer>
+
+
+      <footer class="py4">
+        <div class="sm-table">
+          <div class="sm-table-cell full-width py2 xs-center">
+            <div class="h5 bold px1">
+              <a ng-click="loadNewFile('pdf/relativity.pdf')"
+                class="button button-narrow button-nav-light">
+                  Load the Relativity PDF
+              </a>
+              <a ng-click="loadNewFile('pdf/material-design.pdf')"
+                class="button button-narrow button-nav-light">
+                  Load the Material Design PDF
+              </a>
+            </div>
+          </div>
+        </div>
+      </footer>
     </div>
   </div>
 
@@ -33,10 +51,11 @@ <h1 class="h0 mt0 mb0 white inline">AngularJS PDF Viewer</h1>
   <script src="/dist/angular-pdf-viewer.min.js"></script>
   <script src="test-app.js"></script>
 
-  // <!-- <script src="js/delegate-service.js"></script>
-  // <script src="js/pdf-viewer-delegate.js"></script>
-  // <script src="js/pdf-ctrl.js"></script>
-  // <script src="js/pdf-viewer.js"></script>
-  // <script src="js/pdf-viewer-toolbar.js"></script> -->
+ <!--  <script src="js/delegate-service.js"></script>
+  <script src="js/pdf-viewer-delegate.js"></script>
+  <script src="js/pdf-ctrl.js"></script>
+  <script src="js/pdf-viewer.js"></script>
+  <script src="js/pdf-viewer-toolbar.js"></script>
+  <script src="test-app.js"></script> -->
 </body>
 </html>

src/js/pdf-ctrl.js

@@ -104,13 +104,23 @@ angular.module('pdf')
       }
     };
 
-    PDFJS
-      .getDocument(url)
-      .then(function (_pdfDoc) {
-        pdfDoc = _pdfDoc;
-        renderPage(currentPage);
-        $scope.$apply(function() {
-          $scope.pageCount = _pdfDoc.numPages;
-        });
-      }, $log.error);
+    self.load = function(_url) {
+      if (_url) {
+        url = _url;
+      }
+
+      PDFJS
+        .getDocument(url)
+        .then(function (_pdfDoc) {
+
+          pdfDoc = _pdfDoc;
+          renderPage(1);
+          $scope.$apply(function() {
+            $scope.pageCount = _pdfDoc.numPages;
+          });
+
+        }, $log.error);
+    };
+
+    self.load();
 }]);

src/js/pdf-viewer-delegate.js

@@ -7,5 +7,6 @@ angular.module('pdf', [])
     'rotate',
     'getPageCount',
     'getCurrentPage',
-    'goToPage'
+    'goToPage',
+    'load'
   ]));

src/js/pdf-viewer-toolbar.js

@@ -67,7 +67,6 @@ angular.module('pdf')
             .rotate();
         };
         scope.goToPage = function() {
-          console.log(scope.currentPage)
           pdfDelegate
             .$getByHandle(id)
             .goToPage(scope.currentPage);
@@ -77,7 +76,6 @@ angular.module('pdf')
           scope.currentPage = pdfDelegate
                                 .$getByHandle(id)
                                 .getCurrentPage();
-                                console.log(pdfDelegate.$getByHandle(id).getCurrentPage());
         };
       }
     };

src/js/pdf-viewer.js

@@ -6,10 +6,11 @@ angular.module('pdf')
   function($window, $log, pdfDelegate) {
     return {
       restrict: 'E',
-      template: '<pdf-viewer-toolbar delegate-handle="relativity-special-general-theory" page-count="pageCount"></pdf-viewer-toolbar><canvas></canvas>',
+      template: '<pdf-viewer-toolbar delegate-handle="{{id}}" page-count="pageCount"></pdf-viewer-toolbar><canvas></canvas>',
       scope: true,
       controller: 'PdfCtrl',
       link: function(scope, element, attrs) {
+        scope.id = attrs.delegateHandle;
         scope.showToolbar = scope.$eval(attrs.showToolbar) || false;
       }
     };

src/test-app.js

@@ -2,6 +2,13 @@ angular.module('testApp', ['pdf'])
   .controller('AppCtrl', [
     '$scope',
     'pdfDelegate',
-  function($scope, pdfDelegate) {
-    $scope.pdfUrl = 'pdf/relativity.pdf';
+    '$timeout',
+  function($scope, pdfDelegate, $timeout) {
+    $scope.pdfUrl = 'pdf/material-design.pdf';
+
+    $scope.loadNewFile = function(url) {
+      pdfDelegate
+        .$getByHandle('my-pdf-container')
+        .load(url);
+    };
 }]);