pdfJS improvment

PDFjs/main.css

@@ -29,5 +29,19 @@
  */
 
 .ApplicationPDFjsWindow gui-container {
-  background : #fff;
+  overflow: auto;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  position: absolute;
+  top: 32px;
+  right: 0;
+  bottom: 32px;
+  left: 0;
+  text-align: center;
+  background-color: #888;
+  background-image: url(texture.png);
+}
+.ApplicationPDFjsWindow canvas {
+  text-align: center;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }

PDFjs/main.js

@@ -57,6 +57,7 @@
   ApplicationPDFjsWindow.prototype.init = function(wmRef, app, scheme) {
     var root = DefaultApplicationWindow.prototype.init.apply(this, arguments);
     var self = this;
+
 
     // Load and set up scheme (GUI) here
     scheme.render(this, 'PDFWindow', root);
@@ -73,6 +74,24 @@
     scheme.find(this, 'Out').on('click', function() {
       self.zoomOut();
     });
+    scheme.find(this, 'Print').on('click', function() {
+      self.printDocument();
+    });
+    scheme.find(this, 'First').on('click', function() {
+      self.firstPage();
+    });
+    scheme.find(this, 'Last').on('click', function() {
+      self.lastPage();
+    });
+    scheme.find(this, 'pageNumber').on('enter', function() {
+      self.changePage();
+    });
+    scheme.find(this, 'Fullscreen').on('click', function() {
+      self.fullScreenMode();
+    });
+    document.getElementById('canvas').addEventListener('wheel', function(){
+        self.pageScroll();
+    });
 
     return root;
   };
@@ -93,22 +112,23 @@
     }
 
     var container = this._scheme.find(this, 'Content').$element;
-    Utils.$empty(container);
+    //Utils.$empty(container);
 
     this.pageIndex = pageNum;
 
-    var statustext = Utils.format('Page {0}/{1} - {2}%', this.pageIndex, this.pageCount, this.currentScale*100);
+    var statustext = Utils.format(' - {0}%', this.currentScale*100);
+    var pageNumber = Utils.format('{0}/{1}', this.pageIndex, this.pageCount);
     this._scheme.find(this, 'Statusbar').set('value', statustext);
+    this._scheme.find(this, 'pageNumber').set('value', pageNumber);
 
     this.pdf.getPage(this.pageIndex).then(function getPageHelloWorld(page) {
       var scale = self.currentScale;
       var viewport = page.getViewport(scale);
-      var canvas = document.createElement('canvas');
+      var canvas = document.getElementById('canvas');
       var context = canvas.getContext('2d');
       canvas.height = viewport.height;
       canvas.width = viewport.width;
-
-      container.appendChild(canvas);
+      context.clearRect(0, 0, viewport.width, viewport.height);
 
       var renderContext = {
         canvasContext: context,
@@ -137,12 +157,65 @@
     }
     this.page(this.pageIndex);
   };
+
+  ApplicationPDFjsWindow.prototype.printDocument = function() {  
+    var canvas = document.getElementById("canvas");  
+    var img    = canvas.toDataURL("image/png");
+    window.frames["print_frame"].document.body.innerHTML= '<img src="'+img+'"/>';
+    window.frames["print_frame"].window.focus();
+    window.frames["print_frame"].window.print();
+  };
+
+  ApplicationPDFjsWindow.prototype.firstPage = function() {
+    this.page(1);
+  };
+
+  ApplicationPDFjsWindow.prototype.lastPage = function() {
+    this.page(this.pageCount);
+  };
+
+  ApplicationPDFjsWindow.prototype.changePage = function() {      
+    var pageNumber = Number(this._scheme.find(this, 'pageNumber').get('value'));
+    if ( Math.floor(pageNumber) == pageNumber && pageNumber > 0 ) {
+        if( pageNumber <= this.pageCount ) {
+            this.page(pageNumber);
+        } else {
+            API.createDialog('Alert', {
+            message: 'The page number \''+ pageNumber +'\' you inputted cannot be found in this document.'
+            }, null, this);
+            var _pageNumber = Utils.format('{0}/{1}', this.pageIndex, this.pageCount);
+            this._scheme.find(this, 'pageNumber').set('value', _pageNumber);     
+        }
+    } else {        
+        var _pageNumber = Utils.format('{0}/{1}', this.pageIndex, this.pageCount);
+        this._scheme.find(this, 'pageNumber').set('value', _pageNumber);        
+    }
+  };
+
+  ApplicationPDFjsWindow.prototype.fullScreenMode = function() {
+    var content = document.getElementById("canvas"); 
+    screenfull.request(content);
+  };
+
+  ApplicationPDFjsWindow.prototype.pageScroll = function() {
+    var delta = 0;
+    if (!event) 
+            event = window.event;
+    if (event.wheelDelta) { 
+            delta = event.wheelDelta/120;
+    } else if (event.detail) { 
+            delta = -event.detail/3;
+    }
+    console.log(delta);
+    if ( delta > 0 ) this.page(this.pageIndex-1); 
+    else  this.page(this.pageIndex+1);
+  };
 
   ApplicationPDFjsWindow.prototype.showFile = function(file, result) {
     var self = this;
     var container = this._scheme.find(this, 'Content').$element;
 
-    Utils.$empty(container);
+    //Utils.$empty(container);
 
     this.pageCount = 0;
     this.pageIndex = 0;

PDFjs/metadata.json

@@ -16,6 +16,7 @@
   },
   "preload":    [
     {"src": "vendor/pdf.js/build/pdf.js", "type": "javascript"},
+    {"src": "vendor/fullscreen.js/screenfull.min.js", "type": "javascript"},
     {"src": "main.js", "type": "javascript"},
     {"src": "main.css", "type": "stylesheet"}
   ]

PDFjs/scheme.html

@@ -1,4 +1,4 @@
-<application-window data-id="PDFWindow">
+<application-window data-id="PDFWindow" >
 
   <gui-vbox>
     <!-- MENU BAR -->
@@ -18,27 +18,37 @@
     <!-- TOOLBAR -->
     <gui-vbox-container data-grow="0" data-shrink="1" data-basis="auto">
       <gui-toolbar>
+
 
+        <gui-button data-id="First" data-icon="stock://16x16/actions/go-first.png"></gui-button>
         <gui-button data-id="Prev" data-icon="stock://16x16/actions/go-previous.png"></gui-button>
         <gui-button data-id="Next" data-icon="stock://16x16/actions/go-next.png"></gui-button>
+        <gui-button data-id="Last" data-icon="stock://16x16/actions/go-last.png"></gui-button>
         <gui-button data-id="Out" data-icon="stock://16x16/actions/zoom-out.png"></gui-button>
-        <gui-button data-id="In" data-icon="stock://16x16/actions/zoom-in.png"></gui-button>
+        <gui-button data-id="In" data-icon="stock://16x16/actions/zoom-in.png"></gui-button>   
+        <gui-button data-id="Print" data-icon="stock://16x16/actions/document-print.png"></gui-button>
+        <gui-button data-id="Fullscreen" data-icon="stock://16x16/actions/gtk-fullscreen.png"></gui-button>
+
 
       </gui-toolbar>
     </gui-vbox-container>
 
     <!-- CONTENT -->
     <gui-vbox-container data-grow="1" data-shrink="0" data-basis="auto" data-fill="true">
       <gui-container data-id="Content">
+        <canvas id="canvas"></canvas>
       </gui-container>
     </gui-vbox-container>
 
     <!-- STATUSBAR -->
     <gui-vbox-container data-grow="0" data-shrink="1" data-basis="auto">
-      <gui-statusbar data-id="Statusbar"></gui-statusbar>
+      <gui-statusbar data-id="Statusbar">
+        <gui-text data-id="pageNumber" >0</gui-text>
+      </gui-statusbar>
     </gui-vbox-container>
 
   </gui-vbox>
-
+  <iframe name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe>
+
 
 </application-window>