Repository: legalthings/angular-pdfjs-viewer
Branch: master
Commit: 8e6f63ed283e
Files: 12
Total size: 45.7 KB

Directory structure:
gitextract_t6mp9u9b/

├── .gitignore
├── Gruntfile.js
├── LICENSE
├── README.md
├── demo/
│   ├── app.js
│   ├── bower.json
│   ├── index.html
│   ├── package.json
│   └── server.js
├── dist/
│   └── angular-pdfjs-viewer.js
├── package.json
└── src/
    └── angular-pdfjs-viewer.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
bin/
node_modules/
bower_components/
demo/node_modules/
demo/bower_components/


================================================
FILE: Gruntfile.js
================================================
module.exports = function (grunt) {
  'use strict';

  var escapeContent = function(content, quoteChar) {
    var bsRegexp = new RegExp('\\\\', 'g');
    var quoteRegexp = new RegExp('\\' + quoteChar, 'g');
    var trimRegexp = new RegExp('\\s*\\+\\s*\\n' + quoteChar + '$');
    var nlReplace = '\\n' + quoteChar + ' +\n' + quoteChar;
    return '\'' + content.replace(bsRegexp, '\\\\').replace(quoteRegexp, '\\' + quoteChar).replace(/\r?\n/g, nlReplace).replace(trimRegexp, '') + '\'';
  };

  // Project configuration.
  grunt.initConfig({
    replace: {
      dist: {
        options: {
          patterns: [
            {
              match: /templateUrl:.*/,
              replacement: function () {
              	var content = grunt.file.read('vendor/pdf.js-viewer/viewer.html');
              	return 'template: ' + escapeContent(content, '\'') + ',';
              }
            },
            {
              match: /=== get current script file ===[\w\W]+======/,
              replacement: ''
            }
          ]
        },
        files: [
          {expand: true, flatten: true, src: ['src/angular-pdfjs-viewer.js'], dest: 'dist/'}
        ]
      }
    }
  });

  /** 
   * Load required Grunt tasks. These are installed based on the versions listed
   * in `package.json` when you do `npm install` in this directory.
   */
  grunt.loadNpmTasks('grunt-replace');

  // Default task(s).
  grunt.registerTask('default', ['replace']);
};


================================================
FILE: LICENSE
================================================
Copyright (c) LegalThings <info@legalthings.io>

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is furnished
to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.


================================================
FILE: README.md
================================================
# PDF.js viewer Angular directive

Embed Mozilla's [PDF.js](https://mozilla.github.io/pdf.js/) viewer into your angular application, maintaining that look and feel
of pdf's we all love. The directive embeds the [full viewer](https://mozilla.github.io/pdf.js/web/viewer.html), which
allows you to scroll through the pdf.

## Low maintenance
We're no longer using this library ourselves. We'll merge pull requests and create new releases, but not actively solve
issues.

![viewer-example](https://cloud.githubusercontent.com/assets/5793511/24605022/6dd5abee-1867-11e7-881a-0d68dc7c77f3.png)

## Installation
     npm install angular-pdfjs-viewer --save

### Browser supperort
Chrome, FireFox, Safari and Egde.

## Usage
Below you will find a basic example of how the directive can be used.
Note that the order of the scripts matters. Stick to the order of dependencies as shown in the example below.
Also note that images, translations and such are being loaded from the `web` folder.

### View
```html
<!DOCTYPE html>
<html ng-app="app" ng-controller="AppCtrl">
    <head>
        <title>Angular PDF.js demo</title>
        <script src="bower_components/pdf.js-viewer/pdf.js"></script>
        <link rel="stylesheet" href="bower_components/pdf.js-viewer/viewer.css">

        <script src="bower_components/angular/angular.js"></script>
        <script src="bower_components/angular-pdfjs-viewer/dist/angular-pdfjs-viewer.js"></script>
        <script src="app.js"></script>

        <style>
          html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
          .some-pdf-container { width: 100%; height: 100%; }
        </style>
    </head>
    <body>
        <div class="some-pdf-container">
            <pdfjs-viewer src="{{ pdf.src }}"></pdfjs-viewer>
        </div>
    </body>
</html>
```

### Controller
```js
angular.module('app', ['pdfjsViewer']);

angular.module('app').controller('AppCtrl', function($scope) {
    $scope.pdf = {
        src: 'example.pdf',
    };
});
```

## Directive options
The `<pdfjs-viewer>` directive takes the following attributes.


#### `src`
The source should point to the URL of a publicly available pdf.
Note that the `src` must be passed in as an interpolation string.

```html
<pdfjs-viewer src="{{ pdf.src }}"></pdfjs-viewer>
```

```javascript
$scope.pdf.src = "http://example.com/file.pdf";
```
---

#### `data`
In the case that you cannot simply use the URL of the pdf, you can pass in raw data as
a [Uint8Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array) object.
The `data` attribute takes a scope variable as its argument.

```html
<pdfjs-viewer data="pdf.data"></pdfjs-viewer>
```

```javascript
$scope.data = null; // this is loaded async

$http.get("http://example.com/file.pdf", {
    responseType: 'arraybuffer'
}).then(function (response) {
    $scope.pdf.data = new Uint8Array(response.data);
});
```
---

#### `scale`
The `scale` attribute can be used to obtain the current scale (zoom level) of the PDF.
The value will be stored in the variable specified. **This is read only**.

```html
<pdfjs-viewer scale="scale"></pdfjs-viewer>
```
---

#### `download, print, open`
These buttons are by default all visible in the toolbar and can be hidden.

```html
<pdfjs-viewer download="false" print="false" ... ></pdfjs-viewer>
```
---

#### `on-init`
The `on-init` function is called when PDF.JS is fully loaded.

```html
<pdfjs-viewer on-init="onInit()"></pdfjs-viewer>
```

```javascript
$scope.onInit = function () {
  // pdf.js is initialized
}
```
---

#### `on-page-load`
The `on-page-load` function is each time a page is loaded and will pass the page number.
When the scale changes all pages are unloaded, so `on-page-load` will be called again for each page.
_If `onPageLoad()` returns `false`, the page will not be marked as loaded and `onPageLoad` will be called again for that page on the next (200ms) interval._

```html
<pdfjs-viewer on-page-load="onPageLoad(page)"></pdfjs-viewer>
```

```javascript
$scope.onPageLoad = function (page) {
    // page is loaded
};
```
---

## Styling
The `<pdfjs-viewer>` directive automatically expands to the height and width of its first immediate parent, in the case of the example `.some-pdf-container`.
If no parent container is given the html `body` will be used. Height and width are required to properly display the contents of the pdf.

## Demo
You can test out a [demo](https://github.com/legalthings/angular-pdfjs-viewer/tree/master/demo) of this directive.
You must run the node server first due to CORS. First make sure the dependencies are installed.

    cd demo
    npm install
    bower install

Afterwards run the server like so.

    node server.js

The server will be running on localhost:8080

## Advanced configuration
By default the location of PDF.js assets are automatically determined. However if you place them on alternative
locations they may not be found. If so, you can configure these locations.

You may disable using the [Web Workers API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API).
This is useful if you want to add pdf.worker.js to your concatenated JavaScript file. However this will have a
negative effect on the runtime performance.

As part of your build process you might include all your library scripts within a concatenated Javascript file whilst excluding the pdf.worker.js file.  Use setWorkerSrc() to point to the pdf.worker.js script. 

    angular.module('app').config(function(pdfjsViewerConfigProvider) {
      pdfjsViewerConfigProvider.setWorkerSrc("/assets/pdf.js-viewer/pdf.worker.js");
      pdfjsViewerConfigProvider.setCmapDir("/assets/pdf.js-viewer/cmaps");
      pdfjsViewerConfigProvider.setImageDir("/assets/pdf.js-viewer/images");
      
      pdfjsViewerConfigProvider.disableWorker();
      pdfjsViewerConfigProvider.setVerbosity("infos");  // "errors", "warnings" or "infos"
    });

Note that a number of images used in the PDF.js viewer are loaded by the `viewer.css`. You can't configure these
through JavaScript. Instead you need to compile the `viewer.less` file as

    lessc --global-var='pdfjsImagePath=/assets/pdf.js-viewer/images' viewer.less viewer.css


================================================
FILE: demo/app.js
================================================
angular.module('app', ['pdfjsViewer']);

angular.module('app').controller('AppCtrl', function ($scope, $http, $timeout) {
    var url = 'example.pdf';

    $scope.pdf = {
        src: url,  // get pdf source from a URL that points to a pdf
        data: null // get pdf source from raw data of a pdf
    };

    getPdfAsArrayBuffer(url).then(function (response) {
        $scope.pdf.data = new Uint8Array(response.data);
    }, function (err) {
        console.log('failed to get pdf as binary:', err);
    });

    function getPdfAsArrayBuffer (url) {
        return $http.get(url, {
            responseType: 'arraybuffer',
            headers: {
                'foo': 'bar'
            }
        });
    }
});


================================================
FILE: demo/bower.json
================================================
{
  "name": "angular-pdfjs-demo",
  "description": "Angular PDF.js demo",
  "license": "MIT",
  "private": "true",
  "dependencies": {
    "angular": "^1.5.8",
    "pdf.js-viewer": "~1.6.211"
  }
}


================================================
FILE: demo/index.html
================================================
<!DOCTYPE html>
<html lang="en" data-ng-app="app" ng-controller="AppCtrl">
    <head>
        <meta charset="utf-8"/>
        <title>Angular PDF.js demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <script src="bower_components/pdf.js-viewer/pdf.js"></script>
        <link rel="stylesheet" href="bower_components/pdf.js-viewer/viewer.css">

        <script src="/bower_components/angular/angular.js"></script>
        <script src="/angular-pdfjs-viewer.js"></script>
        <script src="app.js"></script>

        <style>
          html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
          }

          .some-pdf-container {
            width: 100%;
            height: 100%;
          }
        </style>
    </head>
    <body>
        <div class='some-pdf-container'>
            <!-- Example of loading pdf from URL string. Note that this must be an interpolation string -->
            <pdfjs-viewer src="{{ pdf.src }}"></pdfjs-viewer>

            <!-- 
                Example of loading pdf from raw binary data. Note that this must be a scope variable.
                Comment upper viewer out if you use this viewer (because multi pdf viewers are currently not supported)
            -->
            <!-- <pdfjs-viewer data="pdf.data"></pdfjs-viewer> -->
        </div>
    </body>
</html>


================================================
FILE: demo/package.json
================================================
{
  "name": "angular-pdfjs",
  "description": "Embed PDF.js into your angular application",
  "version": "1.0.0",
  "dependencies": {
    "bower": "^1.5.2",
    "cors": "^2.7.1",
    "express": "^4.13.3"
  },
  "scripts": {
    "postinstall": "bower install"
  },
  "license": "proprietary"
}


================================================
FILE: demo/server.js
================================================
var express = require('express');
var cors = require('cors');
var app = express();
var server = require('http').Server(app);
var path = require('path');

app.use(cors());
app.use(express.static(__dirname));

app.get('/angular-pdfjs-viewer.js', function(req, res) {
    res.sendFile(path.resolve(__dirname + '/../dist/angular-pdfjs-viewer.js'));
});

app.get('/', function (req, res) {
    res.sendFile(__dirname + '/index.html');
});

server.listen(8080, function () {
    console.log('Server is listening on localhost:8080');
});



================================================
FILE: dist/angular-pdfjs-viewer.js
================================================
/**
 * angular-pdfjs
 * https://github.com/legalthings/angular-pdfjs
 * Copyright (c) 2015 ; Licensed MIT
 */

+function () {
    'use strict';

    var module = angular.module('pdfjsViewer', []);
    
    module.provider('pdfjsViewerConfig', function() {
        var config = {
            workerSrc: null,
            cmapDir: null,
            imageResourcesPath: null,
            disableWorker: false,
            verbosity: null
        };
        
        this.setWorkerSrc = function(src) {
            config.workerSrc = src;
        };
        
        this.setCmapDir = function(dir) {
            config.cmapDir = dir;
        };
        
        this.setImageDir = function(dir) {
            config.imageDir = dir;
        };
        
        this.disableWorker = function(value) {
            if (typeof value === 'undefined') value = true;
            config.disableWorker = value;
        };
        
        this.setVerbosity = function(level) {
            config.verbosity = level;
        };
        
        this.$get = function() {
            return config;
        }
    });
    
    module.run(['pdfjsViewerConfig', function(pdfjsViewerConfig) {
        if (pdfjsViewerConfig.workerSrc) {
            PDFJS.workerSrc = pdfjsViewerConfig.workerSrc;
        }

        if (pdfjsViewerConfig.cmapDir) {
            PDFJS.cMapUrl = pdfjsViewerConfig.cmapDir;
        }

        if (pdfjsViewerConfig.imageDir) {
            PDFJS.imageResourcesPath = pdfjsViewerConfig.imageDir;
        }
        
        if (pdfjsViewerConfig.disableWorker) {
            PDFJS.disableWorker = true;
        }

        if (pdfjsViewerConfig.verbosity !== null) {
            var level = pdfjsViewerConfig.verbosity;
            if (typeof level === 'string') level = PDFJS.VERBOSITY_LEVELS[level];
            PDFJS.verbosity = pdfjsViewerConfig.verbosity;
        }
    }]);
    
    module.directive('pdfjsViewer', ['$interval', function ($interval) {
        return {
            template: '<pdfjs-wrapper>\n' +
'    <div id="outerContainer">\n' +
'\n' +
'      <div id="sidebarContainer">\n' +
'        <div id="toolbarSidebar">\n' +
'          <div class="splitToolbarButton toggled">\n' +
'            <button id="viewThumbnail" class="toolbarButton group toggled" title="Show Thumbnails" tabindex="2" data-l10n-id="thumbs">\n' +
'               <span data-l10n-id="thumbs_label">Thumbnails</span>\n' +
'            </button>\n' +
'            <button id="viewOutline" class="toolbarButton group" title="Show Document Outline (double-click to expand/collapse all items)" tabindex="3" data-l10n-id="document_outline">\n' +
'               <span data-l10n-id="document_outline_label">Document Outline</span>\n' +
'            </button>\n' +
'            <button id="viewAttachments" class="toolbarButton group" title="Show Attachments" tabindex="4" data-l10n-id="attachments">\n' +
'               <span data-l10n-id="attachments_label">Attachments</span>\n' +
'            </button>\n' +
'          </div>\n' +
'        </div>\n' +
'        <div id="sidebarContent">\n' +
'          <div id="thumbnailView">\n' +
'          </div>\n' +
'          <div id="outlineView" class="hidden">\n' +
'          </div>\n' +
'          <div id="attachmentsView" class="hidden">\n' +
'          </div>\n' +
'        </div>\n' +
'      </div>  <!-- sidebarContainer -->\n' +
'\n' +
'      <div id="mainContainer">\n' +
'        <div class="findbar hidden doorHanger hiddenSmallView" id="findbar">\n' +
'          <label for="findInput" class="toolbarLabel" data-l10n-id="find_label">Find:</label>\n' +
'          <input id="findInput" class="toolbarField" tabindex="91">\n' +
'          <div class="splitToolbarButton">\n' +
'            <button class="toolbarButton findPrevious" title="" id="findPrevious" tabindex="92" data-l10n-id="find_previous">\n' +
'              <span data-l10n-id="find_previous_label">Previous</span>\n' +
'            </button>\n' +
'            <div class="splitToolbarButtonSeparator"></div>\n' +
'            <button class="toolbarButton findNext" title="" id="findNext" tabindex="93" data-l10n-id="find_next">\n' +
'              <span data-l10n-id="find_next_label">Next</span>\n' +
'            </button>\n' +
'          </div>\n' +
'          <input type="checkbox" id="findHighlightAll" class="toolbarField" tabindex="94">\n' +
'          <label for="findHighlightAll" class="toolbarLabel" data-l10n-id="find_highlight">Highlight all</label>\n' +
'          <input type="checkbox" id="findMatchCase" class="toolbarField" tabindex="95">\n' +
'          <label for="findMatchCase" class="toolbarLabel" data-l10n-id="find_match_case_label">Match case</label>\n' +
'          <span id="findResultsCount" class="toolbarLabel hidden"></span>\n' +
'          <span id="findMsg" class="toolbarLabel"></span>\n' +
'        </div>  <!-- findbar -->\n' +
'\n' +
'        <div id="secondaryToolbar" class="secondaryToolbar hidden doorHangerRight">\n' +
'          <div id="secondaryToolbarButtonContainer">\n' +
'            <button id="secondaryPresentationMode" class="secondaryToolbarButton presentationMode visibleLargeView" title="Switch to Presentation Mode" tabindex="51" data-l10n-id="presentation_mode">\n' +
'              <span data-l10n-id="presentation_mode_label">Presentation Mode</span>\n' +
'            </button>\n' +
'\n' +
'            <button id="secondaryOpenFile" class="secondaryToolbarButton openFile visibleLargeView" title="Open File" tabindex="52" data-l10n-id="open_file">\n' +
'              <span data-l10n-id="open_file_label">Open</span>\n' +
'            </button>\n' +
'\n' +
'            <button id="secondaryPrint" class="secondaryToolbarButton print visibleMediumView" title="Print" tabindex="53" data-l10n-id="print">\n' +
'              <span data-l10n-id="print_label">Print</span>\n' +
'            </button>\n' +
'\n' +
'            <button id="secondaryDownload" class="secondaryToolbarButton download visibleMediumView" title="Download" tabindex="54" data-l10n-id="download">\n' +
'              <span data-l10n-id="download_label">Download</span>\n' +
'            </button>\n' +
'\n' +
'            <a href="#" id="secondaryViewBookmark" class="secondaryToolbarButton bookmark visibleSmallView" title="Current view (copy or open in new window)" tabindex="55" data-l10n-id="bookmark">\n' +
'              <span data-l10n-id="bookmark_label">Current View</span>\n' +
'            </a>\n' +
'\n' +
'            <div class="horizontalToolbarSeparator visibleLargeView"></div>\n' +
'\n' +
'            <button id="firstPage" class="secondaryToolbarButton firstPage" title="Go to First Page" tabindex="56" data-l10n-id="first_page">\n' +
'              <span data-l10n-id="first_page_label">Go to First Page</span>\n' +
'            </button>\n' +
'            <button id="lastPage" class="secondaryToolbarButton lastPage" title="Go to Last Page" tabindex="57" data-l10n-id="last_page">\n' +
'              <span data-l10n-id="last_page_label">Go to Last Page</span>\n' +
'            </button>\n' +
'\n' +
'            <div class="horizontalToolbarSeparator"></div>\n' +
'\n' +
'            <button id="pageRotateCw" class="secondaryToolbarButton rotateCw" title="Rotate Clockwise" tabindex="58" data-l10n-id="page_rotate_cw">\n' +
'              <span data-l10n-id="page_rotate_cw_label">Rotate Clockwise</span>\n' +
'            </button>\n' +
'            <button id="pageRotateCcw" class="secondaryToolbarButton rotateCcw" title="Rotate Counterclockwise" tabindex="59" data-l10n-id="page_rotate_ccw">\n' +
'              <span data-l10n-id="page_rotate_ccw_label">Rotate Counterclockwise</span>\n' +
'            </button>\n' +
'\n' +
'            <div class="horizontalToolbarSeparator"></div>\n' +
'\n' +
'            <button id="toggleHandTool" class="secondaryToolbarButton handTool" title="Enable hand tool" tabindex="60" data-l10n-id="hand_tool_enable">\n' +
'              <span data-l10n-id="hand_tool_enable_label">Enable hand tool</span>\n' +
'            </button>\n' +
'\n' +
'            <div class="horizontalToolbarSeparator"></div>\n' +
'\n' +
'            <button id="documentProperties" class="secondaryToolbarButton documentProperties" title="Document Properties…" tabindex="61" data-l10n-id="document_properties">\n' +
'              <span data-l10n-id="document_properties_label">Document Properties…</span>\n' +
'            </button>\n' +
'          </div>\n' +
'        </div>  <!-- secondaryToolbar -->\n' +
'\n' +
'        <div class="toolbar">\n' +
'          <div id="toolbarContainer">\n' +
'            <div id="toolbarViewer">\n' +
'              <div id="toolbarViewerLeft">\n' +
'                <button id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar" tabindex="11" data-l10n-id="toggle_sidebar">\n' +
'                  <span data-l10n-id="toggle_sidebar_label">Toggle Sidebar</span>\n' +
'                </button>\n' +
'                <div class="toolbarButtonSpacer"></div>\n' +
'                <button id="viewFind" class="toolbarButton group hiddenSmallView" title="Find in Document" tabindex="12" data-l10n-id="findbar">\n' +
'                   <span data-l10n-id="findbar_label">Find</span>\n' +
'                </button>\n' +
'                <div class="splitToolbarButton">\n' +
'                  <button class="toolbarButton pageUp" title="Previous Page" id="previous" tabindex="13" data-l10n-id="previous">\n' +
'                    <span data-l10n-id="previous_label">Previous</span>\n' +
'                  </button>\n' +
'                  <div class="splitToolbarButtonSeparator"></div>\n' +
'                  <button class="toolbarButton pageDown" title="Next Page" id="next" tabindex="14" data-l10n-id="next">\n' +
'                    <span data-l10n-id="next_label">Next</span>\n' +
'                  </button>\n' +
'                </div>\n' +
'                <input type="number" id="pageNumber" class="toolbarField pageNumber" title="Page" value="1" size="4" min="1" tabindex="15" data-l10n-id="page">\n' +
'                <span id="numPages" class="toolbarLabel"></span>\n' +
'              </div>\n' +
'              <div id="toolbarViewerRight">\n' +
'                <button id="presentationMode" class="toolbarButton presentationMode hiddenLargeView" title="Switch to Presentation Mode" tabindex="31" data-l10n-id="presentation_mode">\n' +
'                  <span data-l10n-id="presentation_mode_label">Presentation Mode</span>\n' +
'                </button>\n' +
'\n' +
'                <button id="openFile" class="toolbarButton openFile hiddenLargeView" title="Open File" tabindex="32" data-l10n-id="open_file">\n' +
'                  <span data-l10n-id="open_file_label">Open</span>\n' +
'                </button>\n' +
'\n' +
'                <button id="print" class="toolbarButton print hiddenMediumView" title="Print" tabindex="33" data-l10n-id="print">\n' +
'                  <span data-l10n-id="print_label">Print</span>\n' +
'                </button>\n' +
'\n' +
'                <button id="download" class="toolbarButton download hiddenMediumView" title="Download" tabindex="34" data-l10n-id="download">\n' +
'                  <span data-l10n-id="download_label">Download</span>\n' +
'                </button>\n' +
'                <a href="#" id="viewBookmark" class="toolbarButton bookmark hiddenSmallView" title="Current view (copy or open in new window)" tabindex="35" data-l10n-id="bookmark">\n' +
'                  <span data-l10n-id="bookmark_label">Current View</span>\n' +
'                </a>\n' +
'\n' +
'                <div class="verticalToolbarSeparator hiddenSmallView"></div>\n' +
'\n' +
'                <button id="secondaryToolbarToggle" class="toolbarButton" title="Tools" tabindex="36" data-l10n-id="tools">\n' +
'                  <span data-l10n-id="tools_label">Tools</span>\n' +
'                </button>\n' +
'              </div>\n' +
'              <div id="toolbarViewerMiddle">\n' +
'                <div class="splitToolbarButton">\n' +
'                  <button id="zoomOut" class="toolbarButton zoomOut" title="Zoom Out" tabindex="21" data-l10n-id="zoom_out">\n' +
'                    <span data-l10n-id="zoom_out_label">Zoom Out</span>\n' +
'                  </button>\n' +
'                  <div class="splitToolbarButtonSeparator"></div>\n' +
'                  <button id="zoomIn" class="toolbarButton zoomIn" title="Zoom In" tabindex="22" data-l10n-id="zoom_in">\n' +
'                    <span data-l10n-id="zoom_in_label">Zoom In</span>\n' +
'                   </button>\n' +
'                </div>\n' +
'                <span id="scaleSelectContainer" class="dropdownToolbarButton">\n' +
'                  <select id="scaleSelect" title="Zoom" tabindex="23" data-l10n-id="zoom">\n' +
'                    <option id="pageAutoOption" title="" value="auto" selected="selected" data-l10n-id="page_scale_auto">Automatic Zoom</option>\n' +
'                    <option id="pageActualOption" title="" value="page-actual" data-l10n-id="page_scale_actual">Actual Size</option>\n' +
'                    <option id="pageFitOption" title="" value="page-fit" data-l10n-id="page_scale_fit">Fit Page</option>\n' +
'                    <option id="pageWidthOption" title="" value="page-width" data-l10n-id="page_scale_width">Full Width</option>\n' +
'                    <option id="customScaleOption" title="" value="custom" disabled="disabled" hidden="true"></option>\n' +
'                    <option title="" value="0.5" data-l10n-id="page_scale_percent" data-l10n-args=\'{ "scale": 50 }\'>50%</option>\n' +
'                    <option title="" value="0.75" data-l10n-id="page_scale_percent" data-l10n-args=\'{ "scale": 75 }\'>75%</option>\n' +
'                    <option title="" value="1" data-l10n-id="page_scale_percent" data-l10n-args=\'{ "scale": 100 }\'>100%</option>\n' +
'                    <option title="" value="1.25" data-l10n-id="page_scale_percent" data-l10n-args=\'{ "scale": 125 }\'>125%</option>\n' +
'                    <option title="" value="1.5" data-l10n-id="page_scale_percent" data-l10n-args=\'{ "scale": 150 }\'>150%</option>\n' +
'                    <option title="" value="2" data-l10n-id="page_scale_percent" data-l10n-args=\'{ "scale": 200 }\'>200%</option>\n' +
'                    <option title="" value="3" data-l10n-id="page_scale_percent" data-l10n-args=\'{ "scale": 300 }\'>300%</option>\n' +
'                    <option title="" value="4" data-l10n-id="page_scale_percent" data-l10n-args=\'{ "scale": 400 }\'>400%</option>\n' +
'                  </select>\n' +
'                </span>\n' +
'              </div>\n' +
'            </div>\n' +
'            <div id="loadingBar">\n' +
'              <div class="progress">\n' +
'                <div class="glimmer">\n' +
'                </div>\n' +
'              </div>\n' +
'            </div>\n' +
'          </div>\n' +
'        </div>\n' +
'\n' +
'        <menu type="context" id="viewerContextMenu">\n' +
'          <menuitem id="contextFirstPage" label="First Page"\n' +
'                    data-l10n-id="first_page"></menuitem>\n' +
'          <menuitem id="contextLastPage" label="Last Page"\n' +
'                    data-l10n-id="last_page"></menuitem>\n' +
'          <menuitem id="contextPageRotateCw" label="Rotate Clockwise"\n' +
'                    data-l10n-id="page_rotate_cw"></menuitem>\n' +
'          <menuitem id="contextPageRotateCcw" label="Rotate Counter-Clockwise"\n' +
'                    data-l10n-id="page_rotate_ccw"></menuitem>\n' +
'        </menu>\n' +
'\n' +
'        <div id="viewerContainer" tabindex="0">\n' +
'          <div id="viewer" class="pdfViewer"></div>\n' +
'        </div>\n' +
'\n' +
'        <div id="errorWrapper" hidden=\'true\'>\n' +
'          <div id="errorMessageLeft">\n' +
'            <span id="errorMessage"></span>\n' +
'            <button id="errorShowMore" data-l10n-id="error_more_info">\n' +
'              More Information\n' +
'            </button>\n' +
'            <button id="errorShowLess" data-l10n-id="error_less_info" hidden=\'true\'>\n' +
'              Less Information\n' +
'            </button>\n' +
'          </div>\n' +
'          <div id="errorMessageRight">\n' +
'            <button id="errorClose" data-l10n-id="error_close">\n' +
'              Close\n' +
'            </button>\n' +
'          </div>\n' +
'          <div class="clearBoth"></div>\n' +
'          <textarea id="errorMoreInfo" hidden=\'true\' readonly="readonly"></textarea>\n' +
'        </div>\n' +
'      </div> <!-- mainContainer -->\n' +
'\n' +
'      <div id="overlayContainer" class="hidden">\n' +
'        <div id="passwordOverlay" class="container hidden">\n' +
'          <div class="dialog">\n' +
'            <div class="row">\n' +
'              <p id="passwordText" data-l10n-id="password_label">Enter the password to open this PDF file:</p>\n' +
'            </div>\n' +
'            <div class="row">\n' +
'              <!-- The type="password" attribute is set via script, to prevent warnings in Firefox for all http:// documents. -->\n' +
'              <input id="password" class="toolbarField">\n' +
'            </div>\n' +
'            <div class="buttonRow">\n' +
'              <button id="passwordCancel" class="overlayButton"><span data-l10n-id="password_cancel">Cancel</span></button>\n' +
'              <button id="passwordSubmit" class="overlayButton"><span data-l10n-id="password_ok">OK</span></button>\n' +
'            </div>\n' +
'          </div>\n' +
'        </div>\n' +
'        <div id="documentPropertiesOverlay" class="container hidden">\n' +
'          <div class="dialog">\n' +
'            <div class="row">\n' +
'              <span data-l10n-id="document_properties_file_name">File name:</span> <p id="fileNameField">-</p>\n' +
'            </div>\n' +
'            <div class="row">\n' +
'              <span data-l10n-id="document_properties_file_size">File size:</span> <p id="fileSizeField">-</p>\n' +
'            </div>\n' +
'            <div class="separator"></div>\n' +
'            <div class="row">\n' +
'              <span data-l10n-id="document_properties_title">Title:</span> <p id="titleField">-</p>\n' +
'            </div>\n' +
'            <div class="row">\n' +
'              <span data-l10n-id="document_properties_author">Author:</span> <p id="authorField">-</p>\n' +
'            </div>\n' +
'            <div class="row">\n' +
'              <span data-l10n-id="document_properties_subject">Subject:</span> <p id="subjectField">-</p>\n' +
'            </div>\n' +
'            <div class="row">\n' +
'              <span data-l10n-id="document_properties_keywords">Keywords:</span> <p id="keywordsField">-</p>\n' +
'            </div>\n' +
'            <div class="row">\n' +
'              <span data-l10n-id="document_properties_creation_date">Creation Date:</span> <p id="creationDateField">-</p>\n' +
'            </div>\n' +
'            <div class="row">\n' +
'              <span data-l10n-id="document_properties_modification_date">Modification Date:</span> <p id="modificationDateField">-</p>\n' +
'            </div>\n' +
'            <div class="row">\n' +
'              <span data-l10n-id="document_properties_creator">Creator:</span> <p id="creatorField">-</p>\n' +
'            </div>\n' +
'            <div class="separator"></div>\n' +
'            <div class="row">\n' +
'              <span data-l10n-id="document_properties_producer">PDF Producer:</span> <p id="producerField">-</p>\n' +
'            </div>\n' +
'            <div class="row">\n' +
'              <span data-l10n-id="document_properties_version">PDF Version:</span> <p id="versionField">-</p>\n' +
'            </div>\n' +
'            <div class="row">\n' +
'              <span data-l10n-id="document_properties_page_count">Page Count:</span> <p id="pageCountField">-</p>\n' +
'            </div>\n' +
'            <div class="buttonRow">\n' +
'              <button id="documentPropertiesClose" class="overlayButton"><span data-l10n-id="document_properties_close">Close</span></button>\n' +
'            </div>\n' +
'          </div>\n' +
'        </div>\n' +
'        <div id="printServiceOverlay" class="container hidden">\n' +
'          <div class="dialog">\n' +
'            <div class="row">\n' +
'              <span data-l10n-id="print_progress_message">Preparing document for printing…</span>\n' +
'            </div>\n' +
'            <div class="row">\n' +
'              <progress value="0" max="100"></progress>\n' +
'              <span data-l10n-id="print_progress_percent" data-l10n-args=\'{ "progress": 0 }\' class="relative-progress">0%</span>\n' +
'            </div>\n' +
'            <div class="buttonRow">\n' +
'              <button id="printCancel" class="overlayButton"><span data-l10n-id="print_progress_close">Cancel</span></button>\n' +
'            </div>\n' +
'          </div>\n' +
'        </div>\n' +
'      </div>  <!-- overlayContainer -->\n' +
'\n' +
'    </div> <!-- outerContainer -->\n' +
'    <div id="printContainer"></div>\n' +
'  </pdfjs-wrapper>',
            restrict: 'E',
            scope: {
                onInit: '&',
                onPageLoad: '&',
                scale: '=?',
                src: '@?',
                data: '=?'
            },
            link: function ($scope, $element, $attrs) {
                $element.children().wrap('<div class="pdfjs" style="width: 100%; height: 100%;"></div>');
                
                var initialised = false;
                var loaded = {};
                var numLoaded = 0;

                if (!window.PDFJS) {
                    return console.warn("PDFJS is not set! Make sure that pdf.js is loaded before angular-pdfjs-viewer.js is loaded.");
                }

                // initialize the pdf viewer with (with empty source)
                window.PDFJS.webViewerLoad("");

                function onPdfInit() {
                    initialised = true;
                    
                    if ($attrs.removeMouseListeners === "true") {
                        window.removeEventListener('DOMMouseScroll', handleMouseWheel);
                        window.removeEventListener('mousewheel', handleMouseWheel);
                        
                        var pages = document.querySelectorAll('.page');
                        angular.forEach(pages, function (page) {
                            angular.element(page).children().css('pointer-events', 'none');
                        });
                    }
                    if ($scope.onInit) $scope.onInit();
                }
                
                var poller = $interval(function () {
                    if (!window.PDFViewerApplication) {
                        return;
                    }

                    var pdfViewer = window.PDFViewerApplication.pdfViewer;
                    
                    if (pdfViewer) {
                        if ($scope.scale !== pdfViewer.currentScale) {
                            loaded = {};
                            numLoaded = 0;
                            $scope.scale = pdfViewer.currentScale;
                        }
                    } else {
                        console.warn("PDFViewerApplication.pdfViewer is not set");
                    }

                    var pages = document.querySelectorAll('.page');
                    angular.forEach(pages, function (page) {
                        var element = angular.element(page);
                        var pageNum = element.attr('data-page-number');
                        
                        if (!element.attr('data-loaded')) {
                            delete loaded[pageNum];
                            return;
                        }
                        
                        if (pageNum in loaded) return;

                        if (!initialised) onPdfInit();
                        
                        if ($scope.onPageLoad) {
                            if ($scope.onPageLoad({page: pageNum}) === false) return;
                        }
                        
                        loaded[pageNum] = true;
                        numLoaded++;
                    });
                }, 200);

                $element.on('$destroy', function() {
                    $interval.cancel(poller);
                });

                // watch pdf source
                $scope.$watchGroup([
                    function () { return $scope.src; },
                    function () { return $scope.data; }
                ], function (values) {
                    var src = values[0];
                    var data = values[1];

                    if (!src && !data) {
                        return;
                    }

                    window.PDFViewerApplication.open(src || data);
                });

                // watch other attributes
                $scope.$watch(function () {
                    return $attrs;
                }, function () {
                    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.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;
                    }
                });
            }
        };
    }]);
}();


================================================
FILE: package.json
================================================
{
  "name": "angular-pdfjs-viewer",
  "description": "Embed PDF.js viewer into your angular application",
  "homepage": "http://github.com/legalthings/angular-pdfjs-viewer",
  "license": "MIT",
  "version": "1.0.0",
  "contributors": [
    "LegalThings <info@legalthings.net>",
    "Moesjarraf <moesjarraf@gmail.com>",
    "Arnold Daniels <arnold@jasny.net>"
  ],
  "dependencies": {
    "angular": "^1.5.8",
    "pdf.js-viewer": "~1.6.211"
  },
  "license": "MIT",
  "main": "dist/angular-pdfjs-viewer.js",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-replace": "^0.10.2"
  }
}


================================================
FILE: src/angular-pdfjs-viewer.js
================================================
/**
 * angular-pdfjs
 * https://github.com/legalthings/angular-pdfjs
 * Copyright (c) 2015 ; Licensed MIT
 */

+function () {
    'use strict';

    var module = angular.module('pdfjsViewer', []);
    
    module.provider('pdfjsViewerConfig', function() {
        var config = {
            workerSrc: null,
            cmapDir: null,
            imageResourcesPath: null,
            disableWorker: false,
            verbosity: null
        };
        
        this.setWorkerSrc = function(src) {
            config.workerSrc = src;
        };
        
        this.setCmapDir = function(dir) {
            config.cmapDir = dir;
        };
        
        this.setImageDir = function(dir) {
            config.imageDir = dir;
        };
        
        this.disableWorker = function(value) {
            if (typeof value === 'undefined') value = true;
            config.disableWorker = value;
        };
        
        this.setVerbosity = function(level) {
            config.verbosity = level;
        };
        
        this.$get = function() {
            return config;
        }
    });
    
    module.run(['pdfjsViewerConfig', function(pdfjsViewerConfig) {
        if (pdfjsViewerConfig.workerSrc) {
            PDFJS.workerSrc = pdfjsViewerConfig.workerSrc;
        }

        if (pdfjsViewerConfig.cmapDir) {
            PDFJS.cMapUrl = pdfjsViewerConfig.cmapDir;
        }

        if (pdfjsViewerConfig.imageDir) {
            PDFJS.imageResourcesPath = pdfjsViewerConfig.imageDir;
        }
        
        if (pdfjsViewerConfig.disableWorker) {
            PDFJS.disableWorker = true;
        }

        if (pdfjsViewerConfig.verbosity !== null) {
            var level = pdfjsViewerConfig.verbosity;
            if (typeof level === 'string') level = PDFJS.VERBOSITY_LEVELS[level];
            PDFJS.verbosity = pdfjsViewerConfig.verbosity;
        }
    }]);
    
    module.directive('pdfjsViewer', ['$interval', function ($interval) {
        return {
            templateUrl: file.folder + '../../pdf.js-viewer/viewer.html',
            restrict: 'E',
            scope: {
                onInit: '&',
                onPageLoad: '&',
                scale: '=?',
                src: '@?',
                data: '=?'
            },
            link: function ($scope, $element, $attrs) {
                $element.children().wrap('<div class="pdfjs" style="width: 100%; height: 100%;"></div>');
                
                var initialised = false;
                var loaded = {};
                var numLoaded = 0;

                if (!window.PDFJS) {
                    return console.warn("PDFJS is not set! Make sure that pdf.js is loaded before angular-pdfjs-viewer.js is loaded.");
                }

                // initialize the pdf viewer with (with empty source)
                window.PDFJS.webViewerLoad("");

                function onPdfInit() {
                    initialised = true;
                    
                    if ($attrs.removeMouseListeners === "true") {
                        window.removeEventListener('DOMMouseScroll', handleMouseWheel);
                        window.removeEventListener('mousewheel', handleMouseWheel);
                        
                        var pages = document.querySelectorAll('.page');
                        angular.forEach(pages, function (page) {
                            angular.element(page).children().css('pointer-events', 'none');
                        });
                    }
                    if ($scope.onInit) $scope.onInit();
                }
                
                var poller = $interval(function () {
                    if (!window.PDFViewerApplication) {
                        return;
                    }

                    var pdfViewer = window.PDFViewerApplication.pdfViewer;
                    
                    if (pdfViewer) {
                        if ($scope.scale !== pdfViewer.currentScale) {
                            loaded = {};
                            numLoaded = 0;
                            $scope.scale = pdfViewer.currentScale;
                        }
                    } else {
                        console.warn("PDFViewerApplication.pdfViewer is not set");
                    }

                    var pages = document.querySelectorAll('.page');
                    angular.forEach(pages, function (page) {
                        var element = angular.element(page);
                        var pageNum = element.attr('data-page-number');
                        
                        if (!element.attr('data-loaded')) {
                            delete loaded[pageNum];
                            return;
                        }
                        
                        if (pageNum in loaded) return;

                        if (!initialised) onPdfInit();
                        
                        if ($scope.onPageLoad) {
                            if ($scope.onPageLoad({page: pageNum}) === false) return;
                        }
                        
                        loaded[pageNum] = true;
                        numLoaded++;
                    });
                }, 200);

                $element.on('$destroy', function() {
                    $interval.cancel(poller);
                });

                // watch pdf source
                $scope.$watchGroup([
                    function () { return $scope.src; },
                    function () { return $scope.data; }
                ], function (values) {
                    var src = values[0];
                    var data = values[1];

                    if (!src && !data) {
                        return;
                    }

                    window.PDFViewerApplication.open(src || data);
                });

                // watch other attributes
                $scope.$watch(function () {
                    return $attrs;
                }, function () {
                    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.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;
                    }
                });
            }
        };
    }]);

    // === get current script file ===
    var file = {};
    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, '');

    function getFileName(url) {
        var anchor = url.indexOf('#');
        var query = url.indexOf('?');
        var end = Math.min(anchor > 0 ? anchor : url.length, query > 0 ? query : url.length);

        return url.substring(url.lastIndexOf('/', end) + 1, end);
    }

    function getLocation(href) {
        var location = document.createElement("a");
        location.href = href;

        if (!location.host) location.href = location.href; // Weird assigment

        return location;
    }
    // ======
}();