Automatically include pdf.js-viewer dependencies in directive

legalthings · Sep 8, 2015 · f925567 · f925567
1 parent 3b6a70f
commit f925567
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 47 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,5 @@
 bin/
 node_modules/
 bower_components/
+demo/node_modules/
+demo/bower_components/
diff --git a/README.md b/README.md
@@ -22,15 +22,9 @@ Also note that images, translations and such are being loaded from the `web` fol
         <title>Angular PDF.js demo</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
-        <!-- pdfjs dependencies -->
-        <link rel="stylesheet" href="bower_components/pdf.js-viewer/viewer.css"/>
-        <script src="bower_components/pdf.js-viewer/pdf.worker.js"></script>
-        <script src="bower_components/pdf.js-viewer/pdf.js"></script>
-
-        <!-- angular dependencies -->
         <script src="bower_components/angular/angular.js"></script>
-        <script src="dist/pdfjs-viewer.js"></script>
-        <script src="demo/app.js"></script>
+        <script src="bower_components/angular-pdfjs/dist/pdfjs-viewer.js"></script>
+        <script src="app.js"></script>
 
         <style>
           html, body {
@@ -66,7 +60,7 @@ angular.module('app', ['pdfjs']);
 
 angular.module('app').controller('AppCtrl', function($scope) {
     $scope.pdf = {
-        src: 'demo/example.pdf'
+        src: 'example.pdf'
     };
 });
 ```
@@ -75,7 +69,9 @@ angular.module('app').controller('AppCtrl', function($scope) {
 
 You can test out a demo of this directive. You must run the node server first due to CORS reasons. First make sure the dependencies are installed.
 
+    cd demo
     npm install
+    bower install
 
 Afterwards run the server like so.
 

diff --git a/demo/app.js b/demo/app.js
@@ -2,6 +2,6 @@ angular.module('app', ['pdfjs']);
 
 angular.module('app').controller('AppCtrl', function($scope) {
     $scope.pdf = {
-        src: 'demo/example.pdf'
+        src: 'example.pdf'
     };
 });
diff --git a/demo/bower.json b/demo/bower.json
@@ -0,0 +1,10 @@
+{
+  "name": "angular-pdfjs-demo",
+  "description": "Angular PDF.js demo",
+  "version": "1.0.0",
+  "license": "MIT",
+  "private": "true",
+  "dependencies": {
+    "angular-pdfjs": "[email protected]:legalthings/angular-pdfjs.git#~0.2.0"
+  }
+}
diff --git a/demo/index.html b/demo/index.html
@@ -5,15 +5,9 @@
         <title>Angular PDF.js demo</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
-        <!-- pdfjs dependencies -->
-        <link rel="stylesheet" href="bower_components/pdf.js-viewer/viewer.css"/>
-        <script src="bower_components/pdf.js-viewer/pdf.worker.js"></script>
-        <script src="bower_components/pdf.js-viewer/pdf.js"></script>
-
-        <!-- angular dependencies -->
         <script src="bower_components/angular/angular.js"></script>
-        <script src="dist/pdfjs-viewer.js"></script>
-        <script src="demo/app.js"></script>
+        <script src="bower_components/angular-pdfjs/dist/pdfjs-viewer.js"></script>
+        <script src="app.js"></script>
 
         <style>
           html, body {

diff --git a/package.json → demo/package.json b/package.json → demo/package.json
@@ -7,8 +7,5 @@
     "cors": "^2.7.1",
     "express": "^4.13.3"
   },
-  "scripts": {
-    "postinstall": "node_modules/.bin/bower install"
-  },
   "license": "proprietary"
 }
diff --git a/server.js → demo/server.js b/server.js → demo/server.js
@@ -7,7 +7,7 @@ app.use(cors());
 app.use(express.static(__dirname));
 
 app.get('/', function (req, res) {
-    res.sendFile(__dirname + '/demo/index.html');
+    res.sendFile(__dirname + '/index.html');
 });
 
 server.listen(8080, function () {

diff --git a/dist/pdfjs-viewer.js b/dist/pdfjs-viewer.js
@@ -6,48 +6,63 @@
 
 'use strict';
 
-angular.module('pdfjs', []);
+// inlined script from: https://raw.githubusercontent.com/urish/angular-load/master/angular-load.min.js
+!function(){"use strict";angular.module("angularLoad",[]).service("angularLoad",["$document","$q","$timeout",function(a,b,c){function d(a){var d={};return function(e){if("undefined"==typeof d[e]){var f=b.defer(),g=a(e);g.onload=g.onreadystatechange=function(a){c(function(){f.resolve(a)})},g.onerror=function(a){c(function(){f.reject(a)})},d[e]=f.promise}return d[e]}}var e=a[0];this.loadScript=d(function(a){var b=e.createElement("script");return b.src=a,e.body.appendChild(b),b}),this.loadCSS=d(function(a){var b=e.createElement("link");return b.rel="stylesheet",b.type="text/css",b.href=a,e.head.appendChild(b),b})}])}();
+
+angular.module('pdfjs', ['angularLoad']);
+
+angular.module('pdfjs').directive('pdfjsViewer', ['angularLoad', function (angularLoad) {
+    function dependenciesLoaded (callback) {
+        angularLoad.loadScript(file.folder + '../../pdf.js-viewer/pdf.js').then(function () {
+            angularLoad.loadScript(file.folder + '../../pdf.js-viewer/pdf.worker.js').then(function () {
+                angularLoad.loadCSS(file.folder + '../../pdf.js-viewer/viewer.css').then(function () {
+                    callback();
+                });
+            });
+        });
+    }
 
-angular.module('pdfjs').directive('pdfjsViewer', [function () {
     return {
-        templateUrl: file.folder + '../bower_components/pdf.js-viewer/viewer.html',
+        templateUrl: file.folder + '../../pdf.js-viewer/viewer.html',
         restrict: 'E',
         link: function ($scope, $element, $attrs) {
-            $element.children().wrap('<div class="pdfjs" style="width: 100%; height: 100%;"></div>');
+            dependenciesLoaded(function () {
+                $element.children().wrap('<div class="pdfjs" style="width: 100%; height: 100%;"></div>');
 
-            $scope.$watch(function () {
-                return $attrs.src;
-            }, function () {
-                if (!$attrs.src) return;
+                $scope.$watch(function () {
+                    return $attrs.src;
+                }, function () {
+                    if (!$attrs.src) return;
 
-                if ($attrs.open === 'false') {
-                    document.getElementById('openFile').setAttribute('hidden', 'true');
-                    document.getElementById('secondaryOpenFile').setAttribute('hidden', 'true');
-                }
+                    if ($attrs.open === 'false') {
+                        document.getElementById('openFile').setAttribute('hidden', 'true');
+                        document.getElementById('secondaryOpenFile').setAttribute('hidden', 'true');
+                    }
 
-                if ($attrs.download === 'false') {
-                    document.getElementById('download').setAttribute('hidden', 'true');
-                    document.getElementById('secondaryDownload').setAttribute('hidden', 'true');
-                }
+                    if ($attrs.download === 'false') {
+                        document.getElementById('download').setAttribute('hidden', 'true');
+                        document.getElementById('secondaryDownload').setAttribute('hidden', 'true');
+                    }
 
-                if ($attrs.print === 'false') {
-                    document.getElementById('print').setAttribute('hidden', 'true');
-                    document.getElementById('secondaryPrint').setAttribute('hidden', 'true');
-                }
+                    if ($attrs.print === 'false') {
+                        document.getElementById('print').setAttribute('hidden', 'true');
+                        document.getElementById('secondaryPrint').setAttribute('hidden', 'true');
+                    }
 
-                if ($attrs.width) document.getElementById('outerContainer').style.width = $attrs.width;
-                if ($attrs.height) document.getElementById('outerContainer').style.height = $attrs.height;
+                    if ($attrs.width) document.getElementById('outerContainer').style.width = $attrs.width;
+                    if ($attrs.height) document.getElementById('outerContainer').style.height = $attrs.height;
 
-                if (!PDFViewerApplication.initialized) return PDFJS.webViewerLoad($attrs.src);
+                    if (!PDFViewerApplication.initialized) return PDFJS.webViewerLoad($attrs.src);
 
-                PDFViewerApplication.open($attrs.src, 0);
+                    PDFViewerApplication.open($attrs.src, 0);
+                });
             });
         }
     };
 }]);
 
 var file = {};
-file.scripts = document.getElementsByTagName('script');
+file.scripts = document.querySelectorAll('script[src]');
 file.path = file.scripts[file.scripts.length-1].src;
 file.filename = getFileName(file.path);
 file.folder = getLocation(file.path).pathname.replace(file.filename, '');