pdf-element.html

<link rel="import" href="../polymer/polymer.html">

<link rel="import" href="../paper-card/paper-card.html">
<link rel="import" href="../paper-toolbar/paper-toolbar.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../iron-input/iron-input.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../paper-spinner/paper-spinner.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-input/paper-input.html">

<script src="../pdfjs-dist/web/compatibility.js"></script>
<script src="../pdfjs-dist/build/pdf.js"></script>
<script src="../pdfjs-dist/build/pdf.worker.js"></script>
<script src="main.js"></script>


<!--
Polymer element which renders PDF documents. It uses [PDF.js](https://mozilla.github.io/pdf.js/) library behind.

Example:

Minimum configuration:
```html
<pdf-element src="../example.pdf" width=800 height=600></pdf-element>
```
Optionally following parameters could be triggered:
 - `elevation` material elevation;
 - `downloadable` to be able to download document;
 - `show-file-name` to show name of the file in the PDF toolbar.


 ```html
 <pdf-element src="../example.pdf" elevation="5" downloadable show-file-name width=800 height=600></pdf-element>
 ```

Another awesome feature is dynamically load PDF file. So you can change the `src` attribute of the element and document will be automatically reloaded (checkout the demo):

```html
<pdf-element src="[[pdfFile]]" width=800 height=600></pdf-element>
```

@demo demo/index.html
@hero hero.svg
-->
<dom-module id="pdf-element">
  
  <link rel="import" href="../pdfjs-dist/web/pdf_viewer.css" type="css">
  <link rel="import" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" type="css">
  
  <template>
    
    <style>
      :host {
        display: block;
        width: 100%;
        height: 100%;
      }

      paper-toolbar.pdf-toolbar {
        --paper-toolbar-background: #323639;
      }

      .pdf-viewer {
        text-align: center;
        border: 1px solid #4d4d4d;
      }

      .pdf-viewport-out {
        overflow: auto;
        background-color: #525659;
        width: 100%;
        height: 100%;
      }

      .pdf-viewport {
        display: block;
        position: relative;
        border: 1px solid #eeeeee;
        transition: all 200ms ease-in-out;
        width: 100%;
        height: 100%;
      }

      paper-input.pageselector {
        --paper-input-container-underline: {
          visibility: hidden;
          width: 3ch;
        }
        ;
        --paper-input-underline-focus: {
          visibility: hidden;
        }
        ;
        --paper-input-container-input: {

          color: #fff;
        }
        ;
        --paper-input-container-underline-focus: {
            display: none;
        }
        ;
        display: inline-block;
        padding: 0;
        width: 3ch;
      }

      #input {
        -webkit-margin-start: -3px;
        line-height: 18px;
        padding: 3px;
        text-align: end;
      }

      #input:focus,
      #input:hover {
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 2px;
      }

      #slash {
        padding: 0 3px;
      }

      paper-spinner {
        position: absolute;
        left: 50%;
      }

      .textLayer {
        transition: all 200ms ease-in-out;
      }

      .positionRelative {
        position: relative;
      }
    </style>

    <paper-material elevation="{{elevation}}">
      <div class="card-content">
        <paper-card style="width: 100%">

          <div class="pdf-viewer">
            <paper-toolbar class="pdf-toolbar">
              <paper-icon-button icon="arrow-back" on-click="showPrev" slot="top"></paper-icon-button>
              <paper-input value={{currentPage}} id="input" class="pageselector" prevent-invalid-input no-label-float allowed-pattern="\d" slot="top" on-change="pageNoCommitted">
              </paper-input>
              <span id="slash" slot="top">/</span><span id="totalPages" slot="top"></span>
              <paper-icon-button icon="arrow-forward" on-click="showNext" slot="top"></paper-icon-button>
              <span class="title" slot="top" hidden$="{{!showFileName}}">{{fileName}}</span>
              <span class="title" slot="top" hidden$="{{showFileName}}"></span>
              <span class="pageRendering"></span>
              <paper-icon-button icon="zoom-in" on-click="zoomIn" slot="top"></paper-icon-button>
              <paper-icon-button icon="zoom-out" on-click="zoomOut" slot="top"></paper-icon-button>
              <paper-icon-button id="zoomIcon" icon="fullscreen" on-click="zoomFit" slot="top"></paper-icon-button>
              <paper-icon-button icon="file-download" hidden$="{{!downloadable}}" on-click="download"slot="top"></paper-icon-button>
            </paper-toolbar>
            <div class="pdf-viewport-out" style="position: relative;">
              <canvas class="pdf-viewport"></canvas>
              <div id="text-layer" class="textLayer" hidden$="{{!enableTextSelection}}"></div>
            </div>
            <paper-spinner class="spinner" hidden$="{{!showSpinner}}"></paper-spinner>
          </div>
        </paper-card>
      </div>
    </paper-material>

  </template>

  <script>
    Polymer({
      is: 'pdf-element',
      properties: {
        /**
         * Source of a PDF file.
         */
        src: {
          type: String,
          reflectToAttribute: true
        },
        /**
         * The z-depth of this element, from 0-5. Setting to 0 will remove the shadow, and each increasing number greater than 0 will be "deeper" than the last.
         */
        elevation: {
          type: Number,
          value: 1
        },
        /**
         * If provided then download icon will appear on the toolbar to download file.
         */
        downloadable: {
          type: Boolean,
          value: false
        },
        /**
         * If provided then file name will be shown on the toolbar.
         */
        showFileName: {
          type: Boolean,
          value: false
        },
        /*
         * If provided then during page rendering loading spinner will be shown.
         * Maybe used for documents with many images for example.
         */
        showSpinner: {
          type: Boolean,
          value: false
        },
        /*
         * If provided then text selection will be enabled.
         */
        enableTextSelection: {
          type: Boolean,
          value: false
        },
        /*
         * If provided then the document will be zoomed to maximum width initially.
         */
        fitWidth: {
            type: Boolean,
            value: false
        }
      },

      attached: function() {
        this.src = this.getAttribute("src");
        this._initializeReader();
        if (this.src) this.instance.loadPDF();
        this._setFitWidth();
      },

      loadPDF: function() {
        if (!this.getAttribute("src")) return;
        this.instance.changePDFSource(this.getAttribute("src"));
        this.currentPage = 1;
        this.totalPages = this.instance.totalPages;
        this.fileName = this.src.split('/').pop();
        this._setFitWidth();
        this.$.zoomIcon.icon = 'fullscreen';
      },

      attributeChanged: function(name, type) {
        if (name === 'src') {
          if (typeof this.instance == 'undefined') this._initializeReader();
          else this.loadPDF();
        } else if (name === 'fitWidth') {
            this._setFitWidth();
        }
      },

      _initializeReader: function() {
        this.instance = new Polymer.Reader(this);
        if (this.src != null) this.fileName = this.src.split('/').pop();
        this.currentPage = 1;
      },
      _setFitWidth: function() {
          this.instance.setFitWidth(this.fitWidth);
      },
      zoomInOut: function(step) {
        if (this.instance.currentZoomVal >= 2) {
          this.instance.currentZoomVal = 2;
        } else if (this.instance.currentZoomVal <= 0.1) {
          this.instance.currentZoomVal = 0.1;
        } else {
          this.$.zoomIcon.icon = 'fullscreen';
          this.instance.zoomInOut(step);
        }
      },
      zoomIn: function() {
        this.zoomInOut(0.1);
      },
      zoomOut: function() {
        this.instance.zoomInOut(-0.1);
      },
      zoomFit: function() {
        if (this.instance.currentZoomVal == this.instance.widthZoomVal) {
          this.instance.zoomPageFit();
          this.$.zoomIcon.icon = 'fullscreen';
        } else {
          this.instance.zoomWidthFit();
          this.$.zoomIcon.icon = 'fullscreen-exit';
        }
      },
      pageNoCommitted: function() {
        var page = parseInt(this.$.input.value);

        if ((1 <= page) && (page <= this.instance.totalPagesNum)) {
          this.instance.currentPage = page;
          this.instance.queueRenderPage(this.instance.currentPage);
          this.currentPage = page;
          this.$.input.blur();
        } else {
          this.$.input.value = this.currentPage;
          this.$.input.blur();
        }
      },
      showPrev: function() {
        if (1 < this.instance.currentPage) {
          this.instance.currentPage--;
          this.instance.queueRenderPage(this.instance.currentPage);
          this.currentPage--;
        }
      },
      showNext: function() {
        if (this.instance.totalPagesNum > this.instance.currentPage) {
          this.instance.currentPage++;
          this.instance.queueRenderPage(this.instance.currentPage);
          this.currentPage++;
        }
      },
      download: function() {
        this.instance.download();
      }
    });
  </script>

</dom-module>